feat(tests): add comprehensive tests for Processing and EmbeddingProcess components

- Introduced new test files for Processing and EmbeddingProcess components, covering rendering, props variations, edge cases, and memoization.
- Added mock implementations for external dependencies to facilitate testing.
- Enhanced Jest configuration to handle module resolution for lodash and ky.
- Created a mock for the ky HTTP client to avoid ESM issues in Jest tests.
- Updated Processing component to handle optional chaining for retrieval method.

This commit significantly improves test coverage and stability for the document processing features.
This commit is contained in:
CodingOnStar
2025-12-18 17:10:51 +08:00
parent 3cd57bfb60
commit bd9402c90b
10 changed files with 2611 additions and 34 deletions

View File

@@ -0,0 +1,475 @@
import { render, screen } from '@testing-library/react'
import React from 'react'
import RuleDetail from './rule-detail'
import { ProcessMode, type ProcessRuleResponse } from '@/models/datasets'
import { RETRIEVE_METHOD } from '@/types/app'
import { IndexingType } from '@/app/components/datasets/create/step-two'
// ==========================================
// Mock External Dependencies
// ==========================================
// Mock next/image (using img element for simplicity in tests)
jest.mock('next/image', () => ({
__esModule: true,
default: function MockImage({ src, alt, className }: { src: string; alt: string; className?: string }) {
// eslint-disable-next-line @next/next/no-img-element
return <img src={src} alt={alt} className={className} data-testid="next-image" />
},
}))
// Mock FieldInfo component
jest.mock('@/app/components/datasets/documents/detail/metadata', () => ({
FieldInfo: ({ label, displayedValue, valueIcon }: { label: string; displayedValue: string; valueIcon?: React.ReactNode }) => (
<div data-testid="field-info" data-label={label}>
<span data-testid="field-label">{label}</span>
<span data-testid="field-value">{displayedValue}</span>
{valueIcon && <span data-testid="field-icon">{valueIcon}</span>}
</div>
),
}))
// Mock icons - provides simple string paths for testing instead of Next.js static import objects
jest.mock('@/app/components/datasets/create/icons', () => ({
indexMethodIcon: {
economical: '/icons/economical.svg',
high_quality: '/icons/high_quality.svg',
},
retrievalIcon: {
fullText: '/icons/fullText.svg',
hybrid: '/icons/hybrid.svg',
vector: '/icons/vector.svg',
},
}))
// ==========================================
// Test Data Factory Functions
// ==========================================
/**
* Creates a mock ProcessRuleResponse for testing
*/
const createMockProcessRule = (overrides: Partial<ProcessRuleResponse> = {}): ProcessRuleResponse => ({
mode: ProcessMode.general,
rules: {
pre_processing_rules: [],
segmentation: {
separator: '\n',
max_tokens: 500,
chunk_overlap: 50,
},
parent_mode: 'paragraph',
subchunk_segmentation: {
separator: '\n',
max_tokens: 200,
chunk_overlap: 20,
},
},
limits: {
indexing_max_segmentation_tokens_length: 1000,
},
...overrides,
})
// ==========================================
// Test Suite
// ==========================================
describe('RuleDetail', () => {
beforeEach(() => {
jest.clearAllMocks()
})
// ==========================================
// Rendering Tests
// ==========================================
describe('Rendering', () => {
it('should render without crashing', () => {
// Arrange & Act
render(<RuleDetail />)
// Assert
const fieldInfos = screen.getAllByTestId('field-info')
expect(fieldInfos).toHaveLength(3)
})
it('should render three FieldInfo components', () => {
// Arrange
const sourceData = createMockProcessRule()
// Act
render(
<RuleDetail
sourceData={sourceData}
indexingType={IndexingType.QUALIFIED}
retrievalMethod={RETRIEVE_METHOD.semantic}
/>,
)
// Assert
const fieldInfos = screen.getAllByTestId('field-info')
expect(fieldInfos).toHaveLength(3)
})
it('should render mode field with correct label', () => {
// Arrange & Act
render(<RuleDetail />)
// Assert - first field-info is for mode
const fieldInfos = screen.getAllByTestId('field-info')
expect(fieldInfos[0]).toHaveAttribute('data-label', 'datasetDocuments.embedding.mode')
})
})
// ==========================================
// Mode Value Tests
// ==========================================
describe('Mode Value', () => {
it('should show "-" when sourceData is undefined', () => {
// Arrange & Act
render(<RuleDetail />)
// Assert
const fieldValues = screen.getAllByTestId('field-value')
expect(fieldValues[0]).toHaveTextContent('-')
})
it('should show "-" when sourceData.mode is undefined', () => {
// Arrange
const sourceData = { ...createMockProcessRule(), mode: undefined as unknown as ProcessMode }
// Act
render(<RuleDetail sourceData={sourceData} />)
// Assert
const fieldValues = screen.getAllByTestId('field-value')
expect(fieldValues[0]).toHaveTextContent('-')
})
it('should show custom mode text when mode is general', () => {
// Arrange
const sourceData = createMockProcessRule({ mode: ProcessMode.general })
// Act
render(<RuleDetail sourceData={sourceData} />)
// Assert
const fieldValues = screen.getAllByTestId('field-value')
expect(fieldValues[0]).toHaveTextContent('datasetDocuments.embedding.custom')
})
it('should show hierarchical mode with paragraph parent mode', () => {
// Arrange
const sourceData = createMockProcessRule({
mode: ProcessMode.parentChild,
rules: {
pre_processing_rules: [],
segmentation: { separator: '\n', max_tokens: 500, chunk_overlap: 50 },
parent_mode: 'paragraph',
subchunk_segmentation: { separator: '\n', max_tokens: 200, chunk_overlap: 20 },
},
})
// Act
render(<RuleDetail sourceData={sourceData} />)
// Assert
const fieldValues = screen.getAllByTestId('field-value')
expect(fieldValues[0]).toHaveTextContent('datasetDocuments.embedding.hierarchical · dataset.parentMode.paragraph')
})
it('should show hierarchical mode with full-doc parent mode', () => {
// Arrange
const sourceData = createMockProcessRule({
mode: ProcessMode.parentChild,
rules: {
pre_processing_rules: [],
segmentation: { separator: '\n', max_tokens: 500, chunk_overlap: 50 },
parent_mode: 'full-doc',
subchunk_segmentation: { separator: '\n', max_tokens: 200, chunk_overlap: 20 },
},
})
// Act
render(<RuleDetail sourceData={sourceData} />)
// Assert
const fieldValues = screen.getAllByTestId('field-value')
expect(fieldValues[0]).toHaveTextContent('datasetDocuments.embedding.hierarchical · dataset.parentMode.fullDoc')
})
})
// ==========================================
// Indexing Type Tests
// ==========================================
describe('Indexing Type', () => {
it('should show qualified indexing type', () => {
// Arrange & Act
render(<RuleDetail indexingType={IndexingType.QUALIFIED} />)
// Assert
const fieldInfos = screen.getAllByTestId('field-info')
expect(fieldInfos[1]).toHaveAttribute('data-label', 'datasetCreation.stepTwo.indexMode')
const fieldValues = screen.getAllByTestId('field-value')
expect(fieldValues[1]).toHaveTextContent('datasetCreation.stepTwo.qualified')
})
it('should show economical indexing type', () => {
// Arrange & Act
render(<RuleDetail indexingType={IndexingType.ECONOMICAL} />)
// Assert
const fieldValues = screen.getAllByTestId('field-value')
expect(fieldValues[1]).toHaveTextContent('datasetCreation.stepTwo.economical')
})
it('should show high_quality icon for qualified indexing', () => {
// Arrange & Act
render(<RuleDetail indexingType={IndexingType.QUALIFIED} />)
// Assert
const images = screen.getAllByTestId('next-image')
expect(images[0]).toHaveAttribute('src', '/icons/high_quality.svg')
})
it('should show economical icon for economical indexing', () => {
// Arrange & Act
render(<RuleDetail indexingType={IndexingType.ECONOMICAL} />)
// Assert
const images = screen.getAllByTestId('next-image')
expect(images[0]).toHaveAttribute('src', '/icons/economical.svg')
})
})
// ==========================================
// Retrieval Method Tests
// ==========================================
describe('Retrieval Method', () => {
it('should show retrieval setting label', () => {
// Arrange & Act
render(<RuleDetail retrievalMethod={RETRIEVE_METHOD.semantic} />)
// Assert
const fieldInfos = screen.getAllByTestId('field-info')
expect(fieldInfos[2]).toHaveAttribute('data-label', 'datasetSettings.form.retrievalSetting.title')
})
it('should show semantic search title for qualified indexing with semantic method', () => {
// Arrange & Act
render(
<RuleDetail
indexingType={IndexingType.QUALIFIED}
retrievalMethod={RETRIEVE_METHOD.semantic}
/>,
)
// Assert
const fieldValues = screen.getAllByTestId('field-value')
expect(fieldValues[2]).toHaveTextContent('dataset.retrieval.semantic_search.title')
})
it('should show full text search title for fullText method', () => {
// Arrange & Act
render(
<RuleDetail
indexingType={IndexingType.QUALIFIED}
retrievalMethod={RETRIEVE_METHOD.fullText}
/>,
)
// Assert
const fieldValues = screen.getAllByTestId('field-value')
expect(fieldValues[2]).toHaveTextContent('dataset.retrieval.full_text_search.title')
})
it('should show hybrid search title for hybrid method', () => {
// Arrange & Act
render(
<RuleDetail
indexingType={IndexingType.QUALIFIED}
retrievalMethod={RETRIEVE_METHOD.hybrid}
/>,
)
// Assert
const fieldValues = screen.getAllByTestId('field-value')
expect(fieldValues[2]).toHaveTextContent('dataset.retrieval.hybrid_search.title')
})
it('should force keyword_search for economical indexing type', () => {
// Arrange & Act
render(
<RuleDetail
indexingType={IndexingType.ECONOMICAL}
retrievalMethod={RETRIEVE_METHOD.semantic}
/>,
)
// Assert
const fieldValues = screen.getAllByTestId('field-value')
expect(fieldValues[2]).toHaveTextContent('dataset.retrieval.keyword_search.title')
})
it('should show vector icon for semantic search', () => {
// Arrange & Act
render(
<RuleDetail
indexingType={IndexingType.QUALIFIED}
retrievalMethod={RETRIEVE_METHOD.semantic}
/>,
)
// Assert
const images = screen.getAllByTestId('next-image')
expect(images[1]).toHaveAttribute('src', '/icons/vector.svg')
})
it('should show fullText icon for full text search', () => {
// Arrange & Act
render(
<RuleDetail
indexingType={IndexingType.QUALIFIED}
retrievalMethod={RETRIEVE_METHOD.fullText}
/>,
)
// Assert
const images = screen.getAllByTestId('next-image')
expect(images[1]).toHaveAttribute('src', '/icons/fullText.svg')
})
it('should show hybrid icon for hybrid search', () => {
// Arrange & Act
render(
<RuleDetail
indexingType={IndexingType.QUALIFIED}
retrievalMethod={RETRIEVE_METHOD.hybrid}
/>,
)
// Assert
const images = screen.getAllByTestId('next-image')
expect(images[1]).toHaveAttribute('src', '/icons/hybrid.svg')
})
})
// ==========================================
// Edge Cases
// ==========================================
describe('Edge Cases', () => {
it('should handle all props undefined', () => {
// Arrange & Act
render(<RuleDetail />)
// Assert
expect(screen.getAllByTestId('field-info')).toHaveLength(3)
})
it('should handle undefined indexingType with defined retrievalMethod', () => {
// Arrange & Act
render(<RuleDetail retrievalMethod={RETRIEVE_METHOD.hybrid} />)
// Assert
const fieldValues = screen.getAllByTestId('field-value')
// When indexingType is undefined, it's treated as qualified
expect(fieldValues[1]).toHaveTextContent('datasetCreation.stepTwo.qualified')
})
it('should handle undefined retrievalMethod with defined indexingType', () => {
// Arrange & Act
render(<RuleDetail indexingType={IndexingType.QUALIFIED} />)
// Assert
const images = screen.getAllByTestId('next-image')
// When retrievalMethod is undefined, vector icon is used as default
expect(images[1]).toHaveAttribute('src', '/icons/vector.svg')
})
it('should handle sourceData with null rules', () => {
// Arrange
const sourceData = {
...createMockProcessRule(),
mode: ProcessMode.parentChild,
rules: null as unknown as ProcessRuleResponse['rules'],
}
// Act & Assert - should not crash
render(<RuleDetail sourceData={sourceData} />)
expect(screen.getAllByTestId('field-info')).toHaveLength(3)
})
})
// ==========================================
// Props Variations Tests
// ==========================================
describe('Props Variations', () => {
it('should render correctly with all props provided', () => {
// Arrange
const sourceData = createMockProcessRule({ mode: ProcessMode.general })
// Act
render(
<RuleDetail
sourceData={sourceData}
indexingType={IndexingType.QUALIFIED}
retrievalMethod={RETRIEVE_METHOD.semantic}
/>,
)
// Assert
const fieldValues = screen.getAllByTestId('field-value')
expect(fieldValues[0]).toHaveTextContent('datasetDocuments.embedding.custom')
expect(fieldValues[1]).toHaveTextContent('datasetCreation.stepTwo.qualified')
expect(fieldValues[2]).toHaveTextContent('dataset.retrieval.semantic_search.title')
})
it('should render correctly for economical mode with full settings', () => {
// Arrange
const sourceData = createMockProcessRule({ mode: ProcessMode.parentChild })
// Act
render(
<RuleDetail
sourceData={sourceData}
indexingType={IndexingType.ECONOMICAL}
retrievalMethod={RETRIEVE_METHOD.fullText}
/>,
)
// Assert
const fieldValues = screen.getAllByTestId('field-value')
expect(fieldValues[1]).toHaveTextContent('datasetCreation.stepTwo.economical')
// Economical always uses keyword_search regardless of retrievalMethod
expect(fieldValues[2]).toHaveTextContent('dataset.retrieval.keyword_search.title')
})
})
// ==========================================
// Memoization Tests
// ==========================================
describe('Memoization', () => {
it('should be wrapped in React.memo', () => {
// Assert - RuleDetail should be a memoized component
expect(RuleDetail).toHaveProperty('$$typeof', Symbol.for('react.memo'))
})
it('should not re-render with same props', () => {
// Arrange
const sourceData = createMockProcessRule()
const props = {
sourceData,
indexingType: IndexingType.QUALIFIED,
retrievalMethod: RETRIEVE_METHOD.semantic,
}
// Act
const { rerender } = render(<RuleDetail {...props} />)
rerender(<RuleDetail {...props} />)
// Assert - component renders correctly after rerender
expect(screen.getAllByTestId('field-info')).toHaveLength(3)
})
})
})

