mirror of
https://github.com/langgenius/dify.git
synced 2025-12-19 22:28:46 +00:00
642 lines
20 KiB
TypeScript
642 lines
20 KiB
TypeScript
import React from 'react'
|
|
import { fireEvent, render, screen } from '@testing-library/react'
|
|
import type { DocumentItem } from '@/models/datasets'
|
|
import PreviewDocumentPicker from './preview-document-picker'
|
|
|
|
// Mock react-i18next
|
|
jest.mock('react-i18next', () => ({
|
|
useTranslation: () => ({
|
|
t: (key: string, params?: Record<string, unknown>) => {
|
|
if (key === 'dataset.preprocessDocument' && params?.num)
|
|
return `${params.num} files`
|
|
|
|
return key
|
|
},
|
|
}),
|
|
}))
|
|
|
|
// Mock portal-to-follow-elem - always render content for testing
|
|
jest.mock('@/app/components/base/portal-to-follow-elem', () => ({
|
|
PortalToFollowElem: ({ children, open }: {
|
|
children: React.ReactNode
|
|
open?: boolean
|
|
}) => (
|
|
<div data-testid="portal-elem" data-open={String(open || false)}>
|
|
{children}
|
|
</div>
|
|
),
|
|
PortalToFollowElemTrigger: ({ children, onClick }: {
|
|
children: React.ReactNode
|
|
onClick?: () => void
|
|
}) => (
|
|
<div data-testid="portal-trigger" onClick={onClick}>
|
|
{children}
|
|
</div>
|
|
),
|
|
// Always render content to allow testing document selection
|
|
PortalToFollowElemContent: ({ children, className }: {
|
|
children: React.ReactNode
|
|
className?: string
|
|
}) => (
|
|
<div data-testid="portal-content" className={className}>
|
|
{children}
|
|
</div>
|
|
),
|
|
}))
|
|
|
|
// Mock icons
|
|
jest.mock('@remixicon/react', () => ({
|
|
RiArrowDownSLine: () => <span data-testid="arrow-icon">↓</span>,
|
|
RiFile3Fill: () => <span data-testid="file-icon">📄</span>,
|
|
RiFileCodeFill: () => <span data-testid="file-code-icon">📄</span>,
|
|
RiFileExcelFill: () => <span data-testid="file-excel-icon">📄</span>,
|
|
RiFileGifFill: () => <span data-testid="file-gif-icon">📄</span>,
|
|
RiFileImageFill: () => <span data-testid="file-image-icon">📄</span>,
|
|
RiFileMusicFill: () => <span data-testid="file-music-icon">📄</span>,
|
|
RiFilePdf2Fill: () => <span data-testid="file-pdf-icon">📄</span>,
|
|
RiFilePpt2Fill: () => <span data-testid="file-ppt-icon">📄</span>,
|
|
RiFileTextFill: () => <span data-testid="file-text-icon">📄</span>,
|
|
RiFileVideoFill: () => <span data-testid="file-video-icon">📄</span>,
|
|
RiFileWordFill: () => <span data-testid="file-word-icon">📄</span>,
|
|
RiMarkdownFill: () => <span data-testid="file-markdown-icon">📄</span>,
|
|
}))
|
|
|
|
// Factory function to create mock DocumentItem
|
|
const createMockDocumentItem = (overrides: Partial<DocumentItem> = {}): DocumentItem => ({
|
|
id: `doc-${Math.random().toString(36).substr(2, 9)}`,
|
|
name: 'Test Document',
|
|
extension: 'txt',
|
|
...overrides,
|
|
})
|
|
|
|
// Factory function to create multiple document items
|
|
const createMockDocumentList = (count: number): DocumentItem[] => {
|
|
return Array.from({ length: count }, (_, index) =>
|
|
createMockDocumentItem({
|
|
id: `doc-${index + 1}`,
|
|
name: `Document ${index + 1}`,
|
|
extension: index % 2 === 0 ? 'pdf' : 'txt',
|
|
}),
|
|
)
|
|
}
|
|
|
|
// Factory function to create default props
|
|
const createDefaultProps = (overrides: Partial<React.ComponentProps<typeof PreviewDocumentPicker>> = {}) => ({
|
|
value: createMockDocumentItem({ id: 'selected-doc', name: 'Selected Document' }),
|
|
files: createMockDocumentList(3),
|
|
onChange: jest.fn(),
|
|
...overrides,
|
|
})
|
|
|
|
// Helper to render component with default props
|
|
const renderComponent = (props: Partial<React.ComponentProps<typeof PreviewDocumentPicker>> = {}) => {
|
|
const defaultProps = createDefaultProps(props)
|
|
return {
|
|
...render(<PreviewDocumentPicker {...defaultProps} />),
|
|
props: defaultProps,
|
|
}
|
|
}
|
|
|
|
describe('PreviewDocumentPicker', () => {
|
|
beforeEach(() => {
|
|
jest.clearAllMocks()
|
|
})
|
|
|
|
// Tests for basic rendering
|
|
describe('Rendering', () => {
|
|
it('should render without crashing', () => {
|
|
renderComponent()
|
|
|
|
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should render document name from value prop', () => {
|
|
renderComponent({
|
|
value: createMockDocumentItem({ name: 'My Document' }),
|
|
})
|
|
|
|
expect(screen.getByText('My Document')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should render placeholder when name is empty', () => {
|
|
renderComponent({
|
|
value: createMockDocumentItem({ name: '' }),
|
|
})
|
|
|
|
expect(screen.getByText('--')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should render placeholder when name is undefined', () => {
|
|
renderComponent({
|
|
value: { id: 'doc-1', extension: 'txt' } as DocumentItem,
|
|
})
|
|
|
|
expect(screen.getByText('--')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should render arrow icon', () => {
|
|
renderComponent()
|
|
|
|
expect(screen.getByTestId('arrow-icon')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should render file icon', () => {
|
|
renderComponent({
|
|
value: createMockDocumentItem({ extension: 'txt' }),
|
|
files: [], // Use empty files to avoid duplicate icons
|
|
})
|
|
|
|
expect(screen.getByTestId('file-text-icon')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should render pdf icon for pdf extension', () => {
|
|
renderComponent({
|
|
value: createMockDocumentItem({ extension: 'pdf' }),
|
|
files: [], // Use empty files to avoid duplicate icons
|
|
})
|
|
|
|
expect(screen.getByTestId('file-pdf-icon')).toBeInTheDocument()
|
|
})
|
|
})
|
|
|
|
// Tests for props handling
|
|
describe('Props', () => {
|
|
it('should accept required props', () => {
|
|
const props = createDefaultProps()
|
|
render(<PreviewDocumentPicker {...props} />)
|
|
|
|
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should apply className to trigger element', () => {
|
|
renderComponent({ className: 'custom-class' })
|
|
|
|
const trigger = screen.getByTestId('portal-trigger')
|
|
const innerDiv = trigger.querySelector('.custom-class')
|
|
expect(innerDiv).toBeInTheDocument()
|
|
})
|
|
|
|
it('should handle empty files array', () => {
|
|
// Component should render without crashing with empty files
|
|
renderComponent({ files: [] })
|
|
|
|
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should handle single file', () => {
|
|
// Component should accept single file
|
|
renderComponent({
|
|
files: [createMockDocumentItem({ id: 'single-doc', name: 'Single File' })],
|
|
})
|
|
|
|
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should handle multiple files', () => {
|
|
// Component should accept multiple files
|
|
renderComponent({
|
|
files: createMockDocumentList(5),
|
|
})
|
|
|
|
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should use value.extension for file icon', () => {
|
|
renderComponent({
|
|
value: createMockDocumentItem({ name: 'test.docx', extension: 'docx' }),
|
|
})
|
|
|
|
expect(screen.getByTestId('file-word-icon')).toBeInTheDocument()
|
|
})
|
|
})
|
|
|
|
// Tests for state management
|
|
describe('State Management', () => {
|
|
it('should initialize with popup closed', () => {
|
|
renderComponent()
|
|
|
|
expect(screen.getByTestId('portal-elem')).toHaveAttribute('data-open', 'false')
|
|
})
|
|
|
|
it('should toggle popup when trigger is clicked', () => {
|
|
renderComponent()
|
|
|
|
const trigger = screen.getByTestId('portal-trigger')
|
|
fireEvent.click(trigger)
|
|
|
|
expect(trigger).toBeInTheDocument()
|
|
})
|
|
|
|
it('should render portal content for document selection', () => {
|
|
renderComponent()
|
|
|
|
// Portal content is always rendered in our mock for testing
|
|
expect(screen.getByTestId('portal-content')).toBeInTheDocument()
|
|
})
|
|
})
|
|
|
|
// Tests for callback stability and memoization
|
|
describe('Callback Stability', () => {
|
|
it('should maintain stable onChange callback when value changes', () => {
|
|
const onChange = jest.fn()
|
|
const value1 = createMockDocumentItem({ id: 'doc-1', name: 'Doc 1' })
|
|
const value2 = createMockDocumentItem({ id: 'doc-2', name: 'Doc 2' })
|
|
|
|
const { rerender } = render(
|
|
<PreviewDocumentPicker
|
|
value={value1}
|
|
files={createMockDocumentList(3)}
|
|
onChange={onChange}
|
|
/>,
|
|
)
|
|
|
|
rerender(
|
|
<PreviewDocumentPicker
|
|
value={value2}
|
|
files={createMockDocumentList(3)}
|
|
onChange={onChange}
|
|
/>,
|
|
)
|
|
|
|
expect(screen.getByText('Doc 2')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should use updated onChange callback after rerender', () => {
|
|
const onChange1 = jest.fn()
|
|
const onChange2 = jest.fn()
|
|
const value = createMockDocumentItem()
|
|
const files = createMockDocumentList(3)
|
|
|
|
const { rerender } = render(
|
|
<PreviewDocumentPicker value={value} files={files} onChange={onChange1} />,
|
|
)
|
|
|
|
rerender(
|
|
<PreviewDocumentPicker value={value} files={files} onChange={onChange2} />,
|
|
)
|
|
|
|
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
|
|
})
|
|
})
|
|
|
|
// Tests for component memoization
|
|
describe('Component Memoization', () => {
|
|
it('should be wrapped with React.memo', () => {
|
|
expect((PreviewDocumentPicker as any).$$typeof).toBeDefined()
|
|
})
|
|
|
|
it('should not re-render when props are the same', () => {
|
|
const onChange = jest.fn()
|
|
const value = createMockDocumentItem()
|
|
const files = createMockDocumentList(3)
|
|
|
|
const { rerender } = render(
|
|
<PreviewDocumentPicker value={value} files={files} onChange={onChange} />,
|
|
)
|
|
|
|
rerender(
|
|
<PreviewDocumentPicker value={value} files={files} onChange={onChange} />,
|
|
)
|
|
|
|
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
|
|
})
|
|
})
|
|
|
|
// Tests for user interactions
|
|
describe('User Interactions', () => {
|
|
it('should toggle popup when trigger is clicked', () => {
|
|
renderComponent()
|
|
|
|
const trigger = screen.getByTestId('portal-trigger')
|
|
fireEvent.click(trigger)
|
|
|
|
expect(trigger).toBeInTheDocument()
|
|
})
|
|
|
|
it('should render document list with files', () => {
|
|
const files = createMockDocumentList(3)
|
|
renderComponent({ files })
|
|
|
|
// Documents should be visible in the list
|
|
expect(screen.getByText('Document 1')).toBeInTheDocument()
|
|
expect(screen.getByText('Document 2')).toBeInTheDocument()
|
|
expect(screen.getByText('Document 3')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should call onChange when document is selected', () => {
|
|
const onChange = jest.fn()
|
|
const files = createMockDocumentList(3)
|
|
|
|
renderComponent({ files, onChange })
|
|
|
|
// Click on a document
|
|
fireEvent.click(screen.getByText('Document 2'))
|
|
|
|
// handleChange should call onChange with the selected item
|
|
expect(onChange).toHaveBeenCalledTimes(1)
|
|
expect(onChange).toHaveBeenCalledWith(files[1])
|
|
})
|
|
|
|
it('should handle rapid toggle clicks', () => {
|
|
renderComponent()
|
|
|
|
const trigger = screen.getByTestId('portal-trigger')
|
|
|
|
// Rapid clicks
|
|
fireEvent.click(trigger)
|
|
fireEvent.click(trigger)
|
|
fireEvent.click(trigger)
|
|
fireEvent.click(trigger)
|
|
|
|
expect(trigger).toBeInTheDocument()
|
|
})
|
|
})
|
|
|
|
// Tests for edge cases
|
|
describe('Edge Cases', () => {
|
|
it('should handle null value properties gracefully', () => {
|
|
renderComponent({
|
|
value: { id: 'doc-1', name: '', extension: '' },
|
|
})
|
|
|
|
expect(screen.getByText('--')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should handle empty files array', () => {
|
|
renderComponent({ files: [] })
|
|
|
|
// Component should render without crashing
|
|
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should handle very long document names', () => {
|
|
const longName = 'A'.repeat(500)
|
|
renderComponent({
|
|
value: createMockDocumentItem({ name: longName }),
|
|
})
|
|
|
|
expect(screen.getByText(longName)).toBeInTheDocument()
|
|
})
|
|
|
|
it('should handle special characters in document name', () => {
|
|
const specialName = '<script>alert("xss")</script>'
|
|
renderComponent({
|
|
value: createMockDocumentItem({ name: specialName }),
|
|
})
|
|
|
|
expect(screen.getByText(specialName)).toBeInTheDocument()
|
|
})
|
|
|
|
it('should handle undefined files prop', () => {
|
|
// Test edge case where files might be undefined at runtime
|
|
const props = createDefaultProps()
|
|
// @ts-expect-error - Testing runtime edge case
|
|
props.files = undefined
|
|
|
|
render(<PreviewDocumentPicker {...props} />)
|
|
|
|
// Component should render without crashing
|
|
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should handle large number of files', () => {
|
|
const manyFiles = createMockDocumentList(100)
|
|
renderComponent({ files: manyFiles })
|
|
|
|
// Component should accept large files array
|
|
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should handle files with same name but different extensions', () => {
|
|
const files = [
|
|
createMockDocumentItem({ id: 'doc-1', name: 'document', extension: 'pdf' }),
|
|
createMockDocumentItem({ id: 'doc-2', name: 'document', extension: 'txt' }),
|
|
]
|
|
renderComponent({ files })
|
|
|
|
// Component should handle duplicate names
|
|
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
|
|
})
|
|
})
|
|
|
|
// Tests for prop variations
|
|
describe('Prop Variations', () => {
|
|
describe('value variations', () => {
|
|
it('should handle value with all fields', () => {
|
|
renderComponent({
|
|
value: {
|
|
id: 'full-doc',
|
|
name: 'Full Document',
|
|
extension: 'pdf',
|
|
},
|
|
})
|
|
|
|
expect(screen.getByText('Full Document')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should handle value with minimal fields', () => {
|
|
renderComponent({
|
|
value: { id: 'minimal', name: '', extension: '' },
|
|
})
|
|
|
|
expect(screen.getByText('--')).toBeInTheDocument()
|
|
})
|
|
})
|
|
|
|
describe('files variations', () => {
|
|
it('should handle single file', () => {
|
|
renderComponent({
|
|
files: [createMockDocumentItem({ name: 'Single' })],
|
|
})
|
|
|
|
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should handle two files', () => {
|
|
renderComponent({
|
|
files: createMockDocumentList(2),
|
|
})
|
|
|
|
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should handle many files', () => {
|
|
renderComponent({
|
|
files: createMockDocumentList(50),
|
|
})
|
|
|
|
expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
|
|
})
|
|
})
|
|
|
|
describe('className variations', () => {
|
|
it('should apply custom className', () => {
|
|
renderComponent({ className: 'my-custom-class' })
|
|
|
|
const trigger = screen.getByTestId('portal-trigger')
|
|
expect(trigger.querySelector('.my-custom-class')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should work without className', () => {
|
|
renderComponent({ className: undefined })
|
|
|
|
expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should handle multiple class names', () => {
|
|
renderComponent({ className: 'class-one class-two' })
|
|
|
|
const trigger = screen.getByTestId('portal-trigger')
|
|
const element = trigger.querySelector('.class-one')
|
|
expect(element).toBeInTheDocument()
|
|
expect(element).toHaveClass('class-two')
|
|
})
|
|
})
|
|
|
|
describe('extension variations', () => {
|
|
const extensions = [
|
|
{ ext: 'txt', icon: 'file-text-icon' },
|
|
{ ext: 'pdf', icon: 'file-pdf-icon' },
|
|
{ ext: 'docx', icon: 'file-word-icon' },
|
|
{ ext: 'xlsx', icon: 'file-excel-icon' },
|
|
{ ext: 'md', icon: 'file-markdown-icon' },
|
|
]
|
|
|
|
test.each(extensions)('should render correct icon for $ext extension', ({ ext, icon }) => {
|
|
renderComponent({
|
|
value: createMockDocumentItem({ extension: ext }),
|
|
files: [], // Use empty files to avoid duplicate icons
|
|
})
|
|
|
|
expect(screen.getByTestId(icon)).toBeInTheDocument()
|
|
})
|
|
})
|
|
})
|
|
|
|
// Tests for document list rendering
|
|
describe('Document List Rendering', () => {
|
|
it('should render all documents in the list', () => {
|
|
const files = createMockDocumentList(5)
|
|
renderComponent({ files })
|
|
|
|
// All documents should be visible
|
|
files.forEach((file) => {
|
|
expect(screen.getByText(file.name)).toBeInTheDocument()
|
|
})
|
|
})
|
|
|
|
it('should pass onChange handler to DocumentList', () => {
|
|
const onChange = jest.fn()
|
|
const files = createMockDocumentList(3)
|
|
|
|
renderComponent({ files, onChange })
|
|
|
|
// Click on first document
|
|
fireEvent.click(screen.getByText('Document 1'))
|
|
|
|
expect(onChange).toHaveBeenCalledWith(files[0])
|
|
})
|
|
|
|
it('should show count header only for multiple files', () => {
|
|
// Single file - no header
|
|
const { rerender } = render(
|
|
<PreviewDocumentPicker
|
|
value={createMockDocumentItem()}
|
|
files={[createMockDocumentItem({ name: 'Single File' })]}
|
|
onChange={jest.fn()}
|
|
/>,
|
|
)
|
|
expect(screen.queryByText(/files/)).not.toBeInTheDocument()
|
|
|
|
// Multiple files - show header
|
|
rerender(
|
|
<PreviewDocumentPicker
|
|
value={createMockDocumentItem()}
|
|
files={createMockDocumentList(3)}
|
|
onChange={jest.fn()}
|
|
/>,
|
|
)
|
|
expect(screen.getByText('3 files')).toBeInTheDocument()
|
|
})
|
|
})
|
|
|
|
// Tests for visual states
|
|
describe('Visual States', () => {
|
|
it('should apply hover styles on trigger', () => {
|
|
renderComponent()
|
|
|
|
const trigger = screen.getByTestId('portal-trigger')
|
|
const innerDiv = trigger.querySelector('.hover\\:bg-state-base-hover')
|
|
expect(innerDiv).toBeInTheDocument()
|
|
})
|
|
|
|
it('should have truncate class for long names', () => {
|
|
renderComponent({
|
|
value: createMockDocumentItem({ name: 'Very Long Document Name' }),
|
|
})
|
|
|
|
const nameElement = screen.getByText('Very Long Document Name')
|
|
expect(nameElement).toHaveClass('truncate')
|
|
})
|
|
|
|
it('should have max-width on name element', () => {
|
|
renderComponent({
|
|
value: createMockDocumentItem({ name: 'Test' }),
|
|
})
|
|
|
|
const nameElement = screen.getByText('Test')
|
|
expect(nameElement).toHaveClass('max-w-[200px]')
|
|
})
|
|
})
|
|
|
|
// Tests for handleChange callback
|
|
describe('handleChange Callback', () => {
|
|
it('should call onChange with selected document item', () => {
|
|
const onChange = jest.fn()
|
|
const files = createMockDocumentList(3)
|
|
|
|
renderComponent({ files, onChange })
|
|
|
|
// Click first document
|
|
fireEvent.click(screen.getByText('Document 1'))
|
|
|
|
expect(onChange).toHaveBeenCalledWith(files[0])
|
|
})
|
|
|
|
it('should handle different document items in files', () => {
|
|
const onChange = jest.fn()
|
|
const customFiles = [
|
|
{ id: 'custom-1', name: 'Custom File 1', extension: 'pdf' },
|
|
{ id: 'custom-2', name: 'Custom File 2', extension: 'txt' },
|
|
]
|
|
|
|
renderComponent({ files: customFiles, onChange })
|
|
|
|
// Click on first custom file
|
|
fireEvent.click(screen.getByText('Custom File 1'))
|
|
expect(onChange).toHaveBeenCalledWith(customFiles[0])
|
|
|
|
// Click on second custom file
|
|
fireEvent.click(screen.getByText('Custom File 2'))
|
|
expect(onChange).toHaveBeenCalledWith(customFiles[1])
|
|
})
|
|
|
|
it('should work with multiple sequential selections', () => {
|
|
const onChange = jest.fn()
|
|
const files = createMockDocumentList(3)
|
|
|
|
renderComponent({ files, onChange })
|
|
|
|
// Select multiple documents sequentially
|
|
fireEvent.click(screen.getByText('Document 1'))
|
|
fireEvent.click(screen.getByText('Document 3'))
|
|
fireEvent.click(screen.getByText('Document 2'))
|
|
|
|
expect(onChange).toHaveBeenCalledTimes(3)
|
|
expect(onChange).toHaveBeenNthCalledWith(1, files[0])
|
|
expect(onChange).toHaveBeenNthCalledWith(2, files[2])
|
|
expect(onChange).toHaveBeenNthCalledWith(3, files[1])
|
|
})
|
|
})
|
|
})
|