mirror of https://github.com/langgenius/dify.git
128 lines
4.1 KiB
TypeScript
128 lines
4.1 KiB
TypeScript
import type { TryAppInfo } from '@/service/try-app'
|
|
import { cleanup, render, screen } from '@testing-library/react'
|
|
import { afterEach, describe, expect, it, vi } from 'vitest'
|
|
import Preview from './index'
|
|
|
|
vi.mock('./basic-app-preview', () => ({
|
|
default: ({ appId }: { appId: string }) => (
|
|
<div data-testid="basic-app-preview" data-app-id={appId}>
|
|
BasicAppPreview
|
|
</div>
|
|
),
|
|
}))
|
|
|
|
vi.mock('./flow-app-preview', () => ({
|
|
default: ({ appId, className }: { appId: string, className?: string }) => (
|
|
<div data-testid="flow-app-preview" data-app-id={appId} className={className}>
|
|
FlowAppPreview
|
|
</div>
|
|
),
|
|
}))
|
|
|
|
const createMockAppDetail = (mode: string): TryAppInfo => ({
|
|
id: 'test-app-id',
|
|
name: 'Test App',
|
|
description: 'Test Description',
|
|
mode,
|
|
site: {
|
|
title: 'Test Site Title',
|
|
icon: 'icon',
|
|
icon_type: 'emoji',
|
|
icon_background: '#FFFFFF',
|
|
icon_url: '',
|
|
},
|
|
model_config: {
|
|
model: {
|
|
provider: 'test/provider',
|
|
name: 'test-model',
|
|
mode: 'chat',
|
|
},
|
|
dataset_configs: {
|
|
datasets: {
|
|
datasets: [],
|
|
},
|
|
},
|
|
agent_mode: {
|
|
tools: [],
|
|
},
|
|
user_input_form: [],
|
|
},
|
|
} as unknown as TryAppInfo)
|
|
|
|
describe('Preview', () => {
|
|
afterEach(() => {
|
|
cleanup()
|
|
})
|
|
|
|
describe('basic app rendering', () => {
|
|
it('renders BasicAppPreview for agent-chat mode', () => {
|
|
const appDetail = createMockAppDetail('agent-chat')
|
|
render(<Preview appId="test-app-id" appDetail={appDetail} />)
|
|
|
|
expect(screen.getByTestId('basic-app-preview')).toBeInTheDocument()
|
|
expect(screen.queryByTestId('flow-app-preview')).not.toBeInTheDocument()
|
|
})
|
|
|
|
it('renders BasicAppPreview for chat mode', () => {
|
|
const appDetail = createMockAppDetail('chat')
|
|
render(<Preview appId="test-app-id" appDetail={appDetail} />)
|
|
|
|
expect(screen.getByTestId('basic-app-preview')).toBeInTheDocument()
|
|
expect(screen.queryByTestId('flow-app-preview')).not.toBeInTheDocument()
|
|
})
|
|
|
|
it('renders BasicAppPreview for completion mode', () => {
|
|
const appDetail = createMockAppDetail('completion')
|
|
render(<Preview appId="test-app-id" appDetail={appDetail} />)
|
|
|
|
expect(screen.getByTestId('basic-app-preview')).toBeInTheDocument()
|
|
expect(screen.queryByTestId('flow-app-preview')).not.toBeInTheDocument()
|
|
})
|
|
|
|
it('passes appId to BasicAppPreview', () => {
|
|
const appDetail = createMockAppDetail('chat')
|
|
render(<Preview appId="my-app-id" appDetail={appDetail} />)
|
|
|
|
const basicPreview = screen.getByTestId('basic-app-preview')
|
|
expect(basicPreview).toHaveAttribute('data-app-id', 'my-app-id')
|
|
})
|
|
})
|
|
|
|
describe('flow app rendering', () => {
|
|
it('renders FlowAppPreview for workflow mode', () => {
|
|
const appDetail = createMockAppDetail('workflow')
|
|
render(<Preview appId="test-app-id" appDetail={appDetail} />)
|
|
|
|
expect(screen.getByTestId('flow-app-preview')).toBeInTheDocument()
|
|
expect(screen.queryByTestId('basic-app-preview')).not.toBeInTheDocument()
|
|
})
|
|
|
|
it('renders FlowAppPreview for advanced-chat mode', () => {
|
|
const appDetail = createMockAppDetail('advanced-chat')
|
|
render(<Preview appId="test-app-id" appDetail={appDetail} />)
|
|
|
|
expect(screen.getByTestId('flow-app-preview')).toBeInTheDocument()
|
|
expect(screen.queryByTestId('basic-app-preview')).not.toBeInTheDocument()
|
|
})
|
|
|
|
it('passes appId and className to FlowAppPreview', () => {
|
|
const appDetail = createMockAppDetail('workflow')
|
|
render(<Preview appId="my-flow-app-id" appDetail={appDetail} />)
|
|
|
|
const flowPreview = screen.getByTestId('flow-app-preview')
|
|
expect(flowPreview).toHaveAttribute('data-app-id', 'my-flow-app-id')
|
|
expect(flowPreview).toHaveClass('h-full')
|
|
})
|
|
})
|
|
|
|
describe('wrapper styling', () => {
|
|
it('renders with correct wrapper classes', () => {
|
|
const appDetail = createMockAppDetail('chat')
|
|
const { container } = render(<Preview appId="test-app-id" appDetail={appDetail} />)
|
|
|
|
const wrapper = container.firstChild as HTMLElement
|
|
expect(wrapper).toHaveClass('h-full', 'w-full')
|
|
})
|
|
})
|
|
})
|