+ onManage: () => void
+}
+
+// Mock child components with callback exposure
+vi.mock('./edit-row', () => ({
+ default: ({ payload, onChange, onRemove, onReset }: EditRowProps) => (
+
+ {payload.name}
+
+
+
+
+ ),
+}))
+
+vi.mock('./add-row', () => ({
+ default: ({ payload, onChange, onRemove }: AddRowProps) => (
+
+ {payload.name}
+
+
+
+ ),
+}))
+
+vi.mock('../metadata-dataset/select-metadata-modal', () => ({
+ default: ({ trigger, onSelect, onSave, onManage }: SelectModalProps) => (
+
+ {trigger}
+
+
+
+
+ ),
+}))
+
+describe('EditMetadataBatchModal', () => {
+ const mockList: MetadataItemInBatchEdit[] = [
+ { id: '1', name: 'field_one', type: DataType.string, value: 'Value 1', isMultipleValue: false },
+ { id: '2', name: 'field_two', type: DataType.number, value: 42, isMultipleValue: false },
+ ]
+
+ const defaultProps = {
+ datasetId: 'ds-1',
+ documentNum: 5,
+ list: mockList,
+ onSave: vi.fn(),
+ onHide: vi.fn(),
+ onShowManage: vi.fn(),
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockCheckNameResult = { errorMsg: '' }
+ })
+
+ describe('Rendering', () => {
+ it('should render without crashing', async () => {
+ render()
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+ })
+
+ it('should render document count', async () => {
+ render()
+ await waitFor(() => {
+ expect(screen.getByText(/5/)).toBeInTheDocument()
+ })
+ })
+
+ it('should render all edit rows for existing items', async () => {
+ render()
+ await waitFor(() => {
+ const editRows = screen.getAllByTestId('edit-row')
+ expect(editRows).toHaveLength(2)
+ })
+ })
+
+ it('should render field names for existing items', async () => {
+ render()
+ await waitFor(() => {
+ expect(screen.getByText('field_one')).toBeInTheDocument()
+ expect(screen.getByText('field_two')).toBeInTheDocument()
+ })
+ })
+
+ it('should render checkbox for apply to all', async () => {
+ render()
+ await waitFor(() => {
+ const checkboxes = document.querySelectorAll('[data-testid*="checkbox"]')
+ expect(checkboxes.length).toBeGreaterThan(0)
+ })
+ })
+
+ it('should render select metadata modal', async () => {
+ render()
+ await waitFor(() => {
+ expect(screen.getByTestId('select-modal')).toBeInTheDocument()
+ })
+ })
+ })
+
+ describe('User Interactions', () => {
+ it('should call onHide when cancel button is clicked', async () => {
+ const onHide = vi.fn()
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ const cancelButton = screen.getByText(/cancel/i)
+ fireEvent.click(cancelButton)
+
+ expect(onHide).toHaveBeenCalled()
+ })
+
+ it('should call onSave when save button is clicked', async () => {
+ const onSave = vi.fn()
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ // Find the primary save button (not the one in SelectMetadataModal)
+ const saveButtons = screen.getAllByText(/save/i)
+ const modalSaveButton = saveButtons.find(btn => btn.closest('button')?.classList.contains('btn-primary'))
+ if (modalSaveButton)
+ fireEvent.click(modalSaveButton)
+
+ expect(onSave).toHaveBeenCalled()
+ })
+
+ it('should toggle apply to all checkbox', async () => {
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ const checkboxContainer = document.querySelector('[data-testid*="checkbox"]')
+ expect(checkboxContainer).toBeInTheDocument()
+
+ if (checkboxContainer) {
+ fireEvent.click(checkboxContainer)
+ await waitFor(() => {
+ const checkIcon = checkboxContainer.querySelector('svg')
+ expect(checkIcon).toBeInTheDocument()
+ })
+ }
+ })
+
+ it('should call onHide when modal close button is clicked', async () => {
+ const onHide = vi.fn()
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+ })
+ })
+
+ describe('Edit Row Operations', () => {
+ it('should update item value when change is triggered', async () => {
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ fireEvent.click(screen.getByTestId('change-1'))
+
+ // The component should update internally
+ expect(screen.getAllByTestId('edit-row').length).toBe(2)
+ })
+
+ it('should mark item as deleted when remove is clicked', async () => {
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ fireEvent.click(screen.getByTestId('remove-1'))
+
+ // The component should update internally - item marked as deleted
+ expect(screen.getAllByTestId('edit-row').length).toBe(2)
+ })
+
+ it('should reset item when reset is clicked', async () => {
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ // First change the item
+ fireEvent.click(screen.getByTestId('change-1'))
+ // Then reset it
+ fireEvent.click(screen.getByTestId('reset-1'))
+
+ expect(screen.getAllByTestId('edit-row').length).toBe(2)
+ })
+ })
+
+ describe('Add Metadata Operations', () => {
+ it('should add new item when metadata is selected', async () => {
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ fireEvent.click(screen.getByTestId('select-metadata'))
+
+ // Should now have add-row for the new item
+ await waitFor(() => {
+ expect(screen.getByTestId('add-row')).toBeInTheDocument()
+ })
+ })
+
+ it('should remove added item when remove is clicked', async () => {
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ // First add an item
+ fireEvent.click(screen.getByTestId('select-metadata'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('add-row')).toBeInTheDocument()
+ })
+
+ // Then remove it
+ fireEvent.click(screen.getByTestId('add-remove'))
+
+ await waitFor(() => {
+ expect(screen.queryByTestId('add-row')).not.toBeInTheDocument()
+ })
+ })
+
+ it('should update added item when change is triggered', async () => {
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ // First add an item
+ fireEvent.click(screen.getByTestId('select-metadata'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('add-row')).toBeInTheDocument()
+ })
+
+ // Then change it
+ fireEvent.click(screen.getByTestId('add-change-new-1'))
+
+ expect(screen.getByTestId('add-row')).toBeInTheDocument()
+ })
+
+ it('should call doAddMetaData when saving new metadata with valid name', async () => {
+ mockCheckNameResult = { errorMsg: '' }
+
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ fireEvent.click(screen.getByTestId('save-metadata'))
+
+ await waitFor(() => {
+ expect(mockDoAddMetaData).toHaveBeenCalled()
+ })
+ })
+
+ it('should show success toast when saving with valid name', async () => {
+ mockCheckNameResult = { errorMsg: '' }
+
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ fireEvent.click(screen.getByTestId('save-metadata'))
+
+ await waitFor(() => {
+ expect(mockDoAddMetaData).toHaveBeenCalled()
+ })
+
+ await waitFor(() => {
+ expect(mockToastNotify).toHaveBeenCalledWith(
+ expect.objectContaining({
+ type: 'success',
+ }),
+ )
+ })
+ })
+
+ it('should show error toast when saving with invalid name', async () => {
+ mockCheckNameResult = { errorMsg: 'Name already exists' }
+
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ fireEvent.click(screen.getByTestId('save-metadata'))
+
+ await waitFor(() => {
+ expect(mockToastNotify).toHaveBeenCalledWith(
+ expect.objectContaining({
+ type: 'error',
+ message: 'Name already exists',
+ }),
+ )
+ })
+ })
+
+ it('should call onShowManage when manage is clicked', async () => {
+ const onShowManage = vi.fn()
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ fireEvent.click(screen.getByTestId('manage-metadata'))
+
+ expect(onShowManage).toHaveBeenCalled()
+ })
+ })
+
+ describe('Props', () => {
+ it('should pass correct datasetId', async () => {
+ render()
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+ })
+
+ it('should display correct document number', async () => {
+ render()
+ await waitFor(() => {
+ expect(screen.getByText(/10/)).toBeInTheDocument()
+ })
+ })
+
+ it('should handle empty list', async () => {
+ render()
+ await waitFor(() => {
+ expect(screen.queryByTestId('edit-row')).not.toBeInTheDocument()
+ })
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle list with multiple value items', async () => {
+ const multipleValueList: MetadataItemInBatchEdit[] = [
+ { id: '1', name: 'field', type: DataType.string, value: null, isMultipleValue: true },
+ ]
+ render()
+ await waitFor(() => {
+ expect(screen.getByTestId('edit-row')).toBeInTheDocument()
+ })
+ })
+
+ it('should handle rapid save clicks', async () => {
+ const onSave = vi.fn()
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ // Find the primary save button
+ const saveButtons = screen.getAllByText(/save/i)
+ const saveBtn = saveButtons.find(btn => btn.closest('button')?.classList.contains('btn-primary'))
+ if (saveBtn) {
+ fireEvent.click(saveBtn)
+ fireEvent.click(saveBtn)
+ fireEvent.click(saveBtn)
+ }
+
+ expect(onSave).toHaveBeenCalledTimes(3)
+ })
+
+ it('should pass correct arguments to onSave', async () => {
+ const onSave = vi.fn()
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ const saveButtons = screen.getAllByText(/save/i)
+ const saveBtn = saveButtons.find(btn => btn.closest('button')?.classList.contains('btn-primary'))
+ if (saveBtn)
+ fireEvent.click(saveBtn)
+
+ expect(onSave).toHaveBeenCalledWith(
+ expect.any(Array),
+ expect.any(Array),
+ expect.any(Boolean),
+ )
+ })
+
+ it('should pass isApplyToAllSelectDocument as true when checked', async () => {
+ const onSave = vi.fn()
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ const checkboxContainer = document.querySelector('[data-testid*="checkbox"]')
+ if (checkboxContainer)
+ fireEvent.click(checkboxContainer)
+
+ const saveButtons = screen.getAllByText(/save/i)
+ const saveBtn = saveButtons.find(btn => btn.closest('button')?.classList.contains('btn-primary'))
+ if (saveBtn)
+ fireEvent.click(saveBtn)
+
+ await waitFor(() => {
+ expect(onSave).toHaveBeenCalledWith(
+ expect.any(Array),
+ expect.any(Array),
+ true,
+ )
+ })
+ })
+
+ it('should filter out deleted items when saving', async () => {
+ const onSave = vi.fn()
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ // Remove an item
+ fireEvent.click(screen.getByTestId('remove-1'))
+
+ // Save
+ const saveButtons = screen.getAllByText(/save/i)
+ const saveBtn = saveButtons.find(btn => btn.closest('button')?.classList.contains('btn-primary'))
+ if (saveBtn)
+ fireEvent.click(saveBtn)
+
+ expect(onSave).toHaveBeenCalled()
+ // The first argument should not contain the deleted item (id '1')
+ const savedList = onSave.mock.calls[0][0] as MetadataItemInBatchEdit[]
+ const hasDeletedItem = savedList.some(item => item.id === '1')
+ expect(hasDeletedItem).toBe(false)
+ })
+
+ it('should handle multiple add and remove operations', async () => {
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ })
+
+ // Add first item
+ fireEvent.click(screen.getByTestId('select-metadata'))
+ await waitFor(() => {
+ expect(screen.getByTestId('add-row')).toBeInTheDocument()
+ })
+
+ // Remove it
+ fireEvent.click(screen.getByTestId('add-remove'))
+
+ await waitFor(() => {
+ expect(screen.queryByTestId('add-row')).not.toBeInTheDocument()
+ })
+
+ // Add again
+ fireEvent.click(screen.getByTestId('select-metadata'))
+ await waitFor(() => {
+ expect(screen.getByTestId('add-row')).toBeInTheDocument()
+ })
+ })
+ })
+})
diff --git a/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.spec.ts b/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.spec.ts
new file mode 100644
index 0000000000..c508a45dc7
--- /dev/null
+++ b/web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.spec.ts
@@ -0,0 +1,647 @@
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { DataType, UpdateType } from '../types'
+import useBatchEditDocumentMetadata from './use-batch-edit-document-metadata'
+
+type DocMetadataItem = {
+ id: string
+ name: string
+ type: DataType
+ value: string | number | null
+}
+
+type DocListItem = {
+ id: string
+ name?: string
+ doc_metadata?: DocMetadataItem[] | null
+}
+
+type MetadataItemWithEdit = {
+ id: string
+ name: string
+ type: DataType
+ value: string | number | null
+ isMultipleValue?: boolean
+ updateType?: UpdateType
+}
+
+// Mock useBatchUpdateDocMetadata
+const mockMutateAsync = vi.fn().mockResolvedValue({})
+vi.mock('@/service/knowledge/use-metadata', () => ({
+ useBatchUpdateDocMetadata: () => ({
+ mutateAsync: mockMutateAsync,
+ }),
+}))
+
+// Mock Toast
+vi.mock('@/app/components/base/toast', () => ({
+ default: {
+ notify: vi.fn(),
+ },
+}))
+
+describe('useBatchEditDocumentMetadata', () => {
+ const mockDocList: DocListItem[] = [
+ {
+ id: 'doc-1',
+ name: 'Document 1',
+ doc_metadata: [
+ { id: '1', name: 'field_one', type: DataType.string, value: 'Value 1' },
+ { id: '2', name: 'field_two', type: DataType.number, value: 42 },
+ ],
+ },
+ {
+ id: 'doc-2',
+ name: 'Document 2',
+ doc_metadata: [
+ { id: '1', name: 'field_one', type: DataType.string, value: 'Value 2' },
+ ],
+ },
+ ]
+
+ const defaultProps = {
+ datasetId: 'ds-1',
+ docList: mockDocList as Parameters[0]['docList'],
+ onUpdate: vi.fn(),
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('Hook Initialization', () => {
+ it('should initialize with isShowEditModal as false', () => {
+ const { result } = renderHook(() => useBatchEditDocumentMetadata(defaultProps))
+ expect(result.current.isShowEditModal).toBe(false)
+ })
+
+ it('should return showEditModal function', () => {
+ const { result } = renderHook(() => useBatchEditDocumentMetadata(defaultProps))
+ expect(typeof result.current.showEditModal).toBe('function')
+ })
+
+ it('should return hideEditModal function', () => {
+ const { result } = renderHook(() => useBatchEditDocumentMetadata(defaultProps))
+ expect(typeof result.current.hideEditModal).toBe('function')
+ })
+
+ it('should return originalList', () => {
+ const { result } = renderHook(() => useBatchEditDocumentMetadata(defaultProps))
+ expect(Array.isArray(result.current.originalList)).toBe(true)
+ })
+
+ it('should return handleSave function', () => {
+ const { result } = renderHook(() => useBatchEditDocumentMetadata(defaultProps))
+ expect(typeof result.current.handleSave).toBe('function')
+ })
+ })
+
+ describe('Modal Control', () => {
+ it('should show modal when showEditModal is called', () => {
+ const { result } = renderHook(() => useBatchEditDocumentMetadata(defaultProps))
+
+ act(() => {
+ result.current.showEditModal()
+ })
+
+ expect(result.current.isShowEditModal).toBe(true)
+ })
+
+ it('should hide modal when hideEditModal is called', () => {
+ const { result } = renderHook(() => useBatchEditDocumentMetadata(defaultProps))
+
+ act(() => {
+ result.current.showEditModal()
+ })
+
+ act(() => {
+ result.current.hideEditModal()
+ })
+
+ expect(result.current.isShowEditModal).toBe(false)
+ })
+ })
+
+ describe('Original List Processing', () => {
+ it('should compute originalList from docList metadata', () => {
+ const { result } = renderHook(() => useBatchEditDocumentMetadata(defaultProps))
+
+ expect(result.current.originalList.length).toBeGreaterThan(0)
+ })
+
+ it('should filter out built-in metadata', () => {
+ const docListWithBuiltIn: DocListItem[] = [
+ {
+ id: 'doc-1',
+ doc_metadata: [
+ { id: 'built-in', name: 'created_at', type: DataType.time, value: 123 },
+ { id: '1', name: 'custom', type: DataType.string, value: 'test' },
+ ],
+ },
+ ]
+
+ const { result } = renderHook(() =>
+ useBatchEditDocumentMetadata({
+ ...defaultProps,
+ docList: docListWithBuiltIn as Parameters[0]['docList'],
+ }),
+ )
+
+ const hasBuiltIn = result.current.originalList.some(item => item.id === 'built-in')
+ expect(hasBuiltIn).toBe(false)
+ })
+
+ it('should mark items with multiple values', () => {
+ const docListWithDifferentValues: DocListItem[] = [
+ {
+ id: 'doc-1',
+ doc_metadata: [
+ { id: '1', name: 'field', type: DataType.string, value: 'Value A' },
+ ],
+ },
+ {
+ id: 'doc-2',
+ doc_metadata: [
+ { id: '1', name: 'field', type: DataType.string, value: 'Value B' },
+ ],
+ },
+ ]
+
+ const { result } = renderHook(() =>
+ useBatchEditDocumentMetadata({
+ ...defaultProps,
+ docList: docListWithDifferentValues as Parameters[0]['docList'],
+ }),
+ )
+
+ const fieldItem = result.current.originalList.find(item => item.id === '1')
+ expect(fieldItem?.isMultipleValue).toBe(true)
+ })
+
+ it('should not mark items with same values as multiple', () => {
+ const docListWithSameValues: DocListItem[] = [
+ {
+ id: 'doc-1',
+ doc_metadata: [
+ { id: '1', name: 'field', type: DataType.string, value: 'Same Value' },
+ ],
+ },
+ {
+ id: 'doc-2',
+ doc_metadata: [
+ { id: '1', name: 'field', type: DataType.string, value: 'Same Value' },
+ ],
+ },
+ ]
+
+ const { result } = renderHook(() =>
+ useBatchEditDocumentMetadata({
+ ...defaultProps,
+ docList: docListWithSameValues as Parameters[0]['docList'],
+ }),
+ )
+
+ const fieldItem = result.current.originalList.find(item => item.id === '1')
+ expect(fieldItem?.isMultipleValue).toBe(false)
+ })
+
+ it('should skip already marked multiple value items', () => {
+ // Three docs with same field but different values
+ const docListThreeDocs: DocListItem[] = [
+ {
+ id: 'doc-1',
+ doc_metadata: [
+ { id: '1', name: 'field', type: DataType.string, value: 'Value A' },
+ ],
+ },
+ {
+ id: 'doc-2',
+ doc_metadata: [
+ { id: '1', name: 'field', type: DataType.string, value: 'Value B' },
+ ],
+ },
+ {
+ id: 'doc-3',
+ doc_metadata: [
+ { id: '1', name: 'field', type: DataType.string, value: 'Value C' },
+ ],
+ },
+ ]
+
+ const { result } = renderHook(() =>
+ useBatchEditDocumentMetadata({
+ ...defaultProps,
+ docList: docListThreeDocs as Parameters[0]['docList'],
+ }),
+ )
+
+ // Should only have one item for field '1', marked as multiple
+ const fieldItems = result.current.originalList.filter(item => item.id === '1')
+ expect(fieldItems.length).toBe(1)
+ expect(fieldItems[0].isMultipleValue).toBe(true)
+ })
+ })
+
+ describe('handleSave', () => {
+ it('should call mutateAsync with correct data', async () => {
+ const onUpdate = vi.fn()
+ const { result } = renderHook(() =>
+ useBatchEditDocumentMetadata({ ...defaultProps, onUpdate }),
+ )
+
+ await act(async () => {
+ await result.current.handleSave([], [], false)
+ })
+
+ expect(mockMutateAsync).toHaveBeenCalled()
+ })
+
+ it('should call onUpdate after successful save', async () => {
+ const onUpdate = vi.fn()
+ const { result } = renderHook(() =>
+ useBatchEditDocumentMetadata({ ...defaultProps, onUpdate }),
+ )
+
+ await act(async () => {
+ await result.current.handleSave([], [], false)
+ })
+
+ await waitFor(() => {
+ expect(onUpdate).toHaveBeenCalled()
+ })
+ })
+
+ it('should hide modal after successful save', async () => {
+ const { result } = renderHook(() => useBatchEditDocumentMetadata(defaultProps))
+
+ act(() => {
+ result.current.showEditModal()
+ })
+
+ expect(result.current.isShowEditModal).toBe(true)
+
+ await act(async () => {
+ await result.current.handleSave([], [], false)
+ })
+
+ await waitFor(() => {
+ expect(result.current.isShowEditModal).toBe(false)
+ })
+ })
+
+ it('should handle edited items with changeValue updateType', async () => {
+ const docListSingleDoc: DocListItem[] = [
+ {
+ id: 'doc-1',
+ doc_metadata: [
+ { id: '1', name: 'field_one', type: DataType.string, value: 'Old Value' },
+ ],
+ },
+ ]
+
+ const { result } = renderHook(() =>
+ useBatchEditDocumentMetadata({
+ ...defaultProps,
+ docList: docListSingleDoc as Parameters[0]['docList'],
+ }),
+ )
+
+ const editedList: MetadataItemWithEdit[] = [
+ {
+ id: '1',
+ name: 'field_one',
+ type: DataType.string,
+ value: 'New Value',
+ updateType: UpdateType.changeValue,
+ },
+ ]
+
+ await act(async () => {
+ await result.current.handleSave(editedList, [], false)
+ })
+
+ expect(mockMutateAsync).toHaveBeenCalledWith(
+ expect.objectContaining({
+ metadata_list: expect.arrayContaining([
+ expect.objectContaining({
+ document_id: 'doc-1',
+ metadata_list: expect.arrayContaining([
+ expect.objectContaining({
+ id: '1',
+ value: 'New Value',
+ }),
+ ]),
+ }),
+ ]),
+ }),
+ )
+ })
+
+ it('should handle removed items', async () => {
+ const docListSingleDoc: DocListItem[] = [
+ {
+ id: 'doc-1',
+ doc_metadata: [
+ { id: '1', name: 'field_one', type: DataType.string, value: 'Value 1' },
+ { id: '2', name: 'field_two', type: DataType.number, value: 42 },
+ ],
+ },
+ ]
+
+ const { result } = renderHook(() =>
+ useBatchEditDocumentMetadata({
+ ...defaultProps,
+ docList: docListSingleDoc as Parameters[0]['docList'],
+ }),
+ )
+
+ // Only pass field_one in editedList, field_two should be removed
+ const editedList: MetadataItemWithEdit[] = [
+ {
+ id: '1',
+ name: 'field_one',
+ type: DataType.string,
+ value: 'Value 1',
+ },
+ ]
+
+ await act(async () => {
+ await result.current.handleSave(editedList, [], false)
+ })
+
+ expect(mockMutateAsync).toHaveBeenCalled()
+ })
+
+ it('should handle added items', async () => {
+ const docListSingleDoc: DocListItem[] = [
+ {
+ id: 'doc-1',
+ doc_metadata: [
+ { id: '1', name: 'field_one', type: DataType.string, value: 'Value 1' },
+ ],
+ },
+ ]
+
+ const { result } = renderHook(() =>
+ useBatchEditDocumentMetadata({
+ ...defaultProps,
+ docList: docListSingleDoc as Parameters[0]['docList'],
+ }),
+ )
+
+ const addedList = [
+ {
+ id: 'new-1',
+ name: 'new_field',
+ type: DataType.string,
+ value: 'New Value',
+ isMultipleValue: false,
+ },
+ ]
+
+ await act(async () => {
+ await result.current.handleSave([], addedList, false)
+ })
+
+ expect(mockMutateAsync).toHaveBeenCalledWith(
+ expect.objectContaining({
+ metadata_list: expect.arrayContaining([
+ expect.objectContaining({
+ metadata_list: expect.arrayContaining([
+ expect.objectContaining({
+ name: 'new_field',
+ }),
+ ]),
+ }),
+ ]),
+ }),
+ )
+ })
+
+ it('should add missing metadata when isApplyToAllSelectDocument is true', async () => {
+ // Doc 1 has field, Doc 2 doesn't have it
+ const docListMissingField: DocListItem[] = [
+ {
+ id: 'doc-1',
+ doc_metadata: [
+ { id: '1', name: 'field_one', type: DataType.string, value: 'Value 1' },
+ ],
+ },
+ {
+ id: 'doc-2',
+ doc_metadata: [],
+ },
+ ]
+
+ const { result } = renderHook(() =>
+ useBatchEditDocumentMetadata({
+ ...defaultProps,
+ docList: docListMissingField as Parameters[0]['docList'],
+ }),
+ )
+
+ const editedList: MetadataItemWithEdit[] = [
+ {
+ id: '1',
+ name: 'field_one',
+ type: DataType.string,
+ value: 'Updated Value',
+ isMultipleValue: false,
+ updateType: UpdateType.changeValue,
+ },
+ ]
+
+ await act(async () => {
+ await result.current.handleSave(editedList, [], true)
+ })
+
+ // Both documents should have the field after applying to all
+ expect(mockMutateAsync).toHaveBeenCalled()
+ const callArgs = mockMutateAsync.mock.calls[0][0]
+ expect(callArgs.metadata_list.length).toBe(2)
+ })
+
+ it('should not add missing metadata for multiple value items when isApplyToAllSelectDocument is true', async () => {
+ // Two docs with different values for same field
+ const docListDifferentValues: DocListItem[] = [
+ {
+ id: 'doc-1',
+ doc_metadata: [
+ { id: '1', name: 'field_one', type: DataType.string, value: 'Value A' },
+ ],
+ },
+ {
+ id: 'doc-2',
+ doc_metadata: [
+ { id: '1', name: 'field_one', type: DataType.string, value: 'Value B' },
+ ],
+ },
+ {
+ id: 'doc-3',
+ doc_metadata: [],
+ },
+ ]
+
+ const { result } = renderHook(() =>
+ useBatchEditDocumentMetadata({
+ ...defaultProps,
+ docList: docListDifferentValues as Parameters[0]['docList'],
+ }),
+ )
+
+ // Mark it as multiple value item - should not be added to doc-3
+ const editedList: MetadataItemWithEdit[] = [
+ {
+ id: '1',
+ name: 'field_one',
+ type: DataType.string,
+ value: null,
+ isMultipleValue: true,
+ updateType: UpdateType.changeValue,
+ },
+ ]
+
+ await act(async () => {
+ await result.current.handleSave(editedList, [], true)
+ })
+
+ expect(mockMutateAsync).toHaveBeenCalled()
+ })
+
+ it('should update existing items in the list', async () => {
+ const docListSingleDoc: DocListItem[] = [
+ {
+ id: 'doc-1',
+ doc_metadata: [
+ { id: '1', name: 'field_one', type: DataType.string, value: 'Old Value' },
+ { id: '2', name: 'field_two', type: DataType.number, value: 100 },
+ ],
+ },
+ ]
+
+ const { result } = renderHook(() =>
+ useBatchEditDocumentMetadata({
+ ...defaultProps,
+ docList: docListSingleDoc as Parameters[0]['docList'],
+ }),
+ )
+
+ // Edit both items
+ const editedList: MetadataItemWithEdit[] = [
+ {
+ id: '1',
+ name: 'field_one',
+ type: DataType.string,
+ value: 'New Value 1',
+ updateType: UpdateType.changeValue,
+ },
+ {
+ id: '2',
+ name: 'field_two',
+ type: DataType.number,
+ value: 200,
+ updateType: UpdateType.changeValue,
+ },
+ ]
+
+ await act(async () => {
+ await result.current.handleSave(editedList, [], false)
+ })
+
+ expect(mockMutateAsync).toHaveBeenCalledWith(
+ expect.objectContaining({
+ metadata_list: expect.arrayContaining([
+ expect.objectContaining({
+ metadata_list: expect.arrayContaining([
+ expect.objectContaining({ id: '1', value: 'New Value 1' }),
+ expect.objectContaining({ id: '2', value: 200 }),
+ ]),
+ }),
+ ]),
+ }),
+ )
+ })
+ })
+
+ describe('Selected Document IDs', () => {
+ it('should use selectedDocumentIds when provided', async () => {
+ const selectedIds = ['doc-1']
+ const { result } = renderHook(() =>
+ useBatchEditDocumentMetadata({
+ ...defaultProps,
+ selectedDocumentIds: selectedIds,
+ }),
+ )
+
+ await act(async () => {
+ await result.current.handleSave([], [], false)
+ })
+
+ expect(mockMutateAsync).toHaveBeenCalledWith(
+ expect.objectContaining({
+ dataset_id: 'ds-1',
+ metadata_list: expect.arrayContaining([
+ expect.objectContaining({
+ document_id: 'doc-1',
+ }),
+ ]),
+ }),
+ )
+ })
+
+ it('should handle selectedDocumentIds not in docList', async () => {
+ // Select a document that's not in docList
+ const selectedIds = ['doc-1', 'doc-not-in-list']
+ const { result } = renderHook(() =>
+ useBatchEditDocumentMetadata({
+ ...defaultProps,
+ selectedDocumentIds: selectedIds,
+ }),
+ )
+
+ await act(async () => {
+ await result.current.handleSave([], [], false)
+ })
+
+ expect(mockMutateAsync).toHaveBeenCalledWith(
+ expect.objectContaining({
+ metadata_list: expect.arrayContaining([
+ expect.objectContaining({
+ document_id: 'doc-not-in-list',
+ partial_update: true,
+ }),
+ ]),
+ }),
+ )
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle empty docList', () => {
+ const { result } = renderHook(() =>
+ useBatchEditDocumentMetadata({
+ ...defaultProps,
+ docList: [] as Parameters[0]['docList'],
+ }),
+ )
+
+ expect(result.current.originalList).toEqual([])
+ })
+
+ it('should handle documents without metadata', () => {
+ const docListNoMetadata: DocListItem[] = [
+ { id: 'doc-1', name: 'Doc 1' },
+ { id: 'doc-2', name: 'Doc 2', doc_metadata: null },
+ ]
+
+ const { result } = renderHook(() =>
+ useBatchEditDocumentMetadata({
+ ...defaultProps,
+ docList: docListNoMetadata as Parameters[0]['docList'],
+ }),
+ )
+
+ expect(result.current.originalList).toEqual([])
+ })
+ })
+})
diff --git a/web/app/components/datasets/metadata/hooks/use-check-metadata-name.spec.ts b/web/app/components/datasets/metadata/hooks/use-check-metadata-name.spec.ts
new file mode 100644
index 0000000000..14081908c0
--- /dev/null
+++ b/web/app/components/datasets/metadata/hooks/use-check-metadata-name.spec.ts
@@ -0,0 +1,166 @@
+import { renderHook } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import useCheckMetadataName from './use-check-metadata-name'
+
+describe('useCheckMetadataName', () => {
+ describe('Hook Initialization', () => {
+ it('should return an object with checkName function', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ expect(result.current).toHaveProperty('checkName')
+ expect(typeof result.current.checkName).toBe('function')
+ })
+ })
+
+ describe('checkName - Empty Name Validation', () => {
+ it('should return error for empty string', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('')
+ expect(errorMsg).toBeTruthy()
+ })
+
+ it('should return error for whitespace-only string', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ // Whitespace is not valid since it doesn't match the pattern
+ const { errorMsg } = result.current.checkName(' ')
+ expect(errorMsg).toBeTruthy()
+ })
+ })
+
+ describe('checkName - Pattern Validation', () => {
+ it('should return error for name starting with number', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('1name')
+ expect(errorMsg).toBeTruthy()
+ })
+
+ it('should return error for name starting with uppercase', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('Name')
+ expect(errorMsg).toBeTruthy()
+ })
+
+ it('should return error for name starting with underscore', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('_name')
+ expect(errorMsg).toBeTruthy()
+ })
+
+ it('should return error for name with spaces', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('my name')
+ expect(errorMsg).toBeTruthy()
+ })
+
+ it('should return error for name with special characters', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('name-with-dash')
+ expect(errorMsg).toBeTruthy()
+ })
+
+ it('should return error for name with dots', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('name.with.dot')
+ expect(errorMsg).toBeTruthy()
+ })
+
+ it('should accept valid name starting with lowercase letter', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('validname')
+ expect(errorMsg).toBe('')
+ })
+
+ it('should accept valid name with numbers after first character', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('name123')
+ expect(errorMsg).toBe('')
+ })
+
+ it('should accept valid name with underscores after first character', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('name_with_underscore')
+ expect(errorMsg).toBe('')
+ })
+
+ it('should accept single lowercase letter', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('a')
+ expect(errorMsg).toBe('')
+ })
+ })
+
+ describe('checkName - Length Validation', () => {
+ it('should return error for name longer than 255 characters', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const longName = 'a'.repeat(256)
+ const { errorMsg } = result.current.checkName(longName)
+ expect(errorMsg).toBeTruthy()
+ })
+
+ it('should accept name with exactly 255 characters', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const maxLengthName = 'a'.repeat(255)
+ const { errorMsg } = result.current.checkName(maxLengthName)
+ expect(errorMsg).toBe('')
+ })
+
+ it('should accept name with less than 255 characters', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const shortName = 'a'.repeat(100)
+ const { errorMsg } = result.current.checkName(shortName)
+ expect(errorMsg).toBe('')
+ })
+ })
+
+ describe('checkName - Edge Cases', () => {
+ it('should validate all lowercase letters', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('abcdefghijklmnopqrstuvwxyz')
+ expect(errorMsg).toBe('')
+ })
+
+ it('should validate name with mixed numbers and underscores', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('a1_2_3_test')
+ expect(errorMsg).toBe('')
+ })
+
+ it('should reject uppercase letters anywhere in name', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('nameWithUppercase')
+ expect(errorMsg).toBeTruthy()
+ })
+
+ it('should reject unicode characters', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('名字')
+ expect(errorMsg).toBeTruthy()
+ })
+
+ it('should reject emoji characters', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('name😀')
+ expect(errorMsg).toBeTruthy()
+ })
+ })
+
+ describe('Return Value Structure', () => {
+ it('should return object with errorMsg property', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const returnValue = result.current.checkName('test')
+ expect(returnValue).toHaveProperty('errorMsg')
+ })
+
+ it('should return empty string for valid name', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('valid_name')
+ expect(errorMsg).toBe('')
+ })
+
+ it('should return non-empty string for invalid name', () => {
+ const { result } = renderHook(() => useCheckMetadataName())
+ const { errorMsg } = result.current.checkName('')
+ expect(typeof errorMsg).toBe('string')
+ expect(errorMsg.length).toBeGreaterThan(0)
+ })
+ })
+})
diff --git a/web/app/components/datasets/metadata/hooks/use-edit-dataset-metadata.spec.ts b/web/app/components/datasets/metadata/hooks/use-edit-dataset-metadata.spec.ts
new file mode 100644
index 0000000000..132660302d
--- /dev/null
+++ b/web/app/components/datasets/metadata/hooks/use-edit-dataset-metadata.spec.ts
@@ -0,0 +1,308 @@
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { DataType } from '../types'
+import useEditDatasetMetadata from './use-edit-dataset-metadata'
+
+// Mock service hooks
+const mockDoAddMetaData = vi.fn().mockResolvedValue({})
+const mockDoRenameMetaData = vi.fn().mockResolvedValue({})
+const mockDoDeleteMetaData = vi.fn().mockResolvedValue({})
+const mockToggleBuiltInStatus = vi.fn().mockResolvedValue({})
+
+vi.mock('@/service/knowledge/use-metadata', () => ({
+ useDatasetMetaData: () => ({
+ data: {
+ doc_metadata: [
+ { id: '1', name: 'field_one', type: DataType.string, count: 5 },
+ { id: '2', name: 'field_two', type: DataType.number, count: 3 },
+ ],
+ built_in_field_enabled: false,
+ },
+ }),
+ useCreateMetaData: () => ({
+ mutate: mockDoAddMetaData,
+ }),
+ useRenameMeta: () => ({
+ mutate: mockDoRenameMetaData,
+ }),
+ useDeleteMetaData: () => ({
+ mutateAsync: mockDoDeleteMetaData,
+ }),
+ useUpdateBuiltInStatus: () => ({
+ mutateAsync: mockToggleBuiltInStatus,
+ }),
+ useBuiltInMetaDataFields: () => ({
+ data: {
+ fields: [
+ { name: 'created_at', type: DataType.time },
+ { name: 'modified_at', type: DataType.time },
+ ],
+ },
+ }),
+}))
+
+// Mock Toast
+vi.mock('@/app/components/base/toast', () => ({
+ default: {
+ notify: vi.fn(),
+ },
+}))
+
+// Mock useCheckMetadataName
+vi.mock('./use-check-metadata-name', () => ({
+ default: () => ({
+ checkName: (name: string) => ({
+ errorMsg: name && /^[a-z][a-z0-9_]*$/.test(name) ? '' : 'Invalid name',
+ }),
+ }),
+}))
+
+// Mock localStorage
+const localStorageMock = {
+ getItem: vi.fn(),
+ setItem: vi.fn(),
+ removeItem: vi.fn(),
+ clear: vi.fn(),
+}
+Object.defineProperty(window, 'localStorage', { value: localStorageMock })
+
+describe('useEditDatasetMetadata', () => {
+ const defaultProps = {
+ datasetId: 'ds-1',
+ onUpdateDocList: vi.fn(),
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ localStorageMock.getItem.mockReturnValue(null)
+ })
+
+ describe('Hook Initialization', () => {
+ it('should initialize with isShowEditModal as false', () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+ expect(result.current.isShowEditModal).toBe(false)
+ })
+
+ it('should return showEditModal function', () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+ expect(typeof result.current.showEditModal).toBe('function')
+ })
+
+ it('should return hideEditModal function', () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+ expect(typeof result.current.hideEditModal).toBe('function')
+ })
+
+ it('should return datasetMetaData', () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+ expect(result.current.datasetMetaData).toBeDefined()
+ })
+
+ it('should return handleAddMetaData function', () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+ expect(typeof result.current.handleAddMetaData).toBe('function')
+ })
+
+ it('should return handleRename function', () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+ expect(typeof result.current.handleRename).toBe('function')
+ })
+
+ it('should return handleDeleteMetaData function', () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+ expect(typeof result.current.handleDeleteMetaData).toBe('function')
+ })
+
+ it('should return builtInMetaData', () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+ expect(result.current.builtInMetaData).toBeDefined()
+ })
+
+ it('should return builtInEnabled', () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+ expect(typeof result.current.builtInEnabled).toBe('boolean')
+ })
+
+ it('should return setBuiltInEnabled function', () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+ expect(typeof result.current.setBuiltInEnabled).toBe('function')
+ })
+ })
+
+ describe('Modal Control', () => {
+ it('should show modal when showEditModal is called', () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+
+ act(() => {
+ result.current.showEditModal()
+ })
+
+ expect(result.current.isShowEditModal).toBe(true)
+ })
+
+ it('should hide modal when hideEditModal is called', () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+
+ act(() => {
+ result.current.showEditModal()
+ })
+
+ act(() => {
+ result.current.hideEditModal()
+ })
+
+ expect(result.current.isShowEditModal).toBe(false)
+ })
+
+ it('should handle toggle of modal state', () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+
+ // Initially closed
+ expect(result.current.isShowEditModal).toBe(false)
+
+ // Show, hide, show
+ act(() => result.current.showEditModal())
+ expect(result.current.isShowEditModal).toBe(true)
+
+ act(() => result.current.hideEditModal())
+ expect(result.current.isShowEditModal).toBe(false)
+
+ act(() => result.current.showEditModal())
+ expect(result.current.isShowEditModal).toBe(true)
+ })
+ })
+
+ describe('handleAddMetaData', () => {
+ it('should call doAddMetaData with valid name', async () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+
+ await act(async () => {
+ await result.current.handleAddMetaData({
+ name: 'valid_name',
+ type: DataType.string,
+ })
+ })
+
+ expect(mockDoAddMetaData).toHaveBeenCalled()
+ })
+
+ it('should reject invalid name', async () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+
+ await expect(
+ act(async () => {
+ await result.current.handleAddMetaData({
+ name: '',
+ type: DataType.string,
+ })
+ }),
+ ).rejects.toThrow()
+ })
+ })
+
+ describe('handleRename', () => {
+ it('should call doRenameMetaData with valid name', async () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+
+ await act(async () => {
+ await result.current.handleRename({
+ id: '1',
+ name: 'new_valid_name',
+ type: DataType.string,
+ count: 5,
+ })
+ })
+
+ expect(mockDoRenameMetaData).toHaveBeenCalled()
+ })
+
+ it('should call onUpdateDocList after rename', async () => {
+ const onUpdateDocList = vi.fn()
+ const { result } = renderHook(() =>
+ useEditDatasetMetadata({ ...defaultProps, onUpdateDocList }),
+ )
+
+ await act(async () => {
+ await result.current.handleRename({
+ id: '1',
+ name: 'renamed',
+ type: DataType.string,
+ count: 5,
+ })
+ })
+
+ await waitFor(() => {
+ expect(onUpdateDocList).toHaveBeenCalled()
+ })
+ })
+
+ it('should reject invalid name for rename', async () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+
+ await expect(
+ act(async () => {
+ await result.current.handleRename({
+ id: '1',
+ name: 'Invalid Name',
+ type: DataType.string,
+ count: 5,
+ })
+ }),
+ ).rejects.toThrow()
+ })
+ })
+
+ describe('handleDeleteMetaData', () => {
+ it('should call doDeleteMetaData', async () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+
+ await act(async () => {
+ await result.current.handleDeleteMetaData('1')
+ })
+
+ expect(mockDoDeleteMetaData).toHaveBeenCalledWith('1')
+ })
+
+ it('should call onUpdateDocList after delete', async () => {
+ const onUpdateDocList = vi.fn()
+ const { result } = renderHook(() =>
+ useEditDatasetMetadata({ ...defaultProps, onUpdateDocList }),
+ )
+
+ await act(async () => {
+ await result.current.handleDeleteMetaData('1')
+ })
+
+ await waitFor(() => {
+ expect(onUpdateDocList).toHaveBeenCalled()
+ })
+ })
+ })
+
+ describe('Built-in Status', () => {
+ it('should toggle built-in status', async () => {
+ const { result } = renderHook(() => useEditDatasetMetadata(defaultProps))
+
+ await act(async () => {
+ await result.current.setBuiltInEnabled(true)
+ })
+
+ expect(mockToggleBuiltInStatus).toHaveBeenCalledWith(true)
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle different datasetIds', () => {
+ const { result, rerender } = renderHook(
+ props => useEditDatasetMetadata(props),
+ { initialProps: defaultProps },
+ )
+
+ expect(result.current).toBeDefined()
+
+ rerender({ ...defaultProps, datasetId: 'ds-2' })
+
+ expect(result.current).toBeDefined()
+ })
+ })
+})
diff --git a/web/app/components/datasets/metadata/hooks/use-metadata-document.spec.ts b/web/app/components/datasets/metadata/hooks/use-metadata-document.spec.ts
new file mode 100644
index 0000000000..bbe84aaf1d
--- /dev/null
+++ b/web/app/components/datasets/metadata/hooks/use-metadata-document.spec.ts
@@ -0,0 +1,587 @@
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { DataType } from '../types'
+import useMetadataDocument from './use-metadata-document'
+
+type DocDetail = {
+ id: string
+ name: string
+ data_source_type: string
+ word_count: number
+ language?: string
+ hit_count?: number
+ segment_count?: number
+}
+
+// Mock service hooks
+const mockMutateAsync = vi.fn().mockResolvedValue({})
+const mockDoAddMetaData = vi.fn().mockResolvedValue({})
+
+vi.mock('@/service/knowledge/use-metadata', () => ({
+ useBatchUpdateDocMetadata: () => ({
+ mutateAsync: mockMutateAsync,
+ }),
+ useCreateMetaData: () => ({
+ mutateAsync: mockDoAddMetaData,
+ }),
+ useDocumentMetaData: () => ({
+ data: {
+ doc_metadata: [
+ { id: '1', name: 'field_one', type: DataType.string, value: 'Value 1' },
+ { id: '2', name: 'field_two', type: DataType.number, value: 42 },
+ { id: 'built-in', name: 'created_at', type: DataType.time, value: 1609459200 },
+ ],
+ },
+ }),
+ useDatasetMetaData: () => ({
+ data: {
+ built_in_field_enabled: true,
+ },
+ }),
+}))
+
+// Mock useDatasetDetailContext
+vi.mock('@/context/dataset-detail', () => ({
+ useDatasetDetailContext: () => ({
+ dataset: {
+ embedding_available: true,
+ },
+ }),
+}))
+
+// Mock useMetadataMap and useLanguages with comprehensive field definitions
+vi.mock('@/hooks/use-metadata', () => ({
+ useMetadataMap: () => ({
+ originInfo: {
+ subFieldsMap: {
+ data_source_type: { label: 'Source Type', inputType: 'text' },
+ language: { label: 'Language', inputType: 'select' },
+ empty_field: { label: 'Empty Field', inputType: 'text' },
+ },
+ },
+ technicalParameters: {
+ subFieldsMap: {
+ word_count: { label: 'Word Count', inputType: 'text' },
+ hit_count: {
+ label: 'Hit Count',
+ inputType: 'text',
+ render: (val: number, segmentCount?: number) => `${val}/${segmentCount || 0}`,
+ },
+ custom_render: {
+ label: 'Custom Render',
+ inputType: 'text',
+ render: (val: string) => `Rendered: ${val}`,
+ },
+ },
+ },
+ }),
+ useLanguages: () => ({
+ en: 'English',
+ zh: 'Chinese',
+ ja: 'Japanese',
+ }),
+}))
+
+// Mock Toast
+vi.mock('@/app/components/base/toast', () => ({
+ default: {
+ notify: vi.fn(),
+ },
+}))
+
+// Mock useCheckMetadataName
+vi.mock('./use-check-metadata-name', () => ({
+ default: () => ({
+ checkName: (name: string) => ({
+ errorMsg: name && /^[a-z][a-z0-9_]*$/.test(name) ? '' : 'Invalid name',
+ }),
+ }),
+}))
+
+describe('useMetadataDocument', () => {
+ const mockDocDetail: DocDetail = {
+ id: 'doc-1',
+ name: 'Test Document',
+ data_source_type: 'upload_file',
+ word_count: 100,
+ language: 'en',
+ hit_count: 50,
+ segment_count: 10,
+ }
+
+ const defaultProps = {
+ datasetId: 'ds-1',
+ documentId: 'doc-1',
+ docDetail: mockDocDetail as Parameters[0]['docDetail'],
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('Hook Initialization', () => {
+ it('should return embeddingAvailable', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+ expect(result.current.embeddingAvailable).toBe(true)
+ })
+
+ it('should return isEdit as false initially', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+ expect(result.current.isEdit).toBe(false)
+ })
+
+ it('should return setIsEdit function', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+ expect(typeof result.current.setIsEdit).toBe('function')
+ })
+
+ it('should return list without built-in items', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+ const hasBuiltIn = result.current.list.some(item => item.id === 'built-in')
+ expect(hasBuiltIn).toBe(false)
+ })
+
+ it('should return builtList with only built-in items', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+ const allBuiltIn = result.current.builtList.every(item => item.id === 'built-in')
+ expect(allBuiltIn).toBe(true)
+ })
+
+ it('should return tempList', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+ expect(Array.isArray(result.current.tempList)).toBe(true)
+ })
+
+ it('should return setTempList function', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+ expect(typeof result.current.setTempList).toBe('function')
+ })
+
+ it('should return hasData based on list length', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+ expect(result.current.hasData).toBe(result.current.list.length > 0)
+ })
+
+ it('should return builtInEnabled', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+ expect(typeof result.current.builtInEnabled).toBe('boolean')
+ })
+
+ it('should return originInfo', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+ expect(Array.isArray(result.current.originInfo)).toBe(true)
+ })
+
+ it('should return technicalParameters', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+ expect(Array.isArray(result.current.technicalParameters)).toBe(true)
+ })
+ })
+
+ describe('Edit Mode', () => {
+ it('should enter edit mode when startToEdit is called', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+
+ act(() => {
+ result.current.startToEdit()
+ })
+
+ expect(result.current.isEdit).toBe(true)
+ })
+
+ it('should exit edit mode when handleCancel is called', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+
+ act(() => {
+ result.current.startToEdit()
+ })
+
+ act(() => {
+ result.current.handleCancel()
+ })
+
+ expect(result.current.isEdit).toBe(false)
+ })
+
+ it('should reset tempList when handleCancel is called', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+
+ act(() => {
+ result.current.startToEdit()
+ })
+
+ const originalLength = result.current.list.length
+
+ act(() => {
+ result.current.setTempList([])
+ })
+
+ act(() => {
+ result.current.handleCancel()
+ })
+
+ expect(result.current.tempList.length).toBe(originalLength)
+ })
+ })
+
+ describe('handleSelectMetaData', () => {
+ it('should add metadata to tempList if not exists', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+
+ act(() => {
+ result.current.startToEdit()
+ })
+
+ const initialLength = result.current.tempList.length
+
+ act(() => {
+ result.current.handleSelectMetaData({
+ id: 'new-id',
+ name: 'new_field',
+ type: DataType.string,
+ value: null,
+ })
+ })
+
+ expect(result.current.tempList.length).toBe(initialLength + 1)
+ })
+
+ it('should not add duplicate metadata', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+
+ act(() => {
+ result.current.startToEdit()
+ })
+
+ const initialLength = result.current.tempList.length
+
+ // Try to add existing item
+ if (result.current.tempList.length > 0) {
+ act(() => {
+ result.current.handleSelectMetaData(result.current.tempList[0])
+ })
+
+ expect(result.current.tempList.length).toBe(initialLength)
+ }
+ })
+ })
+
+ describe('handleAddMetaData', () => {
+ it('should call doAddMetaData with valid name', async () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+
+ await act(async () => {
+ await result.current.handleAddMetaData({
+ name: 'valid_field',
+ type: DataType.string,
+ })
+ })
+
+ expect(mockDoAddMetaData).toHaveBeenCalled()
+ })
+
+ it('should reject invalid name', async () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+
+ await expect(
+ act(async () => {
+ await result.current.handleAddMetaData({
+ name: '',
+ type: DataType.string,
+ })
+ }),
+ ).rejects.toThrow()
+ })
+ })
+
+ describe('handleSave', () => {
+ it('should call mutateAsync to save metadata', async () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+
+ act(() => {
+ result.current.startToEdit()
+ })
+
+ await act(async () => {
+ await result.current.handleSave()
+ })
+
+ expect(mockMutateAsync).toHaveBeenCalled()
+ })
+
+ it('should exit edit mode after save', async () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+
+ act(() => {
+ result.current.startToEdit()
+ })
+
+ await act(async () => {
+ await result.current.handleSave()
+ })
+
+ await waitFor(() => {
+ expect(result.current.isEdit).toBe(false)
+ })
+ })
+ })
+
+ describe('getReadOnlyMetaData - originInfo', () => {
+ it('should return origin info with correct structure', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+
+ expect(result.current.originInfo).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ type: DataType.string,
+ }),
+ ]),
+ )
+ })
+
+ it('should use languageMap for language field (select type)', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+
+ // Find language field in originInfo
+ const languageField = result.current.originInfo.find(
+ item => item.name === 'Language',
+ )
+
+ // If language field exists and docDetail has language 'en', value should be 'English'
+ if (languageField)
+ expect(languageField.value).toBe('English')
+ })
+
+ it('should return dash for empty field values', () => {
+ const docDetailWithEmpty: DocDetail = {
+ id: 'doc-1',
+ name: 'Test Document',
+ data_source_type: 'upload_file',
+ word_count: 100,
+ }
+
+ const { result } = renderHook(() =>
+ useMetadataDocument({
+ ...defaultProps,
+ docDetail: docDetailWithEmpty as Parameters[0]['docDetail'],
+ }),
+ )
+
+ // Check if there's any field with '-' value (meaning empty)
+ const hasEmptyField = result.current.originInfo.some(
+ item => item.value === '-',
+ )
+ // language field should return '-' since it's not set
+ expect(hasEmptyField).toBe(true)
+ })
+
+ it('should return empty object for non-language select fields', () => {
+ // This tests the else branch of getTargetMap where field !== 'language'
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+
+ // The data_source_type field is a text field, not select
+ const sourceTypeField = result.current.originInfo.find(
+ item => item.name === 'Source Type',
+ )
+
+ // It should return the raw value since it's not a select type
+ if (sourceTypeField)
+ expect(sourceTypeField.value).toBe('upload_file')
+ })
+ })
+
+ describe('getReadOnlyMetaData - technicalParameters', () => {
+ it('should return technical parameters with correct structure', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+
+ expect(result.current.technicalParameters).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ type: DataType.string,
+ }),
+ ]),
+ )
+ })
+
+ it('should use render function when available', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+
+ // Find hit_count field which has a render function
+ const hitCountField = result.current.technicalParameters.find(
+ item => item.name === 'Hit Count',
+ )
+
+ // The render function should format as "val/segmentCount"
+ if (hitCountField)
+ expect(hitCountField.value).toBe('50/10')
+ })
+
+ it('should return raw value when no render function', () => {
+ const { result } = renderHook(() => useMetadataDocument(defaultProps))
+
+ // Find word_count field which has no render function
+ const wordCountField = result.current.technicalParameters.find(
+ item => item.name === 'Word Count',
+ )
+
+ if (wordCountField)
+ expect(wordCountField.value).toBe(100)
+ })
+
+ it('should handle fields with render function and undefined segment_count', () => {
+ const docDetailNoSegment: DocDetail = {
+ id: 'doc-1',
+ name: 'Test Document',
+ data_source_type: 'upload_file',
+ word_count: 100,
+ hit_count: 25,
+ }
+
+ const { result } = renderHook(() =>
+ useMetadataDocument({
+ ...defaultProps,
+ docDetail: docDetailNoSegment as Parameters[0]['docDetail'],
+ }),
+ )
+
+ const hitCountField = result.current.technicalParameters.find(
+ item => item.name === 'Hit Count',
+ )
+
+ // Should use 0 as default for segment_count
+ if (hitCountField)
+ expect(hitCountField.value).toBe('25/0')
+ })
+
+ it('should return dash for null/undefined values', () => {
+ const docDetailWithNull: DocDetail = {
+ id: 'doc-1',
+ name: 'Test Document',
+ data_source_type: '',
+ word_count: 0,
+ }
+
+ const { result } = renderHook(() =>
+ useMetadataDocument({
+ ...defaultProps,
+ docDetail: docDetailWithNull as Parameters[0]['docDetail'],
+ }),
+ )
+
+ // 0 should still be shown, but empty string should show '-'
+ const sourceTypeField = result.current.originInfo.find(
+ item => item.name === 'Source Type',
+ )
+
+ if (sourceTypeField)
+ expect(sourceTypeField.value).toBe('-')
+ })
+
+ it('should handle 0 value correctly (not treated as empty)', () => {
+ const docDetailWithZero: DocDetail = {
+ id: 'doc-1',
+ name: 'Test Document',
+ data_source_type: 'upload_file',
+ word_count: 0,
+ }
+
+ const { result } = renderHook(() =>
+ useMetadataDocument({
+ ...defaultProps,
+ docDetail: docDetailWithZero as Parameters[0]['docDetail'],
+ }),
+ )
+
+ // word_count of 0 should still show 0, not '-'
+ const wordCountField = result.current.technicalParameters.find(
+ item => item.name === 'Word Count',
+ )
+
+ if (wordCountField)
+ expect(wordCountField.value).toBe(0)
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle empty docDetail', () => {
+ const { result } = renderHook(() =>
+ useMetadataDocument({
+ ...defaultProps,
+ docDetail: {} as Parameters[0]['docDetail'],
+ }),
+ )
+
+ expect(result.current).toBeDefined()
+ })
+
+ it('should handle different datasetIds', () => {
+ const { result, rerender } = renderHook(
+ props => useMetadataDocument(props),
+ { initialProps: defaultProps },
+ )
+
+ expect(result.current).toBeDefined()
+
+ rerender({ ...defaultProps, datasetId: 'ds-2' })
+
+ expect(result.current).toBeDefined()
+ })
+
+ it('should handle docDetail with all fields', () => {
+ const fullDocDetail: DocDetail = {
+ id: 'doc-1',
+ name: 'Full Document',
+ data_source_type: 'website',
+ word_count: 500,
+ language: 'zh',
+ hit_count: 100,
+ segment_count: 20,
+ }
+
+ const { result } = renderHook(() =>
+ useMetadataDocument({
+ ...defaultProps,
+ docDetail: fullDocDetail as Parameters[0]['docDetail'],
+ }),
+ )
+
+ // Language should be mapped
+ const languageField = result.current.originInfo.find(
+ item => item.name === 'Language',
+ )
+ if (languageField)
+ expect(languageField.value).toBe('Chinese')
+
+ // Hit count should be rendered
+ const hitCountField = result.current.technicalParameters.find(
+ item => item.name === 'Hit Count',
+ )
+ if (hitCountField)
+ expect(hitCountField.value).toBe('100/20')
+ })
+
+ it('should handle unknown language', () => {
+ const unknownLangDetail: DocDetail = {
+ id: 'doc-1',
+ name: 'Unknown Lang Document',
+ data_source_type: 'upload_file',
+ word_count: 100,
+ language: 'unknown_lang',
+ }
+
+ const { result } = renderHook(() =>
+ useMetadataDocument({
+ ...defaultProps,
+ docDetail: unknownLangDetail as Parameters[0]['docDetail'],
+ }),
+ )
+
+ // Unknown language should return undefined from the map
+ const languageField = result.current.originInfo.find(
+ item => item.name === 'Language',
+ )
+ // When language is not in map, it returns undefined
+ expect(languageField?.value).toBeUndefined()
+ })
+ })
+})
diff --git a/web/app/components/datasets/metadata/metadata-dataset/create-content.spec.tsx b/web/app/components/datasets/metadata/metadata-dataset/create-content.spec.tsx
new file mode 100644
index 0000000000..4931ab4ebc
--- /dev/null
+++ b/web/app/components/datasets/metadata/metadata-dataset/create-content.spec.tsx
@@ -0,0 +1,268 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { DataType } from '../types'
+import CreateContent from './create-content'
+
+type ModalLikeWrapProps = {
+ children: React.ReactNode
+ title: string
+ onClose?: () => void
+ onConfirm: () => void
+ beforeHeader?: React.ReactNode
+}
+
+type OptionCardProps = {
+ title: string
+ selected: boolean
+ onSelect: () => void
+}
+
+type FieldProps = {
+ label: string
+ children: React.ReactNode
+}
+
+// Mock ModalLikeWrap
+vi.mock('../../../base/modal-like-wrap', () => ({
+ default: ({ children, title, onClose, onConfirm, beforeHeader }: ModalLikeWrapProps) => (
+
+
{title}
+ {beforeHeader &&
{beforeHeader}
}
+
{children}
+
+
+
+
+ {children}
+
+ ),
+}))
+
+describe('CreateContent', () => {
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ const handleSave = vi.fn()
+ render()
+ expect(screen.getByTestId('modal-wrap')).toBeInTheDocument()
+ })
+
+ it('should render modal title', () => {
+ const handleSave = vi.fn()
+ render()
+ expect(screen.getByTestId('modal-title')).toBeInTheDocument()
+ })
+
+ it('should render type selection options', () => {
+ const handleSave = vi.fn()
+ render()
+ expect(screen.getByTestId('option-string')).toBeInTheDocument()
+ expect(screen.getByTestId('option-number')).toBeInTheDocument()
+ expect(screen.getByTestId('option-time')).toBeInTheDocument()
+ })
+
+ it('should render name input field', () => {
+ const handleSave = vi.fn()
+ render()
+ expect(screen.getByRole('textbox')).toBeInTheDocument()
+ })
+
+ it('should render confirm button', () => {
+ const handleSave = vi.fn()
+ render()
+ expect(screen.getByTestId('confirm-btn')).toBeInTheDocument()
+ })
+
+ it('should render close button', () => {
+ const handleSave = vi.fn()
+ render()
+ expect(screen.getByTestId('close-btn')).toBeInTheDocument()
+ })
+ })
+
+ describe('Type Selection', () => {
+ it('should default to string type', () => {
+ const handleSave = vi.fn()
+ render()
+ expect(screen.getByTestId('option-string')).toHaveAttribute('data-selected', 'true')
+ })
+
+ it('should select number type when clicked', () => {
+ const handleSave = vi.fn()
+ render()
+
+ fireEvent.click(screen.getByTestId('option-number'))
+
+ expect(screen.getByTestId('option-number')).toHaveAttribute('data-selected', 'true')
+ })
+
+ it('should select time type when clicked', () => {
+ const handleSave = vi.fn()
+ render()
+
+ fireEvent.click(screen.getByTestId('option-time'))
+
+ expect(screen.getByTestId('option-time')).toHaveAttribute('data-selected', 'true')
+ })
+
+ it('should deselect previous type when new type is selected', () => {
+ const handleSave = vi.fn()
+ render()
+
+ // Initially string is selected
+ expect(screen.getByTestId('option-string')).toHaveAttribute('data-selected', 'true')
+
+ // Select number
+ fireEvent.click(screen.getByTestId('option-number'))
+
+ expect(screen.getByTestId('option-string')).toHaveAttribute('data-selected', 'false')
+ expect(screen.getByTestId('option-number')).toHaveAttribute('data-selected', 'true')
+ })
+ })
+
+ describe('Name Input', () => {
+ it('should update name when typing', () => {
+ const handleSave = vi.fn()
+ render()
+
+ const input = screen.getByRole('textbox')
+ fireEvent.change(input, { target: { value: 'new_field' } })
+
+ expect(input).toHaveValue('new_field')
+ })
+
+ it('should start with empty name', () => {
+ const handleSave = vi.fn()
+ render()
+
+ expect(screen.getByRole('textbox')).toHaveValue('')
+ })
+ })
+
+ describe('User Interactions', () => {
+ it('should call onSave with type and name when confirmed', () => {
+ const handleSave = vi.fn()
+ render()
+
+ const input = screen.getByRole('textbox')
+ fireEvent.change(input, { target: { value: 'test_field' } })
+ fireEvent.click(screen.getByTestId('confirm-btn'))
+
+ expect(handleSave).toHaveBeenCalledWith({
+ type: DataType.string,
+ name: 'test_field',
+ })
+ })
+
+ it('should call onSave with correct type after changing type', () => {
+ const handleSave = vi.fn()
+ render()
+
+ fireEvent.click(screen.getByTestId('option-number'))
+ const input = screen.getByRole('textbox')
+ fireEvent.change(input, { target: { value: 'num_field' } })
+ fireEvent.click(screen.getByTestId('confirm-btn'))
+
+ expect(handleSave).toHaveBeenCalledWith({
+ type: DataType.number,
+ name: 'num_field',
+ })
+ })
+
+ it('should call onClose when close button is clicked', () => {
+ const handleSave = vi.fn()
+ const handleClose = vi.fn()
+ render()
+
+ fireEvent.click(screen.getByTestId('close-btn'))
+
+ expect(handleClose).toHaveBeenCalled()
+ })
+ })
+
+ describe('Back Button', () => {
+ it('should show back button when hasBack is true', () => {
+ const handleSave = vi.fn()
+ render()
+
+ expect(screen.getByTestId('before-header')).toBeInTheDocument()
+ })
+
+ it('should not show back button when hasBack is false', () => {
+ const handleSave = vi.fn()
+ render()
+
+ expect(screen.queryByTestId('before-header')).not.toBeInTheDocument()
+ })
+
+ it('should call onBack when back button is clicked', () => {
+ const handleSave = vi.fn()
+ const handleBack = vi.fn()
+ render()
+
+ const backButton = screen.getByTestId('before-header')
+ // Find the clickable element inside
+ const clickable = backButton.querySelector('.cursor-pointer') || backButton.firstChild
+ if (clickable)
+ fireEvent.click(clickable)
+
+ // The back functionality is tested through the actual implementation
+ expect(screen.getByTestId('before-header')).toBeInTheDocument()
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle empty name submission', () => {
+ const handleSave = vi.fn()
+ render()
+
+ fireEvent.click(screen.getByTestId('confirm-btn'))
+
+ expect(handleSave).toHaveBeenCalledWith({
+ type: DataType.string,
+ name: '',
+ })
+ })
+
+ it('should handle type cycling', () => {
+ const handleSave = vi.fn()
+ render()
+
+ // Cycle through all types
+ fireEvent.click(screen.getByTestId('option-number'))
+ fireEvent.click(screen.getByTestId('option-time'))
+ fireEvent.click(screen.getByTestId('option-string'))
+
+ expect(screen.getByTestId('option-string')).toHaveAttribute('data-selected', 'true')
+ })
+
+ it('should handle special characters in name', () => {
+ const handleSave = vi.fn()
+ render()
+
+ const input = screen.getByRole('textbox')
+ fireEvent.change(input, { target: { value: 'test_field_123' } })
+
+ expect(input).toHaveValue('test_field_123')
+ })
+ })
+})
diff --git a/web/app/components/datasets/metadata/metadata-dataset/create-metadata-modal.spec.tsx b/web/app/components/datasets/metadata/metadata-dataset/create-metadata-modal.spec.tsx
new file mode 100644
index 0000000000..5e86521a87
--- /dev/null
+++ b/web/app/components/datasets/metadata/metadata-dataset/create-metadata-modal.spec.tsx
@@ -0,0 +1,246 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { DataType } from '../types'
+import CreateMetadataModal from './create-metadata-modal'
+
+type PortalProps = {
+ children: React.ReactNode
+ open: boolean
+}
+
+type TriggerProps = {
+ children: React.ReactNode
+ onClick: () => void
+}
+
+type ContentProps = {
+ children: React.ReactNode
+ className?: string
+}
+
+type CreateContentProps = {
+ onSave: (data: { type: DataType, name: string }) => void
+ onClose?: () => void
+ onBack?: () => void
+ hasBack?: boolean
+}
+
+// Mock PortalToFollowElem components
+vi.mock('../../../base/portal-to-follow-elem', () => ({
+ PortalToFollowElem: ({ children, open }: PortalProps) => (
+ {children}
+ ),
+ PortalToFollowElemTrigger: ({ children, onClick }: TriggerProps) => (
+ {children}
+ ),
+ PortalToFollowElemContent: ({ children, className }: ContentProps) => (
+ {children}
+ ),
+}))
+
+// Mock CreateContent component
+vi.mock('./create-content', () => ({
+ default: ({ onSave, onClose, onBack, hasBack }: CreateContentProps) => (
+
+ {String(hasBack)}
+
+
+ {hasBack && }
+
+ ),
+}))
+
+describe('CreateMetadataModal', () => {
+ const mockTrigger =
+
+ describe('Rendering', () => {
+ it('should render trigger when closed', () => {
+ render(
+ ,
+ )
+ // Portal wrapper should exist but closed
+ expect(screen.getByTestId('portal-wrapper')).toBeInTheDocument()
+ expect(screen.getByTestId('portal-wrapper')).toHaveAttribute('data-open', 'false')
+ })
+
+ it('should render content when open', () => {
+ render(
+ ,
+ )
+ expect(screen.getByTestId('portal-wrapper')).toBeInTheDocument()
+ expect(screen.getByTestId('create-content')).toBeInTheDocument()
+ })
+
+ it('should render trigger element', () => {
+ render(
+ ,
+ )
+ expect(screen.getByTestId('trigger-button')).toBeInTheDocument()
+ })
+ })
+
+ describe('Props', () => {
+ it('should pass hasBack to CreateContent', () => {
+ render(
+ ,
+ )
+ expect(screen.getByTestId('has-back')).toHaveTextContent('true')
+ })
+
+ it('should pass hasBack=undefined when not provided', () => {
+ render(
+ ,
+ )
+ expect(screen.getByTestId('has-back')).toHaveTextContent('undefined')
+ })
+
+ it('should accept custom popupLeft', () => {
+ render(
+ ,
+ )
+ expect(screen.getByTestId('portal-wrapper')).toBeInTheDocument()
+ })
+ })
+
+ describe('User Interactions', () => {
+ it('should toggle open state when trigger is clicked', () => {
+ const setOpen = vi.fn()
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByTestId('portal-trigger'))
+
+ expect(setOpen).toHaveBeenCalledWith(true)
+ })
+
+ it('should call onSave when save button is clicked', () => {
+ const handleSave = vi.fn()
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByTestId('save-btn'))
+
+ expect(handleSave).toHaveBeenCalledWith({
+ type: DataType.string,
+ name: 'test',
+ })
+ })
+
+ it('should close modal when close button is clicked', () => {
+ const setOpen = vi.fn()
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByTestId('close-btn'))
+
+ expect(setOpen).toHaveBeenCalledWith(false)
+ })
+
+ it('should close modal when back button is clicked', () => {
+ const setOpen = vi.fn()
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByTestId('back-btn'))
+
+ expect(setOpen).toHaveBeenCalledWith(false)
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle switching open state', () => {
+ const { rerender } = render(
+ ,
+ )
+
+ expect(screen.getByTestId('portal-wrapper')).toHaveAttribute('data-open', 'false')
+
+ rerender(
+ ,
+ )
+
+ expect(screen.getByTestId('portal-wrapper')).toHaveAttribute('data-open', 'true')
+ })
+
+ it('should handle different trigger elements', () => {
+ const customTrigger = Custom
+ render(
+ ,
+ )
+
+ expect(screen.getByTestId('custom-trigger')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.spec.tsx b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.spec.tsx
new file mode 100644
index 0000000000..fc1f0d0990
--- /dev/null
+++ b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.spec.tsx
@@ -0,0 +1,587 @@
+import type { BuiltInMetadataItem, MetadataItemWithValueLength } from '../types'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { DataType } from '../types'
+import DatasetMetadataDrawer from './dataset-metadata-drawer'
+
+// Mock service/API calls
+vi.mock('@/service/knowledge/use-metadata', () => ({
+ useDatasetMetaData: () => ({
+ data: {
+ doc_metadata: [
+ { id: '1', name: 'existing_field', type: DataType.string },
+ ],
+ },
+ }),
+}))
+
+// Mock check name hook
+vi.mock('../hooks/use-check-metadata-name', () => ({
+ default: () => ({
+ checkName: () => ({ errorMsg: '' }),
+ }),
+}))
+
+// Mock Toast
+const mockToastNotify = vi.fn()
+vi.mock('@/app/components/base/toast', () => ({
+ default: {
+ notify: (args: unknown) => mockToastNotify(args),
+ },
+}))
+
+// Type definitions for mock props
+type CreateModalProps = {
+ open: boolean
+ setOpen: (open: boolean) => void
+ trigger: React.ReactNode
+ onSave: (data: BuiltInMetadataItem) => void
+}
+
+// Mock CreateModal to expose callbacks
+vi.mock('@/app/components/datasets/metadata/metadata-dataset/create-metadata-modal', () => ({
+ default: ({ open, setOpen, trigger, onSave }: CreateModalProps) => (
+
+
setOpen(true)}>{trigger}
+ {open && (
+
+
+
+
+ )}
+
+ Nested Content
+
+ ,
+ )
+ expect(screen.getByTestId('complex-child')).toBeInTheDocument()
+ expect(screen.getByText('Nested Content')).toBeInTheDocument()
+ })
+
+ it('should render with multiple children', () => {
+ render(
+
+ First
+ Second
+ ,
+ )
+ expect(screen.getByText('First')).toBeInTheDocument()
+ expect(screen.getByText('Second')).toBeInTheDocument()
+ })
+
+ it('should render different labels correctly', () => {
+ const { rerender } = render(Content)
+ expect(screen.getByText('First Label')).toBeInTheDocument()
+
+ rerender(Content)
+ expect(screen.getByText('Second Label')).toBeInTheDocument()
+ })
+ })
+
+ describe('Layout', () => {
+ it('should have label above content', () => {
+ const { container } = render(Content)
+ const wrapper = container.firstChild as HTMLElement
+ expect(wrapper?.children).toHaveLength(2)
+ })
+
+ it('should render label element first', () => {
+ const { container } = render(Content)
+ const wrapper = container.firstChild as HTMLElement
+ const firstChild = wrapper?.firstChild as HTMLElement
+ expect(firstChild).toHaveClass('system-sm-semibold')
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should render with undefined className', () => {
+ render(Content)
+ expect(screen.getByText('Content')).toBeInTheDocument()
+ })
+
+ it('should render with empty className', () => {
+ render(Content)
+ expect(screen.getByText('Content')).toBeInTheDocument()
+ })
+
+ it('should render with empty label', () => {
+ render(Content)
+ expect(screen.getByText('Content')).toBeInTheDocument()
+ })
+
+ it('should render with empty children', () => {
+ const { container } = render()
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render with null children', () => {
+ const { container } = render({null})
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render with number as children', () => {
+ render({42})
+ expect(screen.getByText('42')).toBeInTheDocument()
+ })
+
+ it('should handle special characters in label', () => {
+ render(Content)
+ expect(screen.getByText('Label & "chars"')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/metadata/metadata-dataset/select-metadata-modal.spec.tsx b/web/app/components/datasets/metadata/metadata-dataset/select-metadata-modal.spec.tsx
new file mode 100644
index 0000000000..6e565c0b07
--- /dev/null
+++ b/web/app/components/datasets/metadata/metadata-dataset/select-metadata-modal.spec.tsx
@@ -0,0 +1,348 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { DataType } from '../types'
+import SelectMetadataModal from './select-metadata-modal'
+
+type MetadataItem = {
+ id: string
+ name: string
+ type: DataType
+}
+
+type PortalProps = {
+ children: React.ReactNode
+ open: boolean
+}
+
+type TriggerProps = {
+ children: React.ReactNode
+ onClick: () => void
+}
+
+type ContentProps = {
+ children: React.ReactNode
+}
+
+type SelectMetadataProps = {
+ onSelect: (item: MetadataItem) => void
+ onNew: () => void
+ onManage: () => void
+ list: MetadataItem[]
+}
+
+type CreateContentProps = {
+ onSave: (data: { type: DataType, name: string }) => void
+ onBack?: () => void
+ onClose?: () => void
+ hasBack?: boolean
+}
+
+// Mock useDatasetMetaData hook
+vi.mock('@/service/knowledge/use-metadata', () => ({
+ useDatasetMetaData: () => ({
+ data: {
+ doc_metadata: [
+ { id: '1', name: 'field_one', type: DataType.string },
+ { id: '2', name: 'field_two', type: DataType.number },
+ ],
+ },
+ }),
+}))
+
+// Mock PortalToFollowElem components
+vi.mock('../../../base/portal-to-follow-elem', () => ({
+ PortalToFollowElem: ({ children, open }: PortalProps) => (
+ {children}
+ ),
+ PortalToFollowElemTrigger: ({ children, onClick }: TriggerProps) => (
+ {children}
+ ),
+ PortalToFollowElemContent: ({ children }: ContentProps) => (
+ {children}
+ ),
+}))
+
+// Mock SelectMetadata component
+vi.mock('./select-metadata', () => ({
+ default: ({ onSelect, onNew, onManage, list }: SelectMetadataProps) => (
+
+ {list?.length || 0}
+
+
+
+
+ ),
+}))
+
+// Mock CreateContent component
+vi.mock('./create-content', () => ({
+ default: ({ onSave, onBack, onClose, hasBack }: CreateContentProps) => (
+
+
+ {hasBack && }
+
+
+ ),
+}))
+
+describe('SelectMetadataModal', () => {
+ const mockTrigger =
+
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ render(
+ ,
+ )
+ expect(screen.getByTestId('portal-wrapper')).toBeInTheDocument()
+ })
+
+ it('should render trigger element', () => {
+ render(
+ ,
+ )
+ expect(screen.getByTestId('trigger-button')).toBeInTheDocument()
+ })
+
+ it('should render SelectMetadata by default', () => {
+ render(
+ ,
+ )
+ expect(screen.getByTestId('select-metadata')).toBeInTheDocument()
+ })
+
+ it('should pass dataset metadata to SelectMetadata', () => {
+ render(
+ ,
+ )
+ expect(screen.getByTestId('list-count')).toHaveTextContent('2')
+ })
+ })
+
+ describe('User Interactions', () => {
+ it('should toggle open state when trigger is clicked', () => {
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByTestId('portal-trigger'))
+
+ // State should toggle
+ expect(screen.getByTestId('portal-wrapper')).toBeInTheDocument()
+ })
+
+ it('should call onSelect and close when item is selected', () => {
+ const handleSelect = vi.fn()
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByTestId('select-item'))
+
+ expect(handleSelect).toHaveBeenCalledWith({
+ id: '1',
+ name: 'field_one',
+ type: DataType.string,
+ })
+ })
+
+ it('should switch to create step when new button is clicked', async () => {
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByTestId('new-btn'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('create-content')).toBeInTheDocument()
+ })
+ })
+
+ it('should call onManage when manage button is clicked', () => {
+ const handleManage = vi.fn()
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByTestId('manage-btn'))
+
+ expect(handleManage).toHaveBeenCalled()
+ })
+ })
+
+ describe('Create Flow', () => {
+ it('should switch back to select when back is clicked in create step', async () => {
+ render(
+ ,
+ )
+
+ // Go to create step
+ fireEvent.click(screen.getByTestId('new-btn'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('create-content')).toBeInTheDocument()
+ })
+
+ // Go back to select step
+ fireEvent.click(screen.getByTestId('back-btn'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('select-metadata')).toBeInTheDocument()
+ })
+ })
+
+ it('should call onSave and return to select step when save is clicked', async () => {
+ const handleSave = vi.fn().mockResolvedValue(undefined)
+ render(
+ ,
+ )
+
+ // Go to create step
+ fireEvent.click(screen.getByTestId('new-btn'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('create-content')).toBeInTheDocument()
+ })
+
+ // Save new metadata
+ fireEvent.click(screen.getByTestId('save-btn'))
+
+ await waitFor(() => {
+ expect(handleSave).toHaveBeenCalledWith({
+ type: DataType.string,
+ name: 'new_field',
+ })
+ })
+ })
+ })
+
+ describe('Props', () => {
+ it('should accept custom popupPlacement', () => {
+ render(
+ ,
+ )
+ expect(screen.getByTestId('portal-wrapper')).toBeInTheDocument()
+ })
+
+ it('should accept custom popupOffset', () => {
+ render(
+ ,
+ )
+ expect(screen.getByTestId('portal-wrapper')).toBeInTheDocument()
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle different datasetIds', () => {
+ const { rerender } = render(
+ ,
+ )
+
+ expect(screen.getByTestId('portal-wrapper')).toBeInTheDocument()
+
+ rerender(
+ ,
+ )
+
+ expect(screen.getByTestId('portal-wrapper')).toBeInTheDocument()
+ })
+
+ it('should handle empty trigger', () => {
+ render(
+ }
+ onSelect={vi.fn()}
+ onSave={vi.fn()}
+ onManage={vi.fn()}
+ />,
+ )
+ expect(screen.getByTestId('empty-trigger')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/metadata/metadata-dataset/select-metadata.spec.tsx b/web/app/components/datasets/metadata/metadata-dataset/select-metadata.spec.tsx
new file mode 100644
index 0000000000..2602fd145f
--- /dev/null
+++ b/web/app/components/datasets/metadata/metadata-dataset/select-metadata.spec.tsx
@@ -0,0 +1,332 @@
+import type { MetadataItem } from '../types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { DataType } from '../types'
+import SelectMetadata from './select-metadata'
+
+type IconProps = {
+ className?: string
+}
+
+// Mock getIcon utility
+vi.mock('../utils/get-icon', () => ({
+ getIcon: () => (props: IconProps) => Icon,
+}))
+
+describe('SelectMetadata', () => {
+ const mockList: MetadataItem[] = [
+ { id: '1', name: 'field_one', type: DataType.string },
+ { id: '2', name: 'field_two', type: DataType.number },
+ { id: '3', name: 'field_three', type: DataType.time },
+ ]
+
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ const { container } = render(
+ ,
+ )
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render search input', () => {
+ render(
+ ,
+ )
+ expect(screen.getByRole('textbox')).toBeInTheDocument()
+ })
+
+ it('should render all metadata items', () => {
+ render(
+ ,
+ )
+ expect(screen.getByText('field_one')).toBeInTheDocument()
+ expect(screen.getByText('field_two')).toBeInTheDocument()
+ expect(screen.getByText('field_three')).toBeInTheDocument()
+ })
+
+ it('should render new action button', () => {
+ render(
+ ,
+ )
+ // New action button should be present (from i18n)
+ expect(screen.getByText(/new/i)).toBeInTheDocument()
+ })
+
+ it('should render manage action button', () => {
+ render(
+ ,
+ )
+ // Manage action button should be present (from i18n)
+ expect(screen.getByText(/manage/i)).toBeInTheDocument()
+ })
+
+ it('should display type for each item', () => {
+ render(
+ ,
+ )
+ expect(screen.getAllByText(DataType.string).length).toBeGreaterThan(0)
+ expect(screen.getAllByText(DataType.number).length).toBeGreaterThan(0)
+ expect(screen.getAllByText(DataType.time).length).toBeGreaterThan(0)
+ })
+ })
+
+ describe('Search Functionality', () => {
+ it('should filter items based on search query', () => {
+ render(
+ ,
+ )
+
+ const searchInput = screen.getByRole('textbox')
+ fireEvent.change(searchInput, { target: { value: 'one' } })
+
+ expect(screen.getByText('field_one')).toBeInTheDocument()
+ expect(screen.queryByText('field_two')).not.toBeInTheDocument()
+ expect(screen.queryByText('field_three')).not.toBeInTheDocument()
+ })
+
+ it('should be case insensitive search', () => {
+ render(
+ ,
+ )
+
+ const searchInput = screen.getByRole('textbox')
+ fireEvent.change(searchInput, { target: { value: 'ONE' } })
+
+ expect(screen.getByText('field_one')).toBeInTheDocument()
+ })
+
+ it('should show all items when search is cleared', () => {
+ render(
+ ,
+ )
+
+ const searchInput = screen.getByRole('textbox')
+
+ // Search for something
+ fireEvent.change(searchInput, { target: { value: 'one' } })
+ expect(screen.queryByText('field_two')).not.toBeInTheDocument()
+
+ // Clear search
+ fireEvent.change(searchInput, { target: { value: '' } })
+ expect(screen.getByText('field_two')).toBeInTheDocument()
+ })
+
+ it('should show no results when search matches nothing', () => {
+ render(
+ ,
+ )
+
+ const searchInput = screen.getByRole('textbox')
+ fireEvent.change(searchInput, { target: { value: 'xyz' } })
+
+ expect(screen.queryByText('field_one')).not.toBeInTheDocument()
+ expect(screen.queryByText('field_two')).not.toBeInTheDocument()
+ expect(screen.queryByText('field_three')).not.toBeInTheDocument()
+ })
+ })
+
+ describe('User Interactions', () => {
+ it('should call onSelect with item data when item is clicked', () => {
+ const handleSelect = vi.fn()
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByText('field_one'))
+
+ expect(handleSelect).toHaveBeenCalledWith({
+ id: '1',
+ name: 'field_one',
+ type: DataType.string,
+ })
+ })
+
+ it('should call onNew when new button is clicked', () => {
+ const handleNew = vi.fn()
+ render(
+ ,
+ )
+
+ // Find and click the new action button
+ const newButton = screen.getByText(/new/i)
+ fireEvent.click(newButton.closest('div') || newButton)
+
+ expect(handleNew).toHaveBeenCalled()
+ })
+
+ it('should call onManage when manage button is clicked', () => {
+ const handleManage = vi.fn()
+ render(
+ ,
+ )
+
+ // Find and click the manage action button
+ const manageButton = screen.getByText(/manage/i)
+ fireEvent.click(manageButton.closest('div') || manageButton)
+
+ expect(handleManage).toHaveBeenCalled()
+ })
+ })
+
+ describe('Empty State', () => {
+ it('should render empty list', () => {
+ const { container } = render(
+ ,
+ )
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should still show new and manage buttons with empty list', () => {
+ render(
+ ,
+ )
+ expect(screen.getByText(/new/i)).toBeInTheDocument()
+ expect(screen.getByText(/manage/i)).toBeInTheDocument()
+ })
+ })
+
+ describe('Styling', () => {
+ it('should have correct container styling', () => {
+ const { container } = render(
+ ,
+ )
+ expect(container.firstChild).toHaveClass('w-[320px]', 'rounded-xl')
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle single item list', () => {
+ const singleItem: MetadataItem[] = [
+ { id: '1', name: 'only_one', type: DataType.string },
+ ]
+ render(
+ ,
+ )
+ expect(screen.getByText('only_one')).toBeInTheDocument()
+ })
+
+ it('should handle item with long name', () => {
+ const longNameItem: MetadataItem[] = [
+ { id: '1', name: 'this_is_a_very_long_field_name_that_might_overflow', type: DataType.string },
+ ]
+ render(
+ ,
+ )
+ expect(screen.getByText('this_is_a_very_long_field_name_that_might_overflow')).toBeInTheDocument()
+ })
+
+ it('should handle rapid search input changes', () => {
+ render(
+ ,
+ )
+
+ const searchInput = screen.getByRole('textbox')
+
+ // Rapid typing
+ fireEvent.change(searchInput, { target: { value: 'f' } })
+ fireEvent.change(searchInput, { target: { value: 'fi' } })
+ fireEvent.change(searchInput, { target: { value: 'fie' } })
+ fireEvent.change(searchInput, { target: { value: 'fiel' } })
+ fireEvent.change(searchInput, { target: { value: 'field' } })
+
+ expect(screen.getByText('field_one')).toBeInTheDocument()
+ expect(screen.getByText('field_two')).toBeInTheDocument()
+ expect(screen.getByText('field_three')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/metadata/metadata-document/field.spec.tsx b/web/app/components/datasets/metadata/metadata-document/field.spec.tsx
new file mode 100644
index 0000000000..50aad1a6cc
--- /dev/null
+++ b/web/app/components/datasets/metadata/metadata-document/field.spec.tsx
@@ -0,0 +1,113 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import Field from './field'
+
+describe('Field', () => {
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ render(Content)
+ expect(screen.getByText('Test Label')).toBeInTheDocument()
+ expect(screen.getByText('Content')).toBeInTheDocument()
+ })
+
+ it('should render label with correct styling', () => {
+ render(Content)
+ const labelElement = screen.getByText('My Label')
+ expect(labelElement).toHaveClass('system-xs-medium', 'w-[128px]', 'shrink-0', 'truncate', 'py-1', 'text-text-tertiary')
+ })
+
+ it('should render children in correct container', () => {
+ const { container } = render(Child Content)
+ // The children are wrapped in a div with w-[244px] class
+ const contentWrapper = container.querySelector('.w-\\[244px\\]')
+ expect(contentWrapper).toBeInTheDocument()
+ expect(contentWrapper).toHaveClass('shrink-0')
+ })
+ })
+
+ describe('Props', () => {
+ it('should render with string children', () => {
+ render(Simple Text)
+ expect(screen.getByText('Simple Text')).toBeInTheDocument()
+ })
+
+ it('should render with complex children', () => {
+ render(
+
+
+ Nested Content
+
+ ,
+ )
+ expect(screen.getByTestId('complex-child')).toBeInTheDocument()
+ expect(screen.getByText('Nested Content')).toBeInTheDocument()
+ })
+
+ it('should render with multiple children', () => {
+ render(
+
+ First
+ Second
+ ,
+ )
+ expect(screen.getByText('First')).toBeInTheDocument()
+ expect(screen.getByText('Second')).toBeInTheDocument()
+ })
+
+ it('should render different labels correctly', () => {
+ const { rerender } = render(Content)
+ expect(screen.getByText('First Label')).toBeInTheDocument()
+
+ rerender(Content)
+ expect(screen.getByText('Second Label')).toBeInTheDocument()
+ })
+ })
+
+ describe('Layout', () => {
+ it('should have flex layout with space between elements', () => {
+ const { container } = render(Content)
+ const wrapper = container.firstChild
+ expect(wrapper).toHaveClass('flex', 'items-start', 'space-x-2')
+ })
+
+ it('should render label and content side by side', () => {
+ const { container } = render(Content)
+ const wrapper = container.firstChild as HTMLElement
+ expect(wrapper?.children).toHaveLength(2)
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should render with empty label', () => {
+ render(Content)
+ expect(screen.getByText('Content')).toBeInTheDocument()
+ })
+
+ it('should render with long label (truncation)', () => {
+ const longLabel = 'This is a very long label that should be truncated'
+ render(Content)
+ const labelElement = screen.getByText(longLabel)
+ expect(labelElement).toHaveClass('truncate')
+ })
+
+ it('should render with empty children', () => {
+ const { container } = render()
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render with null children', () => {
+ const { container } = render({null})
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render with number as children', () => {
+ render({42})
+ expect(screen.getByText('42')).toBeInTheDocument()
+ })
+
+ it('should handle special characters in label', () => {
+ render(Content)
+ expect(screen.getByText('Label & "chars"')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/metadata/metadata-document/index.spec.tsx b/web/app/components/datasets/metadata/metadata-document/index.spec.tsx
new file mode 100644
index 0000000000..f80b6ca010
--- /dev/null
+++ b/web/app/components/datasets/metadata/metadata-document/index.spec.tsx
@@ -0,0 +1,752 @@
+import type { MetadataItemWithValue } from '../types'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { DataType } from '../types'
+import MetadataDocument from './index'
+
+type MockHookReturn = {
+ embeddingAvailable: boolean
+ isEdit: boolean
+ setIsEdit: ReturnType
+ list: MetadataItemWithValue[]
+ tempList: MetadataItemWithValue[]
+ setTempList: ReturnType
+ handleSelectMetaData: ReturnType
+ handleAddMetaData: ReturnType
+ hasData: boolean
+ builtList: MetadataItemWithValue[]
+ builtInEnabled: boolean
+ startToEdit: ReturnType
+ handleSave: ReturnType
+ handleCancel: ReturnType
+ originInfo: MetadataItemWithValue[]
+ technicalParameters: MetadataItemWithValue[]
+}
+
+// Mock useMetadataDocument hook - need to control state
+const mockUseMetadataDocument = vi.fn<() => MockHookReturn>()
+vi.mock('../hooks/use-metadata-document', () => ({
+ default: () => mockUseMetadataDocument(),
+}))
+
+// Mock service calls
+vi.mock('@/service/knowledge/use-metadata', () => ({
+ useDatasetMetaData: () => ({
+ data: {
+ doc_metadata: [],
+ },
+ }),
+}))
+
+// Mock check name hook
+vi.mock('../hooks/use-check-metadata-name', () => ({
+ default: () => ({
+ checkName: () => ({ errorMsg: '' }),
+ }),
+}))
+
+// Mock next/navigation
+vi.mock('next/navigation', () => ({
+ useRouter: () => ({
+ push: vi.fn(),
+ }),
+}))
+
+describe('MetadataDocument', () => {
+ const mockDocDetail = {
+ id: 'doc-1',
+ name: 'Test Document',
+ data_source_type: 'upload_file',
+ indexing_status: 'completed',
+ created_at: 1609459200,
+ word_count: 100,
+ }
+
+ const mockList: MetadataItemWithValue[] = [
+ { id: '1', name: 'field_one', type: DataType.string, value: 'Value 1' },
+ { id: '2', name: 'field_two', type: DataType.number, value: 42 },
+ ]
+
+ const defaultHookReturn: MockHookReturn = {
+ embeddingAvailable: true,
+ isEdit: false,
+ setIsEdit: vi.fn(),
+ list: mockList,
+ tempList: mockList,
+ setTempList: vi.fn(),
+ handleSelectMetaData: vi.fn(),
+ handleAddMetaData: vi.fn(),
+ hasData: true,
+ builtList: [],
+ builtInEnabled: false,
+ startToEdit: vi.fn(),
+ handleSave: vi.fn(),
+ handleCancel: vi.fn(),
+ originInfo: [],
+ technicalParameters: [],
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockUseMetadataDocument.mockReturnValue(defaultHookReturn)
+ })
+
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ const { container } = render(
+ [0]['docDetail']}
+ />,
+ )
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render metadata fields when hasData is true', () => {
+ render(
+ [0]['docDetail']}
+ />,
+ )
+ expect(screen.getByText('field_one')).toBeInTheDocument()
+ expect(screen.getByText('field_two')).toBeInTheDocument()
+ })
+
+ it('should render no-data state when hasData is false and not in edit mode', () => {
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ hasData: false,
+ list: [],
+ tempList: [],
+ isEdit: false,
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+ expect(screen.getAllByText(/metadata/i).length).toBeGreaterThan(0)
+ })
+
+ it('should render edit UI when in edit mode', () => {
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ isEdit: true,
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ expect(screen.getByText(/save/i)).toBeInTheDocument()
+ expect(screen.getByText(/cancel/i)).toBeInTheDocument()
+ })
+
+ it('should render built-in section when builtInEnabled is true', () => {
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ builtInEnabled: true,
+ builtList: [{ id: 'built-in', name: 'created_at', type: DataType.time, value: 1609459200 }],
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ expect(screen.getByText('created_at')).toBeInTheDocument()
+ })
+
+ it('should render divider when builtInEnabled is true', () => {
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ builtInEnabled: true,
+ builtList: [{ id: 'built-in', name: 'created_at', type: DataType.time, value: 1609459200 }],
+ })
+
+ const { container } = render(
+ [0]['docDetail']}
+ />,
+ )
+
+ const divider = container.querySelector('[class*="bg-gradient"]')
+ expect(divider).toBeInTheDocument()
+ })
+
+ it('should render origin info section', () => {
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ originInfo: [{ id: 'origin-1', name: 'source', type: DataType.string, value: 'upload' }],
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ expect(screen.getByText('source')).toBeInTheDocument()
+ })
+
+ it('should render technical parameters section', () => {
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ technicalParameters: [{ id: 'tech-1', name: 'word_count', type: DataType.number, value: 100 }],
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ expect(screen.getByText('word_count')).toBeInTheDocument()
+ })
+
+ it('should render all sections together', () => {
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ builtInEnabled: true,
+ builtList: [{ id: 'built-1', name: 'created_at', type: DataType.time, value: 1609459200 }],
+ originInfo: [{ id: 'origin-1', name: 'source', type: DataType.string, value: 'upload' }],
+ technicalParameters: [{ id: 'tech-1', name: 'word_count', type: DataType.number, value: 100 }],
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ expect(screen.getByText('field_one')).toBeInTheDocument()
+ expect(screen.getByText('created_at')).toBeInTheDocument()
+ expect(screen.getByText('source')).toBeInTheDocument()
+ expect(screen.getByText('word_count')).toBeInTheDocument()
+ })
+ })
+
+ describe('Edit Mode', () => {
+ it('should show edit button when not in edit mode and embedding available', () => {
+ render(
+ [0]['docDetail']}
+ />,
+ )
+ expect(screen.getByText(/edit/i)).toBeInTheDocument()
+ })
+
+ it('should call startToEdit when edit button is clicked', () => {
+ const startToEdit = vi.fn()
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ isEdit: false,
+ startToEdit,
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ fireEvent.click(screen.getByText(/edit/i))
+ expect(startToEdit).toHaveBeenCalled()
+ })
+
+ it('should call handleSave when save button is clicked', () => {
+ const handleSave = vi.fn()
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ isEdit: true,
+ handleSave,
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ fireEvent.click(screen.getByText(/save/i))
+ expect(handleSave).toHaveBeenCalled()
+ })
+
+ it('should call handleCancel when cancel button is clicked', () => {
+ const handleCancel = vi.fn()
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ isEdit: true,
+ handleCancel,
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ fireEvent.click(screen.getByText(/cancel/i))
+ expect(handleCancel).toHaveBeenCalled()
+ })
+
+ it('should call setIsEdit(true) when start button is clicked in no-data state', () => {
+ const setIsEdit = vi.fn()
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ hasData: false,
+ list: [],
+ tempList: [],
+ isEdit: false,
+ setIsEdit,
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ const startBtn = screen.queryByText(/start/i)
+ if (startBtn) {
+ fireEvent.click(startBtn)
+ expect(setIsEdit).toHaveBeenCalledWith(true)
+ }
+ })
+
+ it('should show InfoGroup when in edit mode without data', () => {
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ hasData: false,
+ list: [],
+ tempList: [],
+ isEdit: true,
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ // Should show save/cancel buttons
+ expect(screen.getByText(/save/i)).toBeInTheDocument()
+ expect(screen.getByText(/cancel/i)).toBeInTheDocument()
+ })
+ })
+
+ describe('Data Operations', () => {
+ it('should call setTempList when field value changes', async () => {
+ const setTempList = vi.fn()
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ isEdit: true,
+ setTempList,
+ })
+
+ const { container } = render(
+ [0]['docDetail']}
+ />,
+ )
+
+ const inputs = container.querySelectorAll('input')
+ if (inputs.length > 0) {
+ fireEvent.change(inputs[0], { target: { value: 'new value' } })
+
+ await waitFor(() => {
+ expect(setTempList).toHaveBeenCalled()
+ })
+ }
+ })
+
+ it('should have handleAddMetaData function available', () => {
+ const handleAddMetaData = vi.fn()
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ isEdit: true,
+ handleAddMetaData,
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ expect(typeof handleAddMetaData).toBe('function')
+ })
+
+ it('should have handleSelectMetaData function available', () => {
+ const handleSelectMetaData = vi.fn()
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ isEdit: true,
+ handleSelectMetaData,
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ expect(typeof handleSelectMetaData).toBe('function')
+ })
+
+ it('should pass onChange callback to InfoGroup', async () => {
+ const setTempList = vi.fn()
+ const tempList = [
+ { id: '1', name: 'field_one', type: DataType.string, value: 'Value 1' },
+ ]
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ isEdit: true,
+ tempList,
+ setTempList,
+ })
+
+ const { container } = render(
+ [0]['docDetail']}
+ />,
+ )
+
+ const inputs = container.querySelectorAll('input')
+ if (inputs.length > 0) {
+ fireEvent.change(inputs[0], { target: { value: 'updated' } })
+ await waitFor(() => {
+ expect(setTempList).toHaveBeenCalled()
+ })
+ }
+ })
+
+ it('should pass onDelete callback to InfoGroup', async () => {
+ const setTempList = vi.fn()
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ isEdit: true,
+ tempList: mockList,
+ setTempList,
+ })
+
+ const { container } = render(
+ [0]['docDetail']}
+ />,
+ )
+
+ // Look for delete buttons - they are inside hover:bg-state-destructive-hover divs
+ const deleteContainers = container.querySelectorAll('.hover\\:bg-state-destructive-hover')
+ expect(deleteContainers.length).toBeGreaterThan(0)
+
+ // Click the delete icon (SVG inside the container)
+ if (deleteContainers.length > 0) {
+ const deleteIcon = deleteContainers[0].querySelector('svg')
+ if (deleteIcon)
+ fireEvent.click(deleteIcon)
+
+ await waitFor(() => {
+ expect(setTempList).toHaveBeenCalled()
+ })
+ }
+ })
+ })
+
+ describe('Props', () => {
+ it('should apply custom className', () => {
+ const { container } = render(
+ [0]['docDetail']}
+ className="custom-class"
+ />,
+ )
+ expect(container.firstChild).toHaveClass('custom-class')
+ })
+
+ it('should use tempList when in edit mode', () => {
+ const tempList = [{ id: 'temp-1', name: 'temp_field', type: DataType.string, value: 'temp' }]
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ isEdit: true,
+ tempList,
+ list: mockList,
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ expect(screen.getByText('temp_field')).toBeInTheDocument()
+ })
+
+ it('should use list when not in edit mode', () => {
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ expect(screen.getByText('field_one')).toBeInTheDocument()
+ expect(screen.getByText('field_two')).toBeInTheDocument()
+ })
+
+ it('should pass datasetId to child components', () => {
+ render(
+ [0]['docDetail']}
+ />,
+ )
+ // Component should render without errors
+ expect(screen.getByText('field_one')).toBeInTheDocument()
+ })
+ })
+
+ describe('Embedding Availability', () => {
+ it('should not show edit button when embedding is not available', () => {
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ embeddingAvailable: false,
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ expect(screen.queryByText(/^edit$/i)).not.toBeInTheDocument()
+ })
+
+ it('should not show NoData when embedding is not available', () => {
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ embeddingAvailable: false,
+ hasData: false,
+ list: [],
+ tempList: [],
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ // NoData component should not be rendered
+ expect(screen.queryByText(/start/i)).not.toBeInTheDocument()
+ })
+
+ it('should not show edit buttons in edit mode when embedding not available', () => {
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ embeddingAvailable: false,
+ isEdit: false,
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ // headerRight should be null/undefined
+ expect(screen.queryByText(/^edit$/i)).not.toBeInTheDocument()
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle empty lists', () => {
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ list: [],
+ tempList: [],
+ hasData: false,
+ })
+
+ const { container } = render(
+ [0]['docDetail']}
+ />,
+ )
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render correctly with minimal props', () => {
+ const { container } = render(
+ [0]['docDetail']}
+ />,
+ )
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should handle switching between view and edit mode', () => {
+ const { unmount } = render(
+ [0]['docDetail']}
+ />,
+ )
+
+ expect(screen.getByText(/edit/i)).toBeInTheDocument()
+
+ unmount()
+
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ isEdit: true,
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ expect(screen.getByText(/save/i)).toBeInTheDocument()
+ expect(screen.getByText(/cancel/i)).toBeInTheDocument()
+ })
+
+ it('should handle multiple items in all sections', () => {
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ list: [
+ { id: '1', name: 'user_field_1', type: DataType.string, value: 'v1' },
+ { id: '2', name: 'user_field_2', type: DataType.number, value: 42 },
+ ],
+ builtInEnabled: true,
+ builtList: [
+ { id: 'b1', name: 'created_at', type: DataType.time, value: 1609459200 },
+ { id: 'b2', name: 'modified_at', type: DataType.time, value: 1609459200 },
+ ],
+ originInfo: [
+ { id: 'o1', name: 'source', type: DataType.string, value: 'file' },
+ { id: 'o2', name: 'format', type: DataType.string, value: 'txt' },
+ ],
+ technicalParameters: [
+ { id: 't1', name: 'word_count', type: DataType.number, value: 100 },
+ { id: 't2', name: 'char_count', type: DataType.number, value: 500 },
+ ],
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ expect(screen.getByText('user_field_1')).toBeInTheDocument()
+ expect(screen.getByText('user_field_2')).toBeInTheDocument()
+ expect(screen.getByText('created_at')).toBeInTheDocument()
+ expect(screen.getByText('source')).toBeInTheDocument()
+ expect(screen.getByText('word_count')).toBeInTheDocument()
+ })
+
+ it('should handle null values in metadata', () => {
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ list: [
+ { id: '1', name: 'null_field', type: DataType.string, value: null },
+ ],
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ expect(screen.getByText('null_field')).toBeInTheDocument()
+ })
+
+ it('should handle undefined values in metadata', () => {
+ mockUseMetadataDocument.mockReturnValue({
+ ...defaultHookReturn,
+ list: [
+ { id: '1', name: 'undefined_field', type: DataType.string, value: undefined as unknown as null },
+ ],
+ })
+
+ render(
+ [0]['docDetail']}
+ />,
+ )
+
+ expect(screen.getByText('undefined_field')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/metadata/metadata-document/info-group.spec.tsx b/web/app/components/datasets/metadata/metadata-document/info-group.spec.tsx
new file mode 100644
index 0000000000..d8585d0170
--- /dev/null
+++ b/web/app/components/datasets/metadata/metadata-document/info-group.spec.tsx
@@ -0,0 +1,341 @@
+import type { MetadataItemWithValue } from '../types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { DataType } from '../types'
+import InfoGroup from './info-group'
+
+type SelectModalProps = {
+ trigger: React.ReactNode
+ onSelect: (item: MetadataItemWithValue) => void
+ onSave: (data: { name: string, type: DataType }) => void
+ onManage: () => void
+}
+
+type FieldProps = {
+ label: string
+ children: React.ReactNode
+}
+
+type InputCombinedProps = {
+ value: string | number | null
+ onChange: (value: string | number) => void
+ type: DataType
+}
+
+// Mock next/navigation
+vi.mock('next/navigation', () => ({
+ useRouter: () => ({
+ push: vi.fn(),
+ }),
+}))
+
+// Mock useTimestamp
+vi.mock('@/hooks/use-timestamp', () => ({
+ default: () => ({
+ formatTime: (timestamp: number) => {
+ if (!timestamp)
+ return ''
+ return new Date(timestamp * 1000).toLocaleDateString()
+ },
+ }),
+}))
+
+// Mock AddMetadataButton
+vi.mock('../add-metadata-button', () => ({
+ default: () => ,
+}))
+
+// Mock InputCombined
+vi.mock('../edit-metadata-batch/input-combined', () => ({
+ default: ({ value, onChange, type }: InputCombinedProps) => (
+ onChange(e.target.value)}
+ />
+ ),
+}))
+
+// Mock SelectMetadataModal
+vi.mock('../metadata-dataset/select-metadata-modal', () => ({
+ default: ({ trigger, onSelect, onSave, onManage }: SelectModalProps) => (
+
+ {trigger}
+
+
+
+
+ ),
+}))
+
+// Mock Field
+vi.mock('./field', () => ({
+ default: ({ label, children }: FieldProps) => (
+
+ ),
+}))
+
+describe('InfoGroup', () => {
+ const mockList: MetadataItemWithValue[] = [
+ { id: '1', name: 'field_one', type: DataType.string, value: 'Value 1' },
+ { id: '2', name: 'field_two', type: DataType.number, value: 42 },
+ { id: '3', name: 'built-in', type: DataType.time, value: 1609459200 },
+ ]
+
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ const { container } = render(
+ ,
+ )
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render title when provided', () => {
+ render(
+ ,
+ )
+ expect(screen.getByText('Test Title')).toBeInTheDocument()
+ })
+
+ it('should not render header when noHeader is true', () => {
+ render(
+ ,
+ )
+ expect(screen.queryByText('Test Title')).not.toBeInTheDocument()
+ })
+
+ it('should render all list items', () => {
+ render(
+ ,
+ )
+ const fields = screen.getAllByTestId('field')
+ expect(fields).toHaveLength(3)
+ })
+
+ it('should render tooltip when titleTooltip is provided', () => {
+ render(
+ ,
+ )
+ // Tooltip icon should be present
+ const tooltipIcon = screen.getByText('Test').closest('.flex')?.querySelector('svg')
+ expect(tooltipIcon).toBeInTheDocument()
+ })
+
+ it('should render headerRight content', () => {
+ render(
+ Action}
+ />,
+ )
+ expect(screen.getByTestId('header-right-btn')).toBeInTheDocument()
+ })
+ })
+
+ describe('Edit Mode', () => {
+ it('should render add metadata button when isEdit is true', () => {
+ render(
+ ,
+ )
+ expect(screen.getByTestId('add-metadata-btn')).toBeInTheDocument()
+ })
+
+ it('should not render add metadata button when isEdit is false', () => {
+ render(
+ ,
+ )
+ expect(screen.queryByTestId('add-metadata-btn')).not.toBeInTheDocument()
+ })
+
+ it('should render input combined for each item in edit mode', () => {
+ render(
+ ,
+ )
+ const inputs = screen.getAllByTestId('input-combined')
+ expect(inputs).toHaveLength(3)
+ })
+
+ it('should render delete icons in edit mode', () => {
+ const { container } = render(
+ ,
+ )
+ const deleteIcons = container.querySelectorAll('.cursor-pointer svg')
+ expect(deleteIcons.length).toBeGreaterThan(0)
+ })
+ })
+
+ describe('User Interactions', () => {
+ it('should call onChange when input value changes', () => {
+ const handleChange = vi.fn()
+ render(
+ ,
+ )
+
+ const inputs = screen.getAllByTestId('input-combined')
+ fireEvent.change(inputs[0], { target: { value: 'New Value' } })
+
+ expect(handleChange).toHaveBeenCalled()
+ })
+
+ it('should call onDelete when delete icon is clicked', () => {
+ const handleDelete = vi.fn()
+ const { container } = render(
+ ,
+ )
+
+ // Find delete icons (RiDeleteBinLine SVGs inside cursor-pointer divs)
+ const deleteButtons = container.querySelectorAll('svg.size-4')
+ if (deleteButtons.length > 0)
+ fireEvent.click(deleteButtons[0])
+
+ expect(handleDelete).toHaveBeenCalled()
+ })
+
+ it('should call onSelect when metadata is selected', () => {
+ const handleSelect = vi.fn()
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByTestId('select-action'))
+
+ expect(handleSelect).toHaveBeenCalledWith({
+ id: '1',
+ name: 'test',
+ type: DataType.string,
+ value: null,
+ })
+ })
+
+ it('should call onAdd when new metadata is saved', () => {
+ const handleAdd = vi.fn()
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByTestId('save-action'))
+
+ expect(handleAdd).toHaveBeenCalledWith({
+ name: 'new_field',
+ type: DataType.string,
+ })
+ })
+
+ it('should navigate to documents page when manage is clicked', () => {
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByTestId('manage-action'))
+
+ // The onManage callback triggers the navigation
+ expect(screen.getByTestId('manage-action')).toBeInTheDocument()
+ })
+ })
+
+ describe('Props', () => {
+ it('should apply custom className', () => {
+ const { container } = render(
+ ,
+ )
+ expect(container.firstChild).toHaveClass('custom-class')
+ })
+
+ it('should apply contentClassName', () => {
+ const { container } = render(
+ ,
+ )
+ const contentDiv = container.querySelector('.content-custom')
+ expect(contentDiv).toBeInTheDocument()
+ })
+
+ it('should use uppercase title by default', () => {
+ render(
+ ,
+ )
+ const titleElement = screen.getByText('Test Title')
+ expect(titleElement).toHaveClass('system-xs-semibold-uppercase')
+ })
+
+ it('should not use uppercase when uppercaseTitle is false', () => {
+ render(
+ ,
+ )
+ const titleElement = screen.getByText('Test Title')
+ expect(titleElement).toHaveClass('system-md-semibold')
+ })
+ })
+
+ describe('Value Display', () => {
+ it('should display string value directly', () => {
+ const stringList: MetadataItemWithValue[] = [
+ { id: '1', name: 'field', type: DataType.string, value: 'Test Value' },
+ ]
+ render(
+ ,
+ )
+ expect(screen.getByText('Test Value')).toBeInTheDocument()
+ })
+
+ it('should display number value', () => {
+ const numberList: MetadataItemWithValue[] = [
+ { id: '1', name: 'field', type: DataType.number, value: 123 },
+ ]
+ render(
+ ,
+ )
+ expect(screen.getByText('123')).toBeInTheDocument()
+ })
+
+ it('should format time value', () => {
+ const timeList: MetadataItemWithValue[] = [
+ { id: '1', name: 'field', type: DataType.time, value: 1609459200 },
+ ]
+ render(
+ ,
+ )
+ // The mock formatTime returns formatted date
+ expect(screen.getByTestId('field-content')).toBeInTheDocument()
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle empty list', () => {
+ const { container } = render(
+ ,
+ )
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should handle null value in list', () => {
+ const nullList: MetadataItemWithValue[] = [
+ { id: '1', name: 'field', type: DataType.string, value: null },
+ ]
+ render(
+ ,
+ )
+ expect(screen.getByTestId('field')).toBeInTheDocument()
+ })
+
+ it('should handle items with built-in id', () => {
+ const builtInList: MetadataItemWithValue[] = [
+ { id: 'built-in', name: 'field', type: DataType.string, value: 'test' },
+ ]
+ render(
+ ,
+ )
+ expect(screen.getByTestId('field')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/metadata/metadata-document/no-data.spec.tsx b/web/app/components/datasets/metadata/metadata-document/no-data.spec.tsx
new file mode 100644
index 0000000000..84079cda1d
--- /dev/null
+++ b/web/app/components/datasets/metadata/metadata-document/no-data.spec.tsx
@@ -0,0 +1,131 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import NoData from './no-data'
+
+describe('NoData', () => {
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ const handleStart = vi.fn()
+ const { container } = render()
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render with gradient background', () => {
+ const handleStart = vi.fn()
+ const { container } = render()
+ expect(container.firstChild).toHaveClass('rounded-xl', 'bg-gradient-to-r', 'p-4', 'pt-3')
+ })
+
+ it('should render title text', () => {
+ const handleStart = vi.fn()
+ const { container } = render()
+ // Title should have correct styling
+ const title = container.querySelector('.text-xs.font-semibold')
+ expect(title).toBeInTheDocument()
+ })
+
+ it('should render description text', () => {
+ const handleStart = vi.fn()
+ const { container } = render()
+ // Description should have correct styling
+ const description = container.querySelector('.system-xs-regular.mt-1')
+ expect(description).toBeInTheDocument()
+ })
+
+ it('should render start labeling button', () => {
+ const handleStart = vi.fn()
+ render()
+ const button = screen.getByRole('button')
+ expect(button).toBeInTheDocument()
+ })
+
+ it('should render arrow icon in button', () => {
+ const handleStart = vi.fn()
+ const { container } = render()
+ // RiArrowRightLine icon should be present
+ const svg = container.querySelector('svg')
+ expect(svg).toBeInTheDocument()
+ })
+ })
+
+ describe('Props', () => {
+ it('should accept onStart prop', () => {
+ const handleStart = vi.fn()
+ render()
+ expect(screen.getByRole('button')).toBeInTheDocument()
+ })
+ })
+
+ describe('User Interactions', () => {
+ it('should call onStart when button is clicked', () => {
+ const handleStart = vi.fn()
+ render()
+
+ fireEvent.click(screen.getByRole('button'))
+
+ expect(handleStart).toHaveBeenCalledTimes(1)
+ })
+
+ it('should call onStart multiple times on multiple clicks', () => {
+ const handleStart = vi.fn()
+ render()
+
+ const button = screen.getByRole('button')
+ fireEvent.click(button)
+ fireEvent.click(button)
+ fireEvent.click(button)
+
+ expect(handleStart).toHaveBeenCalledTimes(3)
+ })
+
+ it('should have been called when button is clicked', () => {
+ const handleStart = vi.fn()
+ render()
+
+ fireEvent.click(screen.getByRole('button'))
+
+ // The onClick handler passes the event to onStart
+ expect(handleStart).toHaveBeenCalled()
+ })
+ })
+
+ describe('Button Styling', () => {
+ it('should have primary variant button', () => {
+ const handleStart = vi.fn()
+ render()
+ const button = screen.getByRole('button')
+ // Button should have primary styling
+ expect(button).toHaveClass('mt-2')
+ })
+ })
+
+ describe('Layout', () => {
+ it('should have correct title styling', () => {
+ const handleStart = vi.fn()
+ const { container } = render()
+ const title = container.querySelector('.text-xs.font-semibold')
+ expect(title).toBeInTheDocument()
+ })
+
+ it('should have correct description styling', () => {
+ const handleStart = vi.fn()
+ const { container } = render()
+ const description = container.querySelector('.system-xs-regular.mt-1')
+ expect(description).toBeInTheDocument()
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle rapid clicks', () => {
+ const handleStart = vi.fn()
+ render()
+
+ const button = screen.getByRole('button')
+ for (let i = 0; i < 10; i++) {
+ fireEvent.click(button)
+ }
+
+ expect(handleStart).toHaveBeenCalledTimes(10)
+ })
+ })
+})
diff --git a/web/app/components/datasets/metadata/utils/get-icon.spec.ts b/web/app/components/datasets/metadata/utils/get-icon.spec.ts
new file mode 100644
index 0000000000..f5a34bd264
--- /dev/null
+++ b/web/app/components/datasets/metadata/utils/get-icon.spec.ts
@@ -0,0 +1,45 @@
+import { RiHashtag, RiTextSnippet, RiTimeLine } from '@remixicon/react'
+import { describe, expect, it } from 'vitest'
+import { DataType } from '../types'
+import { getIcon } from './get-icon'
+
+describe('getIcon', () => {
+ describe('Rendering', () => {
+ it('should return RiTextSnippet for DataType.string', () => {
+ const result = getIcon(DataType.string)
+ expect(result).toBe(RiTextSnippet)
+ })
+
+ it('should return RiHashtag for DataType.number', () => {
+ const result = getIcon(DataType.number)
+ expect(result).toBe(RiHashtag)
+ })
+
+ it('should return RiTimeLine for DataType.time', () => {
+ const result = getIcon(DataType.time)
+ expect(result).toBe(RiTimeLine)
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should return RiTextSnippet as fallback for unknown type', () => {
+ const result = getIcon('unknown' as DataType)
+ expect(result).toBe(RiTextSnippet)
+ })
+
+ it('should return RiTextSnippet for undefined type', () => {
+ const result = getIcon(undefined as unknown as DataType)
+ expect(result).toBe(RiTextSnippet)
+ })
+
+ it('should return RiTextSnippet for null type', () => {
+ const result = getIcon(null as unknown as DataType)
+ expect(result).toBe(RiTextSnippet)
+ })
+
+ it('should return RiTextSnippet for empty string type', () => {
+ const result = getIcon('' as DataType)
+ expect(result).toBe(RiTextSnippet)
+ })
+ })
+})
diff --git a/web/app/components/datasets/rename-modal/index.spec.tsx b/web/app/components/datasets/rename-modal/index.spec.tsx
new file mode 100644
index 0000000000..13ab4d25ea
--- /dev/null
+++ b/web/app/components/datasets/rename-modal/index.spec.tsx
@@ -0,0 +1,1173 @@
+import type { DataSet } from '@/models/datasets'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { IndexingType } from '@/app/components/datasets/create/step-two'
+import { ChunkingMode, DatasetPermission, DataSourceType } from '@/models/datasets'
+import RenameDatasetModal from './index'
+
+// Mock service
+const mockUpdateDatasetSetting = vi.fn()
+vi.mock('@/service/datasets', () => ({
+ updateDatasetSetting: (params: unknown) => mockUpdateDatasetSetting(params),
+}))
+
+// Mock Toast
+const mockToastNotify = vi.fn()
+vi.mock('../../base/toast', () => ({
+ default: {
+ notify: (params: unknown) => mockToastNotify(params),
+ },
+}))
+
+// Mock AppIcon - simplified mock to enable testing onClick callback
+vi.mock('../../base/app-icon', () => ({
+ default: ({ onClick }: { onClick?: () => void }) => (
+
+ ),
+}))
+
+// Mock AppIconPicker - simplified mock to test onSelect and onClose callbacks
+vi.mock('../../base/app-icon-picker', () => ({
+ default: ({ onSelect, onClose }: {
+ onSelect?: (icon: { type: string, icon?: string, background?: string, fileId?: string, url?: string }) => void
+ onClose?: () => void
+ }) => (
+
+
+
+
+
+ ),
+}))
+
+// Note: react-i18next is globally mocked in vitest.setup.ts
+// The mock returns 'ns.key' format, e.g., 'common.operation.cancel'
+
+describe('RenameDatasetModal', () => {
+ // Create a base dataset with emoji icon
+ const createMockDataset = (overrides: Partial = {}): DataSet => ({
+ id: 'dataset-1',
+ name: 'Test Dataset',
+ description: 'Test description',
+ indexing_status: 'completed',
+ icon_info: {
+ icon: '📊',
+ icon_type: 'emoji',
+ icon_background: '#FFEAD5',
+ icon_url: undefined,
+ },
+ permission: DatasetPermission.onlyMe,
+ data_source_type: DataSourceType.FILE,
+ indexing_technique: IndexingType.QUALIFIED,
+ created_by: 'user-1',
+ updated_by: 'user-1',
+ updated_at: Date.now(),
+ app_count: 0,
+ doc_form: ChunkingMode.text,
+ document_count: 5,
+ total_document_count: 5,
+ word_count: 1000,
+ provider: 'openai',
+ embedding_model: 'text-embedding-ada-002',
+ embedding_model_provider: 'openai',
+ embedding_available: true,
+ retrieval_model_dict: {} as DataSet['retrieval_model_dict'],
+ retrieval_model: {} as DataSet['retrieval_model'],
+ tags: [],
+ external_knowledge_info: {
+ external_knowledge_id: '',
+ external_knowledge_api_id: '',
+ external_knowledge_api_name: '',
+ external_knowledge_api_endpoint: '',
+ },
+ external_retrieval_model: {
+ top_k: 3,
+ score_threshold: 0.5,
+ score_threshold_enabled: false,
+ },
+ built_in_field_enabled: false,
+ runtime_mode: 'general',
+ enable_api: true,
+ is_multimodal: false,
+ ...overrides,
+ })
+
+ // Create a dataset with image icon
+ const createMockDatasetWithImageIcon = (): DataSet => createMockDataset({
+ icon_info: {
+ icon: 'file-id-123',
+ icon_type: 'image',
+ icon_background: undefined,
+ icon_url: 'https://example.com/icon.png',
+ },
+ })
+
+ // Create a dataset with external knowledge info
+ const createMockExternalDataset = (): DataSet => createMockDataset({
+ external_knowledge_info: {
+ external_knowledge_id: 'ext-knowledge-1',
+ external_knowledge_api_id: 'ext-api-1',
+ external_knowledge_api_name: 'External API',
+ external_knowledge_api_endpoint: 'https://api.example.com',
+ },
+ })
+
+ const defaultProps = {
+ show: true,
+ dataset: createMockDataset(),
+ onSuccess: vi.fn(),
+ onClose: vi.fn(),
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockUpdateDatasetSetting.mockResolvedValue(createMockDataset())
+ })
+
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ render()
+ // Check title is rendered (translation mock returns 'datasetSettings.title')
+ expect(screen.getByText('datasetSettings.title')).toBeInTheDocument()
+ })
+
+ it('should render modal when show is true', () => {
+ render()
+ expect(screen.getByText('datasetSettings.title')).toBeInTheDocument()
+ })
+
+ it('should render name input with dataset name', () => {
+ render()
+ const nameInput = screen.getByDisplayValue('Test Dataset')
+ expect(nameInput).toBeInTheDocument()
+ })
+
+ it('should render description textarea with dataset description', () => {
+ render()
+ const descriptionTextarea = screen.getByDisplayValue('Test description')
+ expect(descriptionTextarea).toBeInTheDocument()
+ })
+
+ it('should render cancel and save buttons', () => {
+ render()
+ expect(screen.getByText('common.operation.cancel')).toBeInTheDocument()
+ expect(screen.getByText('common.operation.save')).toBeInTheDocument()
+ })
+
+ it('should render close icon button', () => {
+ render()
+ // The modal renders with title and other elements
+ // The close functionality is tested in user interactions
+ expect(screen.getByText('datasetSettings.title')).toBeInTheDocument()
+ })
+
+ it('should render form labels', () => {
+ render()
+ expect(screen.getByText('datasetSettings.form.name')).toBeInTheDocument()
+ expect(screen.getByText('datasetSettings.form.desc')).toBeInTheDocument()
+ })
+ })
+
+ describe('Props Variations', () => {
+ it('should render with emoji icon dataset', () => {
+ const dataset = createMockDataset()
+ render()
+ expect(screen.getByDisplayValue('Test Dataset')).toBeInTheDocument()
+ })
+
+ it('should render with image icon dataset', () => {
+ const dataset = createMockDatasetWithImageIcon()
+ render()
+ expect(screen.getByDisplayValue('Test Dataset')).toBeInTheDocument()
+ })
+
+ it('should render with empty description', () => {
+ const dataset = createMockDataset({ description: '' })
+ render()
+ // Find the textarea by its placeholder
+ const descriptionTextarea = screen.getByPlaceholderText('datasetSettings.form.descPlaceholder')
+ expect(descriptionTextarea).toHaveValue('')
+ })
+
+ it('should render with external knowledge dataset', () => {
+ const dataset = createMockExternalDataset()
+ render()
+ expect(screen.getByDisplayValue('Test Dataset')).toBeInTheDocument()
+ })
+
+ it('should handle undefined onSuccess callback', () => {
+ render()
+ expect(screen.getByDisplayValue('Test Dataset')).toBeInTheDocument()
+ })
+ })
+
+ describe('State Management', () => {
+ it('should initialize name state with dataset name', () => {
+ render()
+ expect(screen.getByDisplayValue('Test Dataset')).toBeInTheDocument()
+ })
+
+ it('should initialize description state with dataset description', () => {
+ render()
+ expect(screen.getByDisplayValue('Test description')).toBeInTheDocument()
+ })
+
+ it('should update name state when input changes', () => {
+ render()
+ const nameInput = screen.getByDisplayValue('Test Dataset')
+
+ fireEvent.change(nameInput, { target: { value: 'New Dataset Name' } })
+
+ expect(screen.getByDisplayValue('New Dataset Name')).toBeInTheDocument()
+ })
+
+ it('should update description state when textarea changes', () => {
+ render()
+ const descriptionTextarea = screen.getByDisplayValue('Test description')
+
+ fireEvent.change(descriptionTextarea, { target: { value: 'New description' } })
+
+ expect(screen.getByDisplayValue('New description')).toBeInTheDocument()
+ })
+
+ it('should clear name when input is cleared', () => {
+ render()
+ const nameInput = screen.getByDisplayValue('Test Dataset')
+
+ fireEvent.change(nameInput, { target: { value: '' } })
+
+ expect(nameInput).toHaveValue('')
+ })
+
+ it('should handle special characters in name', () => {
+ render()
+ const nameInput = screen.getByDisplayValue('Test Dataset')
+
+ fireEvent.change(nameInput, { target: { value: 'Dataset ' } })
+
+ expect(screen.getByDisplayValue('Dataset ')).toBeInTheDocument()
+ })
+
+ it('should handle very long name input', () => {
+ render()
+ const nameInput = screen.getByDisplayValue('Test Dataset')
+ const longName = 'A'.repeat(500)
+
+ fireEvent.change(nameInput, { target: { value: longName } })
+
+ expect(screen.getByDisplayValue(longName)).toBeInTheDocument()
+ })
+
+ it('should handle multiline description', () => {
+ render()
+ const descriptionTextarea = screen.getByDisplayValue('Test description')
+ const multilineDesc = 'Line 1\nLine 2\nLine 3'
+
+ fireEvent.change(descriptionTextarea, { target: { value: multilineDesc } })
+
+ // Verify the textarea contains the multiline value
+ expect(descriptionTextarea).toHaveValue(multilineDesc)
+ })
+ })
+
+ describe('User Interactions', () => {
+ it('should call onClose when cancel button is clicked', () => {
+ const handleClose = vi.fn()
+ render()
+
+ const cancelButton = screen.getByText('common.operation.cancel')
+ fireEvent.click(cancelButton)
+
+ expect(handleClose).toHaveBeenCalledTimes(1)
+ })
+
+ it('should call onClose when close icon is clicked', () => {
+ // This test is covered by the cancel button test
+ // The close icon functionality works the same way as cancel button
+ const handleClose = vi.fn()
+ render()
+
+ // Use the cancel button to verify close callback works
+ const cancelButton = screen.getByText('common.operation.cancel')
+ fireEvent.click(cancelButton)
+
+ expect(handleClose).toHaveBeenCalledTimes(1)
+ })
+
+ it('should call API when save button is clicked with valid name', async () => {
+ render()
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockUpdateDatasetSetting).toHaveBeenCalledWith({
+ datasetId: 'dataset-1',
+ body: expect.objectContaining({
+ name: 'Test Dataset',
+ description: 'Test description',
+ }),
+ })
+ })
+ })
+
+ it('should disable save button while loading', async () => {
+ // Create a promise that we can control
+ let resolvePromise: (value: DataSet) => void
+ mockUpdateDatasetSetting.mockImplementation(() => new Promise((resolve) => {
+ resolvePromise = resolve
+ }))
+
+ render()
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(saveButton).toBeDisabled()
+ })
+
+ // Resolve the promise to clean up
+ await act(async () => {
+ resolvePromise!(createMockDataset())
+ })
+ })
+
+ it('should handle name input focus', () => {
+ render()
+ const nameInput = screen.getByDisplayValue('Test Dataset')
+
+ // Verify the input can receive focus
+ nameInput.focus()
+
+ // Just verify the element is focusable (don't check activeElement as it may differ in test environment)
+ expect(nameInput).not.toBeDisabled()
+ })
+
+ it('should handle description textarea focus', () => {
+ render()
+ const descriptionTextarea = screen.getByDisplayValue('Test description')
+
+ // Verify the textarea can receive focus
+ descriptionTextarea.focus()
+
+ // Just verify the element is focusable
+ expect(descriptionTextarea).not.toBeDisabled()
+ })
+ })
+
+ describe('API Calls', () => {
+ it('should call updateDatasetSetting with correct parameters', async () => {
+ render()
+
+ const nameInput = screen.getByDisplayValue('Test Dataset')
+ fireEvent.change(nameInput, { target: { value: 'Updated Name' } })
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockUpdateDatasetSetting).toHaveBeenCalledWith({
+ datasetId: 'dataset-1',
+ body: {
+ name: 'Updated Name',
+ description: 'Test description',
+ icon_info: {
+ icon: '📊',
+ icon_type: 'emoji',
+ icon_background: '#FFEAD5',
+ icon_url: undefined,
+ },
+ },
+ })
+ })
+ })
+
+ it('should include external knowledge IDs when present', async () => {
+ const dataset = createMockExternalDataset()
+ render()
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockUpdateDatasetSetting).toHaveBeenCalledWith({
+ datasetId: 'dataset-1',
+ body: expect.objectContaining({
+ external_knowledge_id: 'ext-knowledge-1',
+ external_knowledge_api_id: 'ext-api-1',
+ }),
+ })
+ })
+ })
+
+ it('should not include external knowledge IDs when not present', async () => {
+ render()
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockUpdateDatasetSetting).toHaveBeenCalled()
+ const callArgs = mockUpdateDatasetSetting.mock.calls[0][0]
+ expect(callArgs.body.external_knowledge_id).toBeUndefined()
+ expect(callArgs.body.external_knowledge_api_id).toBeUndefined()
+ })
+ })
+
+ it('should handle image icon correctly in API call', async () => {
+ const dataset = createMockDatasetWithImageIcon()
+ render()
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockUpdateDatasetSetting).toHaveBeenCalledWith({
+ datasetId: 'dataset-1',
+ body: expect.objectContaining({
+ icon_info: {
+ icon: 'file-id-123',
+ icon_type: 'image',
+ icon_background: undefined,
+ icon_url: 'https://example.com/icon.png',
+ },
+ }),
+ })
+ })
+ })
+
+ it('should call onSuccess and onClose after successful save', async () => {
+ const handleSuccess = vi.fn()
+ const handleClose = vi.fn()
+ render()
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(handleSuccess).toHaveBeenCalledTimes(1)
+ expect(handleClose).toHaveBeenCalledTimes(1)
+ })
+ })
+
+ it('should show success toast after successful save', async () => {
+ render()
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'success',
+ message: 'common.actionMsg.modifiedSuccessfully',
+ })
+ })
+ })
+ })
+
+ describe('Error Handling', () => {
+ it('should show error toast when name is empty', async () => {
+ render()
+
+ const nameInput = screen.getByDisplayValue('Test Dataset')
+ fireEvent.change(nameInput, { target: { value: '' } })
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'error',
+ message: 'datasetSettings.form.nameError',
+ })
+ })
+ })
+
+ it('should show error toast when name is only whitespace', async () => {
+ render()
+
+ const nameInput = screen.getByDisplayValue('Test Dataset')
+ fireEvent.change(nameInput, { target: { value: ' ' } })
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'error',
+ message: 'datasetSettings.form.nameError',
+ })
+ })
+ })
+
+ it('should not call API when name is invalid', async () => {
+ render()
+
+ const nameInput = screen.getByDisplayValue('Test Dataset')
+ fireEvent.change(nameInput, { target: { value: '' } })
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockUpdateDatasetSetting).not.toHaveBeenCalled()
+ })
+ })
+
+ it('should show error toast when API call fails', async () => {
+ mockUpdateDatasetSetting.mockRejectedValueOnce(new Error('API Error'))
+
+ render()
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'error',
+ message: 'common.actionMsg.modifiedUnsuccessfully',
+ })
+ })
+ })
+
+ it('should not call onSuccess when API call fails', async () => {
+ mockUpdateDatasetSetting.mockRejectedValueOnce(new Error('API Error'))
+ const handleSuccess = vi.fn()
+
+ render()
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'error',
+ message: 'common.actionMsg.modifiedUnsuccessfully',
+ })
+ })
+
+ expect(handleSuccess).not.toHaveBeenCalled()
+ })
+
+ it('should not call onClose when API call fails', async () => {
+ mockUpdateDatasetSetting.mockRejectedValueOnce(new Error('API Error'))
+ const handleClose = vi.fn()
+
+ render()
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockToastNotify).toHaveBeenCalled()
+ })
+
+ expect(handleClose).not.toHaveBeenCalled()
+ })
+
+ it('should reset loading state after API error', async () => {
+ mockUpdateDatasetSetting.mockRejectedValueOnce(new Error('API Error'))
+
+ render()
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ // Wait for error handling to complete
+ await waitFor(() => {
+ expect(mockToastNotify).toHaveBeenCalled()
+ })
+
+ // Save button should be enabled again
+ expect(saveButton).not.toBeDisabled()
+ })
+ })
+
+ describe('Callback Stability', () => {
+ it('should call onClose exactly once per click', () => {
+ const handleClose = vi.fn()
+ render()
+
+ const cancelButton = screen.getByText('common.operation.cancel')
+ fireEvent.click(cancelButton)
+ fireEvent.click(cancelButton)
+
+ expect(handleClose).toHaveBeenCalledTimes(2)
+ })
+
+ it('should not call onSuccess when undefined', async () => {
+ render()
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockUpdateDatasetSetting).toHaveBeenCalled()
+ })
+
+ // Should not throw error when onSuccess is undefined
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'success',
+ message: 'common.actionMsg.modifiedSuccessfully',
+ })
+ })
+
+ it('should maintain callback identity across renders', async () => {
+ const handleClose = vi.fn()
+ const { rerender } = render()
+
+ // Change input to trigger re-render
+ const nameInput = screen.getByDisplayValue('Test Dataset')
+ fireEvent.change(nameInput, { target: { value: 'New Name' } })
+
+ // Re-render with same callback
+ rerender()
+
+ const cancelButton = screen.getByText('common.operation.cancel')
+ fireEvent.click(cancelButton)
+
+ expect(handleClose).toHaveBeenCalledTimes(1)
+ })
+ })
+
+ describe('Icon Picker Integration', () => {
+ it('should render app icon component', () => {
+ render()
+ // The modal should render with name label and input
+ // AppIcon is rendered alongside the name input
+ expect(screen.getByText('datasetSettings.form.name')).toBeInTheDocument()
+ expect(screen.getByDisplayValue('Test Dataset')).toBeInTheDocument()
+ })
+
+ it('should initialize icon state from dataset', () => {
+ // Test with emoji icon
+ render()
+ // The component initializes with the dataset's icon_info
+ // This is verified by checking the form renders correctly
+ expect(screen.getByDisplayValue('Test Dataset')).toBeInTheDocument()
+ })
+
+ it('should initialize icon state from image icon dataset', () => {
+ // Test with image icon - this triggers the icon_type === 'image' branch
+ const imageDataset = createMockDatasetWithImageIcon()
+ render()
+ expect(screen.getByDisplayValue('Test Dataset')).toBeInTheDocument()
+ // The component should render successfully with image icon dataset
+ })
+
+ it('should save with image icon data when dataset has image icon', async () => {
+ // Verify icon state is correctly initialized from image icon dataset
+ const imageDataset = createMockDatasetWithImageIcon()
+ render()
+
+ // Save directly to verify the icon data is correctly passed
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockUpdateDatasetSetting).toHaveBeenCalledWith({
+ datasetId: 'dataset-1',
+ body: expect.objectContaining({
+ icon_info: {
+ icon: 'file-id-123',
+ icon_type: 'image',
+ icon_background: undefined,
+ icon_url: 'https://example.com/icon.png',
+ },
+ }),
+ })
+ })
+ })
+
+ it('should save with emoji icon data when dataset has emoji icon', async () => {
+ // Verify icon state is correctly initialized from emoji icon dataset
+ render()
+
+ // Save directly to verify the icon data is correctly passed
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockUpdateDatasetSetting).toHaveBeenCalledWith({
+ datasetId: 'dataset-1',
+ body: expect.objectContaining({
+ icon_info: {
+ icon: '📊',
+ icon_type: 'emoji',
+ icon_background: '#FFEAD5',
+ icon_url: undefined,
+ },
+ }),
+ })
+ })
+ })
+
+ it('should open icon picker when app icon is clicked (handleOpenAppIconPicker)', async () => {
+ render()
+
+ // Initially picker should not be visible
+ expect(screen.queryByTestId('app-icon-picker')).not.toBeInTheDocument()
+
+ // Click app icon to open picker
+ const appIcon = screen.getByTestId('app-icon')
+ await act(async () => {
+ fireEvent.click(appIcon)
+ })
+
+ // Picker should now be visible
+ expect(screen.getByTestId('app-icon-picker')).toBeInTheDocument()
+ })
+
+ it('should select emoji icon and close picker (handleSelectAppIcon)', async () => {
+ render()
+
+ // Open picker
+ const appIcon = screen.getByTestId('app-icon')
+ await act(async () => {
+ fireEvent.click(appIcon)
+ })
+
+ // Select emoji
+ const selectEmojiBtn = screen.getByTestId('select-emoji')
+ await act(async () => {
+ fireEvent.click(selectEmojiBtn)
+ })
+
+ // Picker should close after selection
+ expect(screen.queryByTestId('app-icon-picker')).not.toBeInTheDocument()
+
+ // Save and verify new icon is used
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockUpdateDatasetSetting).toHaveBeenCalledWith({
+ datasetId: 'dataset-1',
+ body: expect.objectContaining({
+ icon_info: {
+ icon: '🚀',
+ icon_type: 'emoji',
+ icon_background: '#E0F2FE',
+ icon_url: undefined,
+ },
+ }),
+ })
+ })
+ })
+
+ it('should select image icon and close picker (handleSelectAppIcon)', async () => {
+ render()
+
+ // Open picker
+ const appIcon = screen.getByTestId('app-icon')
+ await act(async () => {
+ fireEvent.click(appIcon)
+ })
+
+ // Select image
+ const selectImageBtn = screen.getByTestId('select-image')
+ await act(async () => {
+ fireEvent.click(selectImageBtn)
+ })
+
+ // Picker should close after selection
+ expect(screen.queryByTestId('app-icon-picker')).not.toBeInTheDocument()
+
+ // Save and verify new image icon is used
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockUpdateDatasetSetting).toHaveBeenCalledWith({
+ datasetId: 'dataset-1',
+ body: expect.objectContaining({
+ icon_info: {
+ icon: 'new-file',
+ icon_type: 'image',
+ icon_background: undefined,
+ icon_url: 'https://new.png',
+ },
+ }),
+ })
+ })
+ })
+
+ it('should restore previous icon when picker is closed (handleCloseAppIconPicker)', async () => {
+ render()
+
+ // Open picker
+ const appIcon = screen.getByTestId('app-icon')
+ await act(async () => {
+ fireEvent.click(appIcon)
+ })
+
+ // Close picker without selecting
+ const closeBtn = screen.getByTestId('close-picker')
+ await act(async () => {
+ fireEvent.click(closeBtn)
+ })
+
+ // Picker should close
+ expect(screen.queryByTestId('app-icon-picker')).not.toBeInTheDocument()
+
+ // Save and verify original icon is preserved
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockUpdateDatasetSetting).toHaveBeenCalledWith({
+ datasetId: 'dataset-1',
+ body: expect.objectContaining({
+ icon_info: {
+ icon: '📊',
+ icon_type: 'emoji',
+ icon_background: '#FFEAD5',
+ icon_url: undefined,
+ },
+ }),
+ })
+ })
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle dataset with null icon_info', () => {
+ const dataset = createMockDataset({
+ icon_info: {
+ icon: '',
+ icon_type: 'emoji',
+ icon_background: '',
+ icon_url: undefined,
+ },
+ })
+
+ render()
+ expect(screen.getByDisplayValue('Test Dataset')).toBeInTheDocument()
+ })
+
+ it('should handle image icon with empty icon_url', async () => {
+ // Test the || '' fallback for icon_url in image icon
+ const dataset = createMockDataset({
+ icon_info: {
+ icon: 'file-id',
+ icon_type: 'image',
+ icon_background: undefined,
+ icon_url: '', // Empty string - triggers || '' fallback
+ },
+ })
+
+ render()
+ expect(screen.getByDisplayValue('Test Dataset')).toBeInTheDocument()
+
+ // Save and verify the icon_url is handled correctly
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockUpdateDatasetSetting).toHaveBeenCalledWith({
+ datasetId: 'dataset-1',
+ body: expect.objectContaining({
+ icon_info: expect.objectContaining({
+ icon: 'file-id',
+ icon_type: 'image',
+ icon_url: '',
+ }),
+ }),
+ })
+ })
+ })
+
+ it('should handle image icon with undefined icon', async () => {
+ // Test the || '' fallback for icon (fileId) in image icon
+ const dataset = createMockDataset({
+ icon_info: {
+ icon: '', // Empty string - triggers || '' fallback
+ icon_type: 'image',
+ icon_background: undefined,
+ icon_url: 'https://example.com/icon.png',
+ },
+ })
+
+ render()
+ expect(screen.getByDisplayValue('Test Dataset')).toBeInTheDocument()
+
+ // Save and verify the icon is handled correctly
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockUpdateDatasetSetting).toHaveBeenCalledWith({
+ datasetId: 'dataset-1',
+ body: expect.objectContaining({
+ icon_info: expect.objectContaining({
+ icon: '',
+ icon_type: 'image',
+ icon_url: 'https://example.com/icon.png',
+ }),
+ }),
+ })
+ })
+ })
+
+ it('should handle dataset with empty external knowledge info', () => {
+ const dataset = createMockDataset({
+ external_knowledge_info: {
+ external_knowledge_id: '',
+ external_knowledge_api_id: '',
+ external_knowledge_api_name: '',
+ external_knowledge_api_endpoint: '',
+ },
+ })
+
+ render()
+ expect(screen.getByDisplayValue('Test Dataset')).toBeInTheDocument()
+ })
+
+ it('should handle rapid input changes', async () => {
+ render()
+ const nameInput = screen.getByDisplayValue('Test Dataset')
+
+ // Simulate rapid typing
+ fireEvent.change(nameInput, { target: { value: 'N' } })
+ fireEvent.change(nameInput, { target: { value: 'Ne' } })
+ fireEvent.change(nameInput, { target: { value: 'New' } })
+ fireEvent.change(nameInput, { target: { value: 'New ' } })
+ fireEvent.change(nameInput, { target: { value: 'New N' } })
+ fireEvent.change(nameInput, { target: { value: 'New Na' } })
+ fireEvent.change(nameInput, { target: { value: 'New Nam' } })
+ fireEvent.change(nameInput, { target: { value: 'New Name' } })
+
+ expect(screen.getByDisplayValue('New Name')).toBeInTheDocument()
+ })
+
+ it('should handle double click on save button', async () => {
+ // Use a promise we can control to ensure the first click is still "loading"
+ let resolvePromise: (value: DataSet) => void
+ mockUpdateDatasetSetting.mockImplementationOnce(() => new Promise((resolve) => {
+ resolvePromise = resolve
+ }))
+
+ render()
+
+ const saveButton = screen.getByText('common.operation.save')
+
+ // First click
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ // Button should be disabled now
+ expect(saveButton).toBeDisabled()
+
+ // Second click should not trigger another API call because button is disabled
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ // Only one API call should have been made
+ expect(mockUpdateDatasetSetting).toHaveBeenCalledTimes(1)
+
+ // Clean up by resolving the promise
+ await act(async () => {
+ resolvePromise!(createMockDataset())
+ })
+ })
+
+ it('should handle unicode characters in name', () => {
+ render()
+ const nameInput = screen.getByDisplayValue('Test Dataset')
+
+ fireEvent.change(nameInput, { target: { value: '数据集 🎉 Dataset' } })
+
+ expect(screen.getByDisplayValue('数据集 🎉 Dataset')).toBeInTheDocument()
+ })
+
+ it('should handle unicode characters in description', () => {
+ render()
+ const descriptionTextarea = screen.getByDisplayValue('Test description')
+
+ fireEvent.change(descriptionTextarea, { target: { value: '这是一个测试描述 🚀' } })
+
+ expect(screen.getByDisplayValue('这是一个测试描述 🚀')).toBeInTheDocument()
+ })
+
+ it('should preserve whitespace in description', () => {
+ render()
+ const descriptionTextarea = screen.getByDisplayValue('Test description')
+
+ const testValue = 'Leading spaces with content'
+ fireEvent.change(descriptionTextarea, { target: { value: testValue } })
+
+ expect(descriptionTextarea).toHaveValue(testValue)
+ })
+ })
+
+ describe('Component Re-rendering', () => {
+ it('should update when dataset prop changes', () => {
+ const { rerender } = render()
+
+ expect(screen.getByDisplayValue('Test Dataset')).toBeInTheDocument()
+
+ const newDataset = createMockDataset({ name: 'Different Dataset', description: 'Different description' })
+ rerender()
+
+ // Note: The component uses useState with initial value, so it won't update
+ // This tests that the initial render works correctly with different props
+ expect(screen.getByDisplayValue('Test Dataset')).toBeInTheDocument()
+ })
+
+ it('should handle show prop toggle', () => {
+ const { rerender } = render()
+
+ expect(screen.getByText('datasetSettings.title')).toBeInTheDocument()
+
+ rerender()
+
+ // Modal visibility is controlled by Modal component's isShow prop
+ // The modal content may still be in DOM but hidden
+ })
+ })
+
+ describe('Accessibility', () => {
+ it('should have accessible input elements', () => {
+ render()
+
+ // Check that inputs are present and accessible
+ const nameInput = screen.getByDisplayValue('Test Dataset')
+ expect(nameInput.tagName.toLowerCase()).toBe('input')
+
+ const descriptionTextarea = screen.getByDisplayValue('Test description')
+ expect(descriptionTextarea.tagName.toLowerCase()).toBe('textarea')
+ })
+
+ it('should have clickable buttons', () => {
+ render()
+
+ const cancelButton = screen.getByText('common.operation.cancel')
+ const saveButton = screen.getByText('common.operation.save')
+
+ expect(cancelButton).toBeEnabled()
+ expect(saveButton).toBeEnabled()
+ })
+ })
+
+ describe('Loading State', () => {
+ it('should show loading state during API call', async () => {
+ let resolvePromise: (value: DataSet) => void
+ mockUpdateDatasetSetting.mockImplementation(() => new Promise((resolve) => {
+ resolvePromise = resolve
+ }))
+
+ render()
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ // Button should be disabled during loading
+ await waitFor(() => {
+ expect(saveButton).toBeDisabled()
+ })
+
+ // Resolve promise to complete the test
+ await act(async () => {
+ resolvePromise!(createMockDataset())
+ })
+
+ await waitFor(() => {
+ expect(saveButton).not.toBeDisabled()
+ })
+ })
+
+ it('should re-enable save button after successful save', async () => {
+ render()
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockUpdateDatasetSetting).toHaveBeenCalled()
+ })
+
+ // After success, the modal closes, but if it didn't, button would be re-enabled
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'success',
+ message: 'common.actionMsg.modifiedSuccessfully',
+ })
+ })
+
+ it('should re-enable save button after failed save', async () => {
+ mockUpdateDatasetSetting.mockRejectedValueOnce(new Error('API Error'))
+
+ render()
+
+ const saveButton = screen.getByText('common.operation.save')
+ await act(async () => {
+ fireEvent.click(saveButton)
+ })
+
+ await waitFor(() => {
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'error',
+ message: 'common.actionMsg.modifiedUnsuccessfully',
+ })
+ })
+
+ // Button should be re-enabled after error
+ expect(saveButton).not.toBeDisabled()
+ })
+ })
+})
diff --git a/web/app/components/datasets/settings/chunk-structure/hooks.spec.tsx b/web/app/components/datasets/settings/chunk-structure/hooks.spec.tsx
new file mode 100644
index 0000000000..668d2f926f
--- /dev/null
+++ b/web/app/components/datasets/settings/chunk-structure/hooks.spec.tsx
@@ -0,0 +1,239 @@
+import { renderHook } from '@testing-library/react'
+import { useChunkStructure } from './hooks'
+import { EffectColor } from './types'
+
+// Note: react-i18next is globally mocked in vitest.setup.ts
+
+describe('useChunkStructure', () => {
+ describe('Hook Initialization', () => {
+ it('should return options array', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ expect(result.current.options).toBeDefined()
+ expect(Array.isArray(result.current.options)).toBe(true)
+ })
+
+ it('should return exactly 3 options', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ expect(result.current.options).toHaveLength(3)
+ })
+ })
+
+ describe('General Option', () => {
+ it('should have correct id for General option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const generalOption = result.current.options[0]
+ expect(generalOption.id).toBe('text_model')
+ })
+
+ it('should have icon for General option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const generalOption = result.current.options[0]
+ expect(generalOption.icon).toBeDefined()
+ })
+
+ it('should have correct iconActiveColor for General option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const generalOption = result.current.options[0]
+ expect(generalOption.iconActiveColor).toBe('text-util-colors-indigo-indigo-600')
+ })
+
+ it('should have title for General option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const generalOption = result.current.options[0]
+ expect(generalOption.title).toBe('General')
+ })
+
+ it('should have description for General option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const generalOption = result.current.options[0]
+ expect(generalOption.description).toBeDefined()
+ })
+
+ it('should have indigo effectColor for General option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const generalOption = result.current.options[0]
+ expect(generalOption.effectColor).toBe(EffectColor.indigo)
+ })
+
+ it('should have showEffectColor true for General option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const generalOption = result.current.options[0]
+ expect(generalOption.showEffectColor).toBe(true)
+ })
+ })
+
+ describe('Parent-Child Option', () => {
+ it('should have correct id for Parent-Child option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const parentChildOption = result.current.options[1]
+ expect(parentChildOption.id).toBe('hierarchical_model')
+ })
+
+ it('should have icon for Parent-Child option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const parentChildOption = result.current.options[1]
+ expect(parentChildOption.icon).toBeDefined()
+ })
+
+ it('should have correct iconActiveColor for Parent-Child option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const parentChildOption = result.current.options[1]
+ expect(parentChildOption.iconActiveColor).toBe('text-util-colors-blue-light-blue-light-500')
+ })
+
+ it('should have title for Parent-Child option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const parentChildOption = result.current.options[1]
+ expect(parentChildOption.title).toBe('Parent-Child')
+ })
+
+ it('should have description for Parent-Child option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const parentChildOption = result.current.options[1]
+ expect(parentChildOption.description).toBeDefined()
+ })
+
+ it('should have blueLight effectColor for Parent-Child option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const parentChildOption = result.current.options[1]
+ expect(parentChildOption.effectColor).toBe(EffectColor.blueLight)
+ })
+
+ it('should have showEffectColor true for Parent-Child option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const parentChildOption = result.current.options[1]
+ expect(parentChildOption.showEffectColor).toBe(true)
+ })
+ })
+
+ describe('Q&A Option', () => {
+ it('should have correct id for Q&A option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const qaOption = result.current.options[2]
+ expect(qaOption.id).toBe('qa_model')
+ })
+
+ it('should have icon for Q&A option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const qaOption = result.current.options[2]
+ expect(qaOption.icon).toBeDefined()
+ })
+
+ it('should have title for Q&A option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const qaOption = result.current.options[2]
+ expect(qaOption.title).toBe('Q&A')
+ })
+
+ it('should have description for Q&A option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const qaOption = result.current.options[2]
+ expect(qaOption.description).toBeDefined()
+ })
+
+ it('should not have effectColor for Q&A option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const qaOption = result.current.options[2]
+ expect(qaOption.effectColor).toBeUndefined()
+ })
+
+ it('should not have showEffectColor for Q&A option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const qaOption = result.current.options[2]
+ expect(qaOption.showEffectColor).toBeUndefined()
+ })
+
+ it('should not have iconActiveColor for Q&A option', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const qaOption = result.current.options[2]
+ expect(qaOption.iconActiveColor).toBeUndefined()
+ })
+ })
+
+ describe('Options Structure', () => {
+ it('should return options in correct order', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ const ids = result.current.options.map(opt => opt.id)
+ expect(ids).toEqual(['text_model', 'hierarchical_model', 'qa_model'])
+ })
+
+ it('should return all options with required id property', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ result.current.options.forEach((option) => {
+ expect(option.id).toBeDefined()
+ })
+ })
+
+ it('should return all options with required title property', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ result.current.options.forEach((option) => {
+ expect(option.title).toBeDefined()
+ expect(typeof option.title).toBe('string')
+ })
+ })
+
+ it('should return all options with description property', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ result.current.options.forEach((option) => {
+ expect(option.description).toBeDefined()
+ })
+ })
+
+ it('should return all options with icon property', () => {
+ const { result } = renderHook(() => useChunkStructure())
+
+ result.current.options.forEach((option) => {
+ expect(option.icon).toBeDefined()
+ })
+ })
+ })
+
+ describe('Hook Stability', () => {
+ it('should return consistent options on multiple renders', () => {
+ const { result, rerender } = renderHook(() => useChunkStructure())
+
+ const firstRenderOptions = result.current.options.map(opt => opt.id)
+ rerender()
+ const secondRenderOptions = result.current.options.map(opt => opt.id)
+
+ expect(firstRenderOptions).toEqual(secondRenderOptions)
+ })
+
+ it('should return options with stable structure', () => {
+ const { result, rerender } = renderHook(() => useChunkStructure())
+
+ const firstLength = result.current.options.length
+ rerender()
+ const secondLength = result.current.options.length
+
+ expect(firstLength).toBe(secondLength)
+ })
+ })
+})
diff --git a/web/app/components/datasets/settings/chunk-structure/index.spec.tsx b/web/app/components/datasets/settings/chunk-structure/index.spec.tsx
index 878018408d..0206617c94 100644
--- a/web/app/components/datasets/settings/chunk-structure/index.spec.tsx
+++ b/web/app/components/datasets/settings/chunk-structure/index.spec.tsx
@@ -2,84 +2,124 @@ import { render, screen } from '@testing-library/react'
import { ChunkingMode } from '@/models/datasets'
import ChunkStructure from './index'
-type MockOptionCardProps = {
- id: string
- title: string
- isActive?: boolean
- disabled?: boolean
-}
-
-// Mock dependencies
-vi.mock('../option-card', () => ({
- default: ({ id, title, isActive, disabled }: MockOptionCardProps) => (
-
- {title}
-
- ),
-}))
-
-// Mock hook
-vi.mock('./hooks', () => ({
- useChunkStructure: () => ({
- options: [
- {
- id: ChunkingMode.text,
- title: 'General',
- description: 'General description',
- icon: ,
- effectColor: 'indigo',
- iconActiveColor: 'indigo',
- },
- {
- id: ChunkingMode.parentChild,
- title: 'Parent-Child',
- description: 'PC description',
- icon: ,
- effectColor: 'blue',
- iconActiveColor: 'blue',
- },
- ],
- }),
-}))
+// Note: react-i18next is globally mocked in vitest.setup.ts
describe('ChunkStructure', () => {
- it('should render all options', () => {
- render()
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ render()
+ expect(screen.getByText('General')).toBeInTheDocument()
+ })
- const options = screen.getAllByTestId('option-card')
- expect(options).toHaveLength(2)
- expect(options[0]).toHaveTextContent('General')
- expect(options[1]).toHaveTextContent('Parent-Child')
+ it('should render all three options', () => {
+ render()
+ expect(screen.getByText('General')).toBeInTheDocument()
+ expect(screen.getByText('Parent-Child')).toBeInTheDocument()
+ expect(screen.getByText('Q&A')).toBeInTheDocument()
+ })
+
+ it('should render in a vertical layout', () => {
+ const { container } = render()
+ const wrapper = container.firstChild
+ expect(wrapper).toHaveClass('flex-col')
+ })
})
- it('should set active state correctly', () => {
- // Render with 'text' active
- const { unmount } = render()
+ describe('Active State', () => {
+ it('should mark General option as active when chunkStructure is text', () => {
+ const { container } = render()
+ // The active card has ring styling
+ const activeCards = container.querySelectorAll('.ring-\\[1px\\]')
+ expect(activeCards).toHaveLength(1)
+ })
- const options = screen.getAllByTestId('option-card')
- expect(options[0]).toHaveAttribute('data-active', 'true')
- expect(options[1]).toHaveAttribute('data-active', 'false')
+ it('should mark Parent-Child option as active when chunkStructure is parentChild', () => {
+ const { container } = render()
+ const activeCards = container.querySelectorAll('.ring-\\[1px\\]')
+ expect(activeCards).toHaveLength(1)
+ })
- unmount()
-
- // Render with 'parentChild' active
- render()
- const newOptions = screen.getAllByTestId('option-card')
- expect(newOptions[0]).toHaveAttribute('data-active', 'false')
- expect(newOptions[1]).toHaveAttribute('data-active', 'true')
+ it('should mark Q&A option as active when chunkStructure is qa', () => {
+ const { container } = render()
+ const activeCards = container.querySelectorAll('.ring-\\[1px\\]')
+ expect(activeCards).toHaveLength(1)
+ })
})
- it('should be always disabled', () => {
- render()
+ describe('Disabled State', () => {
+ it('should render all options as disabled', () => {
+ const { container } = render()
+ // All cards should have cursor-not-allowed (disabled)
+ const disabledCards = container.querySelectorAll('.cursor-not-allowed')
+ expect(disabledCards.length).toBeGreaterThan(0)
+ })
+ })
- const options = screen.getAllByTestId('option-card')
- options.forEach((option) => {
- expect(option).toHaveAttribute('data-disabled', 'true')
+ describe('Option Cards', () => {
+ it('should render option cards with correct structure', () => {
+ render()
+
+ // All options should have descriptions
+ expect(screen.getByText(/stepTwo\.generalTip/)).toBeInTheDocument()
+ expect(screen.getByText(/stepTwo\.parentChildTip/)).toBeInTheDocument()
+ expect(screen.getByText(/stepTwo\.qaTip/)).toBeInTheDocument()
+ })
+
+ it('should render icons for all options', () => {
+ const { container } = render()
+ // Each option card should have an icon (SVG elements)
+ const svgs = container.querySelectorAll('svg')
+ expect(svgs.length).toBeGreaterThanOrEqual(3) // At least 3 icons
+ })
+ })
+
+ describe('Effect Colors', () => {
+ it('should show effect color for active General option', () => {
+ const { container } = render()
+ const effectElement = container.querySelector('.bg-util-colors-indigo-indigo-600')
+ expect(effectElement).toBeInTheDocument()
+ })
+
+ it('should show effect color for active Parent-Child option', () => {
+ const { container } = render()
+ const effectElement = container.querySelector('.bg-util-colors-blue-light-blue-light-600')
+ expect(effectElement).toBeInTheDocument()
+ })
+ })
+
+ describe('Props', () => {
+ it('should update active state when chunkStructure prop changes', () => {
+ const { rerender, container } = render()
+
+ // Initially one card is active
+ let activeCards = container.querySelectorAll('.ring-\\[1px\\]')
+ expect(activeCards).toHaveLength(1)
+
+ // Change to parentChild
+ rerender()
+
+ // Still one card should be active
+ activeCards = container.querySelectorAll('.ring-\\[1px\\]')
+ expect(activeCards).toHaveLength(1)
+
+ // Change to qa
+ rerender()
+
+ // Still one card should be active
+ activeCards = container.querySelectorAll('.ring-\\[1px\\]')
+ expect(activeCards).toHaveLength(1)
+ })
+ })
+
+ describe('Integration with useChunkStructure hook', () => {
+ it('should use options from useChunkStructure hook', () => {
+ render()
+
+ // Verify all expected options are rendered
+ const expectedTitles = ['General', 'Parent-Child', 'Q&A']
+ expectedTitles.forEach((title) => {
+ expect(screen.getByText(title)).toBeInTheDocument()
+ })
})
})
})
diff --git a/web/app/components/datasets/settings/index-method/index.spec.tsx b/web/app/components/datasets/settings/index-method/index.spec.tsx
new file mode 100644
index 0000000000..dbb886c676
--- /dev/null
+++ b/web/app/components/datasets/settings/index-method/index.spec.tsx
@@ -0,0 +1,208 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { IndexingType } from '../../create/step-two'
+import IndexMethod from './index'
+
+// Note: react-i18next is globally mocked in vitest.setup.ts
+
+describe('IndexMethod', () => {
+ const defaultProps = {
+ value: IndexingType.QUALIFIED,
+ onChange: vi.fn(),
+ keywordNumber: 10,
+ onKeywordNumberChange: vi.fn(),
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ render()
+ expect(screen.getByText(/stepTwo\.qualified/)).toBeInTheDocument()
+ })
+
+ it('should render High Quality option', () => {
+ render()
+ expect(screen.getByText(/stepTwo\.qualified/)).toBeInTheDocument()
+ })
+
+ it('should render Economy option', () => {
+ render()
+ expect(screen.getAllByText(/form\.indexMethodEconomy/).length).toBeGreaterThan(0)
+ })
+
+ it('should render High Quality description', () => {
+ render()
+ expect(screen.getByText(/form\.indexMethodHighQualityTip/)).toBeInTheDocument()
+ })
+
+ it('should render Economy description', () => {
+ render()
+ expect(screen.getByText(/form\.indexMethodEconomyTip/)).toBeInTheDocument()
+ })
+
+ it('should render recommended badge on High Quality', () => {
+ render()
+ expect(screen.getByText(/stepTwo\.recommend/)).toBeInTheDocument()
+ })
+ })
+
+ describe('Active State', () => {
+ it('should mark High Quality as active when value is QUALIFIED', () => {
+ const { container } = render()
+ const activeCards = container.querySelectorAll('.ring-\\[1px\\]')
+ expect(activeCards).toHaveLength(1)
+ })
+
+ it('should mark Economy as active when value is ECONOMICAL', () => {
+ const { container } = render()
+ const activeCards = container.querySelectorAll('.ring-\\[1px\\]')
+ expect(activeCards).toHaveLength(1)
+ })
+ })
+
+ describe('User Interactions', () => {
+ it('should call onChange with QUALIFIED when High Quality is clicked', () => {
+ const handleChange = vi.fn()
+ render()
+
+ // Find and click High Quality option
+ const highQualityTitle = screen.getByText(/stepTwo\.qualified/)
+ const card = highQualityTitle.closest('div')?.parentElement?.parentElement?.parentElement
+ fireEvent.click(card!)
+
+ expect(handleChange).toHaveBeenCalledWith(IndexingType.QUALIFIED)
+ })
+
+ it('should call onChange with ECONOMICAL when Economy is clicked', () => {
+ const handleChange = vi.fn()
+ render()
+
+ // Find and click Economy option - use getAllByText and get the first one (title)
+ const economyTitles = screen.getAllByText(/form\.indexMethodEconomy/)
+ const economyTitle = economyTitles[0]
+ const card = economyTitle.closest('div')?.parentElement?.parentElement?.parentElement
+ fireEvent.click(card!)
+
+ expect(handleChange).toHaveBeenCalledWith(IndexingType.ECONOMICAL)
+ })
+
+ it('should not call onChange when clicking already active option', () => {
+ const handleChange = vi.fn()
+ render()
+
+ // Click on already active High Quality
+ const highQualityTitle = screen.getByText(/stepTwo\.qualified/)
+ const card = highQualityTitle.closest('div')?.parentElement?.parentElement?.parentElement
+ fireEvent.click(card!)
+
+ expect(handleChange).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('Disabled State', () => {
+ it('should disable both options when disabled is true', () => {
+ const { container } = render()
+ const disabledCards = container.querySelectorAll('.cursor-not-allowed')
+ expect(disabledCards.length).toBeGreaterThan(0)
+ })
+
+ it('should disable Economy option when currentValue is QUALIFIED', () => {
+ const handleChange = vi.fn()
+ render()
+
+ // Try to click Economy option - use getAllByText and get the first one (title)
+ const economyTitles = screen.getAllByText(/form\.indexMethodEconomy/)
+ const economyTitle = economyTitles[0]
+ const card = economyTitle.closest('div')?.parentElement?.parentElement?.parentElement
+ fireEvent.click(card!)
+
+ // Should not call onChange because Economy is disabled when current is QUALIFIED
+ expect(handleChange).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('KeywordNumber', () => {
+ it('should render KeywordNumber component inside Economy option', () => {
+ render()
+ // KeywordNumber has a slider
+ expect(screen.getByRole('slider')).toBeInTheDocument()
+ })
+
+ it('should pass keywordNumber to KeywordNumber component', () => {
+ render()
+ const input = screen.getByRole('spinbutton')
+ expect(input).toHaveValue(25)
+ })
+
+ it('should call onKeywordNumberChange when KeywordNumber changes', () => {
+ const handleKeywordChange = vi.fn()
+ render()
+
+ const input = screen.getByRole('spinbutton')
+ fireEvent.change(input, { target: { value: '30' } })
+
+ expect(handleKeywordChange).toHaveBeenCalled()
+ })
+ })
+
+ describe('Tooltip', () => {
+ it('should show tooltip when hovering over disabled Economy option', () => {
+ // The tooltip is shown via PortalToFollowElem when hovering
+ // This is controlled by useHover hook
+ render()
+ // The tooltip content should exist in DOM but may not be visible
+ // We just verify the component renders without error
+ expect(screen.getAllByText(/form\.indexMethodEconomy/).length).toBeGreaterThan(0)
+ })
+ })
+
+ describe('Effect Colors', () => {
+ it('should show orange effect color for High Quality option', () => {
+ const { container } = render()
+ const orangeEffect = container.querySelector('.bg-util-colors-orange-orange-500')
+ expect(orangeEffect).toBeInTheDocument()
+ })
+
+ it('should show indigo effect color for Economy option', () => {
+ const { container } = render()
+ const indigoEffect = container.querySelector('.bg-util-colors-indigo-indigo-600')
+ expect(indigoEffect).toBeInTheDocument()
+ })
+ })
+
+ describe('Props', () => {
+ it('should update active state when value prop changes', () => {
+ const { rerender, container } = render()
+
+ let activeCards = container.querySelectorAll('.ring-\\[1px\\]')
+ expect(activeCards).toHaveLength(1)
+
+ rerender()
+
+ activeCards = container.querySelectorAll('.ring-\\[1px\\]')
+ expect(activeCards).toHaveLength(1)
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle undefined currentValue', () => {
+ render()
+ // Should render without error
+ expect(screen.getByText(/stepTwo\.qualified/)).toBeInTheDocument()
+ })
+
+ it('should handle keywordNumber of 0', () => {
+ render()
+ const input = screen.getByRole('spinbutton')
+ expect(input).toHaveValue(0)
+ })
+
+ it('should handle max keywordNumber', () => {
+ render()
+ const input = screen.getByRole('spinbutton')
+ expect(input).toHaveValue(50)
+ })
+ })
+})
diff --git a/web/app/components/datasets/settings/index-method/keyword-number.spec.tsx b/web/app/components/datasets/settings/index-method/keyword-number.spec.tsx
new file mode 100644
index 0000000000..f0f7f69de5
--- /dev/null
+++ b/web/app/components/datasets/settings/index-method/keyword-number.spec.tsx
@@ -0,0 +1,171 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import KeyWordNumber from './keyword-number'
+
+// Note: react-i18next is globally mocked in vitest.setup.ts
+
+describe('KeyWordNumber', () => {
+ const defaultProps = {
+ keywordNumber: 10,
+ onKeywordNumberChange: vi.fn(),
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ render()
+ expect(screen.getByText(/form\.numberOfKeywords/)).toBeInTheDocument()
+ })
+
+ it('should render label text', () => {
+ render()
+ expect(screen.getByText(/form\.numberOfKeywords/)).toBeInTheDocument()
+ })
+
+ it('should render tooltip with question icon', () => {
+ render()
+ // RiQuestionLine renders as an svg
+ const container = screen.getByText(/form\.numberOfKeywords/).closest('div')?.parentElement
+ const questionIcon = container?.querySelector('svg')
+ expect(questionIcon).toBeInTheDocument()
+ })
+
+ it('should render slider', () => {
+ render()
+ // Slider has a slider role
+ expect(screen.getByRole('slider')).toBeInTheDocument()
+ })
+
+ it('should render input number field', () => {
+ render()
+ expect(screen.getByRole('spinbutton')).toBeInTheDocument()
+ })
+ })
+
+ describe('Props', () => {
+ it('should display correct keywordNumber value in input', () => {
+ render()
+ const input = screen.getByRole('spinbutton')
+ expect(input).toHaveValue(25)
+ })
+
+ it('should display different keywordNumber values', () => {
+ const values = [1, 10, 25, 50]
+
+ values.forEach((value) => {
+ const { unmount } = render()
+ const input = screen.getByRole('spinbutton')
+ expect(input).toHaveValue(value)
+ unmount()
+ })
+ })
+
+ it('should pass correct value to slider', () => {
+ render()
+ const slider = screen.getByRole('slider')
+ expect(slider).toHaveAttribute('aria-valuenow', '30')
+ })
+ })
+
+ describe('User Interactions', () => {
+ it('should render slider that accepts onChange', () => {
+ const handleChange = vi.fn()
+ render()
+
+ const slider = screen.getByRole('slider')
+ // Verify slider is rendered and interactive
+ expect(slider).toBeInTheDocument()
+ expect(slider).not.toBeDisabled()
+ })
+
+ it('should call onKeywordNumberChange when input value changes', () => {
+ const handleChange = vi.fn()
+ render()
+
+ const input = screen.getByRole('spinbutton')
+ fireEvent.change(input, { target: { value: '30' } })
+
+ expect(handleChange).toHaveBeenCalled()
+ })
+
+ it('should not call onKeywordNumberChange with undefined value', () => {
+ const handleChange = vi.fn()
+ render()
+
+ const input = screen.getByRole('spinbutton')
+ fireEvent.change(input, { target: { value: '' } })
+
+ // When value is empty/undefined, handleInputChange should not call onKeywordNumberChange
+ expect(handleChange).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('Slider Configuration', () => {
+ it('should have max value of 50', () => {
+ render()
+ const slider = screen.getByRole('slider')
+ expect(slider).toHaveAttribute('aria-valuemax', '50')
+ })
+
+ it('should have min value of 0', () => {
+ render()
+ const slider = screen.getByRole('slider')
+ expect(slider).toHaveAttribute('aria-valuemin', '0')
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle minimum value (0)', () => {
+ render()
+ const input = screen.getByRole('spinbutton')
+ expect(input).toHaveValue(0)
+ })
+
+ it('should handle maximum value (50)', () => {
+ render()
+ const input = screen.getByRole('spinbutton')
+ expect(input).toHaveValue(50)
+ })
+
+ it('should handle value updates correctly', () => {
+ const { rerender } = render()
+
+ let input = screen.getByRole('spinbutton')
+ expect(input).toHaveValue(10)
+
+ rerender()
+ input = screen.getByRole('spinbutton')
+ expect(input).toHaveValue(25)
+ })
+
+ it('should handle rapid value changes', () => {
+ const handleChange = vi.fn()
+ render()
+
+ const input = screen.getByRole('spinbutton')
+
+ // Simulate rapid changes via input with different values
+ fireEvent.change(input, { target: { value: '15' } })
+ fireEvent.change(input, { target: { value: '25' } })
+ fireEvent.change(input, { target: { value: '35' } })
+
+ expect(handleChange).toHaveBeenCalledTimes(3)
+ })
+ })
+
+ describe('Accessibility', () => {
+ it('should have accessible slider', () => {
+ render()
+ const slider = screen.getByRole('slider')
+ expect(slider).toBeInTheDocument()
+ })
+
+ it('should have accessible input', () => {
+ render()
+ const input = screen.getByRole('spinbutton')
+ expect(input).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/settings/option-card.spec.tsx b/web/app/components/datasets/settings/option-card.spec.tsx
new file mode 100644
index 0000000000..6fdcd8faa7
--- /dev/null
+++ b/web/app/components/datasets/settings/option-card.spec.tsx
@@ -0,0 +1,317 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { EffectColor } from './chunk-structure/types'
+import OptionCard from './option-card'
+
+// Note: react-i18next is globally mocked in vitest.setup.ts
+
+describe('OptionCard', () => {
+ const defaultProps = {
+ id: 'test-id',
+ title: 'Test Title',
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ render()
+ expect(screen.getByText('Test Title')).toBeInTheDocument()
+ })
+
+ it('should render title', () => {
+ render()
+ expect(screen.getByText('Custom Title')).toBeInTheDocument()
+ })
+
+ it('should render description when provided', () => {
+ render()
+ expect(screen.getByText('Test Description')).toBeInTheDocument()
+ })
+
+ it('should not render description when not provided', () => {
+ render()
+ expect(screen.queryByText(/description/i)).not.toBeInTheDocument()
+ })
+
+ it('should render icon when provided', () => {
+ render(Icon} />)
+ expect(screen.getByTestId('test-icon')).toBeInTheDocument()
+ })
+
+ it('should not render icon container when icon is not provided', () => {
+ const { container } = render()
+ const iconContainers = container.querySelectorAll('.size-6')
+ expect(iconContainers).toHaveLength(0)
+ })
+ })
+
+ describe('Active State', () => {
+ it('should apply active styles when isActive is true', () => {
+ const { container } = render()
+ const card = container.firstChild
+ expect(card).toHaveClass('ring-[1px]')
+ })
+
+ it('should not apply active styles when isActive is false', () => {
+ const { container } = render()
+ const card = container.firstChild
+ expect(card).not.toHaveClass('ring-[1px]')
+ })
+
+ it('should apply iconActiveColor when isActive is true and icon is present', () => {
+ const { container } = render(
+ Icon}
+ iconActiveColor="text-red-500"
+ />,
+ )
+ const iconContainer = container.querySelector('.text-red-500')
+ expect(iconContainer).toBeInTheDocument()
+ })
+ })
+
+ describe('Disabled State', () => {
+ it('should apply disabled styles when disabled is true', () => {
+ const { container } = render()
+ const card = container.firstChild
+ expect(card).toHaveClass('cursor-not-allowed')
+ expect(card).toHaveClass('opacity-50')
+ })
+
+ it('should not call onClick when disabled', () => {
+ const handleClick = vi.fn()
+ render()
+
+ const card = screen.getByText('Test Title').closest('div')?.parentElement?.parentElement
+ fireEvent.click(card!)
+
+ expect(handleClick).not.toHaveBeenCalled()
+ })
+
+ it('should not call onClick when isActive', () => {
+ const handleClick = vi.fn()
+ render()
+
+ const card = screen.getByText('Test Title').closest('div')?.parentElement?.parentElement
+ fireEvent.click(card!)
+
+ expect(handleClick).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('Recommended Badge', () => {
+ it('should render recommended badge when isRecommended is true', () => {
+ render()
+ // Badge uses translation key
+ expect(screen.getByText(/stepTwo\.recommend/)).toBeInTheDocument()
+ })
+
+ it('should not render recommended badge when isRecommended is false', () => {
+ render()
+ expect(screen.queryByText(/stepTwo\.recommend/)).not.toBeInTheDocument()
+ })
+ })
+
+ describe('Effect Color', () => {
+ it('should render effect color when effectColor and showEffectColor are provided', () => {
+ const { container } = render(
+ ,
+ )
+ const effectElement = container.querySelector('.blur-\\[80px\\]')
+ expect(effectElement).toBeInTheDocument()
+ })
+
+ it('should not render effect color when showEffectColor is false', () => {
+ const { container } = render(
+ ,
+ )
+ const effectElement = container.querySelector('.blur-\\[80px\\]')
+ expect(effectElement).not.toBeInTheDocument()
+ })
+
+ it('should not render effect color when effectColor is not provided', () => {
+ const { container } = render(
+ ,
+ )
+ const effectElement = container.querySelector('.blur-\\[80px\\]')
+ expect(effectElement).not.toBeInTheDocument()
+ })
+
+ it('should apply indigo effect color class', () => {
+ const { container } = render(
+ ,
+ )
+ const effectElement = container.querySelector('.bg-util-colors-indigo-indigo-600')
+ expect(effectElement).toBeInTheDocument()
+ })
+
+ it('should apply blueLight effect color class', () => {
+ const { container } = render(
+ ,
+ )
+ const effectElement = container.querySelector('.bg-util-colors-blue-light-blue-light-600')
+ expect(effectElement).toBeInTheDocument()
+ })
+
+ it('should apply orange effect color class', () => {
+ const { container } = render(
+ ,
+ )
+ const effectElement = container.querySelector('.bg-util-colors-orange-orange-500')
+ expect(effectElement).toBeInTheDocument()
+ })
+
+ it('should apply purple effect color class', () => {
+ const { container } = render(
+ ,
+ )
+ const effectElement = container.querySelector('.bg-util-colors-purple-purple-600')
+ expect(effectElement).toBeInTheDocument()
+ })
+ })
+
+ describe('Children', () => {
+ it('should render children when children and showChildren are provided', () => {
+ render(
+
+ Child Content
+ ,
+ )
+ expect(screen.getByTestId('child-content')).toBeInTheDocument()
+ })
+
+ it('should not render children when showChildren is false', () => {
+ render(
+
+ Child Content
+ ,
+ )
+ expect(screen.queryByTestId('child-content')).not.toBeInTheDocument()
+ })
+
+ it('should not render children container when children is not provided', () => {
+ const { container } = render(
+ ,
+ )
+ const childContainer = container.querySelector('.bg-components-panel-bg')
+ expect(childContainer).not.toBeInTheDocument()
+ })
+
+ it('should render arrow shape when children are shown', () => {
+ const { container } = render(
+
+ Child
+ ,
+ )
+ // ArrowShape renders an SVG
+ const childSection = container.querySelector('.bg-components-panel-bg')
+ expect(childSection).toBeInTheDocument()
+ })
+ })
+
+ describe('User Interactions', () => {
+ it('should call onClick with id when clicked', () => {
+ const handleClick = vi.fn()
+ render()
+
+ const card = screen.getByText('Test Title').closest('div')?.parentElement?.parentElement
+ fireEvent.click(card!)
+
+ expect(handleClick).toHaveBeenCalledWith('my-id')
+ })
+
+ it('should have cursor-pointer class', () => {
+ const { container } = render()
+ const card = container.firstChild
+ expect(card).toHaveClass('cursor-pointer')
+ })
+ })
+
+ describe('Props', () => {
+ it('should apply custom className', () => {
+ const { container } = render()
+ const innerContainer = container.querySelector('.custom-class')
+ expect(innerContainer).toBeInTheDocument()
+ })
+
+ it('should forward ref', () => {
+ const ref = vi.fn()
+ render()
+ expect(ref).toHaveBeenCalled()
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle empty title', () => {
+ render()
+ // Component should still render
+ const { container } = render()
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should handle complex id types', () => {
+ const handleClick = vi.fn()
+ const complexId = { key: 'value' }
+ render()
+
+ const card = screen.getByText('Test Title').closest('div')?.parentElement?.parentElement
+ fireEvent.click(card!)
+
+ expect(handleClick).toHaveBeenCalledWith(complexId)
+ })
+
+ it('should handle numeric id', () => {
+ const handleClick = vi.fn()
+ render()
+
+ const card = screen.getByText('Test Title').closest('div')?.parentElement?.parentElement
+ fireEvent.click(card!)
+
+ expect(handleClick).toHaveBeenCalledWith(123)
+ })
+
+ it('should handle long title', () => {
+ const longTitle = 'A'.repeat(200)
+ render()
+ expect(screen.getByText(longTitle)).toBeInTheDocument()
+ })
+
+ it('should handle long description', () => {
+ const longDesc = 'B'.repeat(500)
+ render()
+ expect(screen.getByText(longDesc)).toBeInTheDocument()
+ })
+
+ it('should handle all props together', () => {
+ const handleClick = vi.fn()
+ render(
+ Icon}
+ iconActiveColor="text-blue-500"
+ isActive={true}
+ isRecommended={true}
+ effectColor={EffectColor.indigo}
+ showEffectColor={true}
+ disabled={false}
+ onClick={handleClick}
+ className="full-class"
+ showChildren={true}
+ >
+ Children
+ ,
+ )
+
+ expect(screen.getByText('Full Test')).toBeInTheDocument()
+ expect(screen.getByText('Full Description')).toBeInTheDocument()
+ expect(screen.getByTestId('full-icon')).toBeInTheDocument()
+ expect(screen.getByTestId('full-children')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/settings/permission-selector/index.spec.tsx b/web/app/components/datasets/settings/permission-selector/index.spec.tsx
new file mode 100644
index 0000000000..0e8a82c102
--- /dev/null
+++ b/web/app/components/datasets/settings/permission-selector/index.spec.tsx
@@ -0,0 +1,512 @@
+import type { Member } from '@/models/common'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { DatasetPermission } from '@/models/datasets'
+import PermissionSelector from './index'
+
+// Mock app-context
+vi.mock('@/context/app-context', () => ({
+ useSelector: () => ({
+ id: 'user-1',
+ name: 'Current User',
+ email: 'current@example.com',
+ avatar_url: '',
+ role: 'owner',
+ }),
+}))
+
+// Note: react-i18next is globally mocked in vitest.setup.ts
+
+describe('PermissionSelector', () => {
+ const mockMemberList: Member[] = [
+ { id: 'user-1', name: 'Current User', email: 'current@example.com', avatar: '', avatar_url: '', role: 'owner', last_login_at: '', created_at: '', status: 'active' },
+ { id: 'user-2', name: 'John Doe', email: 'john@example.com', avatar: '', avatar_url: '', role: 'admin', last_login_at: '', created_at: '', status: 'active' },
+ { id: 'user-3', name: 'Jane Smith', email: 'jane@example.com', avatar: '', avatar_url: '', role: 'editor', last_login_at: '', created_at: '', status: 'active' },
+ { id: 'user-4', name: 'Dataset Operator', email: 'operator@example.com', avatar: '', avatar_url: '', role: 'dataset_operator', last_login_at: '', created_at: '', status: 'active' },
+ ]
+
+ const defaultProps = {
+ permission: DatasetPermission.onlyMe,
+ value: ['user-1'],
+ memberList: mockMemberList,
+ onChange: vi.fn(),
+ onMemberSelect: vi.fn(),
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ render()
+ expect(screen.getByText(/form\.permissionsOnlyMe/)).toBeInTheDocument()
+ })
+
+ it('should render Only Me option when permission is onlyMe', () => {
+ render()
+ expect(screen.getByText(/form\.permissionsOnlyMe/)).toBeInTheDocument()
+ })
+
+ it('should render All Team Members option when permission is allTeamMembers', () => {
+ render()
+ expect(screen.getByText(/form\.permissionsAllMember/)).toBeInTheDocument()
+ })
+
+ it('should render selected member names when permission is partialMembers', () => {
+ render(
+ ,
+ )
+ // Should show member names
+ expect(screen.getByTitle(/Current User/)).toBeInTheDocument()
+ })
+ })
+
+ describe('Dropdown Toggle', () => {
+ it('should open dropdown when clicked', async () => {
+ render()
+
+ const trigger = screen.getByText(/form\.permissionsOnlyMe/)
+ fireEvent.click(trigger)
+
+ await waitFor(() => {
+ // Should show all permission options in dropdown
+ expect(screen.getAllByText(/form\.permissionsOnlyMe/).length).toBeGreaterThanOrEqual(1)
+ })
+ })
+
+ it('should not open dropdown when disabled', () => {
+ render()
+
+ const trigger = screen.getByText(/form\.permissionsOnlyMe/)
+ fireEvent.click(trigger)
+
+ // Dropdown should not open - only the trigger text should be visible
+ expect(screen.getAllByText(/form\.permissionsOnlyMe/).length).toBe(1)
+ })
+ })
+
+ describe('Permission Selection', () => {
+ it('should call onChange with onlyMe when Only Me is selected', async () => {
+ const handleChange = vi.fn()
+ render()
+
+ // Open dropdown
+ const trigger = screen.getByText(/form\.permissionsAllMember/)
+ fireEvent.click(trigger)
+
+ await waitFor(() => {
+ // Click Only Me option
+ const onlyMeOptions = screen.getAllByText(/form\.permissionsOnlyMe/)
+ fireEvent.click(onlyMeOptions[0])
+ })
+
+ expect(handleChange).toHaveBeenCalledWith(DatasetPermission.onlyMe)
+ })
+
+ it('should call onChange with allTeamMembers when All Team Members is selected', async () => {
+ const handleChange = vi.fn()
+ render()
+
+ // Open dropdown
+ const trigger = screen.getByText(/form\.permissionsOnlyMe/)
+ fireEvent.click(trigger)
+
+ await waitFor(() => {
+ // Click All Team Members option
+ const allMemberOptions = screen.getAllByText(/form\.permissionsAllMember/)
+ fireEvent.click(allMemberOptions[0])
+ })
+
+ expect(handleChange).toHaveBeenCalledWith(DatasetPermission.allTeamMembers)
+ })
+
+ it('should call onChange with partialMembers when Invited Members is selected', async () => {
+ const handleChange = vi.fn()
+ const handleMemberSelect = vi.fn()
+ render(
+ ,
+ )
+
+ // Open dropdown
+ const trigger = screen.getByText(/form\.permissionsOnlyMe/)
+ fireEvent.click(trigger)
+
+ await waitFor(() => {
+ // Click Invited Members option
+ const invitedOptions = screen.getAllByText(/form\.permissionsInvitedMembers/)
+ fireEvent.click(invitedOptions[0])
+ })
+
+ expect(handleChange).toHaveBeenCalledWith(DatasetPermission.partialMembers)
+ expect(handleMemberSelect).toHaveBeenCalledWith(['user-1'])
+ })
+ })
+
+ describe('Member Selection', () => {
+ it('should show member list when partialMembers is selected', async () => {
+ render(
+ ,
+ )
+
+ // Open dropdown
+ const trigger = screen.getByTitle(/Current User/)
+ fireEvent.click(trigger)
+
+ await waitFor(() => {
+ // Should show member list
+ expect(screen.getByText('John Doe')).toBeInTheDocument()
+ expect(screen.getByText('Jane Smith')).toBeInTheDocument()
+ })
+ })
+
+ it('should call onMemberSelect when a member is clicked', async () => {
+ const handleMemberSelect = vi.fn()
+ render(
+ ,
+ )
+
+ // Open dropdown
+ const trigger = screen.getByTitle(/Current User/)
+ fireEvent.click(trigger)
+
+ await waitFor(() => {
+ // Click on John Doe
+ const johnDoe = screen.getByText('John Doe')
+ fireEvent.click(johnDoe)
+ })
+
+ expect(handleMemberSelect).toHaveBeenCalledWith(['user-1', 'user-2'])
+ })
+
+ it('should deselect member when clicked again', async () => {
+ const handleMemberSelect = vi.fn()
+ render(
+ ,
+ )
+
+ // Open dropdown
+ const trigger = screen.getByTitle(/Current User/)
+ fireEvent.click(trigger)
+
+ await waitFor(() => {
+ // Click on John Doe to deselect
+ const johnDoe = screen.getByText('John Doe')
+ fireEvent.click(johnDoe)
+ })
+
+ expect(handleMemberSelect).toHaveBeenCalledWith(['user-1'])
+ })
+ })
+
+ describe('Search Functionality', () => {
+ it('should allow typing in search input', async () => {
+ render(
+ ,
+ )
+
+ // Open dropdown
+ const trigger = screen.getByTitle(/Current User/)
+ fireEvent.click(trigger)
+
+ // Wait for dropdown to open
+ const searchInput = await screen.findByRole('textbox')
+
+ // Type in search
+ fireEvent.change(searchInput, { target: { value: 'John' } })
+ expect(searchInput).toHaveValue('John')
+ })
+
+ it('should render search input in partial members mode', async () => {
+ render(
+ ,
+ )
+
+ // Open dropdown
+ const trigger = screen.getByTitle(/Current User/)
+ fireEvent.click(trigger)
+
+ // Wait for dropdown to open and search input to be available
+ const searchInput = await screen.findByRole('textbox')
+ expect(searchInput).toBeInTheDocument()
+ })
+
+ it('should filter members after debounce completes', async () => {
+ render(
+ ,
+ )
+
+ // Open dropdown
+ const trigger = screen.getByTitle(/Current User/)
+ fireEvent.click(trigger)
+
+ // Wait for dropdown to open
+ const searchInput = await screen.findByRole('textbox')
+
+ // Type in search
+ fireEvent.change(searchInput, { target: { value: 'John' } })
+
+ // Wait for debounce (500ms) + buffer
+ await waitFor(
+ () => {
+ expect(screen.getByText('John Doe')).toBeInTheDocument()
+ },
+ { timeout: 1000 },
+ )
+ })
+
+ it('should handle clear search functionality', async () => {
+ render(
+ ,
+ )
+
+ // Open dropdown
+ const trigger = screen.getByTitle(/Current User/)
+ fireEvent.click(trigger)
+
+ // Wait for dropdown to open
+ const searchInput = await screen.findByRole('textbox')
+
+ // Type in search
+ fireEvent.change(searchInput, { target: { value: 'test' } })
+ expect(searchInput).toHaveValue('test')
+
+ // Click the clear button using data-testid
+ const clearButton = screen.getByTestId('input-clear')
+ fireEvent.click(clearButton)
+
+ // After clicking clear, input should be empty
+ await waitFor(() => {
+ expect(searchInput).toHaveValue('')
+ })
+ })
+
+ it('should filter members by email', async () => {
+ render(
+ ,
+ )
+
+ // Open dropdown
+ const trigger = screen.getByTitle(/Current User/)
+ fireEvent.click(trigger)
+
+ // Wait for dropdown to open
+ const searchInput = await screen.findByRole('textbox')
+
+ // Search by email
+ fireEvent.change(searchInput, { target: { value: 'john@example' } })
+
+ // Wait for debounce
+ await waitFor(
+ () => {
+ expect(screen.getByText('John Doe')).toBeInTheDocument()
+ },
+ { timeout: 1000 },
+ )
+ })
+
+ it('should show no results message when search matches nothing', async () => {
+ render(
+ ,
+ )
+
+ // Open dropdown
+ const trigger = screen.getByTitle(/Current User/)
+ fireEvent.click(trigger)
+
+ // Wait for dropdown to open
+ const searchInput = await screen.findByRole('textbox')
+
+ // Search for non-existent member
+ fireEvent.change(searchInput, { target: { value: 'nonexistent12345' } })
+
+ // Wait for debounce and no results message
+ await waitFor(
+ () => {
+ expect(screen.getByText(/form\.onSearchResults/)).toBeInTheDocument()
+ },
+ { timeout: 1000 },
+ )
+ })
+
+ it('should show current user when search matches user name', async () => {
+ render(
+ ,
+ )
+
+ // Open dropdown
+ const trigger = screen.getByTitle(/Current User/)
+ fireEvent.click(trigger)
+
+ // Wait for dropdown to open
+ const searchInput = await screen.findByRole('textbox')
+
+ // Search for current user by name - partial match
+ fireEvent.change(searchInput, { target: { value: 'Current' } })
+
+ // Current user (showMe) should remain visible based on name match
+ // The component uses useMemo to check if userProfile.name.includes(searchKeywords)
+ expect(searchInput).toHaveValue('Current')
+ // Current User label appears multiple times (trigger + member list)
+ expect(screen.getAllByText('Current User').length).toBeGreaterThanOrEqual(1)
+ })
+
+ it('should show current user when search matches user email', async () => {
+ render(
+ ,
+ )
+
+ // Open dropdown
+ const trigger = screen.getByTitle(/Current User/)
+ fireEvent.click(trigger)
+
+ // Wait for dropdown to open
+ const searchInput = await screen.findByRole('textbox')
+
+ // Search for current user by email
+ fireEvent.change(searchInput, { target: { value: 'current@' } })
+
+ // The component checks userProfile.email.includes(searchKeywords)
+ expect(searchInput).toHaveValue('current@')
+ // Current User should remain visible based on email match
+ expect(screen.getAllByText('Current User').length).toBeGreaterThanOrEqual(1)
+ })
+ })
+
+ describe('Disabled State', () => {
+ it('should apply disabled styles when disabled', () => {
+ const { container } = render()
+ // When disabled, the component has !cursor-not-allowed class (escaped in Tailwind)
+ const triggerElement = container.querySelector('[class*="cursor-not-allowed"]')
+ expect(triggerElement).toBeInTheDocument()
+ })
+ })
+
+ describe('Display Variations', () => {
+ it('should display single avatar when only one member selected', () => {
+ render(
+ ,
+ )
+
+ // Should display single avatar
+ expect(screen.getByTitle(/Current User/)).toBeInTheDocument()
+ })
+
+ it('should display two avatars when two or more members selected', () => {
+ render(
+ ,
+ )
+
+ // Should display member names
+ expect(screen.getByTitle(/Current User, John Doe/)).toBeInTheDocument()
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle empty member list', () => {
+ render(
+ ,
+ )
+
+ expect(screen.getByText(/form\.permissionsOnlyMe/)).toBeInTheDocument()
+ })
+
+ it('should handle member list with only current user', () => {
+ render(
+ ,
+ )
+
+ expect(screen.getByText(/form\.permissionsOnlyMe/)).toBeInTheDocument()
+ })
+
+ it('should only show members with allowed roles', () => {
+ // The component filters members by role in useMemo
+ // Allowed roles are: owner, admin, editor, dataset_operator
+ // This is tested indirectly through the memberList filtering
+ const memberListWithNormalUser: Member[] = [
+ ...mockMemberList,
+ { id: 'user-5', name: 'Normal User', email: 'normal@example.com', avatar: '', avatar_url: '', role: 'normal', last_login_at: '', created_at: '', status: 'active' },
+ ]
+
+ render(
+ ,
+ )
+
+ // The component renders - the filtering logic is internal
+ expect(screen.getByTitle(/Current User/)).toBeInTheDocument()
+ })
+ })
+
+ describe('Props', () => {
+ it('should update when permission prop changes', () => {
+ const { rerender } = render()
+
+ expect(screen.getByText(/form\.permissionsOnlyMe/)).toBeInTheDocument()
+
+ rerender()
+
+ expect(screen.getByText(/form\.permissionsAllMember/)).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/settings/permission-selector/member-item.spec.tsx b/web/app/components/datasets/settings/permission-selector/member-item.spec.tsx
new file mode 100644
index 0000000000..02d453db7c
--- /dev/null
+++ b/web/app/components/datasets/settings/permission-selector/member-item.spec.tsx
@@ -0,0 +1,195 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import MemberItem from './member-item'
+
+// Note: react-i18next is globally mocked in vitest.setup.ts
+
+describe('MemberItem', () => {
+ const defaultProps = {
+ leftIcon: Avatar,
+ name: 'John Doe',
+ email: 'john@example.com',
+ isSelected: false,
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ render()
+ expect(screen.getByText('John Doe')).toBeInTheDocument()
+ })
+
+ it('should render left icon (avatar)', () => {
+ render()
+ expect(screen.getByTestId('avatar-icon')).toBeInTheDocument()
+ })
+
+ it('should render member name', () => {
+ render()
+ expect(screen.getByText('John Doe')).toBeInTheDocument()
+ })
+
+ it('should render member email', () => {
+ render()
+ expect(screen.getByText('john@example.com')).toBeInTheDocument()
+ })
+ })
+
+ describe('Selection State', () => {
+ it('should show checkmark icon when selected', () => {
+ render()
+ const container = screen.getByText('John Doe').closest('div')?.parentElement?.parentElement
+ const checkIcon = container?.querySelector('svg')
+ expect(checkIcon).toBeInTheDocument()
+ })
+
+ it('should not show checkmark icon when not selected', () => {
+ render()
+ const container = screen.getByText('John Doe').closest('div')?.parentElement?.parentElement
+ const checkIcon = container?.querySelector('svg')
+ expect(checkIcon).not.toBeInTheDocument()
+ })
+
+ it('should apply opacity class to checkmark when isMe is true', () => {
+ render()
+ const container = screen.getByText('John Doe').closest('div')?.parentElement?.parentElement
+ const checkIcon = container?.querySelector('svg')
+ expect(checkIcon).toHaveClass('opacity-30')
+ })
+ })
+
+ describe('isMe Flag', () => {
+ it('should show me indicator when isMe is true', () => {
+ render()
+ // The translation key is 'form.me' which will be rendered by the mock
+ expect(screen.getByText(/form\.me/)).toBeInTheDocument()
+ })
+
+ it('should not show me indicator when isMe is false', () => {
+ render()
+ expect(screen.queryByText(/form\.me/)).not.toBeInTheDocument()
+ })
+
+ it('should not show me indicator by default', () => {
+ render()
+ expect(screen.queryByText(/form\.me/)).not.toBeInTheDocument()
+ })
+ })
+
+ describe('User Interactions', () => {
+ it('should call onClick when clicked', () => {
+ const handleClick = vi.fn()
+ render()
+
+ const item = screen.getByText('John Doe').closest('div')?.parentElement?.parentElement
+ fireEvent.click(item!)
+
+ expect(handleClick).toHaveBeenCalledTimes(1)
+ })
+
+ it('should not throw when onClick is not provided', () => {
+ render()
+
+ const item = screen.getByText('John Doe').closest('div')?.parentElement?.parentElement
+ expect(() => fireEvent.click(item!)).not.toThrow()
+ })
+
+ it('should have cursor-pointer class for interactivity', () => {
+ render()
+ const item = screen.getByText('John Doe').closest('div')?.parentElement?.parentElement
+ expect(item).toHaveClass('cursor-pointer')
+ })
+ })
+
+ describe('Props', () => {
+ it('should render different names', () => {
+ const names = ['Alice', 'Bob', 'Charlie']
+
+ names.forEach((name) => {
+ const { unmount } = render()
+ expect(screen.getByText(name)).toBeInTheDocument()
+ unmount()
+ })
+ })
+
+ it('should render different emails', () => {
+ const emails = ['alice@test.com', 'bob@company.org', 'charlie@domain.net']
+
+ emails.forEach((email) => {
+ const { unmount } = render()
+ expect(screen.getByText(email)).toBeInTheDocument()
+ unmount()
+ })
+ })
+
+ it('should render different left icons', () => {
+ const customIcon = ![avatar]()
+ render()
+ expect(screen.getByTestId('custom-avatar')).toBeInTheDocument()
+ })
+
+ it('should handle isSelected toggle correctly', () => {
+ const { rerender } = render()
+
+ // Initially not selected
+ let container = screen.getByText('John Doe').closest('div')?.parentElement?.parentElement
+ expect(container?.querySelector('svg')).not.toBeInTheDocument()
+
+ // Update to selected
+ rerender()
+ container = screen.getByText('John Doe').closest('div')?.parentElement?.parentElement
+ expect(container?.querySelector('svg')).toBeInTheDocument()
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle empty name', () => {
+ render()
+ expect(screen.getByText('john@example.com')).toBeInTheDocument()
+ })
+
+ it('should handle empty email', () => {
+ render()
+ expect(screen.getByText('John Doe')).toBeInTheDocument()
+ })
+
+ it('should handle long name with truncation', () => {
+ const longName = 'A'.repeat(100)
+ render()
+ const nameElement = screen.getByText(longName)
+ expect(nameElement).toHaveClass('truncate')
+ })
+
+ it('should handle long email with truncation', () => {
+ const longEmail = `${'a'.repeat(50)}@${'b'.repeat(50)}.com`
+ render()
+ const emailElement = screen.getByText(longEmail)
+ expect(emailElement).toHaveClass('truncate')
+ })
+
+ it('should handle special characters in name', () => {
+ const specialName = 'O\'Connor-Smith'
+ render()
+ expect(screen.getByText(specialName)).toBeInTheDocument()
+ })
+
+ it('should handle unicode characters', () => {
+ const unicodeName = '张三'
+ const unicodeEmail = '张三@example.com'
+ render()
+ expect(screen.getByText(unicodeName)).toBeInTheDocument()
+ expect(screen.getByText(unicodeEmail)).toBeInTheDocument()
+ })
+
+ it('should render both isMe and isSelected together', () => {
+ render()
+ expect(screen.getByText(/form\.me/)).toBeInTheDocument()
+ const container = screen.getByText('John Doe').closest('div')?.parentElement?.parentElement
+ const checkIcon = container?.querySelector('svg')
+ expect(checkIcon).toBeInTheDocument()
+ expect(checkIcon).toHaveClass('opacity-30')
+ })
+ })
+})
diff --git a/web/app/components/datasets/settings/permission-selector/permission-item.spec.tsx b/web/app/components/datasets/settings/permission-selector/permission-item.spec.tsx
new file mode 100644
index 0000000000..5f6b881bd4
--- /dev/null
+++ b/web/app/components/datasets/settings/permission-selector/permission-item.spec.tsx
@@ -0,0 +1,130 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import PermissionItem from './permission-item'
+
+describe('PermissionItem', () => {
+ const defaultProps = {
+ leftIcon: Icon,
+ text: 'Test Permission',
+ onClick: vi.fn(),
+ isSelected: false,
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ render()
+ expect(screen.getByText('Test Permission')).toBeInTheDocument()
+ })
+
+ it('should render left icon', () => {
+ render()
+ expect(screen.getByTestId('left-icon')).toBeInTheDocument()
+ })
+
+ it('should render text content', () => {
+ const text = 'Custom Permission Text'
+ render()
+ expect(screen.getByText(text)).toBeInTheDocument()
+ })
+ })
+
+ describe('Selection State', () => {
+ it('should show checkmark icon when selected', () => {
+ render()
+ // RiCheckLine renders as an svg element
+ const container = screen.getByText('Test Permission').closest('div')?.parentElement
+ const checkIcon = container?.querySelector('svg')
+ expect(checkIcon).toBeInTheDocument()
+ })
+
+ it('should not show checkmark icon when not selected', () => {
+ render()
+ const container = screen.getByText('Test Permission').closest('div')?.parentElement
+ const checkIcon = container?.querySelector('svg')
+ expect(checkIcon).not.toBeInTheDocument()
+ })
+ })
+
+ describe('User Interactions', () => {
+ it('should call onClick when clicked', () => {
+ const handleClick = vi.fn()
+ render()
+
+ const item = screen.getByText('Test Permission').closest('div')?.parentElement
+ fireEvent.click(item!)
+
+ expect(handleClick).toHaveBeenCalledTimes(1)
+ })
+
+ it('should have cursor-pointer class for interactivity', () => {
+ render()
+ const item = screen.getByText('Test Permission').closest('div')?.parentElement
+ expect(item).toHaveClass('cursor-pointer')
+ })
+ })
+
+ describe('Props', () => {
+ it('should render different left icons', () => {
+ const customIcon = Custom
+ render()
+ expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
+ })
+
+ it('should handle different text values', () => {
+ const texts = ['Only Me', 'All Team Members', 'Invited Members']
+
+ texts.forEach((text) => {
+ const { unmount } = render()
+ expect(screen.getByText(text)).toBeInTheDocument()
+ unmount()
+ })
+ })
+
+ it('should handle isSelected toggle correctly', () => {
+ const { rerender } = render()
+
+ // Initially not selected - no checkmark
+ let container = screen.getByText('Test Permission').closest('div')?.parentElement
+ expect(container?.querySelector('svg')).not.toBeInTheDocument()
+
+ // Update to selected
+ rerender()
+ container = screen.getByText('Test Permission').closest('div')?.parentElement
+ expect(container?.querySelector('svg')).toBeInTheDocument()
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle empty text', () => {
+ render()
+ // The component should still render
+ expect(screen.getByTestId('left-icon')).toBeInTheDocument()
+ })
+
+ it('should handle long text content', () => {
+ const longText = 'A'.repeat(200)
+ render()
+ expect(screen.getByText(longText)).toBeInTheDocument()
+ })
+
+ it('should handle special characters in text', () => {
+ const specialText = ''
+ render()
+ expect(screen.getByText(specialText)).toBeInTheDocument()
+ })
+
+ it('should handle complex left icon nodes', () => {
+ const complexIcon = (
+
+ )
+ render()
+ expect(screen.getByTestId('complex-icon')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/settings/utils/index.spec.ts b/web/app/components/datasets/settings/utils/index.spec.ts
new file mode 100644
index 0000000000..5a9099e51f
--- /dev/null
+++ b/web/app/components/datasets/settings/utils/index.spec.ts
@@ -0,0 +1,297 @@
+import type { DefaultModel, Model, ModelItem } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { ConfigurationMethodEnum, ModelFeatureEnum, ModelStatusEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { IndexingType } from '../../create/step-two'
+import { checkShowMultiModalTip } from './index'
+
+describe('checkShowMultiModalTip', () => {
+ // Helper to create a model item with specific features
+ const createModelItem = (model: string, features: ModelFeatureEnum[] = []): ModelItem => ({
+ model,
+ label: { en_US: model, zh_Hans: model },
+ model_type: ModelTypeEnum.textEmbedding,
+ features,
+ fetch_from: ConfigurationMethodEnum.predefinedModel,
+ status: ModelStatusEnum.active,
+ model_properties: {},
+ load_balancing_enabled: false,
+ deprecated: false,
+ })
+
+ // Helper to create a model provider
+ const createModelProvider = (provider: string, models: ModelItem[]): Model => ({
+ provider,
+ label: { en_US: provider, zh_Hans: provider },
+ icon_small: { en_US: '', zh_Hans: '' },
+ status: ModelStatusEnum.active,
+ models,
+ })
+
+ const defaultProps = {
+ embeddingModel: {
+ provider: 'openai',
+ model: 'text-embedding-ada-002',
+ } as DefaultModel,
+ rerankingEnable: true,
+ rerankModel: {
+ rerankingProviderName: 'cohere',
+ rerankingModelName: 'rerank-english-v2.0',
+ },
+ indexMethod: IndexingType.QUALIFIED,
+ embeddingModelList: [
+ createModelProvider('openai', [
+ createModelItem('text-embedding-ada-002', [ModelFeatureEnum.vision]),
+ ]),
+ ],
+ rerankModelList: [
+ createModelProvider('cohere', [
+ createModelItem('rerank-english-v2.0', []),
+ ]),
+ ],
+ }
+
+ describe('Return false conditions', () => {
+ it('should return false when indexMethod is not QUALIFIED', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ indexMethod: IndexingType.ECONOMICAL,
+ })
+ expect(result).toBe(false)
+ })
+
+ it('should return false when indexMethod is undefined', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ indexMethod: undefined,
+ })
+ expect(result).toBe(false)
+ })
+
+ it('should return false when embeddingModel.provider is empty', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ embeddingModel: { provider: '', model: 'text-embedding-ada-002' },
+ })
+ expect(result).toBe(false)
+ })
+
+ it('should return false when embeddingModel.model is empty', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ embeddingModel: { provider: 'openai', model: '' },
+ })
+ expect(result).toBe(false)
+ })
+
+ it('should return false when embedding model provider is not found', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ embeddingModel: { provider: 'unknown-provider', model: 'text-embedding-ada-002' },
+ })
+ expect(result).toBe(false)
+ })
+
+ it('should return false when embedding model is not found in provider', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ embeddingModel: { provider: 'openai', model: 'unknown-model' },
+ })
+ expect(result).toBe(false)
+ })
+
+ it('should return false when embedding model does not support vision', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ embeddingModelList: [
+ createModelProvider('openai', [
+ createModelItem('text-embedding-ada-002', []), // No vision feature
+ ]),
+ ],
+ })
+ expect(result).toBe(false)
+ })
+
+ it('should return false when rerankingEnable is false', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ rerankingEnable: false,
+ })
+ expect(result).toBe(false)
+ })
+
+ it('should return false when rerankingModelName is empty', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ rerankModel: {
+ rerankingProviderName: 'cohere',
+ rerankingModelName: '',
+ },
+ })
+ expect(result).toBe(false)
+ })
+
+ it('should return false when rerankingProviderName is empty', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ rerankModel: {
+ rerankingProviderName: '',
+ rerankingModelName: 'rerank-english-v2.0',
+ },
+ })
+ expect(result).toBe(false)
+ })
+
+ it('should return false when reranking model provider is not found', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ rerankModel: {
+ rerankingProviderName: 'unknown-provider',
+ rerankingModelName: 'rerank-english-v2.0',
+ },
+ })
+ expect(result).toBe(false)
+ })
+
+ it('should return false when reranking model is not found in provider', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ rerankModel: {
+ rerankingProviderName: 'cohere',
+ rerankingModelName: 'unknown-model',
+ },
+ })
+ expect(result).toBe(false)
+ })
+
+ it('should return false when reranking model supports vision', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ rerankModelList: [
+ createModelProvider('cohere', [
+ createModelItem('rerank-english-v2.0', [ModelFeatureEnum.vision]), // Has vision feature
+ ]),
+ ],
+ })
+ expect(result).toBe(false)
+ })
+ })
+
+ describe('Return true condition', () => {
+ it('should return true when embedding model supports vision but reranking model does not', () => {
+ const result = checkShowMultiModalTip(defaultProps)
+ expect(result).toBe(true)
+ })
+
+ it('should return true with different providers', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ embeddingModel: { provider: 'azure', model: 'azure-embedding' },
+ rerankModel: {
+ rerankingProviderName: 'jina',
+ rerankingModelName: 'jina-reranker',
+ },
+ embeddingModelList: [
+ createModelProvider('azure', [
+ createModelItem('azure-embedding', [ModelFeatureEnum.vision]),
+ ]),
+ ],
+ rerankModelList: [
+ createModelProvider('jina', [
+ createModelItem('jina-reranker', []),
+ ]),
+ ],
+ })
+ expect(result).toBe(true)
+ })
+ })
+
+ describe('Edge cases', () => {
+ it('should handle empty embeddingModelList', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ embeddingModelList: [],
+ })
+ expect(result).toBe(false)
+ })
+
+ it('should handle empty rerankModelList', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ rerankModelList: [],
+ })
+ expect(result).toBe(false)
+ })
+
+ it('should handle model with undefined features', () => {
+ const modelItem: ModelItem = {
+ model: 'test-model',
+ label: { en_US: 'test', zh_Hans: 'test' },
+ model_type: ModelTypeEnum.textEmbedding,
+ features: undefined as unknown as ModelFeatureEnum[],
+ fetch_from: ConfigurationMethodEnum.predefinedModel,
+ status: ModelStatusEnum.active,
+ model_properties: {},
+ load_balancing_enabled: false,
+ deprecated: false,
+ }
+
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ embeddingModelList: [
+ createModelProvider('openai', [modelItem]),
+ ],
+ })
+ expect(result).toBe(false)
+ })
+
+ it('should handle model with null features', () => {
+ const modelItem: ModelItem = {
+ model: 'text-embedding-ada-002',
+ label: { en_US: 'test', zh_Hans: 'test' },
+ model_type: ModelTypeEnum.textEmbedding,
+ features: null as unknown as ModelFeatureEnum[],
+ fetch_from: ConfigurationMethodEnum.predefinedModel,
+ status: ModelStatusEnum.active,
+ model_properties: {},
+ load_balancing_enabled: false,
+ deprecated: false,
+ }
+
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ embeddingModelList: [
+ createModelProvider('openai', [modelItem]),
+ ],
+ })
+ expect(result).toBe(false)
+ })
+
+ it('should handle multiple models in provider', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ embeddingModelList: [
+ createModelProvider('openai', [
+ createModelItem('text-embedding-1', []),
+ createModelItem('text-embedding-ada-002', [ModelFeatureEnum.vision]),
+ createModelItem('text-embedding-3', []),
+ ]),
+ ],
+ })
+ expect(result).toBe(true)
+ })
+
+ it('should handle multiple providers in list', () => {
+ const result = checkShowMultiModalTip({
+ ...defaultProps,
+ embeddingModelList: [
+ createModelProvider('azure', [
+ createModelItem('azure-model', []),
+ ]),
+ createModelProvider('openai', [
+ createModelItem('text-embedding-ada-002', [ModelFeatureEnum.vision]),
+ ]),
+ ],
+ })
+ expect(result).toBe(true)
+ })
+ })
+})