View File

@@ -39,7 +39,7 @@ const RuleDetail = ({
}, [sourceData, t])
return (
<div className='flex flex-col gap-1'>
<div className='flex flex-col gap-1' data-testid='rule-detail'>
<FieldInfo
label={t('datasetDocuments.embedding.mode')}
displayedValue={getValue('mode')}

View File

@@ -0,0 +1,800 @@
import { render, screen } from '@testing-library/react'
import React from 'react'
import Processing from './index'
import type { InitialDocumentDetail } from '@/models/pipeline'
import { DatasourceType } from '@/models/pipeline'
import type { DocumentIndexingStatus } from '@/models/datasets'
// ==========================================
// Mock External Dependencies
// ==========================================
// Mock react-i18next (handled by __mocks__/react-i18next.ts but we override for custom messages)
jest.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => key,
}),
}))
// Mock useDocLink - returns a function that generates doc URLs
jest.mock('@/context/i18n', () => ({
useDocLink: () => (path?: string) => `https://docs.dify.ai/en-US/${path || ''}`,
}))
// Mock dataset detail context
let mockDataset: {
id?: string
indexing_technique?: string
retrieval_model_dict?: { search_method?: string }
} | undefined
jest.mock('@/context/dataset-detail', () => ({
useDatasetDetailContextWithSelector: <T,>(selector: (state: { dataset?: typeof mockDataset }) => T): T => {
return selector({ dataset: mockDataset })
},
}))
// Mock the EmbeddingProcess component to track props
let embeddingProcessProps: Record<string, unknown> = {}
jest.mock('./embedding-process', () => ({
__esModule: true,
default: (props: Record<string, unknown>) => {
embeddingProcessProps = props
return (
<div data-testid="embedding-process">
<span data-testid="ep-dataset-id">{props.datasetId as string}</span>
<span data-testid="ep-batch-id">{props.batchId as string}</span>
<span data-testid="ep-documents-count">{(props.documents as unknown[])?.length ?? 0}</span>
<span data-testid="ep-indexing-type">{props.indexingType as string || 'undefined'}</span>
<span data-testid="ep-retrieval-method">{props.retrievalMethod as string || 'undefined'}</span>
</div>
)
},
}))
// ==========================================
// Test Data Factory Functions
// ==========================================
/**
* Creates a mock InitialDocumentDetail for testing
*/
const createMockDocument = (overrides: Partial<InitialDocumentDetail> = {}): InitialDocumentDetail => ({
id: `doc-${Math.random().toString(36).slice(2, 9)}`,
name: 'test-document.txt',
data_source_type: DatasourceType.localFile,
data_source_info: {},
enable: true,
error: '',
indexing_status: 'waiting' as DocumentIndexingStatus,
position: 0,
...overrides,
})
/**
* Creates a list of mock documents
*/
const createMockDocuments = (count: number): InitialDocumentDetail[] =>
Array.from({ length: count }, (_, index) =>
createMockDocument({
id: `doc-${index + 1}`,
name: `document-${index + 1}.txt`,
position: index,
}),
)
// ==========================================
// Test Suite
// ==========================================
describe('Processing', () => {
beforeEach(() => {
jest.clearAllMocks()
embeddingProcessProps = {}
// Reset mock dataset with default values
mockDataset = {
id: 'dataset-123',
indexing_technique: 'high_quality',
retrieval_model_dict: { search_method: 'semantic_search' },
}
})
// ==========================================
// Rendering Tests
// ==========================================
describe('Rendering', () => {
// Tests basic rendering functionality
it('should render without crashing', () => {
// Arrange
const props = {
batchId: 'batch-123',
documents: createMockDocuments(2),
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
})
it('should render the EmbeddingProcess component', () => {
// Arrange
const props = {
batchId: 'batch-456',
documents: createMockDocuments(3),
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
})
it('should render the side tip section with correct content', () => {
// Arrange
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
render(<Processing {...props} />)
// Assert - verify translation keys are rendered
expect(screen.getByText('datasetCreation.stepThree.sideTipTitle')).toBeInTheDocument()
expect(screen.getByText('datasetCreation.stepThree.sideTipContent')).toBeInTheDocument()
expect(screen.getByText('datasetPipeline.addDocuments.stepThree.learnMore')).toBeInTheDocument()
})
it('should render the documentation link with correct attributes', () => {
// Arrange
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
render(<Processing {...props} />)
// Assert
const link = screen.getByRole('link', { name: 'datasetPipeline.addDocuments.stepThree.learnMore' })
expect(link).toHaveAttribute('href', 'https://docs.dify.ai/en-US//guides/knowledge-base/integrate-knowledge-within-application')
expect(link).toHaveAttribute('target', '_blank')
expect(link).toHaveAttribute('rel', 'noreferrer noopener')
})
it('should render the book icon in the side tip', () => {
// Arrange
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
const { container } = render(<Processing {...props} />)
// Assert - check for icon container with shadow styling
const iconContainer = container.querySelector('.shadow-lg.shadow-shadow-shadow-5')
expect(iconContainer).toBeInTheDocument()
})
})
// ==========================================
// Props Testing
// ==========================================
describe('Props', () => {
// Tests that props are correctly passed to child components
it('should pass batchId to EmbeddingProcess', () => {
// Arrange
const testBatchId = 'test-batch-id-789'
const props = {
batchId: testBatchId,
documents: createMockDocuments(1),
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('ep-batch-id')).toHaveTextContent(testBatchId)
expect(embeddingProcessProps.batchId).toBe(testBatchId)
})
it('should pass documents to EmbeddingProcess', () => {
// Arrange
const documents = createMockDocuments(5)
const props = {
batchId: 'batch-123',
documents,
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('ep-documents-count')).toHaveTextContent('5')
expect(embeddingProcessProps.documents).toEqual(documents)
})
it('should pass datasetId from context to EmbeddingProcess', () => {
// Arrange
mockDataset = {
id: 'context-dataset-id',
indexing_technique: 'high_quality',
retrieval_model_dict: { search_method: 'semantic_search' },
}
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('ep-dataset-id')).toHaveTextContent('context-dataset-id')
expect(embeddingProcessProps.datasetId).toBe('context-dataset-id')
})
it('should pass indexingType from context to EmbeddingProcess', () => {
// Arrange
mockDataset = {
id: 'dataset-123',
indexing_technique: 'economy',
retrieval_model_dict: { search_method: 'semantic_search' },
}
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('ep-indexing-type')).toHaveTextContent('economy')
expect(embeddingProcessProps.indexingType).toBe('economy')
})
it('should pass retrievalMethod from context to EmbeddingProcess', () => {
// Arrange
mockDataset = {
id: 'dataset-123',
indexing_technique: 'high_quality',
retrieval_model_dict: { search_method: 'keyword_search' },
}
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('ep-retrieval-method')).toHaveTextContent('keyword_search')
expect(embeddingProcessProps.retrievalMethod).toBe('keyword_search')
})
it('should handle different document types', () => {
// Arrange
const documents = [
createMockDocument({
id: 'doc-local',
name: 'local-file.pdf',
data_source_type: DatasourceType.localFile,
}),
createMockDocument({
id: 'doc-online',
name: 'online-doc',
data_source_type: DatasourceType.onlineDocument,
}),
createMockDocument({
id: 'doc-website',
name: 'website-page',
data_source_type: DatasourceType.websiteCrawl,
}),
]
const props = {
batchId: 'batch-123',
documents,
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('ep-documents-count')).toHaveTextContent('3')
expect(embeddingProcessProps.documents).toEqual(documents)
})
})
// ==========================================
// Edge Cases
// ==========================================
describe('Edge Cases', () => {
// Tests for boundary conditions and unusual inputs
it('should handle empty documents array', () => {
// Arrange
const props = {
batchId: 'batch-123',
documents: [],
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
expect(screen.getByTestId('ep-documents-count')).toHaveTextContent('0')
expect(embeddingProcessProps.documents).toEqual([])
})
it('should handle empty batchId', () => {
// Arrange
const props = {
batchId: '',
documents: createMockDocuments(1),
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
expect(screen.getByTestId('ep-batch-id')).toHaveTextContent('')
})
it('should handle undefined dataset from context', () => {
// Arrange
mockDataset = undefined
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
expect(embeddingProcessProps.datasetId).toBeUndefined()
expect(embeddingProcessProps.indexingType).toBeUndefined()
expect(embeddingProcessProps.retrievalMethod).toBeUndefined()
})
it('should handle dataset with undefined id', () => {
// Arrange
mockDataset = {
id: undefined,
indexing_technique: 'high_quality',
retrieval_model_dict: { search_method: 'semantic_search' },
}
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
expect(embeddingProcessProps.datasetId).toBeUndefined()
})
it('should handle dataset with undefined indexing_technique', () => {
// Arrange
mockDataset = {
id: 'dataset-123',
indexing_technique: undefined,
retrieval_model_dict: { search_method: 'semantic_search' },
}
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
expect(embeddingProcessProps.indexingType).toBeUndefined()
})
it('should handle dataset with undefined retrieval_model_dict', () => {
// Arrange
mockDataset = {
id: 'dataset-123',
indexing_technique: 'high_quality',
retrieval_model_dict: undefined,
}
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
expect(embeddingProcessProps.retrievalMethod).toBeUndefined()
})
it('should handle dataset with empty retrieval_model_dict', () => {
// Arrange
mockDataset = {
id: 'dataset-123',
indexing_technique: 'high_quality',
retrieval_model_dict: {},
}
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
expect(embeddingProcessProps.retrievalMethod).toBeUndefined()
})
it('should handle large number of documents', () => {
// Arrange
const props = {
batchId: 'batch-123',
documents: createMockDocuments(100),
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
expect(screen.getByTestId('ep-documents-count')).toHaveTextContent('100')
})
it('should handle documents with error status', () => {
// Arrange
const documents = [
createMockDocument({
id: 'doc-error',
name: 'error-doc.txt',
error: 'Processing failed',
indexing_status: 'error' as DocumentIndexingStatus,
}),
]
const props = {
batchId: 'batch-123',
documents,
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
expect(embeddingProcessProps.documents).toEqual(documents)
})
it('should handle documents with special characters in names', () => {
// Arrange
const documents = [
createMockDocument({
id: 'doc-special',
name: 'document with spaces & special-chars_测试.pdf',
}),
]
const props = {
batchId: 'batch-123',
documents,
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
expect(embeddingProcessProps.documents).toEqual(documents)
})
it('should handle batchId with special characters', () => {
// Arrange
const props = {
batchId: 'batch-123-abc_xyz:456',
documents: createMockDocuments(1),
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('ep-batch-id')).toHaveTextContent('batch-123-abc_xyz:456')
})
})
// ==========================================
// Context Integration Tests
// ==========================================
describe('Context Integration', () => {
// Tests for proper context usage
it('should correctly use context selectors for all dataset properties', () => {
// Arrange
mockDataset = {
id: 'full-dataset-id',
indexing_technique: 'high_quality',
retrieval_model_dict: { search_method: 'hybrid_search' },
}
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
render(<Processing {...props} />)
// Assert
expect(embeddingProcessProps.datasetId).toBe('full-dataset-id')
expect(embeddingProcessProps.indexingType).toBe('high_quality')
expect(embeddingProcessProps.retrievalMethod).toBe('hybrid_search')
})
it('should handle context changes with different indexing techniques', () => {
// Arrange - Test with economy indexing
mockDataset = {
id: 'dataset-economy',
indexing_technique: 'economy',
retrieval_model_dict: { search_method: 'keyword_search' },
}
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
const { rerender } = render(<Processing {...props} />)
// Assert economy indexing
expect(embeddingProcessProps.indexingType).toBe('economy')
// Arrange - Update to high_quality
mockDataset = {
id: 'dataset-hq',
indexing_technique: 'high_quality',
retrieval_model_dict: { search_method: 'semantic_search' },
}
// Act - Rerender with new context
rerender(<Processing {...props} />)
// Assert high_quality indexing
expect(embeddingProcessProps.indexingType).toBe('high_quality')
})
})
// ==========================================
// Layout Tests
// ==========================================
describe('Layout', () => {
// Tests for proper layout and structure
it('should render with correct layout structure', () => {
// Arrange
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
const { container } = render(<Processing {...props} />)
// Assert - Check for flex layout with proper widths
const mainContainer = container.querySelector('.flex.h-full.w-full.justify-center')
expect(mainContainer).toBeInTheDocument()
// Check for left panel (3/5 width)
const leftPanel = container.querySelector('.w-3\\/5')
expect(leftPanel).toBeInTheDocument()
// Check for right panel (2/5 width)
const rightPanel = container.querySelector('.w-2\\/5')
expect(rightPanel).toBeInTheDocument()
})
it('should render side tip card with correct styling', () => {
// Arrange
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
const { container } = render(<Processing {...props} />)
// Assert - Check for card container with rounded corners and background
const sideTipCard = container.querySelector('.rounded-xl.bg-background-section')
expect(sideTipCard).toBeInTheDocument()
})
it('should constrain max-width for EmbeddingProcess container', () => {
// Arrange
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
const { container } = render(<Processing {...props} />)
// Assert
const maxWidthContainer = container.querySelector('.max-w-\\[640px\\]')
expect(maxWidthContainer).toBeInTheDocument()
})
})
// ==========================================
// Document Variations Tests
// ==========================================
describe('Document Variations', () => {
// Tests for different document configurations
it('should handle documents with all indexing statuses', () => {
// Arrange
const statuses: DocumentIndexingStatus[] = [
'waiting',
'parsing',
'cleaning',
'splitting',
'indexing',
'paused',
'error',
'completed',
]
const documents = statuses.map((status, index) =>
createMockDocument({
id: `doc-${status}`,
name: `${status}-doc.txt`,
indexing_status: status,
position: index,
}),
)
const props = {
batchId: 'batch-123',
documents,
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('ep-documents-count')).toHaveTextContent(String(statuses.length))
expect(embeddingProcessProps.documents).toEqual(documents)
})
it('should handle documents with enabled and disabled states', () => {
// Arrange
const documents = [
createMockDocument({ id: 'doc-enabled', enable: true }),
createMockDocument({ id: 'doc-disabled', enable: false }),
]
const props = {
batchId: 'batch-123',
documents,
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('ep-documents-count')).toHaveTextContent('2')
expect(embeddingProcessProps.documents).toEqual(documents)
})
it('should handle documents from online drive source', () => {
// Arrange
const documents = [
createMockDocument({
id: 'doc-drive',
name: 'google-drive-doc',
data_source_type: DatasourceType.onlineDrive,
data_source_info: { provider: 'google_drive' },
}),
]
const props = {
batchId: 'batch-123',
documents,
}
// Act
render(<Processing {...props} />)
// Assert
expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
expect(embeddingProcessProps.documents).toEqual(documents)
})
it('should handle documents with complex data_source_info', () => {
// Arrange
const documents = [
createMockDocument({
id: 'doc-notion',
name: 'Notion Page',
data_source_type: DatasourceType.onlineDocument,
data_source_info: {
notion_page_icon: { type: 'emoji', emoji: '📄' },
notion_workspace_id: 'ws-123',
notion_page_id: 'page-456',
},
}),
]
const props = {
batchId: 'batch-123',
documents,
}
// Act
render(<Processing {...props} />)
// Assert
expect(embeddingProcessProps.documents).toEqual(documents)
})
})
// ==========================================
// Retrieval Method Variations
// ==========================================
describe('Retrieval Method Variations', () => {
// Tests for different retrieval methods
const retrievalMethods = ['semantic_search', 'keyword_search', 'hybrid_search', 'full_text_search']
it.each(retrievalMethods)('should handle %s retrieval method', (method) => {
// Arrange
mockDataset = {
id: 'dataset-123',
indexing_technique: 'high_quality',
retrieval_model_dict: { search_method: method },
}
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
render(<Processing {...props} />)
// Assert
expect(embeddingProcessProps.retrievalMethod).toBe(method)
})
})
// ==========================================
// Indexing Technique Variations
// ==========================================
describe('Indexing Technique Variations', () => {
// Tests for different indexing techniques
const indexingTechniques = ['high_quality', 'economy']
it.each(indexingTechniques)('should handle %s indexing technique', (technique) => {
// Arrange
mockDataset = {
id: 'dataset-123',
indexing_technique: technique,
retrieval_model_dict: { search_method: 'semantic_search' },
}
const props = {
batchId: 'batch-123',
documents: createMockDocuments(1),
}
// Act
render(<Processing {...props} />)
// Assert
expect(embeddingProcessProps.indexingType).toBe(technique)
})
})
})

View File

@@ -20,7 +20,7 @@ const Processing = ({
const docLink = useDocLink()
const datasetId = useDatasetDetailContextWithSelector(s => s.dataset?.id)
const indexingType = useDatasetDetailContextWithSelector(s => s.dataset?.indexing_technique)
const retrievalMethod = useDatasetDetailContextWithSelector(s => s.dataset?.retrieval_model_dict.search_method)
const retrievalMethod = useDatasetDetailContextWithSelector(s => s.dataset?.retrieval_model_dict?.search_method)
return (
<div className='flex h-full w-full justify-center overflow-hidden'>