test: add unit tests for DocumentPicker, PreviewDocumentPicker, and R… (#29695)

Co-authored-by: CodingOnStar <hanxujiang@dify.ai>

web/app/components/datasets/common/document-picker/preview-document-picker.spec.tsx

@@ -0,0 +1,641 @@
+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])
+    })
+  })
+})