({
+ isCollapsed: true,
+ fullScreen: false,
+ toggleFullScreen: noop,
+ currSegment: { showModal: false },
+ currChildChunk: { showModal: false },
+})
+
+// Mock the context module
+vi.mock('..', () => ({
+ useSegmentListContext: (selector: (value: SegmentListContextValue) => unknown) => {
+ return useContextSelector(MockSegmentListContext, selector)
+ },
+}))
+
+// Helper to create wrapper with context
+const createWrapper = (isCollapsed: boolean = true) => {
+ return ({ children }: { children: React.ReactNode }) => (
+
+ {children}
+
+ )
+}
+
+describe('ChunkContent', () => {
+ const defaultDetail = {
+ content: 'Test content',
+ sign_content: 'Test sign content',
+ }
+
+ // Rendering tests
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ // Arrange & Act
+ const { container } = render(
+ ,
+ { wrapper: createWrapper() },
+ )
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render content in non-QA mode', () => {
+ // Arrange & Act
+ const { container } = render(
+ ,
+ { wrapper: createWrapper() },
+ )
+
+ // Assert - should render without Q and A labels
+ expect(container.textContent).not.toContain('Q')
+ expect(container.textContent).not.toContain('A')
+ })
+ })
+
+ // QA mode tests
+ describe('QA Mode', () => {
+ it('should render Q and A labels when answer is present', () => {
+ // Arrange
+ const qaDetail = {
+ content: 'Question content',
+ sign_content: 'Sign content',
+ answer: 'Answer content',
+ }
+
+ // Act
+ render(
+ ,
+ { wrapper: createWrapper() },
+ )
+
+ // Assert
+ expect(screen.getByText('Q')).toBeInTheDocument()
+ expect(screen.getByText('A')).toBeInTheDocument()
+ })
+
+ it('should not render Q and A labels when answer is undefined', () => {
+ // Arrange & Act
+ render(
+ ,
+ { wrapper: createWrapper() },
+ )
+
+ // Assert
+ expect(screen.queryByText('Q')).not.toBeInTheDocument()
+ expect(screen.queryByText('A')).not.toBeInTheDocument()
+ })
+ })
+
+ // Props tests
+ describe('Props', () => {
+ it('should apply custom className', () => {
+ // Arrange & Act
+ const { container } = render(
+ ,
+ { wrapper: createWrapper() },
+ )
+
+ // Assert
+ expect(container.querySelector('.custom-class')).toBeInTheDocument()
+ })
+
+ it('should handle isFullDocMode=true', () => {
+ // Arrange & Act
+ const { container } = render(
+ ,
+ { wrapper: createWrapper() },
+ )
+
+ // Assert - should have line-clamp-3 class
+ expect(container.querySelector('.line-clamp-3')).toBeInTheDocument()
+ })
+
+ it('should handle isFullDocMode=false with isCollapsed=true', () => {
+ // Arrange & Act
+ const { container } = render(
+ ,
+ { wrapper: createWrapper(true) },
+ )
+
+ // Assert - should have line-clamp-2 class
+ expect(container.querySelector('.line-clamp-2')).toBeInTheDocument()
+ })
+
+ it('should handle isFullDocMode=false with isCollapsed=false', () => {
+ // Arrange & Act
+ const { container } = render(
+ ,
+ { wrapper: createWrapper(false) },
+ )
+
+ // Assert - should have line-clamp-20 class
+ expect(container.querySelector('.line-clamp-20')).toBeInTheDocument()
+ })
+ })
+
+ // Content priority tests
+ describe('Content Priority', () => {
+ it('should prefer sign_content over content when both exist', () => {
+ // Arrange
+ const detail = {
+ content: 'Regular content',
+ sign_content: 'Sign content',
+ }
+
+ // Act
+ const { container } = render(
+ ,
+ { wrapper: createWrapper() },
+ )
+
+ // Assert - The component uses sign_content || content
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should use content when sign_content is empty', () => {
+ // Arrange
+ const detail = {
+ content: 'Regular content',
+ sign_content: '',
+ }
+
+ // Act
+ const { container } = render(
+ ,
+ { wrapper: createWrapper() },
+ )
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+ })
+
+ // Edge cases
+ describe('Edge Cases', () => {
+ it('should handle empty content', () => {
+ // Arrange
+ const emptyDetail = {
+ content: '',
+ sign_content: '',
+ }
+
+ // Act
+ const { container } = render(
+ ,
+ { wrapper: createWrapper() },
+ )
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should handle empty answer in QA mode', () => {
+ // Arrange
+ const qaDetail = {
+ content: 'Question',
+ sign_content: '',
+ answer: '',
+ }
+
+ // Act - empty answer is falsy, so QA mode won't render
+ render(
+ ,
+ { wrapper: createWrapper() },
+ )
+
+ // Assert - should not show Q and A labels since answer is empty string (falsy)
+ expect(screen.queryByText('Q')).not.toBeInTheDocument()
+ })
+
+ it('should maintain structure when rerendered', () => {
+ // Arrange
+ const { rerender, container } = render(
+ ,
+ { wrapper: createWrapper() },
+ )
+
+ // Act
+ rerender(
+
+
+ ,
+ )
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/documents/detail/completed/segment-detail.spec.tsx b/web/app/components/datasets/documents/detail/completed/segment-detail.spec.tsx
new file mode 100644
index 0000000000..be4b2b0a0e
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/completed/segment-detail.spec.tsx
@@ -0,0 +1,507 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { IndexingType } from '@/app/components/datasets/create/step-two'
+import { ChunkingMode } from '@/models/datasets'
+
+import SegmentDetail from './segment-detail'
+
+// Mock dataset detail context
+let mockIndexingTechnique = IndexingType.QUALIFIED
+let mockRuntimeMode = 'general'
+vi.mock('@/context/dataset-detail', () => ({
+ useDatasetDetailContextWithSelector: (selector: (state: { dataset: { indexing_technique: string, runtime_mode: string } }) => unknown) => {
+ return selector({
+ dataset: {
+ indexing_technique: mockIndexingTechnique,
+ runtime_mode: mockRuntimeMode,
+ },
+ })
+ },
+}))
+
+// Mock document context
+let mockParentMode = 'paragraph'
+vi.mock('../context', () => ({
+ useDocumentContext: (selector: (state: { parentMode: string }) => unknown) => {
+ return selector({ parentMode: mockParentMode })
+ },
+}))
+
+// Mock segment list context
+let mockFullScreen = false
+const mockToggleFullScreen = vi.fn()
+vi.mock('./index', () => ({
+ useSegmentListContext: (selector: (state: { fullScreen: boolean, toggleFullScreen: () => void }) => unknown) => {
+ const state = {
+ fullScreen: mockFullScreen,
+ toggleFullScreen: mockToggleFullScreen,
+ }
+ return selector(state)
+ },
+}))
+
+// Mock event emitter context
+vi.mock('@/context/event-emitter', () => ({
+ useEventEmitterContextContext: () => ({
+ eventEmitter: {
+ useSubscription: vi.fn(),
+ },
+ }),
+}))
+
+// Mock child components
+vi.mock('./common/action-buttons', () => ({
+ default: ({ handleCancel, handleSave, handleRegeneration, loading, showRegenerationButton }: { handleCancel: () => void, handleSave: () => void, handleRegeneration?: () => void, loading: boolean, showRegenerationButton?: boolean }) => (
+
+
+
+ {showRegenerationButton && (
+
+ )}
+
+ ),
+}))
+
+vi.mock('./common/chunk-content', () => ({
+ default: ({ docForm, question, answer, onQuestionChange, onAnswerChange, isEditMode }: { docForm: string, question: string, answer: string, onQuestionChange: (v: string) => void, onAnswerChange: (v: string) => void, isEditMode: boolean }) => (
+
+ onQuestionChange(e.target.value)}
+ />
+ {docForm === ChunkingMode.qa && (
+ onAnswerChange(e.target.value)}
+ />
+ )}
+ {isEditMode ? 'editing' : 'viewing'}
+
+ ),
+}))
+
+vi.mock('./common/dot', () => ({
+ default: () => •,
+}))
+
+vi.mock('./common/keywords', () => ({
+ default: ({ keywords, onKeywordsChange, _isEditMode, actionType }: { keywords: string[], onKeywordsChange: (v: string[]) => void, _isEditMode?: boolean, actionType: string }) => (
+
+ {actionType}
+ onKeywordsChange(e.target.value.split(',').filter(Boolean))}
+ />
+
+ ),
+}))
+
+vi.mock('./common/segment-index-tag', () => ({
+ SegmentIndexTag: ({ positionId, label, labelPrefix }: { positionId?: string, label?: string, labelPrefix?: string }) => (
+
+ {labelPrefix}
+ {' '}
+ {positionId}
+ {' '}
+ {label}
+
+ ),
+}))
+
+vi.mock('./common/regeneration-modal', () => ({
+ default: ({ isShow, onConfirm, onCancel, onClose }: { isShow: boolean, onConfirm: () => void, onCancel: () => void, onClose: () => void }) => (
+ isShow
+ ? (
+
+
+
+
+
+ )
+ : null
+ ),
+}))
+
+vi.mock('@/app/components/datasets/common/image-uploader/image-uploader-in-chunk', () => ({
+ default: ({ disabled }: { value?: unknown[], onChange?: (v: unknown[]) => void, disabled?: boolean }) => (
+
+ {disabled ? 'disabled' : 'enabled'}
+
+ ),
+}))
+
+describe('SegmentDetail', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockFullScreen = false
+ mockIndexingTechnique = IndexingType.QUALIFIED
+ mockRuntimeMode = 'general'
+ mockParentMode = 'paragraph'
+ })
+
+ const defaultSegInfo = {
+ id: 'segment-1',
+ content: 'Test content',
+ sign_content: 'Signed content',
+ answer: 'Test answer',
+ position: 1,
+ word_count: 100,
+ keywords: ['keyword1', 'keyword2'],
+ attachments: [],
+ }
+
+ const defaultProps = {
+ segInfo: defaultSegInfo,
+ onUpdate: vi.fn(),
+ onCancel: vi.fn(),
+ isEditMode: false,
+ docForm: ChunkingMode.text,
+ onModalStateChange: vi.fn(),
+ }
+
+ // Rendering tests
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render title for view mode', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByText(/segment\.chunkDetail/i)).toBeInTheDocument()
+ })
+
+ it('should render title for edit mode', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByText(/segment\.editChunk/i)).toBeInTheDocument()
+ })
+
+ it('should render chunk content component', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('chunk-content')).toBeInTheDocument()
+ })
+
+ it('should render image uploader', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('image-uploader')).toBeInTheDocument()
+ })
+
+ it('should render segment index tag', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('segment-index-tag')).toBeInTheDocument()
+ })
+ })
+
+ // Edit mode vs View mode
+ describe('Edit/View Mode', () => {
+ it('should pass isEditMode to ChunkContent', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('edit-mode')).toHaveTextContent('editing')
+ })
+
+ it('should disable image uploader in view mode', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('uploader-disabled')).toHaveTextContent('disabled')
+ })
+
+ it('should enable image uploader in edit mode', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('uploader-disabled')).toHaveTextContent('enabled')
+ })
+
+ it('should show action buttons in edit mode', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('action-buttons')).toBeInTheDocument()
+ })
+
+ it('should not show action buttons in view mode (non-fullscreen)', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.queryByTestId('action-buttons')).not.toBeInTheDocument()
+ })
+ })
+
+ // Keywords display
+ describe('Keywords', () => {
+ it('should show keywords component when indexing is ECONOMICAL', () => {
+ // Arrange
+ mockIndexingTechnique = IndexingType.ECONOMICAL
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('keywords')).toBeInTheDocument()
+ })
+
+ it('should not show keywords when indexing is QUALIFIED', () => {
+ // Arrange
+ mockIndexingTechnique = IndexingType.QUALIFIED
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.queryByTestId('keywords')).not.toBeInTheDocument()
+ })
+
+ it('should pass view action type when not in edit mode', () => {
+ // Arrange
+ mockIndexingTechnique = IndexingType.ECONOMICAL
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('keywords-action')).toHaveTextContent('view')
+ })
+
+ it('should pass edit action type when in edit mode', () => {
+ // Arrange
+ mockIndexingTechnique = IndexingType.ECONOMICAL
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('keywords-action')).toHaveTextContent('edit')
+ })
+ })
+
+ // User Interactions
+ describe('User Interactions', () => {
+ it('should call onCancel when close button is clicked', () => {
+ // Arrange
+ const mockOnCancel = vi.fn()
+ const { container } = render()
+
+ // Act
+ const closeButtons = container.querySelectorAll('.cursor-pointer')
+ if (closeButtons.length > 1)
+ fireEvent.click(closeButtons[1])
+
+ // Assert
+ expect(mockOnCancel).toHaveBeenCalled()
+ })
+
+ it('should call toggleFullScreen when expand button is clicked', () => {
+ // Arrange
+ const { container } = render()
+
+ // Act
+ const expandButtons = container.querySelectorAll('.cursor-pointer')
+ if (expandButtons.length > 0)
+ fireEvent.click(expandButtons[0])
+
+ // Assert
+ expect(mockToggleFullScreen).toHaveBeenCalled()
+ })
+
+ it('should call onUpdate when save is clicked', () => {
+ // Arrange
+ const mockOnUpdate = vi.fn()
+ render()
+
+ // Act
+ fireEvent.click(screen.getByTestId('save-btn'))
+
+ // Assert
+ expect(mockOnUpdate).toHaveBeenCalledWith(
+ 'segment-1',
+ expect.any(String),
+ expect.any(String),
+ expect.any(Array),
+ expect.any(Array),
+ )
+ })
+
+ it('should update question when input changes', () => {
+ // Arrange
+ render()
+
+ // Act
+ fireEvent.change(screen.getByTestId('question-input'), {
+ target: { value: 'Updated content' },
+ })
+
+ // Assert
+ expect(screen.getByTestId('question-input')).toHaveValue('Updated content')
+ })
+ })
+
+ // Regeneration Modal
+ describe('Regeneration Modal', () => {
+ it('should show regeneration button when runtimeMode is general', () => {
+ // Arrange
+ mockRuntimeMode = 'general'
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('regenerate-btn')).toBeInTheDocument()
+ })
+
+ it('should not show regeneration button when runtimeMode is not general', () => {
+ // Arrange
+ mockRuntimeMode = 'pipeline'
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.queryByTestId('regenerate-btn')).not.toBeInTheDocument()
+ })
+
+ it('should show regeneration modal when regenerate is clicked', () => {
+ // Arrange
+ render()
+
+ // Act
+ fireEvent.click(screen.getByTestId('regenerate-btn'))
+
+ // Assert
+ expect(screen.getByTestId('regeneration-modal')).toBeInTheDocument()
+ })
+
+ it('should call onModalStateChange when regeneration modal opens', () => {
+ // Arrange
+ const mockOnModalStateChange = vi.fn()
+ render(
+ ,
+ )
+
+ // Act
+ fireEvent.click(screen.getByTestId('regenerate-btn'))
+
+ // Assert
+ expect(mockOnModalStateChange).toHaveBeenCalledWith(true)
+ })
+
+ it('should close modal when cancel is clicked', () => {
+ // Arrange
+ const mockOnModalStateChange = vi.fn()
+ render(
+ ,
+ )
+ fireEvent.click(screen.getByTestId('regenerate-btn'))
+
+ // Act
+ fireEvent.click(screen.getByTestId('cancel-regeneration'))
+
+ // Assert
+ expect(mockOnModalStateChange).toHaveBeenCalledWith(false)
+ expect(screen.queryByTestId('regeneration-modal')).not.toBeInTheDocument()
+ })
+ })
+
+ // Full screen mode
+ describe('Full Screen Mode', () => {
+ it('should show action buttons in header when fullScreen and editMode', () => {
+ // Arrange
+ mockFullScreen = true
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('action-buttons')).toBeInTheDocument()
+ })
+
+ it('should apply full screen styling when fullScreen is true', () => {
+ // Arrange
+ mockFullScreen = true
+
+ // Act
+ const { container } = render()
+
+ // Assert
+ const header = container.querySelector('.border-divider-subtle')
+ expect(header).toBeInTheDocument()
+ })
+ })
+
+ // Edge cases
+ describe('Edge Cases', () => {
+ it('should handle segInfo with minimal data', () => {
+ // Arrange
+ const minimalSegInfo = {
+ id: 'segment-minimal',
+ position: 1,
+ word_count: 0,
+ }
+
+ // Act
+ const { container } = render()
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should handle empty keywords array', () => {
+ // Arrange
+ mockIndexingTechnique = IndexingType.ECONOMICAL
+ const segInfo = { ...defaultSegInfo, keywords: [] }
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('keywords-input')).toHaveValue('')
+ })
+
+ it('should maintain structure when rerendered', () => {
+ // Arrange
+ const { rerender } = render()
+
+ // Act
+ rerender()
+
+ // Assert
+ expect(screen.getByTestId('action-buttons')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/documents/detail/completed/segment-list.spec.tsx b/web/app/components/datasets/documents/detail/completed/segment-list.spec.tsx
new file mode 100644
index 0000000000..62dc804395
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/completed/segment-list.spec.tsx
@@ -0,0 +1,297 @@
+import type { SegmentDetailModel } from '@/models/datasets'
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ChunkingMode } from '@/models/datasets'
+
+import SegmentList from './segment-list'
+
+// Mock document context
+let mockDocForm = ChunkingMode.text
+let mockParentMode = 'paragraph'
+vi.mock('../context', () => ({
+ useDocumentContext: (selector: (state: { docForm: ChunkingMode, parentMode: string }) => unknown) => {
+ return selector({
+ docForm: mockDocForm,
+ parentMode: mockParentMode,
+ })
+ },
+}))
+
+// Mock segment list context
+let mockCurrSegment: { segInfo: { id: string } } | null = null
+let mockCurrChildChunk: { childChunkInfo: { segment_id: string } } | null = null
+vi.mock('./index', () => ({
+ useSegmentListContext: (selector: (state: { currSegment: { segInfo: { id: string } } | null, currChildChunk: { childChunkInfo: { segment_id: string } } | null }) => unknown) => {
+ return selector({
+ currSegment: mockCurrSegment,
+ currChildChunk: mockCurrChildChunk,
+ })
+ },
+}))
+
+// Mock child components
+vi.mock('./common/empty', () => ({
+ default: ({ onClearFilter }: { onClearFilter: () => void }) => (
+
+
+
+ ),
+}))
+
+vi.mock('./segment-card', () => ({
+ default: ({ detail, onClick, _onChangeSwitch, archived, embeddingAvailable, focused }: { detail: SegmentDetailModel, onClick: () => void, _onChangeSwitch?: () => void, archived: boolean, embeddingAvailable: boolean, focused: { segmentIndex: boolean, segmentContent: boolean } }) => (
+
+ {detail.content}
+ {archived ? 'true' : 'false'}
+ {embeddingAvailable ? 'true' : 'false'}
+ {focused.segmentIndex ? 'true' : 'false'}
+ {focused.segmentContent ? 'true' : 'false'}
+
+
+ ),
+}))
+
+vi.mock('./skeleton/general-list-skeleton', () => ({
+ default: () => Loading...
,
+}))
+
+vi.mock('./skeleton/paragraph-list-skeleton', () => ({
+ default: () => Loading Paragraph...
,
+}))
+
+describe('SegmentList', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockDocForm = ChunkingMode.text
+ mockParentMode = 'paragraph'
+ mockCurrSegment = null
+ mockCurrChildChunk = null
+ })
+
+ const createMockSegment = (id: string, content: string): SegmentDetailModel => ({
+ id,
+ content,
+ position: 1,
+ word_count: 10,
+ tokens: 5,
+ hit_count: 0,
+ enabled: true,
+ status: 'completed',
+ created_at: Date.now(),
+ updated_at: Date.now(),
+ keywords: [],
+ document_id: 'doc-1',
+ sign_content: content,
+ index_node_id: `index-${id}`,
+ index_node_hash: `hash-${id}`,
+ answer: '',
+ error: null,
+ disabled_at: null,
+ disabled_by: null,
+ } as unknown as SegmentDetailModel)
+
+ const defaultProps = {
+ ref: null,
+ isLoading: false,
+ items: [createMockSegment('seg-1', 'Segment 1 content')],
+ selectedSegmentIds: [],
+ onSelected: vi.fn(),
+ onClick: vi.fn(),
+ onChangeSwitch: vi.fn(),
+ onDelete: vi.fn(),
+ onDeleteChildChunk: vi.fn(),
+ handleAddNewChildChunk: vi.fn(),
+ onClickSlice: vi.fn(),
+ archived: false,
+ embeddingAvailable: true,
+ onClearFilter: vi.fn(),
+ }
+
+ // Rendering tests
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render segment cards for each item', () => {
+ // Arrange
+ const items = [
+ createMockSegment('seg-1', 'Content 1'),
+ createMockSegment('seg-2', 'Content 2'),
+ ]
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getAllByTestId('segment-card')).toHaveLength(2)
+ })
+
+ it('should render empty component when items is empty', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('empty')).toBeInTheDocument()
+ })
+ })
+
+ // Loading state
+ describe('Loading State', () => {
+ it('should render general skeleton when loading and docForm is text', () => {
+ // Arrange
+ mockDocForm = ChunkingMode.text
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('general-skeleton')).toBeInTheDocument()
+ })
+
+ it('should render paragraph skeleton when loading and docForm is parentChild with paragraph mode', () => {
+ // Arrange
+ mockDocForm = ChunkingMode.parentChild
+ mockParentMode = 'paragraph'
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('paragraph-skeleton')).toBeInTheDocument()
+ })
+
+ it('should render general skeleton when loading and docForm is parentChild with full-doc mode', () => {
+ // Arrange
+ mockDocForm = ChunkingMode.parentChild
+ mockParentMode = 'full-doc'
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('general-skeleton')).toBeInTheDocument()
+ })
+ })
+
+ // Props passing
+ describe('Props Passing', () => {
+ it('should pass archived prop to SegmentCard', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('archived')).toHaveTextContent('true')
+ })
+
+ it('should pass embeddingAvailable prop to SegmentCard', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('embedding-available')).toHaveTextContent('false')
+ })
+ })
+
+ // Focused state
+ describe('Focused State', () => {
+ it('should set focused index when currSegment matches', () => {
+ // Arrange
+ mockCurrSegment = { segInfo: { id: 'seg-1' } }
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('focused-index')).toHaveTextContent('true')
+ })
+
+ it('should set focused content when currSegment matches', () => {
+ // Arrange
+ mockCurrSegment = { segInfo: { id: 'seg-1' } }
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('focused-content')).toHaveTextContent('true')
+ })
+
+ it('should set focused when currChildChunk parent matches', () => {
+ // Arrange
+ mockCurrChildChunk = { childChunkInfo: { segment_id: 'seg-1' } }
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('focused-index')).toHaveTextContent('true')
+ })
+ })
+
+ // Clear filter
+ describe('Clear Filter', () => {
+ it('should call onClearFilter when clear filter button is clicked', async () => {
+ // Arrange
+ const mockOnClearFilter = vi.fn()
+ render()
+
+ // Act
+ screen.getByTestId('clear-filter-btn').click()
+
+ // Assert
+ expect(mockOnClearFilter).toHaveBeenCalled()
+ })
+ })
+
+ // Edge cases
+ describe('Edge Cases', () => {
+ it('should handle single item without divider', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('segment-card')).toBeInTheDocument()
+ })
+
+ it('should handle multiple items with dividers', () => {
+ // Arrange
+ const items = [
+ createMockSegment('seg-1', 'Content 1'),
+ createMockSegment('seg-2', 'Content 2'),
+ createMockSegment('seg-3', 'Content 3'),
+ ]
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getAllByTestId('segment-card')).toHaveLength(3)
+ })
+
+ it('should maintain structure when rerendered with different items', () => {
+ // Arrange
+ const { rerender } = render(
+ ,
+ )
+
+ // Act
+ rerender(
+ ,
+ )
+
+ // Assert
+ expect(screen.getAllByTestId('segment-card')).toHaveLength(2)
+ })
+ })
+})
diff --git a/web/app/components/datasets/documents/detail/completed/skeleton/full-doc-list-skeleton.spec.tsx b/web/app/components/datasets/documents/detail/completed/skeleton/full-doc-list-skeleton.spec.tsx
new file mode 100644
index 0000000000..08ba55cc35
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/completed/skeleton/full-doc-list-skeleton.spec.tsx
@@ -0,0 +1,124 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import FullDocListSkeleton from './full-doc-list-skeleton'
+
+describe('FullDocListSkeleton', () => {
+ // Rendering tests
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render the correct number of slice elements', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - component renders 15 slices
+ const sliceElements = container.querySelectorAll('.flex.flex-col.gap-y-1')
+ expect(sliceElements).toHaveLength(15)
+ })
+
+ it('should render mask overlay element', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - check for the mask overlay element
+ const maskElement = container.querySelector('.bg-dataset-chunk-list-mask-bg')
+ expect(maskElement).toBeInTheDocument()
+ })
+
+ it('should render with correct container classes', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ const containerElement = container.firstChild as HTMLElement
+ expect(containerElement).toHaveClass('relative')
+ expect(containerElement).toHaveClass('z-10')
+ expect(containerElement).toHaveClass('flex')
+ expect(containerElement).toHaveClass('w-full')
+ expect(containerElement).toHaveClass('grow')
+ expect(containerElement).toHaveClass('flex-col')
+ expect(containerElement).toHaveClass('gap-y-3')
+ expect(containerElement).toHaveClass('overflow-y-hidden')
+ })
+ })
+
+ // Structure tests
+ describe('Structure', () => {
+ it('should render slice elements with proper structure', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - each slice should have the content placeholder elements
+ const slices = container.querySelectorAll('.flex.flex-col.gap-y-1')
+ slices.forEach((slice) => {
+ // Each slice should have children for the skeleton content
+ expect(slice.children.length).toBeGreaterThan(0)
+ })
+ })
+
+ it('should render slice with width placeholder elements', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - check for skeleton content width class
+ const widthElements = container.querySelectorAll('.w-2\\/3')
+ expect(widthElements.length).toBeGreaterThan(0)
+ })
+
+ it('should render slice elements with background classes', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - check for skeleton background classes
+ const bgElements = container.querySelectorAll('.bg-state-base-hover')
+ expect(bgElements.length).toBeGreaterThan(0)
+ })
+ })
+
+ // Memoization tests
+ describe('Memoization', () => {
+ it('should render consistently across multiple renders', () => {
+ // Arrange & Act
+ const { container: container1 } = render()
+ const { container: container2 } = render()
+
+ // Assert - structure should be identical
+ const slices1 = container1.querySelectorAll('.flex.flex-col.gap-y-1')
+ const slices2 = container2.querySelectorAll('.flex.flex-col.gap-y-1')
+ expect(slices1.length).toBe(slices2.length)
+ })
+ })
+
+ // Edge cases
+ describe('Edge Cases', () => {
+ it('should maintain structure when rendered multiple times', () => {
+ // Arrange
+ const { rerender, container } = render()
+
+ // Act
+ rerender()
+ rerender()
+
+ // Assert
+ const sliceElements = container.querySelectorAll('.flex.flex-col.gap-y-1')
+ expect(sliceElements).toHaveLength(15)
+ })
+
+ it('should not have accessibility issues with skeleton content', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - skeleton should be purely visual, no interactive elements
+ const buttons = container.querySelectorAll('button')
+ const links = container.querySelectorAll('a')
+ expect(buttons).toHaveLength(0)
+ expect(links).toHaveLength(0)
+ })
+ })
+})
diff --git a/web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.spec.tsx b/web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.spec.tsx
new file mode 100644
index 0000000000..0430724671
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.spec.tsx
@@ -0,0 +1,195 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import GeneralListSkeleton, { CardSkelton } from './general-list-skeleton'
+
+describe('CardSkelton', () => {
+ // Rendering tests
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render skeleton rows', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - component should have skeleton rectangle elements
+ const skeletonRectangles = container.querySelectorAll('.bg-text-quaternary')
+ expect(skeletonRectangles.length).toBeGreaterThan(0)
+ })
+
+ it('should render with proper container padding', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ expect(container.querySelector('.p-1')).toBeInTheDocument()
+ expect(container.querySelector('.pb-2')).toBeInTheDocument()
+ })
+ })
+
+ // Structure tests
+ describe('Structure', () => {
+ it('should render skeleton points as separators', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - check for opacity class on skeleton points
+ const opacityElements = container.querySelectorAll('.opacity-20')
+ expect(opacityElements.length).toBeGreaterThan(0)
+ })
+
+ it('should render width-constrained skeleton elements', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - check for various width classes
+ expect(container.querySelector('.w-\\[72px\\]')).toBeInTheDocument()
+ expect(container.querySelector('.w-24')).toBeInTheDocument()
+ expect(container.querySelector('.w-full')).toBeInTheDocument()
+ })
+ })
+})
+
+describe('GeneralListSkeleton', () => {
+ // Rendering tests
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render the correct number of list items', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - component renders 10 items (Checkbox is a div with shrink-0 and h-4 w-4)
+ const listItems = container.querySelectorAll('.items-start.gap-x-2')
+ expect(listItems).toHaveLength(10)
+ })
+
+ it('should render mask overlay element', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ const maskElement = container.querySelector('.bg-dataset-chunk-list-mask-bg')
+ expect(maskElement).toBeInTheDocument()
+ })
+
+ it('should render with correct container classes', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ const containerElement = container.firstChild as HTMLElement
+ expect(containerElement).toHaveClass('relative')
+ expect(containerElement).toHaveClass('z-10')
+ expect(containerElement).toHaveClass('flex')
+ expect(containerElement).toHaveClass('grow')
+ expect(containerElement).toHaveClass('flex-col')
+ expect(containerElement).toHaveClass('overflow-y-hidden')
+ })
+ })
+
+ // Checkbox tests
+ describe('Checkboxes', () => {
+ it('should render disabled checkboxes', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - Checkbox component uses cursor-not-allowed class when disabled
+ const disabledCheckboxes = container.querySelectorAll('.cursor-not-allowed')
+ expect(disabledCheckboxes.length).toBeGreaterThan(0)
+ })
+
+ it('should render checkboxes with shrink-0 class for consistent sizing', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ const checkboxContainers = container.querySelectorAll('.shrink-0')
+ expect(checkboxContainers.length).toBeGreaterThan(0)
+ })
+ })
+
+ // Divider tests
+ describe('Dividers', () => {
+ it('should render dividers between items except for the last one', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - should have 9 dividers (not after last item)
+ const dividers = container.querySelectorAll('.bg-divider-subtle')
+ expect(dividers).toHaveLength(9)
+ })
+ })
+
+ // Structure tests
+ describe('Structure', () => {
+ it('should render list items with proper gap styling', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ const listItems = container.querySelectorAll('.gap-x-2')
+ expect(listItems.length).toBeGreaterThan(0)
+ })
+
+ it('should render CardSkelton inside each list item', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - each list item should contain card skeleton content
+ const cardContainers = container.querySelectorAll('.grow')
+ expect(cardContainers.length).toBeGreaterThan(0)
+ })
+ })
+
+ // Memoization tests
+ describe('Memoization', () => {
+ it('should render consistently across multiple renders', () => {
+ // Arrange & Act
+ const { container: container1 } = render()
+ const { container: container2 } = render()
+
+ // Assert
+ const checkboxes1 = container1.querySelectorAll('input[type="checkbox"]')
+ const checkboxes2 = container2.querySelectorAll('input[type="checkbox"]')
+ expect(checkboxes1.length).toBe(checkboxes2.length)
+ })
+ })
+
+ // Edge cases
+ describe('Edge Cases', () => {
+ it('should maintain structure when rerendered', () => {
+ // Arrange
+ const { rerender, container } = render()
+
+ // Act
+ rerender()
+
+ // Assert
+ const listItems = container.querySelectorAll('.items-start.gap-x-2')
+ expect(listItems).toHaveLength(10)
+ })
+
+ it('should not have interactive elements besides disabled checkboxes', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ const buttons = container.querySelectorAll('button')
+ const links = container.querySelectorAll('a')
+ expect(buttons).toHaveLength(0)
+ expect(links).toHaveLength(0)
+ })
+ })
+})
diff --git a/web/app/components/datasets/documents/detail/completed/skeleton/paragraph-list-skeleton.spec.tsx b/web/app/components/datasets/documents/detail/completed/skeleton/paragraph-list-skeleton.spec.tsx
new file mode 100644
index 0000000000..a26b357e1e
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/completed/skeleton/paragraph-list-skeleton.spec.tsx
@@ -0,0 +1,151 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import ParagraphListSkeleton from './paragraph-list-skeleton'
+
+describe('ParagraphListSkeleton', () => {
+ // Rendering tests
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render the correct number of list items', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - component renders 10 items
+ const listItems = container.querySelectorAll('.items-start.gap-x-2')
+ expect(listItems).toHaveLength(10)
+ })
+
+ it('should render mask overlay element', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ const maskElement = container.querySelector('.bg-dataset-chunk-list-mask-bg')
+ expect(maskElement).toBeInTheDocument()
+ })
+
+ it('should render with correct container classes', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ const containerElement = container.firstChild as HTMLElement
+ expect(containerElement).toHaveClass('relative')
+ expect(containerElement).toHaveClass('z-10')
+ expect(containerElement).toHaveClass('flex')
+ expect(containerElement).toHaveClass('h-full')
+ expect(containerElement).toHaveClass('flex-col')
+ expect(containerElement).toHaveClass('overflow-y-hidden')
+ })
+ })
+
+ // Checkbox tests
+ describe('Checkboxes', () => {
+ it('should render disabled checkboxes', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - Checkbox component uses cursor-not-allowed class when disabled
+ const disabledCheckboxes = container.querySelectorAll('.cursor-not-allowed')
+ expect(disabledCheckboxes.length).toBeGreaterThan(0)
+ })
+
+ it('should render checkboxes with shrink-0 class for consistent sizing', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ const checkboxContainers = container.querySelectorAll('.shrink-0')
+ expect(checkboxContainers.length).toBeGreaterThan(0)
+ })
+ })
+
+ // Divider tests
+ describe('Dividers', () => {
+ it('should render dividers between items except for the last one', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - should have 9 dividers (not after last item)
+ const dividers = container.querySelectorAll('.bg-divider-subtle')
+ expect(dividers).toHaveLength(9)
+ })
+ })
+
+ // Structure tests
+ describe('Structure', () => {
+ it('should render arrow icon for expand button styling', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - paragraph list skeleton has expand button styled area
+ const expandBtnElements = container.querySelectorAll('.bg-dataset-child-chunk-expand-btn-bg')
+ expect(expandBtnElements.length).toBeGreaterThan(0)
+ })
+
+ it('should render skeleton rectangles with quaternary text color', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ const skeletonElements = container.querySelectorAll('.bg-text-quaternary')
+ expect(skeletonElements.length).toBeGreaterThan(0)
+ })
+
+ it('should render CardSkelton inside each list item', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - each list item should contain card skeleton content
+ const cardContainers = container.querySelectorAll('.grow')
+ expect(cardContainers.length).toBeGreaterThan(0)
+ })
+ })
+
+ // Memoization tests
+ describe('Memoization', () => {
+ it('should render consistently across multiple renders', () => {
+ // Arrange & Act
+ const { container: container1 } = render()
+ const { container: container2 } = render()
+
+ // Assert
+ const items1 = container1.querySelectorAll('.items-start.gap-x-2')
+ const items2 = container2.querySelectorAll('.items-start.gap-x-2')
+ expect(items1.length).toBe(items2.length)
+ })
+ })
+
+ // Edge cases
+ describe('Edge Cases', () => {
+ it('should maintain structure when rerendered', () => {
+ // Arrange
+ const { rerender, container } = render()
+
+ // Act
+ rerender()
+
+ // Assert
+ const listItems = container.querySelectorAll('.items-start.gap-x-2')
+ expect(listItems).toHaveLength(10)
+ })
+
+ it('should not have interactive elements besides disabled checkboxes', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ const buttons = container.querySelectorAll('button')
+ const links = container.querySelectorAll('a')
+ expect(buttons).toHaveLength(0)
+ expect(links).toHaveLength(0)
+ })
+ })
+})
diff --git a/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.spec.tsx b/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.spec.tsx
new file mode 100644
index 0000000000..71d15a9178
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.spec.tsx
@@ -0,0 +1,132 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import ParentChunkCardSkelton from './parent-chunk-card-skeleton'
+
+describe('ParentChunkCardSkelton', () => {
+ // Rendering tests
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('parent-chunk-card-skeleton')).toBeInTheDocument()
+ })
+
+ it('should render with correct container classes', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ const container = screen.getByTestId('parent-chunk-card-skeleton')
+ expect(container).toHaveClass('flex')
+ expect(container).toHaveClass('flex-col')
+ expect(container).toHaveClass('pb-2')
+ })
+
+ it('should render skeleton rectangles', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ const skeletonRectangles = container.querySelectorAll('.bg-text-quaternary')
+ expect(skeletonRectangles.length).toBeGreaterThan(0)
+ })
+ })
+
+ // i18n tests
+ describe('i18n', () => {
+ it('should render view more button with translated text', () => {
+ // Arrange & Act
+ render()
+
+ // Assert - the button should contain translated text
+ const viewMoreButton = screen.getByRole('button')
+ expect(viewMoreButton).toBeInTheDocument()
+ })
+
+ it('should render disabled view more button', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ const viewMoreButton = screen.getByRole('button')
+ expect(viewMoreButton).toBeDisabled()
+ })
+ })
+
+ // Structure tests
+ describe('Structure', () => {
+ it('should render skeleton points as separators', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ const opacityElements = container.querySelectorAll('.opacity-20')
+ expect(opacityElements.length).toBeGreaterThan(0)
+ })
+
+ it('should render width-constrained skeleton elements', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - check for various width classes
+ expect(container.querySelector('.w-\\[72px\\]')).toBeInTheDocument()
+ expect(container.querySelector('.w-24')).toBeInTheDocument()
+ expect(container.querySelector('.w-full')).toBeInTheDocument()
+ expect(container.querySelector('.w-2\\/3')).toBeInTheDocument()
+ })
+
+ it('should render button with proper styling classes', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ const button = screen.getByRole('button')
+ expect(button).toHaveClass('system-xs-semibold-uppercase')
+ expect(button).toHaveClass('text-components-button-secondary-accent-text-disabled')
+ })
+ })
+
+ // Memoization tests
+ describe('Memoization', () => {
+ it('should render consistently across multiple renders', () => {
+ // Arrange & Act
+ const { container: container1 } = render()
+ const { container: container2 } = render()
+
+ // Assert
+ const skeletons1 = container1.querySelectorAll('.bg-text-quaternary')
+ const skeletons2 = container2.querySelectorAll('.bg-text-quaternary')
+ expect(skeletons1.length).toBe(skeletons2.length)
+ })
+ })
+
+ // Edge cases
+ describe('Edge Cases', () => {
+ it('should maintain structure when rerendered', () => {
+ // Arrange
+ const { rerender, container } = render()
+
+ // Act
+ rerender()
+
+ // Assert
+ expect(screen.getByTestId('parent-chunk-card-skeleton')).toBeInTheDocument()
+ const skeletons = container.querySelectorAll('.bg-text-quaternary')
+ expect(skeletons.length).toBeGreaterThan(0)
+ })
+
+ it('should have only one interactive element (disabled button)', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ const buttons = container.querySelectorAll('button')
+ const links = container.querySelectorAll('a')
+ expect(buttons).toHaveLength(1)
+ expect(buttons[0]).toBeDisabled()
+ expect(links).toHaveLength(0)
+ })
+ })
+})
diff --git a/web/app/components/datasets/documents/detail/completed/status-item.spec.tsx b/web/app/components/datasets/documents/detail/completed/status-item.spec.tsx
new file mode 100644
index 0000000000..a9114ffe79
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/completed/status-item.spec.tsx
@@ -0,0 +1,118 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import StatusItem from './status-item'
+
+describe('StatusItem', () => {
+ const defaultItem = {
+ value: '1',
+ name: 'Test Status',
+ }
+
+ // Rendering tests
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render item name', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByText('Test Status')).toBeInTheDocument()
+ })
+
+ it('should render with correct styling classes', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ const wrapper = container.firstChild as HTMLElement
+ expect(wrapper).toHaveClass('flex')
+ expect(wrapper).toHaveClass('items-center')
+ expect(wrapper).toHaveClass('justify-between')
+ })
+ })
+
+ // Props tests
+ describe('Props', () => {
+ it('should show check icon when selected is true', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - RiCheckLine icon should be present
+ const checkIcon = container.querySelector('.text-text-accent')
+ expect(checkIcon).toBeInTheDocument()
+ })
+
+ it('should not show check icon when selected is false', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert - RiCheckLine icon should not be present
+ const checkIcon = container.querySelector('.text-text-accent')
+ expect(checkIcon).not.toBeInTheDocument()
+ })
+
+ it('should render different item names', () => {
+ // Arrange & Act
+ const item = { value: '2', name: 'Different Status' }
+ render()
+
+ // Assert
+ expect(screen.getByText('Different Status')).toBeInTheDocument()
+ })
+ })
+
+ // Memoization tests
+ describe('Memoization', () => {
+ it('should render consistently with same props', () => {
+ // Arrange & Act
+ const { container: container1 } = render()
+ const { container: container2 } = render()
+
+ // Assert
+ expect(container1.textContent).toBe(container2.textContent)
+ })
+ })
+
+ // Edge cases
+ describe('Edge Cases', () => {
+ it('should handle empty item name', () => {
+ // Arrange
+ const emptyItem = { value: '1', name: '' }
+
+ // Act
+ const { container } = render()
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should handle special characters in item name', () => {
+ // Arrange
+ const specialItem = { value: '1', name: 'Status <>&"' }
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByText('Status <>&"')).toBeInTheDocument()
+ })
+
+ it('should maintain structure when rerendered', () => {
+ // Arrange
+ const { rerender } = render()
+
+ // Act
+ rerender()
+
+ // Assert
+ expect(screen.getByText('Test Status')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/documents/detail/document-title.spec.tsx b/web/app/components/datasets/documents/detail/document-title.spec.tsx
new file mode 100644
index 0000000000..dca2d068ec
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/document-title.spec.tsx
@@ -0,0 +1,169 @@
+import { render } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ChunkingMode } from '@/models/datasets'
+
+import { DocumentTitle } from './document-title'
+
+// Mock next/navigation
+const mockPush = vi.fn()
+vi.mock('next/navigation', () => ({
+ useRouter: () => ({
+ push: mockPush,
+ }),
+}))
+
+// Mock DocumentPicker
+vi.mock('../../common/document-picker', () => ({
+ default: ({ datasetId, value, onChange }: { datasetId: string, value: unknown, onChange: (doc: { id: string }) => void }) => (
+ onChange({ id: 'new-doc-id' })}
+ >
+ Document Picker
+
+ ),
+}))
+
+describe('DocumentTitle', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ // Rendering tests
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ // Arrange & Act
+ const { container } = render(
+ ,
+ )
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render DocumentPicker component', () => {
+ // Arrange & Act
+ const { getByTestId } = render(
+ ,
+ )
+
+ // Assert
+ expect(getByTestId('document-picker')).toBeInTheDocument()
+ })
+
+ it('should render with correct container classes', () => {
+ // Arrange & Act
+ const { container } = render(
+ ,
+ )
+
+ // Assert
+ const wrapper = container.firstChild as HTMLElement
+ expect(wrapper).toHaveClass('flex')
+ expect(wrapper).toHaveClass('flex-1')
+ expect(wrapper).toHaveClass('items-center')
+ expect(wrapper).toHaveClass('justify-start')
+ })
+ })
+
+ // Props tests
+ describe('Props', () => {
+ it('should pass datasetId to DocumentPicker', () => {
+ // Arrange & Act
+ const { getByTestId } = render(
+ ,
+ )
+
+ // Assert
+ expect(getByTestId('document-picker').getAttribute('data-dataset-id')).toBe('test-dataset-id')
+ })
+
+ it('should pass value props to DocumentPicker', () => {
+ // Arrange & Act
+ const { getByTestId } = render(
+ ,
+ )
+
+ // Assert
+ const value = JSON.parse(getByTestId('document-picker').getAttribute('data-value') || '{}')
+ expect(value.name).toBe('test-document')
+ expect(value.extension).toBe('pdf')
+ expect(value.chunkingMode).toBe(ChunkingMode.text)
+ expect(value.parentMode).toBe('paragraph')
+ })
+
+ it('should default parentMode to paragraph when parent_mode is undefined', () => {
+ // Arrange & Act
+ const { getByTestId } = render(
+ ,
+ )
+
+ // Assert
+ const value = JSON.parse(getByTestId('document-picker').getAttribute('data-value') || '{}')
+ expect(value.parentMode).toBe('paragraph')
+ })
+
+ it('should apply custom wrapperCls', () => {
+ // Arrange & Act
+ const { container } = render(
+ ,
+ )
+
+ // Assert
+ const wrapper = container.firstChild as HTMLElement
+ expect(wrapper).toHaveClass('custom-wrapper')
+ })
+ })
+
+ // Navigation tests
+ describe('Navigation', () => {
+ it('should navigate to document page when document is selected', () => {
+ // Arrange
+ const { getByTestId } = render(
+ ,
+ )
+
+ // Act
+ getByTestId('document-picker').click()
+
+ // Assert
+ expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-1/documents/new-doc-id')
+ })
+ })
+
+ // Edge cases
+ describe('Edge Cases', () => {
+ it('should handle undefined optional props', () => {
+ // Arrange & Act
+ const { getByTestId } = render(
+ ,
+ )
+
+ // Assert
+ const value = JSON.parse(getByTestId('document-picker').getAttribute('data-value') || '{}')
+ expect(value.name).toBeUndefined()
+ expect(value.extension).toBeUndefined()
+ })
+
+ it('should maintain structure when rerendered', () => {
+ // Arrange
+ const { rerender, getByTestId } = render(
+ ,
+ )
+
+ // Act
+ rerender()
+
+ // Assert
+ expect(getByTestId('document-picker').getAttribute('data-dataset-id')).toBe('dataset-2')
+ })
+ })
+})
diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index ea2c453355..e147bf9aba 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -1,6 +1,6 @@
'use client'
import type { FC } from 'react'
-import type { DataSourceInfo, FileItem, LegacyDataSourceInfo } from '@/models/datasets'
+import type { DataSourceInfo, FileItem, FullDocumentDetail, LegacyDataSourceInfo } from '@/models/datasets'
import { RiArrowLeftLine, RiLayoutLeft2Line, RiLayoutRight2Line } from '@remixicon/react'
import { useRouter } from 'next/navigation'
import * as React from 'react'
@@ -256,7 +256,7 @@ const DocumentDetail: FC = ({ datasetId, documentId }) => {
className="mr-2 mt-3"
datasetId={datasetId}
documentId={documentId}
- docDetail={{ ...documentDetail, ...documentMetadata, doc_type: documentMetadata?.doc_type === 'others' ? '' : documentMetadata?.doc_type } as any}
+ docDetail={{ ...documentDetail, ...documentMetadata, doc_type: documentMetadata?.doc_type === 'others' ? '' : documentMetadata?.doc_type } as FullDocumentDetail}
/>
diff --git a/web/app/components/datasets/documents/detail/new-segment.spec.tsx b/web/app/components/datasets/documents/detail/new-segment.spec.tsx
new file mode 100644
index 0000000000..7fc94ab80f
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/new-segment.spec.tsx
@@ -0,0 +1,503 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ChunkingMode } from '@/models/datasets'
+import { IndexingType } from '../../create/step-two'
+
+import NewSegmentModal from './new-segment'
+
+// Mock next/navigation
+vi.mock('next/navigation', () => ({
+ useParams: () => ({
+ datasetId: 'test-dataset-id',
+ documentId: 'test-document-id',
+ }),
+}))
+
+// Mock ToastContext
+const mockNotify = vi.fn()
+vi.mock('use-context-selector', async (importOriginal) => {
+ const actual = await importOriginal() as Record
+ return {
+ ...actual,
+ useContext: () => ({ notify: mockNotify }),
+ }
+})
+
+// Mock dataset detail context
+let mockIndexingTechnique = IndexingType.QUALIFIED
+vi.mock('@/context/dataset-detail', () => ({
+ useDatasetDetailContextWithSelector: (selector: (state: { dataset: { indexing_technique: string } }) => unknown) => {
+ return selector({ dataset: { indexing_technique: mockIndexingTechnique } })
+ },
+}))
+
+// Mock segment list context
+let mockFullScreen = false
+const mockToggleFullScreen = vi.fn()
+vi.mock('./completed', () => ({
+ useSegmentListContext: (selector: (state: { fullScreen: boolean, toggleFullScreen: () => void }) => unknown) => {
+ const state = {
+ fullScreen: mockFullScreen,
+ toggleFullScreen: mockToggleFullScreen,
+ }
+ return selector(state)
+ },
+}))
+
+// Mock useAddSegment
+const mockAddSegment = vi.fn()
+vi.mock('@/service/knowledge/use-segment', () => ({
+ useAddSegment: () => ({
+ mutateAsync: mockAddSegment,
+ }),
+}))
+
+// Mock app store
+vi.mock('@/app/components/app/store', () => ({
+ useStore: () => ({ appSidebarExpand: 'expand' }),
+}))
+
+// Mock child components
+vi.mock('./completed/common/action-buttons', () => ({
+ default: ({ handleCancel, handleSave, loading, actionType }: { handleCancel: () => void, handleSave: () => void, loading: boolean, actionType: string }) => (
+
+
+
+ {actionType}
+
+ ),
+}))
+
+vi.mock('./completed/common/add-another', () => ({
+ default: ({ isChecked, onCheck, className }: { isChecked: boolean, onCheck: () => void, className?: string }) => (
+
+
+
+ ),
+}))
+
+vi.mock('./completed/common/chunk-content', () => ({
+ default: ({ docForm, question, answer, onQuestionChange, onAnswerChange, isEditMode }: { docForm: string, question: string, answer: string, onQuestionChange: (v: string) => void, onAnswerChange: (v: string) => void, isEditMode: boolean }) => (
+
+ onQuestionChange(e.target.value)}
+ placeholder={docForm === ChunkingMode.qa ? 'Question' : 'Content'}
+ />
+ {docForm === ChunkingMode.qa && (
+ onAnswerChange(e.target.value)}
+ placeholder="Answer"
+ />
+ )}
+ {isEditMode ? 'editing' : 'viewing'}
+
+ ),
+}))
+
+vi.mock('./completed/common/dot', () => ({
+ default: () => •,
+}))
+
+vi.mock('./completed/common/keywords', () => ({
+ default: ({ keywords, onKeywordsChange, _isEditMode, _actionType }: { keywords: string[], onKeywordsChange: (v: string[]) => void, _isEditMode?: boolean, _actionType?: string }) => (
+
+ onKeywordsChange(e.target.value.split(',').filter(Boolean))}
+ />
+
+ ),
+}))
+
+vi.mock('./completed/common/segment-index-tag', () => ({
+ SegmentIndexTag: ({ label }: { label: string }) => {label},
+}))
+
+vi.mock('@/app/components/datasets/common/image-uploader/image-uploader-in-chunk', () => ({
+ default: ({ onChange }: { value?: unknown[], onChange: (v: { uploadedId: string }[]) => void }) => (
+
+
+
+ ),
+}))
+
+describe('NewSegmentModal', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockFullScreen = false
+ mockIndexingTechnique = IndexingType.QUALIFIED
+ })
+
+ const defaultProps = {
+ onCancel: vi.fn(),
+ docForm: ChunkingMode.text,
+ onSave: vi.fn(),
+ viewNewlyAddedChunk: vi.fn(),
+ }
+
+ // Rendering tests
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render title text', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByText(/segment\.addChunk/i)).toBeInTheDocument()
+ })
+
+ it('should render chunk content component', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('chunk-content')).toBeInTheDocument()
+ })
+
+ it('should render image uploader', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('image-uploader')).toBeInTheDocument()
+ })
+
+ it('should render segment index tag', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('segment-index-tag')).toBeInTheDocument()
+ })
+
+ it('should render dot separator', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('dot')).toBeInTheDocument()
+ })
+ })
+
+ // Keywords display
+ describe('Keywords', () => {
+ it('should show keywords component when indexing is ECONOMICAL', () => {
+ // Arrange
+ mockIndexingTechnique = IndexingType.ECONOMICAL
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('keywords')).toBeInTheDocument()
+ })
+
+ it('should not show keywords when indexing is QUALIFIED', () => {
+ // Arrange
+ mockIndexingTechnique = IndexingType.QUALIFIED
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.queryByTestId('keywords')).not.toBeInTheDocument()
+ })
+ })
+
+ // User Interactions
+ describe('User Interactions', () => {
+ it('should call onCancel when close button is clicked', () => {
+ // Arrange
+ const mockOnCancel = vi.fn()
+ const { container } = render()
+
+ // Act - find and click close button (RiCloseLine icon wrapper)
+ const closeButtons = container.querySelectorAll('.cursor-pointer')
+ // The close button is the second cursor-pointer element
+ if (closeButtons.length > 1)
+ fireEvent.click(closeButtons[1])
+
+ // Assert
+ expect(mockOnCancel).toHaveBeenCalled()
+ })
+
+ it('should update question when typing', () => {
+ // Arrange
+ render()
+ const questionInput = screen.getByTestId('question-input')
+
+ // Act
+ fireEvent.change(questionInput, { target: { value: 'New question content' } })
+
+ // Assert
+ expect(questionInput).toHaveValue('New question content')
+ })
+
+ it('should update answer when docForm is QA and typing', () => {
+ // Arrange
+ render()
+ const answerInput = screen.getByTestId('answer-input')
+
+ // Act
+ fireEvent.change(answerInput, { target: { value: 'New answer content' } })
+
+ // Assert
+ expect(answerInput).toHaveValue('New answer content')
+ })
+
+ it('should toggle add another checkbox', () => {
+ // Arrange
+ render()
+ const checkbox = screen.getByTestId('add-another-checkbox')
+
+ // Act
+ fireEvent.click(checkbox)
+
+ // Assert - checkbox state should toggle
+ expect(checkbox).toBeInTheDocument()
+ })
+ })
+
+ // Save validation
+ describe('Save Validation', () => {
+ it('should show error when content is empty for text mode', async () => {
+ // Arrange
+ render()
+
+ // Act
+ fireEvent.click(screen.getByTestId('save-btn'))
+
+ // Assert
+ await waitFor(() => {
+ expect(mockNotify).toHaveBeenCalledWith(
+ expect.objectContaining({
+ type: 'error',
+ }),
+ )
+ })
+ })
+
+ it('should show error when question is empty for QA mode', async () => {
+ // Arrange
+ render()
+
+ // Act
+ fireEvent.click(screen.getByTestId('save-btn'))
+
+ // Assert
+ await waitFor(() => {
+ expect(mockNotify).toHaveBeenCalledWith(
+ expect.objectContaining({
+ type: 'error',
+ }),
+ )
+ })
+ })
+
+ it('should show error when answer is empty for QA mode', async () => {
+ // Arrange
+ render()
+ fireEvent.change(screen.getByTestId('question-input'), { target: { value: 'Question' } })
+
+ // Act
+ fireEvent.click(screen.getByTestId('save-btn'))
+
+ // Assert
+ await waitFor(() => {
+ expect(mockNotify).toHaveBeenCalledWith(
+ expect.objectContaining({
+ type: 'error',
+ }),
+ )
+ })
+ })
+ })
+
+ // Successful save
+ describe('Successful Save', () => {
+ it('should call addSegment when valid content is provided for text mode', async () => {
+ // Arrange
+ mockAddSegment.mockImplementation((_params, options) => {
+ options.onSuccess()
+ options.onSettled()
+ return Promise.resolve()
+ })
+
+ render()
+ fireEvent.change(screen.getByTestId('question-input'), { target: { value: 'Valid content' } })
+
+ // Act
+ fireEvent.click(screen.getByTestId('save-btn'))
+
+ // Assert
+ await waitFor(() => {
+ expect(mockAddSegment).toHaveBeenCalledWith(
+ expect.objectContaining({
+ datasetId: 'test-dataset-id',
+ documentId: 'test-document-id',
+ body: expect.objectContaining({
+ content: 'Valid content',
+ }),
+ }),
+ expect.any(Object),
+ )
+ })
+ })
+
+ it('should show success notification after save', async () => {
+ // Arrange
+ mockAddSegment.mockImplementation((_params, options) => {
+ options.onSuccess()
+ options.onSettled()
+ return Promise.resolve()
+ })
+
+ render()
+ fireEvent.change(screen.getByTestId('question-input'), { target: { value: 'Valid content' } })
+
+ // Act
+ fireEvent.click(screen.getByTestId('save-btn'))
+
+ // Assert
+ await waitFor(() => {
+ expect(mockNotify).toHaveBeenCalledWith(
+ expect.objectContaining({
+ type: 'success',
+ }),
+ )
+ })
+ })
+ })
+
+ // Full screen mode
+ describe('Full Screen Mode', () => {
+ it('should apply full screen styling when fullScreen is true', () => {
+ // Arrange
+ mockFullScreen = true
+
+ // Act
+ const { container } = render()
+
+ // Assert
+ const header = container.querySelector('.border-divider-subtle')
+ expect(header).toBeInTheDocument()
+ })
+
+ it('should show action buttons in header when fullScreen', () => {
+ // Arrange
+ mockFullScreen = true
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('action-buttons')).toBeInTheDocument()
+ })
+
+ it('should show add another in header when fullScreen', () => {
+ // Arrange
+ mockFullScreen = true
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('add-another')).toBeInTheDocument()
+ })
+
+ it('should call toggleFullScreen when expand button is clicked', () => {
+ // Arrange
+ const { container } = render()
+
+ // Act - click the expand button (first cursor-pointer)
+ const expandButtons = container.querySelectorAll('.cursor-pointer')
+ if (expandButtons.length > 0)
+ fireEvent.click(expandButtons[0])
+
+ // Assert
+ expect(mockToggleFullScreen).toHaveBeenCalled()
+ })
+ })
+
+ // Props
+ describe('Props', () => {
+ it('should pass actionType add to ActionButtons', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('action-type')).toHaveTextContent('add')
+ })
+
+ it('should pass isEditMode true to ChunkContent', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('edit-mode')).toHaveTextContent('editing')
+ })
+ })
+
+ // Edge cases
+ describe('Edge Cases', () => {
+ it('should handle keyword changes for ECONOMICAL indexing', () => {
+ // Arrange
+ mockIndexingTechnique = IndexingType.ECONOMICAL
+ render()
+
+ // Act
+ fireEvent.change(screen.getByTestId('keywords-input'), {
+ target: { value: 'keyword1,keyword2' },
+ })
+
+ // Assert
+ expect(screen.getByTestId('keywords-input')).toHaveValue('keyword1,keyword2')
+ })
+
+ it('should handle image upload', () => {
+ // Arrange
+ render()
+
+ // Act
+ fireEvent.click(screen.getByTestId('upload-image-btn'))
+
+ // Assert - image uploader should be rendered
+ expect(screen.getByTestId('image-uploader')).toBeInTheDocument()
+ })
+
+ it('should maintain structure when rerendered with different docForm', () => {
+ // Arrange
+ const { rerender } = render()
+
+ // Act
+ rerender()
+
+ // Assert
+ expect(screen.getByTestId('answer-input')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/documents/detail/segment-add/index.spec.tsx b/web/app/components/datasets/documents/detail/segment-add/index.spec.tsx
new file mode 100644
index 0000000000..c671787320
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/segment-add/index.spec.tsx
@@ -0,0 +1,350 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { Plan } from '@/app/components/billing/type'
+
+import SegmentAdd, { ProcessStatus } from './index'
+
+// Mock provider context
+let mockPlan = { type: Plan.professional }
+let mockEnableBilling = true
+vi.mock('@/context/provider-context', () => ({
+ useProviderContext: () => ({
+ plan: mockPlan,
+ enableBilling: mockEnableBilling,
+ }),
+}))
+
+// Mock PlanUpgradeModal
+vi.mock('@/app/components/billing/plan-upgrade-modal', () => ({
+ default: ({ show, onClose, title, description }: { show: boolean, onClose: () => void, title?: string, description?: string }) => (
+ show
+ ? (
+
+ {title}
+ {description}
+
+
+ )
+ : null
+ ),
+}))
+
+// Mock Popover
+vi.mock('@/app/components/base/popover', () => ({
+ default: ({ htmlContent, btnElement, disabled }: { htmlContent: React.ReactNode, btnElement: React.ReactNode, disabled?: boolean }) => (
+
+
+
{htmlContent}
+
+ {code}
+ {unknownReason}
+
+ ),
+}))
+
+vi.mock('@/app/components/base/loading', () => ({
+ default: ({ type }: { type?: string }) => (
+ Loading...
+ ),
+}))
+
+vi.mock('@/app/components/datasets/create/step-two', () => ({
+ default: ({
+ isAPIKeySet,
+ onSetting,
+ datasetId,
+ dataSourceType,
+ files,
+ onSave,
+ onCancel,
+ isSetting,
+ }: {
+ isAPIKeySet?: boolean
+ onSetting?: () => void
+ datasetId?: string
+ dataSourceType?: string
+ files?: unknown[]
+ onSave?: () => void
+ onCancel?: () => void
+ isSetting?: boolean
+ }) => (
+
+ {isAPIKeySet ? 'true' : 'false'}
+ {datasetId}
+ {dataSourceType}
+ {isSetting ? 'true' : 'false'}
+ {files?.length || 0}
+
+
+
+
+ ),
+}))
+
+vi.mock('@/app/components/header/account-setting', () => ({
+ default: ({ activeTab, onCancel }: { activeTab?: string, onCancel?: () => void }) => (
+
+ {activeTab}
+
+
+ ),
+}))
+
+describe('DocumentSettings', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockDocumentDetail = {
+ name: 'test-document',
+ data_source_type: 'upload_file',
+ data_source_info: {
+ upload_file: { id: 'file-1', name: 'test.pdf' },
+ },
+ }
+ mockError = null
+ })
+
+ const defaultProps = {
+ datasetId: 'dataset-1',
+ documentId: 'document-1',
+ }
+
+ // Rendering tests
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render StepTwo component when data is loaded', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('step-two')).toBeInTheDocument()
+ })
+
+ it('should render loading when documentDetail is not available', () => {
+ // Arrange
+ mockDocumentDetail = null
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('loading')).toBeInTheDocument()
+ })
+
+ it('should render AppUnavailable when error occurs', () => {
+ // Arrange
+ mockError = new Error('Error loading document')
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('app-unavailable')).toBeInTheDocument()
+ expect(screen.getByTestId('error-code')).toHaveTextContent('500')
+ })
+ })
+
+ // Props passing
+ describe('Props Passing', () => {
+ it('should pass datasetId to StepTwo', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('dataset-id')).toHaveTextContent('dataset-1')
+ })
+
+ it('should pass isSetting true to StepTwo', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('is-setting')).toHaveTextContent('true')
+ })
+
+ it('should pass isAPIKeySet when embedding model is available', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('api-key-set')).toHaveTextContent('true')
+ })
+
+ it('should pass data source type to StepTwo', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('data-source-type')).toHaveTextContent('upload_file')
+ })
+ })
+
+ // User Interactions
+ describe('User Interactions', () => {
+ it('should call router.back when cancel is clicked', () => {
+ // Arrange
+ render()
+
+ // Act
+ fireEvent.click(screen.getByTestId('cancel-btn'))
+
+ // Assert
+ expect(mockBack).toHaveBeenCalled()
+ })
+
+ it('should navigate to document page when save is clicked', () => {
+ // Arrange
+ render()
+
+ // Act
+ fireEvent.click(screen.getByTestId('save-btn'))
+
+ // Assert
+ expect(mockInvalidDocumentList).toHaveBeenCalled()
+ expect(mockInvalidDocumentDetail).toHaveBeenCalled()
+ expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-1/documents/document-1')
+ })
+
+ it('should show AccountSetting modal when setting button is clicked', () => {
+ // Arrange
+ render()
+
+ // Act
+ fireEvent.click(screen.getByTestId('setting-btn'))
+
+ // Assert
+ expect(screen.getByTestId('account-setting')).toBeInTheDocument()
+ })
+
+ it('should hide AccountSetting modal when close is clicked', async () => {
+ // Arrange
+ render()
+ fireEvent.click(screen.getByTestId('setting-btn'))
+ expect(screen.getByTestId('account-setting')).toBeInTheDocument()
+
+ // Act
+ fireEvent.click(screen.getByTestId('close-setting'))
+
+ // Assert
+ expect(screen.queryByTestId('account-setting')).not.toBeInTheDocument()
+ })
+ })
+
+ // Data source types
+ describe('Data Source Types', () => {
+ it('should handle legacy upload_file data source', () => {
+ // Arrange
+ mockDocumentDetail = {
+ name: 'test-document',
+ data_source_type: 'upload_file',
+ data_source_info: {
+ upload_file: { id: 'file-1', name: 'test.pdf' },
+ },
+ }
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('files-count')).toHaveTextContent('1')
+ })
+
+ it('should handle website crawl data source', () => {
+ // Arrange
+ mockDocumentDetail = {
+ name: 'test-website',
+ data_source_type: 'website_crawl',
+ data_source_info: {
+ title: 'Test Page',
+ source_url: 'https://example.com',
+ content: 'Page content',
+ description: 'Page description',
+ },
+ }
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('data-source-type')).toHaveTextContent('website_crawl')
+ })
+
+ it('should handle local file data source', () => {
+ // Arrange
+ mockDocumentDetail = {
+ name: 'local-file',
+ data_source_type: 'upload_file',
+ data_source_info: {
+ related_id: 'file-id',
+ transfer_method: 'local',
+ name: 'local-file.pdf',
+ extension: 'pdf',
+ },
+ }
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('files-count')).toHaveTextContent('1')
+ })
+
+ it('should handle online document (Notion) data source', () => {
+ // Arrange
+ mockDocumentDetail = {
+ name: 'notion-page',
+ data_source_type: 'notion_import',
+ data_source_info: {
+ workspace_id: 'ws-1',
+ credential_id: 'cred-1',
+ page: {
+ page_id: 'page-1',
+ page_name: 'Test Page',
+ page_icon: '📄',
+ type: 'page',
+ },
+ },
+ }
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('data-source-type')).toHaveTextContent('notion_import')
+ })
+ })
+
+ // Edge cases
+ describe('Edge Cases', () => {
+ it('should handle undefined data_source_info', () => {
+ // Arrange
+ mockDocumentDetail = {
+ name: 'test-document',
+ data_source_type: 'upload_file',
+ data_source_info: undefined,
+ }
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('files-count')).toHaveTextContent('0')
+ })
+
+ it('should maintain structure when rerendered', () => {
+ // Arrange
+ const { rerender } = render(
+ ,
+ )
+
+ // Act
+ rerender()
+
+ // Assert
+ expect(screen.getByTestId('step-two')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/documents/detail/settings/index.spec.tsx b/web/app/components/datasets/documents/detail/settings/index.spec.tsx
new file mode 100644
index 0000000000..3a7c10a0be
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/settings/index.spec.tsx
@@ -0,0 +1,143 @@
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import Settings from './index'
+
+// Mock the dataset detail context
+let mockRuntimeMode: string | undefined = 'general'
+vi.mock('@/context/dataset-detail', () => ({
+ useDatasetDetailContextWithSelector: (selector: (state: { dataset: { runtime_mode: string | undefined } }) => unknown) => {
+ return selector({ dataset: { runtime_mode: mockRuntimeMode } })
+ },
+}))
+
+// Mock child components
+vi.mock('./document-settings', () => ({
+ default: ({ datasetId, documentId }: { datasetId: string, documentId: string }) => (
+
+ DocumentSettings -
+ {' '}
+ {datasetId}
+ {' '}
+ -
+ {' '}
+ {documentId}
+
+ ),
+}))
+
+vi.mock('./pipeline-settings', () => ({
+ default: ({ datasetId, documentId }: { datasetId: string, documentId: string }) => (
+
+ PipelineSettings -
+ {' '}
+ {datasetId}
+ {' '}
+ -
+ {' '}
+ {documentId}
+
+ ),
+}))
+
+describe('Settings', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockRuntimeMode = 'general'
+ })
+
+ // Rendering tests
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ // Arrange & Act
+ const { container } = render(
+ ,
+ )
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+ })
+
+ // Conditional rendering tests
+ describe('Conditional Rendering', () => {
+ it('should render DocumentSettings when runtimeMode is general', () => {
+ // Arrange
+ mockRuntimeMode = 'general'
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('document-settings')).toBeInTheDocument()
+ expect(screen.queryByTestId('pipeline-settings')).not.toBeInTheDocument()
+ })
+
+ it('should render PipelineSettings when runtimeMode is not general', () => {
+ // Arrange
+ mockRuntimeMode = 'pipeline'
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('pipeline-settings')).toBeInTheDocument()
+ expect(screen.queryByTestId('document-settings')).not.toBeInTheDocument()
+ })
+ })
+
+ // Props passing tests
+ describe('Props', () => {
+ it('should pass datasetId and documentId to DocumentSettings', () => {
+ // Arrange
+ mockRuntimeMode = 'general'
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByText(/test-dataset/)).toBeInTheDocument()
+ expect(screen.getByText(/test-document/)).toBeInTheDocument()
+ })
+
+ it('should pass datasetId and documentId to PipelineSettings', () => {
+ // Arrange
+ mockRuntimeMode = 'pipeline'
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByText(/test-dataset/)).toBeInTheDocument()
+ expect(screen.getByText(/test-document/)).toBeInTheDocument()
+ })
+ })
+
+ // Edge cases
+ describe('Edge Cases', () => {
+ it('should handle undefined runtimeMode as non-general', () => {
+ // Arrange
+ mockRuntimeMode = undefined
+
+ // Act
+ render()
+
+ // Assert - undefined !== 'general', so PipelineSettings should render
+ expect(screen.getByTestId('pipeline-settings')).toBeInTheDocument()
+ })
+
+ it('should maintain structure when rerendered', () => {
+ // Arrange
+ mockRuntimeMode = 'general'
+ const { rerender } = render(
+ ,
+ )
+
+ // Act
+ rerender()
+
+ // Assert
+ expect(screen.getByText(/dataset-2/)).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.spec.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.spec.tsx
new file mode 100644
index 0000000000..208b3b3955
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.spec.tsx
@@ -0,0 +1,154 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import LeftHeader from './left-header'
+
+// Mock next/navigation
+const mockBack = vi.fn()
+vi.mock('next/navigation', () => ({
+ useRouter: () => ({
+ back: mockBack,
+ }),
+}))
+
+describe('LeftHeader', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ // Rendering tests
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render the title', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByText('My Document Title')).toBeInTheDocument()
+ })
+
+ it('should render the process documents text', () => {
+ // Arrange & Act
+ render()
+
+ // Assert - i18n key format
+ expect(screen.getByText(/addDocuments\.steps\.processDocuments/i)).toBeInTheDocument()
+ })
+
+ it('should render back button', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ const backButton = screen.getByRole('button')
+ expect(backButton).toBeInTheDocument()
+ })
+ })
+
+ // User Interactions
+ describe('User Interactions', () => {
+ it('should call router.back when back button is clicked', () => {
+ // Arrange
+ render()
+
+ // Act
+ const backButton = screen.getByRole('button')
+ fireEvent.click(backButton)
+
+ // Assert
+ expect(mockBack).toHaveBeenCalledTimes(1)
+ })
+
+ it('should call router.back multiple times on multiple clicks', () => {
+ // Arrange
+ render()
+
+ // Act
+ const backButton = screen.getByRole('button')
+ fireEvent.click(backButton)
+ fireEvent.click(backButton)
+
+ // Assert
+ expect(mockBack).toHaveBeenCalledTimes(2)
+ })
+ })
+
+ // Props tests
+ describe('Props', () => {
+ it('should render different titles', () => {
+ // Arrange
+ const { rerender } = render()
+ expect(screen.getByText('First Title')).toBeInTheDocument()
+
+ // Act
+ rerender()
+
+ // Assert
+ expect(screen.getByText('Second Title')).toBeInTheDocument()
+ })
+ })
+
+ // Styling tests
+ describe('Styling', () => {
+ it('should have back button with proper styling', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ const backButton = screen.getByRole('button')
+ expect(backButton).toHaveClass('absolute')
+ expect(backButton).toHaveClass('rounded-full')
+ })
+
+ it('should render title with gradient background styling', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ const titleElement = container.querySelector('.bg-pipeline-add-documents-title-bg')
+ expect(titleElement).toBeInTheDocument()
+ })
+ })
+
+ // Accessibility tests
+ describe('Accessibility', () => {
+ it('should have aria-label on back button', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ const backButton = screen.getByRole('button')
+ expect(backButton).toHaveAttribute('aria-label')
+ })
+ })
+
+ // Edge cases
+ describe('Edge Cases', () => {
+ it('should handle empty title', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should maintain structure when rerendered', () => {
+ // Arrange
+ const { rerender } = render()
+
+ // Act
+ rerender()
+
+ // Assert
+ expect(screen.getByText('Updated Test')).toBeInTheDocument()
+ expect(screen.getByRole('button')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/actions.spec.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/actions.spec.tsx
new file mode 100644
index 0000000000..67c935a7b8
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/actions.spec.tsx
@@ -0,0 +1,158 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import Actions from './actions'
+
+describe('Actions', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ // Rendering tests
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ expect(container.firstChild).toBeInTheDocument()
+ })
+
+ it('should render save and process button', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByRole('button')).toBeInTheDocument()
+ })
+
+ it('should render button with translated text', () => {
+ // Arrange & Act
+ render()
+
+ // Assert - i18n key format
+ expect(screen.getByText(/operations\.saveAndProcess/i)).toBeInTheDocument()
+ })
+
+ it('should render with correct container styling', () => {
+ // Arrange & Act
+ const { container } = render()
+
+ // Assert
+ const wrapper = container.firstChild as HTMLElement
+ expect(wrapper).toHaveClass('flex')
+ expect(wrapper).toHaveClass('items-center')
+ expect(wrapper).toHaveClass('justify-end')
+ })
+ })
+
+ // User Interactions
+ describe('User Interactions', () => {
+ it('should call onProcess when button is clicked', () => {
+ // Arrange
+ const mockOnProcess = vi.fn()
+ render()
+
+ // Act
+ fireEvent.click(screen.getByRole('button'))
+
+ // Assert
+ expect(mockOnProcess).toHaveBeenCalledTimes(1)
+ })
+
+ it('should not call onProcess when button is disabled', () => {
+ // Arrange
+ const mockOnProcess = vi.fn()
+ render()
+
+ // Act
+ fireEvent.click(screen.getByRole('button'))
+
+ // Assert
+ expect(mockOnProcess).not.toHaveBeenCalled()
+ })
+ })
+
+ // Props tests
+ describe('Props', () => {
+ it('should disable button when runDisabled is true', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByRole('button')).toBeDisabled()
+ })
+
+ it('should enable button when runDisabled is false', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByRole('button')).not.toBeDisabled()
+ })
+
+ it('should enable button when runDisabled is undefined (default)', () => {
+ // Arrange & Act
+ render()
+
+ // Assert
+ expect(screen.getByRole('button')).not.toBeDisabled()
+ })
+ })
+
+ // Button variant tests
+ describe('Button Styling', () => {
+ it('should render button with primary variant', () => {
+ // Arrange & Act
+ render()
+
+ // Assert - primary variant buttons have specific classes
+ const button = screen.getByRole('button')
+ expect(button).toBeInTheDocument()
+ })
+ })
+
+ // Edge cases
+ describe('Edge Cases', () => {
+ it('should handle multiple rapid clicks', () => {
+ // Arrange
+ const mockOnProcess = vi.fn()
+ render()
+
+ // Act
+ const button = screen.getByRole('button')
+ fireEvent.click(button)
+ fireEvent.click(button)
+ fireEvent.click(button)
+
+ // Assert
+ expect(mockOnProcess).toHaveBeenCalledTimes(3)
+ })
+
+ it('should maintain structure when rerendered', () => {
+ // Arrange
+ const mockOnProcess = vi.fn()
+ const { rerender } = render()
+
+ // Act
+ rerender()
+
+ // Assert
+ expect(screen.getByRole('button')).toBeDisabled()
+ })
+
+ it('should handle callback change', () => {
+ // Arrange
+ const mockOnProcess1 = vi.fn()
+ const mockOnProcess2 = vi.fn()
+ const { rerender } = render()
+
+ // Act
+ rerender()
+ fireEvent.click(screen.getByRole('button'))
+
+ // Assert
+ expect(mockOnProcess1).not.toHaveBeenCalled()
+ expect(mockOnProcess2).toHaveBeenCalledTimes(1)
+ })
+ })
+})
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 755ea07f56..d1259e358e 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -1818,11 +1818,6 @@
"count": 1
}
},
- "app/components/datasets/documents/detail/index.tsx": {
- "ts/no-explicit-any": {
- "count": 1
- }
- },
"app/components/datasets/documents/detail/metadata/index.tsx": {
"react-hooks-extra/no-direct-set-state-in-use-effect": {
"count": 4