dify/web/app/components/develop/__tests__/doc.spec.tsx

83 lines
3.0 KiB
TypeScript

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { AppModeEnum } from '@/types/app'
import Doc from '../doc'
vi.mock('../template/template.en.mdx', () => ({ default: () => <div>completion-en</div> }))
vi.mock('../template/template.zh.mdx', () => ({ default: () => <div>completion-zh</div> }))
vi.mock('../template/template.ja.mdx', () => ({ default: () => <div>completion-ja</div> }))
vi.mock('../template/template_chat.en.mdx', () => ({ default: () => <div>chat-en</div> }))
vi.mock('../template/template_chat.zh.mdx', () => ({ default: () => <div>chat-zh</div> }))
vi.mock('../template/template_chat.ja.mdx', () => ({ default: () => <div>chat-ja</div> }))
vi.mock('../template/template_advanced_chat.en.mdx', () => ({
default: () => <div>advanced-chat-en</div>,
}))
vi.mock('../template/template_advanced_chat.zh.mdx', () => ({
default: () => <div>advanced-chat-zh</div>,
}))
vi.mock('../template/template_advanced_chat.ja.mdx', () => ({
default: () => <div>advanced-chat-ja</div>,
}))
vi.mock('../template/template_workflow.en.mdx', () => ({ default: () => <div>workflow-en</div> }))
vi.mock('../template/template_workflow.zh.mdx', () => ({ default: () => <div>workflow-zh</div> }))
vi.mock('../template/template_workflow.ja.mdx', () => ({ default: () => <div>workflow-ja</div> }))
const mockLocale = vi.fn(() => 'en-US')
vi.mock('@/context/i18n', () => ({
useLocale: () => mockLocale(),
}))
vi.mock('@/i18n-config/language', () => ({
LanguagesSupported: ['en-US', 'zh-Hans', 'ja-JP'],
getDocLanguage: (locale: string) =>
locale === 'zh-Hans' ? 'zh' : locale === 'ja-JP' ? 'ja' : 'en',
}))
const makeAppDetail = (mode: AppModeEnum) =>
({
mode,
model_config: { configs: { prompt_variables: [] } },
}) as unknown as Parameters<typeof Doc>[0]['appDetail']
describe('Doc', () => {
beforeEach(() => {
mockLocale.mockReturnValue('en-US')
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: vi.fn().mockReturnValue({ matches: false }),
})
})
it.each([
[AppModeEnum.CHAT, 'chat-en'],
[AppModeEnum.AGENT_CHAT, 'chat-en'],
[AppModeEnum.ADVANCED_CHAT, 'advanced-chat-en'],
[AppModeEnum.WORKFLOW, 'workflow-en'],
[AppModeEnum.COMPLETION, 'completion-en'],
])('selects the documentation for %s apps', (mode, template) => {
render(<Doc appDetail={makeAppDetail(mode)} />)
expect(screen.getByText(template)).toBeInTheDocument()
})
it.each([
['zh-Hans', 'chat-zh'],
['ja-JP', 'chat-ja'],
])('selects the %s documentation', (locale, template) => {
mockLocale.mockReturnValue(locale)
render(<Doc appDetail={makeAppDetail(AppModeEnum.CHAT)} />)
expect(screen.getByText(template)).toBeInTheDocument()
})
it('expands the table of contents', async () => {
const user = userEvent.setup()
render(<Doc appDetail={makeAppDetail(AppModeEnum.CHAT)} />)
await user.click(screen.getByRole('button', { name: 'Open table of contents' }))
expect(screen.getByRole('navigation')).toBeInTheDocument()
})
})