test: add comprehensive unit and integration tests for dataset module (#32187)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Coding On Star 2026-02-12 10:00:32 +08:00 committed by GitHub
parent f953331f91
commit 10f85074e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
388 changed files with 22637 additions and 15567 deletions

View File

@ -0,0 +1,301 @@
/**
* Integration Test: Create Dataset Flow
*
* Tests cross-module data flow: step-one data step-two hooks creation params API call
* Validates data contracts between steps.
*/
import type { CustomFile } from '@/models/datasets'
import type { RetrievalConfig } from '@/types/app'
import { act, renderHook } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { ChunkingMode, DataSourceType, ProcessMode } from '@/models/datasets'
import { RETRIEVE_METHOD } from '@/types/app'
const mockCreateFirstDocument = vi.fn()
const mockCreateDocument = vi.fn()
vi.mock('@/service/knowledge/use-create-dataset', () => ({
useCreateFirstDocument: () => ({ mutateAsync: mockCreateFirstDocument, isPending: false }),
useCreateDocument: () => ({ mutateAsync: mockCreateDocument, isPending: false }),
getNotionInfo: (pages: { page_id: string }[], credentialId: string) => ({
workspace_id: 'ws-1',
pages: pages.map(p => p.page_id),
notion_credential_id: credentialId,
}),
getWebsiteInfo: (opts: { websitePages: { url: string }[], websiteCrawlProvider: string }) => ({
urls: opts.websitePages.map(p => p.url),
only_main_content: true,
provider: opts.websiteCrawlProvider,
}),
}))
vi.mock('@/service/knowledge/use-dataset', () => ({
useInvalidDatasetList: () => vi.fn(),
}))
vi.mock('@/app/components/base/toast', () => ({
default: { notify: vi.fn() },
}))
vi.mock('@/app/components/base/amplitude', () => ({
trackEvent: vi.fn(),
}))
// Import hooks after mocks
const { useSegmentationState, DEFAULT_SEGMENT_IDENTIFIER, DEFAULT_MAXIMUM_CHUNK_LENGTH, DEFAULT_OVERLAP }
= await import('@/app/components/datasets/create/step-two/hooks')
const { useDocumentCreation, IndexingType }
= await import('@/app/components/datasets/create/step-two/hooks')
const createMockFile = (overrides?: Partial<CustomFile>): CustomFile => ({
id: 'file-1',
name: 'test.txt',
type: 'text/plain',
size: 1024,
extension: '.txt',
mime_type: 'text/plain',
created_at: 0,
created_by: '',
...overrides,
} as CustomFile)
describe('Create Dataset Flow - Cross-Step Data Contract', () => {
beforeEach(() => {
vi.clearAllMocks()
})
describe('Step-One → Step-Two: Segmentation Defaults', () => {
it('should initialise with correct default segmentation values', () => {
const { result } = renderHook(() => useSegmentationState())
expect(result.current.segmentIdentifier).toBe(DEFAULT_SEGMENT_IDENTIFIER)
expect(result.current.maxChunkLength).toBe(DEFAULT_MAXIMUM_CHUNK_LENGTH)
expect(result.current.overlap).toBe(DEFAULT_OVERLAP)
expect(result.current.segmentationType).toBe(ProcessMode.general)
})
it('should produce valid process rule for general chunking', () => {
const { result } = renderHook(() => useSegmentationState())
const processRule = result.current.getProcessRule(ChunkingMode.text)
// mode should be segmentationType = ProcessMode.general = 'custom'
expect(processRule.mode).toBe('custom')
expect(processRule.rules.segmentation).toEqual({
separator: '\n\n', // unescaped from \\n\\n
max_tokens: DEFAULT_MAXIMUM_CHUNK_LENGTH,
chunk_overlap: DEFAULT_OVERLAP,
})
// rules is empty initially since no default config loaded
expect(processRule.rules.pre_processing_rules).toEqual([])
})
it('should produce valid process rule for parent-child chunking', () => {
const { result } = renderHook(() => useSegmentationState())
const processRule = result.current.getProcessRule(ChunkingMode.parentChild)
expect(processRule.mode).toBe('hierarchical')
expect(processRule.rules.parent_mode).toBe('paragraph')
expect(processRule.rules.segmentation).toEqual({
separator: '\n\n',
max_tokens: 1024,
})
expect(processRule.rules.subchunk_segmentation).toEqual({
separator: '\n',
max_tokens: 512,
})
})
})
describe('Step-Two → Creation API: Params Building', () => {
it('should build valid creation params for file upload workflow', () => {
const files = [createMockFile()]
const { result: segResult } = renderHook(() => useSegmentationState())
const { result: creationResult } = renderHook(() =>
useDocumentCreation({
dataSourceType: DataSourceType.FILE,
files,
notionPages: [],
notionCredentialId: '',
websitePages: [],
}),
)
const processRule = segResult.current.getProcessRule(ChunkingMode.text)
const retrievalConfig: RetrievalConfig = {
search_method: RETRIEVE_METHOD.semantic,
reranking_enable: false,
reranking_model: { reranking_provider_name: '', reranking_model_name: '' },
top_k: 3,
score_threshold_enabled: false,
score_threshold: 0,
}
const params = creationResult.current.buildCreationParams(
ChunkingMode.text,
'English',
processRule,
retrievalConfig,
{ provider: 'openai', model: 'text-embedding-ada-002' },
IndexingType.QUALIFIED,
)
expect(params).not.toBeNull()
// File IDs come from file.id (not file.file.id)
expect(params!.data_source.type).toBe(DataSourceType.FILE)
expect(params!.data_source.info_list.file_info_list?.file_ids).toContain('file-1')
expect(params!.indexing_technique).toBe(IndexingType.QUALIFIED)
expect(params!.doc_form).toBe(ChunkingMode.text)
expect(params!.doc_language).toBe('English')
expect(params!.embedding_model).toBe('text-embedding-ada-002')
expect(params!.embedding_model_provider).toBe('openai')
expect(params!.process_rule.mode).toBe('custom')
})
it('should validate params: overlap must not exceed maxChunkLength', () => {
const { result } = renderHook(() =>
useDocumentCreation({
dataSourceType: DataSourceType.FILE,
files: [createMockFile()],
notionPages: [],
notionCredentialId: '',
websitePages: [],
}),
)
// validateParams returns false (invalid) when overlap > maxChunkLength for general mode
const isValid = result.current.validateParams({
segmentationType: 'general',
maxChunkLength: 100,
limitMaxChunkLength: 4000,
overlap: 200, // overlap > maxChunkLength
indexType: IndexingType.QUALIFIED,
embeddingModel: { provider: 'openai', model: 'text-embedding-ada-002' },
rerankModelList: [],
retrievalConfig: {
search_method: RETRIEVE_METHOD.semantic,
reranking_enable: false,
reranking_model: { reranking_provider_name: '', reranking_model_name: '' },
top_k: 3,
score_threshold_enabled: false,
score_threshold: 0,
},
})
expect(isValid).toBe(false)
})
it('should validate params: maxChunkLength must not exceed limit', () => {
const { result } = renderHook(() =>
useDocumentCreation({
dataSourceType: DataSourceType.FILE,
files: [createMockFile()],
notionPages: [],
notionCredentialId: '',
websitePages: [],
}),
)
const isValid = result.current.validateParams({
segmentationType: 'general',
maxChunkLength: 5000,
limitMaxChunkLength: 4000, // limit < maxChunkLength
overlap: 50,
indexType: IndexingType.QUALIFIED,
embeddingModel: { provider: 'openai', model: 'text-embedding-ada-002' },
rerankModelList: [],
retrievalConfig: {
search_method: RETRIEVE_METHOD.semantic,
reranking_enable: false,
reranking_model: { reranking_provider_name: '', reranking_model_name: '' },
top_k: 3,
score_threshold_enabled: false,
score_threshold: 0,
},
})
expect(isValid).toBe(false)
})
})
describe('Full Flow: Segmentation State → Process Rule → Creation Params Consistency', () => {
it('should keep segmentation values consistent across getProcessRule and buildCreationParams', () => {
const files = [createMockFile()]
const { result: segResult } = renderHook(() => useSegmentationState())
const { result: creationResult } = renderHook(() =>
useDocumentCreation({
dataSourceType: DataSourceType.FILE,
files,
notionPages: [],
notionCredentialId: '',
websitePages: [],
}),
)
// Change segmentation settings
act(() => {
segResult.current.setMaxChunkLength(2048)
segResult.current.setOverlap(100)
})
const processRule = segResult.current.getProcessRule(ChunkingMode.text)
expect(processRule.rules.segmentation.max_tokens).toBe(2048)
expect(processRule.rules.segmentation.chunk_overlap).toBe(100)
const params = creationResult.current.buildCreationParams(
ChunkingMode.text,
'Chinese',
processRule,
{
search_method: RETRIEVE_METHOD.semantic,
reranking_enable: false,
reranking_model: { reranking_provider_name: '', reranking_model_name: '' },
top_k: 3,
score_threshold_enabled: false,
score_threshold: 0,
},
{ provider: 'openai', model: 'text-embedding-ada-002' },
IndexingType.QUALIFIED,
)
expect(params).not.toBeNull()
expect(params!.process_rule.rules.segmentation.max_tokens).toBe(2048)
expect(params!.process_rule.rules.segmentation.chunk_overlap).toBe(100)
expect(params!.doc_language).toBe('Chinese')
})
it('should support parent-child mode through the full pipeline', () => {
const files = [createMockFile()]
const { result: segResult } = renderHook(() => useSegmentationState())
const { result: creationResult } = renderHook(() =>
useDocumentCreation({
dataSourceType: DataSourceType.FILE,
files,
notionPages: [],
notionCredentialId: '',
websitePages: [],
}),
)
const processRule = segResult.current.getProcessRule(ChunkingMode.parentChild)
const params = creationResult.current.buildCreationParams(
ChunkingMode.parentChild,
'English',
processRule,
{
search_method: RETRIEVE_METHOD.semantic,
reranking_enable: false,
reranking_model: { reranking_provider_name: '', reranking_model_name: '' },
top_k: 3,
score_threshold_enabled: false,
score_threshold: 0,
},
{ provider: 'openai', model: 'text-embedding-ada-002' },
IndexingType.QUALIFIED,
)
expect(params).not.toBeNull()
expect(params!.doc_form).toBe(ChunkingMode.parentChild)
expect(params!.process_rule.mode).toBe('hierarchical')
expect(params!.process_rule.rules.parent_mode).toBe('paragraph')
expect(params!.process_rule.rules.subchunk_segmentation).toBeDefined()
})
})
})

View File

@ -0,0 +1,451 @@
/**
* Integration Test: Dataset Settings Flow
*
* Tests cross-module data contracts in the dataset settings form:
* useFormState hook index method config retrieval config permission state.
*
* The unit-level use-form-state.spec.ts validates the hook in isolation.
* This integration test verifies that changing one configuration dimension
* correctly cascades to dependent parts (index method retrieval config,
* permission member list visibility, embedding model embedding available state).
*/
import type { DataSet } from '@/models/datasets'
import type { RetrievalConfig } from '@/types/app'
import { act, renderHook, waitFor } from '@testing-library/react'
import { IndexingType } from '@/app/components/datasets/create/step-two'
import { ChunkingMode, DatasetPermission, DataSourceType, WeightedScoreEnum } from '@/models/datasets'
import { RETRIEVE_METHOD } from '@/types/app'
// --- Mocks ---
const mockMutateDatasets = vi.fn()
const mockInvalidDatasetList = vi.fn()
const mockUpdateDatasetSetting = vi.fn().mockResolvedValue({})
vi.mock('@/context/app-context', () => ({
useSelector: () => false,
}))
vi.mock('@/service/datasets', () => ({
updateDatasetSetting: (...args: unknown[]) => mockUpdateDatasetSetting(...args),
}))
vi.mock('@/service/knowledge/use-dataset', () => ({
useInvalidDatasetList: () => mockInvalidDatasetList,
}))
vi.mock('@/service/use-common', () => ({
useMembers: () => ({
data: {
accounts: [
{ id: 'user-1', name: 'Alice', email: 'alice@example.com', role: 'owner', avatar: '', avatar_url: '', last_login_at: '', created_at: '', status: 'active' },
{ id: 'user-2', name: 'Bob', email: 'bob@example.com', role: 'admin', avatar: '', avatar_url: '', last_login_at: '', created_at: '', status: 'active' },
{ id: 'user-3', name: 'Charlie', email: 'charlie@example.com', role: 'normal', avatar: '', avatar_url: '', last_login_at: '', created_at: '', status: 'active' },
],
},
}),
}))
vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
useModelList: () => ({ data: [] }),
}))
vi.mock('@/app/components/datasets/common/check-rerank-model', () => ({
isReRankModelSelected: () => true,
}))
vi.mock('@/app/components/base/toast', () => ({
default: { notify: vi.fn() },
}))
// --- Dataset factory ---
const createMockDataset = (overrides?: Partial<DataSet>): DataSet => ({
id: 'ds-settings-1',
name: 'Settings Test Dataset',
description: 'Integration test dataset',
permission: DatasetPermission.onlyMe,
icon_info: {
icon_type: 'emoji',
icon: '📙',
icon_background: '#FFF4ED',
icon_url: '',
},
indexing_technique: 'high_quality',
indexing_status: 'completed',
data_source_type: DataSourceType.FILE,
doc_form: ChunkingMode.text,
embedding_model: 'text-embedding-ada-002',
embedding_model_provider: 'openai',
embedding_available: true,
app_count: 2,
document_count: 10,
total_document_count: 10,
word_count: 5000,
provider: 'vendor',
tags: [],
partial_member_list: [],
external_knowledge_info: {
external_knowledge_id: '',
external_knowledge_api_id: '',
external_knowledge_api_name: '',
external_knowledge_api_endpoint: '',
},
external_retrieval_model: {
top_k: 2,
score_threshold: 0.5,
score_threshold_enabled: false,
},
retrieval_model_dict: {
search_method: RETRIEVE_METHOD.semantic,
reranking_enable: false,
reranking_model: { reranking_provider_name: '', reranking_model_name: '' },
top_k: 3,
score_threshold_enabled: false,
score_threshold: 0,
} as RetrievalConfig,
retrieval_model: {
search_method: RETRIEVE_METHOD.semantic,
reranking_enable: false,
reranking_model: { reranking_provider_name: '', reranking_model_name: '' },
top_k: 3,
score_threshold_enabled: false,
score_threshold: 0,
} as RetrievalConfig,
built_in_field_enabled: false,
keyword_number: 10,
created_by: 'user-1',
updated_by: 'user-1',
updated_at: Date.now(),
runtime_mode: 'general',
enable_api: true,
is_multimodal: false,
...overrides,
} as DataSet)
let mockDataset: DataSet = createMockDataset()
vi.mock('@/context/dataset-detail', () => ({
useDatasetDetailContextWithSelector: (
selector: (state: { dataset: DataSet | null, mutateDatasetRes: () => void }) => unknown,
) => selector({ dataset: mockDataset, mutateDatasetRes: mockMutateDatasets }),
}))
// Import after mocks are registered
const { useFormState } = await import(
'@/app/components/datasets/settings/form/hooks/use-form-state',
)
describe('Dataset Settings Flow - Cross-Module Configuration Cascade', () => {
beforeEach(() => {
vi.clearAllMocks()
mockUpdateDatasetSetting.mockResolvedValue({})
mockDataset = createMockDataset()
})
describe('Form State Initialization from Dataset → Index Method → Retrieval Config Chain', () => {
it('should initialise all form dimensions from a QUALIFIED dataset', () => {
const { result } = renderHook(() => useFormState())
expect(result.current.name).toBe('Settings Test Dataset')
expect(result.current.description).toBe('Integration test dataset')
expect(result.current.indexMethod).toBe('high_quality')
expect(result.current.embeddingModel).toEqual({
provider: 'openai',
model: 'text-embedding-ada-002',
})
expect(result.current.retrievalConfig.search_method).toBe(RETRIEVE_METHOD.semantic)
})
it('should initialise from an ECONOMICAL dataset with keyword retrieval', () => {
mockDataset = createMockDataset({
indexing_technique: IndexingType.ECONOMICAL,
embedding_model: '',
embedding_model_provider: '',
retrieval_model_dict: {
search_method: RETRIEVE_METHOD.keywordSearch,
reranking_enable: false,
reranking_model: { reranking_provider_name: '', reranking_model_name: '' },
top_k: 5,
score_threshold_enabled: false,
score_threshold: 0,
} as RetrievalConfig,
})
const { result } = renderHook(() => useFormState())
expect(result.current.indexMethod).toBe(IndexingType.ECONOMICAL)
expect(result.current.embeddingModel).toEqual({ provider: '', model: '' })
expect(result.current.retrievalConfig.search_method).toBe(RETRIEVE_METHOD.keywordSearch)
})
})
describe('Index Method Change → Retrieval Config Sync', () => {
it('should allow switching index method from QUALIFIED to ECONOMICAL', () => {
const { result } = renderHook(() => useFormState())
expect(result.current.indexMethod).toBe('high_quality')
act(() => {
result.current.setIndexMethod(IndexingType.ECONOMICAL)
})
expect(result.current.indexMethod).toBe(IndexingType.ECONOMICAL)
})
it('should allow updating retrieval config after index method switch', () => {
const { result } = renderHook(() => useFormState())
act(() => {
result.current.setIndexMethod(IndexingType.ECONOMICAL)
})
act(() => {
result.current.setRetrievalConfig({
...result.current.retrievalConfig,
search_method: RETRIEVE_METHOD.keywordSearch,
reranking_enable: false,
})
})
expect(result.current.indexMethod).toBe(IndexingType.ECONOMICAL)
expect(result.current.retrievalConfig.search_method).toBe(RETRIEVE_METHOD.keywordSearch)
expect(result.current.retrievalConfig.reranking_enable).toBe(false)
})
it('should preserve retrieval config when switching back to QUALIFIED', () => {
const { result } = renderHook(() => useFormState())
const originalConfig = { ...result.current.retrievalConfig }
act(() => {
result.current.setIndexMethod(IndexingType.ECONOMICAL)
})
act(() => {
result.current.setIndexMethod(IndexingType.QUALIFIED)
})
expect(result.current.indexMethod).toBe('high_quality')
expect(result.current.retrievalConfig.search_method).toBe(originalConfig.search_method)
})
})
describe('Permission Change → Member List Visibility Logic', () => {
it('should start with onlyMe permission and empty member selection', () => {
const { result } = renderHook(() => useFormState())
expect(result.current.permission).toBe(DatasetPermission.onlyMe)
expect(result.current.selectedMemberIDs).toEqual([])
})
it('should enable member selection when switching to partialMembers', () => {
const { result } = renderHook(() => useFormState())
act(() => {
result.current.setPermission(DatasetPermission.partialMembers)
})
expect(result.current.permission).toBe(DatasetPermission.partialMembers)
expect(result.current.memberList).toHaveLength(3)
expect(result.current.memberList.map(m => m.id)).toEqual(['user-1', 'user-2', 'user-3'])
})
it('should persist member selection through permission toggle', () => {
const { result } = renderHook(() => useFormState())
act(() => {
result.current.setPermission(DatasetPermission.partialMembers)
result.current.setSelectedMemberIDs(['user-1', 'user-3'])
})
act(() => {
result.current.setPermission(DatasetPermission.allTeamMembers)
})
act(() => {
result.current.setPermission(DatasetPermission.partialMembers)
})
expect(result.current.selectedMemberIDs).toEqual(['user-1', 'user-3'])
})
it('should include partial_member_list in save payload only for partialMembers', async () => {
const { result } = renderHook(() => useFormState())
act(() => {
result.current.setPermission(DatasetPermission.partialMembers)
result.current.setSelectedMemberIDs(['user-2'])
})
await act(async () => {
await result.current.handleSave()
})
expect(mockUpdateDatasetSetting).toHaveBeenCalledWith({
datasetId: 'ds-settings-1',
body: expect.objectContaining({
permission: DatasetPermission.partialMembers,
partial_member_list: [
expect.objectContaining({ user_id: 'user-2', role: 'admin' }),
],
}),
})
})
it('should not include partial_member_list for allTeamMembers permission', async () => {
const { result } = renderHook(() => useFormState())
act(() => {
result.current.setPermission(DatasetPermission.allTeamMembers)
})
await act(async () => {
await result.current.handleSave()
})
const savedBody = mockUpdateDatasetSetting.mock.calls[0][0].body as Record<string, unknown>
expect(savedBody).not.toHaveProperty('partial_member_list')
})
})
describe('Form Submission Validation → All Fields Together', () => {
it('should reject empty name on save', async () => {
const Toast = await import('@/app/components/base/toast')
const { result } = renderHook(() => useFormState())
act(() => {
result.current.setName('')
})
await act(async () => {
await result.current.handleSave()
})
expect(Toast.default.notify).toHaveBeenCalledWith({
type: 'error',
message: expect.any(String),
})
expect(mockUpdateDatasetSetting).not.toHaveBeenCalled()
})
it('should include all configuration dimensions in a successful save', async () => {
const { result } = renderHook(() => useFormState())
act(() => {
result.current.setName('Updated Name')
result.current.setDescription('Updated Description')
result.current.setIndexMethod(IndexingType.ECONOMICAL)
result.current.setKeywordNumber(15)
})
await act(async () => {
await result.current.handleSave()
})
expect(mockUpdateDatasetSetting).toHaveBeenCalledWith({
datasetId: 'ds-settings-1',
body: expect.objectContaining({
name: 'Updated Name',
description: 'Updated Description',
indexing_technique: 'economy',
keyword_number: 15,
embedding_model: 'text-embedding-ada-002',
embedding_model_provider: 'openai',
}),
})
})
it('should call mutateDatasets and invalidDatasetList after successful save', async () => {
const { result } = renderHook(() => useFormState())
await act(async () => {
await result.current.handleSave()
})
await waitFor(() => {
expect(mockMutateDatasets).toHaveBeenCalled()
expect(mockInvalidDatasetList).toHaveBeenCalled()
})
})
})
describe('Embedding Model Change → Retrieval Config Cascade', () => {
it('should update embedding model independently of retrieval config', () => {
const { result } = renderHook(() => useFormState())
const originalRetrievalConfig = { ...result.current.retrievalConfig }
act(() => {
result.current.setEmbeddingModel({ provider: 'cohere', model: 'embed-english-v3.0' })
})
expect(result.current.embeddingModel).toEqual({
provider: 'cohere',
model: 'embed-english-v3.0',
})
expect(result.current.retrievalConfig.search_method).toBe(originalRetrievalConfig.search_method)
})
it('should propagate embedding model into weighted retrieval config on save', async () => {
const { result } = renderHook(() => useFormState())
act(() => {
result.current.setEmbeddingModel({ provider: 'cohere', model: 'embed-v3' })
result.current.setRetrievalConfig({
...result.current.retrievalConfig,
search_method: RETRIEVE_METHOD.hybrid,
weights: {
weight_type: WeightedScoreEnum.Customized,
vector_setting: {
vector_weight: 0.6,
embedding_provider_name: '',
embedding_model_name: '',
},
keyword_setting: { keyword_weight: 0.4 },
},
})
})
await act(async () => {
await result.current.handleSave()
})
expect(mockUpdateDatasetSetting).toHaveBeenCalledWith({
datasetId: 'ds-settings-1',
body: expect.objectContaining({
embedding_model: 'embed-v3',
embedding_model_provider: 'cohere',
retrieval_model: expect.objectContaining({
weights: expect.objectContaining({
vector_setting: expect.objectContaining({
embedding_provider_name: 'cohere',
embedding_model_name: 'embed-v3',
}),
}),
}),
}),
})
})
it('should handle switching from semantic to hybrid search with embedding model', () => {
const { result } = renderHook(() => useFormState())
act(() => {
result.current.setRetrievalConfig({
...result.current.retrievalConfig,
search_method: RETRIEVE_METHOD.hybrid,
reranking_enable: true,
reranking_model: {
reranking_provider_name: 'cohere',
reranking_model_name: 'rerank-english-v3.0',
},
})
})
expect(result.current.retrievalConfig.search_method).toBe(RETRIEVE_METHOD.hybrid)
expect(result.current.retrievalConfig.reranking_enable).toBe(true)
expect(result.current.embeddingModel.model).toBe('text-embedding-ada-002')
})
})
})

View File

@ -0,0 +1,335 @@
/**
* Integration Test: Document Management Flow
*
* Tests cross-module interactions: query state (URL-based) document list sorting
* document selection status filter utilities.
* Validates the data contract between documents page hooks and list component hooks.
*/
import type { SimpleDocumentDetail } from '@/models/datasets'
import { act, renderHook } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { DataSourceType } from '@/models/datasets'
const mockPush = vi.fn()
vi.mock('next/navigation', () => ({
useSearchParams: () => new URLSearchParams(''),
useRouter: () => ({ push: mockPush }),
usePathname: () => '/datasets/ds-1/documents',
}))
const { sanitizeStatusValue, normalizeStatusForQuery } = await import(
'@/app/components/datasets/documents/status-filter',
)
const { useDocumentSort } = await import(
'@/app/components/datasets/documents/components/document-list/hooks/use-document-sort',
)
const { useDocumentSelection } = await import(
'@/app/components/datasets/documents/components/document-list/hooks/use-document-selection',
)
const { default: useDocumentListQueryState } = await import(
'@/app/components/datasets/documents/hooks/use-document-list-query-state',
)
type LocalDoc = SimpleDocumentDetail & { percent?: number }
const createDoc = (overrides?: Partial<LocalDoc>): LocalDoc => ({
id: `doc-${Math.random().toString(36).slice(2, 8)}`,
name: 'test-doc.txt',
word_count: 500,
hit_count: 10,
created_at: Date.now() / 1000,
data_source_type: DataSourceType.FILE,
display_status: 'available',
indexing_status: 'completed',
enabled: true,
archived: false,
doc_type: null,
doc_metadata: null,
position: 1,
dataset_process_rule_id: 'rule-1',
...overrides,
} as LocalDoc)
describe('Document Management Flow', () => {
beforeEach(() => {
vi.clearAllMocks()
})
describe('Status Filter Utilities', () => {
it('should sanitize valid status values', () => {
expect(sanitizeStatusValue('all')).toBe('all')
expect(sanitizeStatusValue('available')).toBe('available')
expect(sanitizeStatusValue('error')).toBe('error')
})
it('should fallback to "all" for invalid values', () => {
expect(sanitizeStatusValue(null)).toBe('all')
expect(sanitizeStatusValue(undefined)).toBe('all')
expect(sanitizeStatusValue('')).toBe('all')
expect(sanitizeStatusValue('nonexistent')).toBe('all')
})
it('should handle URL aliases', () => {
// 'active' is aliased to 'available'
expect(sanitizeStatusValue('active')).toBe('available')
})
it('should normalize status for API query', () => {
expect(normalizeStatusForQuery('all')).toBe('all')
// 'enabled' normalized to 'available' for query
expect(normalizeStatusForQuery('enabled')).toBe('available')
})
})
describe('URL-based Query State', () => {
it('should parse default query from empty URL params', () => {
const { result } = renderHook(() => useDocumentListQueryState())
expect(result.current.query).toEqual({
page: 1,
limit: 10,
keyword: '',
status: 'all',
sort: '-created_at',
})
})
it('should update query and push to router', () => {
const { result } = renderHook(() => useDocumentListQueryState())
act(() => {
result.current.updateQuery({ keyword: 'test', page: 2 })
})
expect(mockPush).toHaveBeenCalled()
// The push call should contain the updated query params
const pushUrl = mockPush.mock.calls[0][0] as string
expect(pushUrl).toContain('keyword=test')
expect(pushUrl).toContain('page=2')
})
it('should reset query to defaults', () => {
const { result } = renderHook(() => useDocumentListQueryState())
act(() => {
result.current.resetQuery()
})
expect(mockPush).toHaveBeenCalled()
// Default query omits default values from URL
const pushUrl = mockPush.mock.calls[0][0] as string
expect(pushUrl).toBe('/datasets/ds-1/documents')
})
})
describe('Document Sort Integration', () => {
it('should return documents unsorted when no sort field set', () => {
const docs = [
createDoc({ id: 'doc-1', name: 'Banana.txt', word_count: 300 }),
createDoc({ id: 'doc-2', name: 'Apple.txt', word_count: 100 }),
createDoc({ id: 'doc-3', name: 'Cherry.txt', word_count: 200 }),
]
const { result } = renderHook(() => useDocumentSort({
documents: docs,
statusFilterValue: '',
remoteSortValue: '-created_at',
}))
expect(result.current.sortField).toBeNull()
expect(result.current.sortedDocuments).toHaveLength(3)
})
it('should sort by name descending', () => {
const docs = [
createDoc({ id: 'doc-1', name: 'Banana.txt' }),
createDoc({ id: 'doc-2', name: 'Apple.txt' }),
createDoc({ id: 'doc-3', name: 'Cherry.txt' }),
]
const { result } = renderHook(() => useDocumentSort({
documents: docs,
statusFilterValue: '',
remoteSortValue: '-created_at',
}))
act(() => {
result.current.handleSort('name')
})
expect(result.current.sortField).toBe('name')
expect(result.current.sortOrder).toBe('desc')
const names = result.current.sortedDocuments.map(d => d.name)
expect(names).toEqual(['Cherry.txt', 'Banana.txt', 'Apple.txt'])
})
it('should toggle sort order on same field click', () => {
const docs = [createDoc({ id: 'doc-1', name: 'A.txt' }), createDoc({ id: 'doc-2', name: 'B.txt' })]
const { result } = renderHook(() => useDocumentSort({
documents: docs,
statusFilterValue: '',
remoteSortValue: '-created_at',
}))
act(() => result.current.handleSort('name'))
expect(result.current.sortOrder).toBe('desc')
act(() => result.current.handleSort('name'))
expect(result.current.sortOrder).toBe('asc')
})
it('should filter by status before sorting', () => {
const docs = [
createDoc({ id: 'doc-1', name: 'A.txt', display_status: 'available' }),
createDoc({ id: 'doc-2', name: 'B.txt', display_status: 'error' }),
createDoc({ id: 'doc-3', name: 'C.txt', display_status: 'available' }),
]
const { result } = renderHook(() => useDocumentSort({
documents: docs,
statusFilterValue: 'available',
remoteSortValue: '-created_at',
}))
// Only 'available' documents should remain
expect(result.current.sortedDocuments).toHaveLength(2)
expect(result.current.sortedDocuments.every(d => d.display_status === 'available')).toBe(true)
})
})
describe('Document Selection Integration', () => {
it('should manage selection state externally', () => {
const docs = [
createDoc({ id: 'doc-1' }),
createDoc({ id: 'doc-2' }),
createDoc({ id: 'doc-3' }),
]
const onSelectedIdChange = vi.fn()
const { result } = renderHook(() => useDocumentSelection({
documents: docs,
selectedIds: [],
onSelectedIdChange,
}))
expect(result.current.isAllSelected).toBe(false)
expect(result.current.isSomeSelected).toBe(false)
})
it('should select all documents', () => {
const docs = [
createDoc({ id: 'doc-1' }),
createDoc({ id: 'doc-2' }),
]
const onSelectedIdChange = vi.fn()
const { result } = renderHook(() => useDocumentSelection({
documents: docs,
selectedIds: [],
onSelectedIdChange,
}))
act(() => {
result.current.onSelectAll()
})
expect(onSelectedIdChange).toHaveBeenCalledWith(
expect.arrayContaining(['doc-1', 'doc-2']),
)
})
it('should detect all-selected state', () => {
const docs = [
createDoc({ id: 'doc-1' }),
createDoc({ id: 'doc-2' }),
]
const { result } = renderHook(() => useDocumentSelection({
documents: docs,
selectedIds: ['doc-1', 'doc-2'],
onSelectedIdChange: vi.fn(),
}))
expect(result.current.isAllSelected).toBe(true)
})
it('should detect partial selection', () => {
const docs = [
createDoc({ id: 'doc-1' }),
createDoc({ id: 'doc-2' }),
createDoc({ id: 'doc-3' }),
]
const { result } = renderHook(() => useDocumentSelection({
documents: docs,
selectedIds: ['doc-1'],
onSelectedIdChange: vi.fn(),
}))
expect(result.current.isSomeSelected).toBe(true)
expect(result.current.isAllSelected).toBe(false)
})
it('should identify downloadable selected documents (FILE type only)', () => {
const docs = [
createDoc({ id: 'doc-1', data_source_type: DataSourceType.FILE }),
createDoc({ id: 'doc-2', data_source_type: DataSourceType.NOTION }),
]
const { result } = renderHook(() => useDocumentSelection({
documents: docs,
selectedIds: ['doc-1', 'doc-2'],
onSelectedIdChange: vi.fn(),
}))
expect(result.current.downloadableSelectedIds).toEqual(['doc-1'])
})
it('should clear selection', () => {
const onSelectedIdChange = vi.fn()
const docs = [createDoc({ id: 'doc-1' })]
const { result } = renderHook(() => useDocumentSelection({
documents: docs,
selectedIds: ['doc-1'],
onSelectedIdChange,
}))
act(() => {
result.current.clearSelection()
})
expect(onSelectedIdChange).toHaveBeenCalledWith([])
})
})
describe('Cross-Module: Query State → Sort → Selection Pipeline', () => {
it('should maintain consistent default state across all hooks', () => {
const docs = [createDoc({ id: 'doc-1' })]
const { result: queryResult } = renderHook(() => useDocumentListQueryState())
const { result: sortResult } = renderHook(() => useDocumentSort({
documents: docs,
statusFilterValue: queryResult.current.query.status,
remoteSortValue: queryResult.current.query.sort,
}))
const { result: selResult } = renderHook(() => useDocumentSelection({
documents: sortResult.current.sortedDocuments,
selectedIds: [],
onSelectedIdChange: vi.fn(),
}))
// Query defaults
expect(queryResult.current.query.sort).toBe('-created_at')
expect(queryResult.current.query.status).toBe('all')
// Sort inherits 'all' status → no filtering applied
expect(sortResult.current.sortedDocuments).toHaveLength(1)
// Selection starts empty
expect(selResult.current.isAllSelected).toBe(false)
})
})
})

View File

@ -0,0 +1,215 @@
/**
* Integration Test: External Knowledge Base Creation Flow
*
* Tests the data contract, validation logic, and API interaction
* for external knowledge base creation.
*/
import type { CreateKnowledgeBaseReq } from '@/app/components/datasets/external-knowledge-base/create/declarations'
import { describe, expect, it } from 'vitest'
// --- Factory ---
const createFormData = (overrides?: Partial<CreateKnowledgeBaseReq>): CreateKnowledgeBaseReq => ({
name: 'My External KB',
description: 'A test external knowledge base',
external_knowledge_api_id: 'api-1',
external_knowledge_id: 'ext-kb-123',
external_retrieval_model: {
top_k: 4,
score_threshold: 0.5,
score_threshold_enabled: false,
},
provider: 'external',
...overrides,
})
describe('External Knowledge Base Creation Flow', () => {
describe('Data Contract: CreateKnowledgeBaseReq', () => {
it('should define a complete form structure', () => {
const form = createFormData()
expect(form).toHaveProperty('name')
expect(form).toHaveProperty('external_knowledge_api_id')
expect(form).toHaveProperty('external_knowledge_id')
expect(form).toHaveProperty('external_retrieval_model')
expect(form).toHaveProperty('provider')
expect(form.provider).toBe('external')
})
it('should include retrieval model settings', () => {
const form = createFormData()
expect(form.external_retrieval_model).toEqual({
top_k: 4,
score_threshold: 0.5,
score_threshold_enabled: false,
})
})
it('should allow partial overrides', () => {
const form = createFormData({
name: 'Custom Name',
external_retrieval_model: {
top_k: 10,
score_threshold: 0.8,
score_threshold_enabled: true,
},
})
expect(form.name).toBe('Custom Name')
expect(form.external_retrieval_model.top_k).toBe(10)
expect(form.external_retrieval_model.score_threshold_enabled).toBe(true)
})
})
describe('Form Validation Logic', () => {
const isFormValid = (form: CreateKnowledgeBaseReq): boolean => {
return (
form.name.trim() !== ''
&& form.external_knowledge_api_id !== ''
&& form.external_knowledge_id !== ''
&& form.external_retrieval_model.top_k !== undefined
&& form.external_retrieval_model.score_threshold !== undefined
)
}
it('should validate a complete form', () => {
const form = createFormData()
expect(isFormValid(form)).toBe(true)
})
it('should reject empty name', () => {
const form = createFormData({ name: '' })
expect(isFormValid(form)).toBe(false)
})
it('should reject whitespace-only name', () => {
const form = createFormData({ name: ' ' })
expect(isFormValid(form)).toBe(false)
})
it('should reject empty external_knowledge_api_id', () => {
const form = createFormData({ external_knowledge_api_id: '' })
expect(isFormValid(form)).toBe(false)
})
it('should reject empty external_knowledge_id', () => {
const form = createFormData({ external_knowledge_id: '' })
expect(isFormValid(form)).toBe(false)
})
})
describe('Form State Transitions', () => {
it('should start with empty default state', () => {
const defaultForm: CreateKnowledgeBaseReq = {
name: '',
description: '',
external_knowledge_api_id: '',
external_knowledge_id: '',
external_retrieval_model: {
top_k: 4,
score_threshold: 0.5,
score_threshold_enabled: false,
},
provider: 'external',
}
// Verify default state matches component's initial useState
expect(defaultForm.name).toBe('')
expect(defaultForm.external_knowledge_api_id).toBe('')
expect(defaultForm.external_knowledge_id).toBe('')
expect(defaultForm.provider).toBe('external')
})
it('should support immutable form updates', () => {
const form = createFormData({ name: '' })
const updated = { ...form, name: 'Updated Name' }
expect(form.name).toBe('')
expect(updated.name).toBe('Updated Name')
// Other fields should remain unchanged
expect(updated.external_knowledge_api_id).toBe(form.external_knowledge_api_id)
})
it('should support retrieval model updates', () => {
const form = createFormData()
const updated = {
...form,
external_retrieval_model: {
...form.external_retrieval_model,
top_k: 10,
score_threshold_enabled: true,
},
}
expect(updated.external_retrieval_model.top_k).toBe(10)
expect(updated.external_retrieval_model.score_threshold_enabled).toBe(true)
// Unchanged field
expect(updated.external_retrieval_model.score_threshold).toBe(0.5)
})
})
describe('API Call Data Contract', () => {
it('should produce a valid API payload from form data', () => {
const form = createFormData()
// The API expects the full CreateKnowledgeBaseReq
expect(form.name).toBeTruthy()
expect(form.external_knowledge_api_id).toBeTruthy()
expect(form.external_knowledge_id).toBeTruthy()
expect(form.provider).toBe('external')
expect(typeof form.external_retrieval_model.top_k).toBe('number')
expect(typeof form.external_retrieval_model.score_threshold).toBe('number')
expect(typeof form.external_retrieval_model.score_threshold_enabled).toBe('boolean')
})
it('should support optional description', () => {
const formWithDesc = createFormData({ description: 'Some description' })
const formWithoutDesc = createFormData({ description: '' })
expect(formWithDesc.description).toBe('Some description')
expect(formWithoutDesc.description).toBe('')
})
it('should validate retrieval model bounds', () => {
const form = createFormData({
external_retrieval_model: {
top_k: 0,
score_threshold: 0,
score_threshold_enabled: false,
},
})
expect(form.external_retrieval_model.top_k).toBe(0)
expect(form.external_retrieval_model.score_threshold).toBe(0)
})
})
describe('External API List Integration', () => {
it('should validate API item structure', () => {
const apiItem = {
id: 'api-1',
name: 'Production API',
settings: {
endpoint: 'https://api.example.com',
api_key: 'key-123',
},
}
expect(apiItem).toHaveProperty('id')
expect(apiItem).toHaveProperty('name')
expect(apiItem).toHaveProperty('settings')
expect(apiItem.settings).toHaveProperty('endpoint')
expect(apiItem.settings).toHaveProperty('api_key')
})
it('should link API selection to form data', () => {
const selectedApi = { id: 'api-2', name: 'Staging API' }
const form = createFormData({
external_knowledge_api_id: selectedApi.id,
})
expect(form.external_knowledge_api_id).toBe('api-2')
})
})
})

View File

@ -0,0 +1,404 @@
/**
* Integration Test: Hit Testing Flow
*
* Tests the query submission API response callback chain flow
* by rendering the actual QueryInput component and triggering user interactions.
* Validates that the production onSubmit logic correctly constructs payloads
* and invokes callbacks on success/failure.
*/
import type {
HitTestingResponse,
Query,
} from '@/models/datasets'
import type { RetrievalConfig } from '@/types/app'
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import QueryInput from '@/app/components/datasets/hit-testing/components/query-input'
import { RETRIEVE_METHOD } from '@/types/app'
// --- Mocks ---
vi.mock('@/context/dataset-detail', () => ({
default: {},
useDatasetDetailContext: vi.fn(() => ({ dataset: undefined })),
useDatasetDetailContextWithSelector: vi.fn(() => false),
}))
vi.mock('use-context-selector', () => ({
useContext: vi.fn(() => ({})),
useContextSelector: vi.fn(() => false),
createContext: vi.fn(() => ({})),
}))
vi.mock('@/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing', () => ({
default: ({ textArea, actionButton }: { textArea: React.ReactNode, actionButton: React.ReactNode }) => (
<div data-testid="image-uploader-mock">
{textArea}
{actionButton}
</div>
),
}))
// --- Factories ---
const createRetrievalConfig = (overrides = {}): RetrievalConfig => ({
search_method: RETRIEVE_METHOD.semantic,
reranking_enable: false,
reranking_mode: undefined,
reranking_model: {
reranking_provider_name: '',
reranking_model_name: '',
},
weights: undefined,
top_k: 3,
score_threshold_enabled: false,
score_threshold: 0.5,
...overrides,
} as RetrievalConfig)
const createHitTestingResponse = (numResults: number): HitTestingResponse => ({
query: {
content: 'What is Dify?',
tsne_position: { x: 0, y: 0 },
},
records: Array.from({ length: numResults }, (_, i) => ({
segment: {
id: `seg-${i}`,
document: {
id: `doc-${i}`,
data_source_type: 'upload_file',
name: `document-${i}.txt`,
doc_type: null as unknown as import('@/models/datasets').DocType,
},
content: `Result content ${i}`,
sign_content: `Result content ${i}`,
position: i + 1,
word_count: 100 + i * 50,
tokens: 50 + i * 25,
keywords: ['test', 'dify'],
hit_count: i * 5,
index_node_hash: `hash-${i}`,
answer: '',
},
content: {
id: `seg-${i}`,
document: {
id: `doc-${i}`,
data_source_type: 'upload_file',
name: `document-${i}.txt`,
doc_type: null as unknown as import('@/models/datasets').DocType,
},
content: `Result content ${i}`,
sign_content: `Result content ${i}`,
position: i + 1,
word_count: 100 + i * 50,
tokens: 50 + i * 25,
keywords: ['test', 'dify'],
hit_count: i * 5,
index_node_hash: `hash-${i}`,
answer: '',
},
score: 0.95 - i * 0.1,
tsne_position: { x: 0, y: 0 },
child_chunks: null,
files: [],
})),
})
const createTextQuery = (content: string): Query[] => [
{ content, content_type: 'text_query', file_info: null },
]
// --- Helpers ---
const findSubmitButton = () => {
const buttons = screen.getAllByRole('button')
const submitButton = buttons.find(btn => btn.classList.contains('w-[88px]'))
expect(submitButton).toBeTruthy()
return submitButton!
}
// --- Tests ---
describe('Hit Testing Flow', () => {
const mockHitTestingMutation = vi.fn()
const mockExternalMutation = vi.fn()
const mockSetHitResult = vi.fn()
const mockSetExternalHitResult = vi.fn()
const mockOnUpdateList = vi.fn()
const mockSetQueries = vi.fn()
const mockOnClickRetrievalMethod = vi.fn()
const mockOnSubmit = vi.fn()
const createDefaultProps = (overrides: Record<string, unknown> = {}) => ({
onUpdateList: mockOnUpdateList,
setHitResult: mockSetHitResult,
setExternalHitResult: mockSetExternalHitResult,
loading: false,
queries: [] as Query[],
setQueries: mockSetQueries,
isExternal: false,
onClickRetrievalMethod: mockOnClickRetrievalMethod,
retrievalConfig: createRetrievalConfig(),
isEconomy: false,
onSubmit: mockOnSubmit,
hitTestingMutation: mockHitTestingMutation,
externalKnowledgeBaseHitTestingMutation: mockExternalMutation,
...overrides,
})
beforeEach(() => {
vi.clearAllMocks()
})
describe('Query Submission → API Call', () => {
it('should call hitTestingMutation with correct payload including retrieval model', async () => {
const retrievalConfig = createRetrievalConfig({
search_method: RETRIEVE_METHOD.semantic,
top_k: 3,
score_threshold_enabled: false,
})
mockHitTestingMutation.mockResolvedValue(createHitTestingResponse(3))
render(
<QueryInput {...createDefaultProps({
queries: createTextQuery('How does RAG work?'),
retrievalConfig,
})}
/>,
)
fireEvent.click(findSubmitButton())
await waitFor(() => {
expect(mockHitTestingMutation).toHaveBeenCalledWith(
expect.objectContaining({
query: 'How does RAG work?',
attachment_ids: [],
retrieval_model: expect.objectContaining({
search_method: RETRIEVE_METHOD.semantic,
top_k: 3,
score_threshold_enabled: false,
}),
}),
expect.objectContaining({
onSuccess: expect.any(Function),
}),
)
})
})
it('should override search_method to keywordSearch when isEconomy is true', async () => {
const retrievalConfig = createRetrievalConfig({ search_method: RETRIEVE_METHOD.semantic })
mockHitTestingMutation.mockResolvedValue(createHitTestingResponse(1))
render(
<QueryInput {...createDefaultProps({
queries: createTextQuery('test query'),
retrievalConfig,
isEconomy: true,
})}
/>,
)
fireEvent.click(findSubmitButton())
await waitFor(() => {
expect(mockHitTestingMutation).toHaveBeenCalledWith(
expect.objectContaining({
retrieval_model: expect.objectContaining({
search_method: RETRIEVE_METHOD.keywordSearch,
}),
}),
expect.anything(),
)
})
})
it('should handle empty results by calling setHitResult with empty records', async () => {
const emptyResponse = createHitTestingResponse(0)
mockHitTestingMutation.mockImplementation(async (_params: unknown, options?: { onSuccess?: (data: HitTestingResponse) => void }) => {
options?.onSuccess?.(emptyResponse)
return emptyResponse
})
render(
<QueryInput {...createDefaultProps({
queries: createTextQuery('nonexistent topic'),
})}
/>,
)
fireEvent.click(findSubmitButton())
await waitFor(() => {
expect(mockSetHitResult).toHaveBeenCalledWith(
expect.objectContaining({ records: [] }),
)
})
})
it('should not call success callbacks when mutation resolves without onSuccess', async () => {
// Simulate a mutation that resolves but does not invoke the onSuccess callback
mockHitTestingMutation.mockResolvedValue(undefined)
render(
<QueryInput {...createDefaultProps({
queries: createTextQuery('test'),
})}
/>,
)
fireEvent.click(findSubmitButton())
await waitFor(() => {
expect(mockHitTestingMutation).toHaveBeenCalled()
})
// Success callbacks should not fire when onSuccess is not invoked
expect(mockSetHitResult).not.toHaveBeenCalled()
expect(mockOnUpdateList).not.toHaveBeenCalled()
expect(mockOnSubmit).not.toHaveBeenCalled()
})
})
describe('API Response → Results Data Contract', () => {
it('should produce results with required segment fields for rendering', () => {
const response = createHitTestingResponse(3)
// Validate each result has the fields needed by ResultItem component
response.records.forEach((record) => {
expect(record.segment).toHaveProperty('id')
expect(record.segment).toHaveProperty('content')
expect(record.segment).toHaveProperty('position')
expect(record.segment).toHaveProperty('word_count')
expect(record.segment).toHaveProperty('document')
expect(record.segment.document).toHaveProperty('name')
expect(record.score).toBeGreaterThanOrEqual(0)
expect(record.score).toBeLessThanOrEqual(1)
})
})
it('should maintain correct score ordering', () => {
const response = createHitTestingResponse(5)
for (let i = 1; i < response.records.length; i++) {
expect(response.records[i - 1].score).toBeGreaterThanOrEqual(response.records[i].score)
}
})
it('should include document metadata for result item display', () => {
const response = createHitTestingResponse(1)
const record = response.records[0]
expect(record.segment.document.name).toBeTruthy()
expect(record.segment.document.data_source_type).toBeTruthy()
})
})
describe('Successful Submission → Callback Chain', () => {
it('should call setHitResult, onUpdateList, and onSubmit after successful submission', async () => {
const response = createHitTestingResponse(3)
mockHitTestingMutation.mockImplementation(async (_params: unknown, options?: { onSuccess?: (data: HitTestingResponse) => void }) => {
options?.onSuccess?.(response)
return response
})
render(
<QueryInput {...createDefaultProps({
queries: createTextQuery('Test query'),
})}
/>,
)
fireEvent.click(findSubmitButton())
await waitFor(() => {
expect(mockSetHitResult).toHaveBeenCalledWith(response)
expect(mockOnUpdateList).toHaveBeenCalledTimes(1)
expect(mockOnSubmit).toHaveBeenCalledTimes(1)
})
})
it('should trigger records list refresh via onUpdateList after query', async () => {
const response = createHitTestingResponse(1)
mockHitTestingMutation.mockImplementation(async (_params: unknown, options?: { onSuccess?: (data: HitTestingResponse) => void }) => {
options?.onSuccess?.(response)
return response
})
render(
<QueryInput {...createDefaultProps({
queries: createTextQuery('new query'),
})}
/>,
)
fireEvent.click(findSubmitButton())
await waitFor(() => {
expect(mockOnUpdateList).toHaveBeenCalledTimes(1)
})
})
})
describe('External KB Hit Testing', () => {
it('should use external mutation with correct payload for external datasets', async () => {
mockExternalMutation.mockImplementation(async (_params: unknown, options?: { onSuccess?: (data: { records: never[] }) => void }) => {
const response = { records: [] }
options?.onSuccess?.(response)
return response
})
render(
<QueryInput {...createDefaultProps({
queries: createTextQuery('test'),
isExternal: true,
})}
/>,
)
fireEvent.click(findSubmitButton())
await waitFor(() => {
expect(mockExternalMutation).toHaveBeenCalledWith(
expect.objectContaining({
query: 'test',
external_retrieval_model: expect.objectContaining({
top_k: 4,
score_threshold: 0.5,
score_threshold_enabled: false,
}),
}),
expect.objectContaining({
onSuccess: expect.any(Function),
}),
)
// Internal mutation should NOT be called
expect(mockHitTestingMutation).not.toHaveBeenCalled()
})
})
it('should call setExternalHitResult and onUpdateList on successful external submission', async () => {
const externalResponse = { records: [] }
mockExternalMutation.mockImplementation(async (_params: unknown, options?: { onSuccess?: (data: { records: never[] }) => void }) => {
options?.onSuccess?.(externalResponse)
return externalResponse
})
render(
<QueryInput {...createDefaultProps({
queries: createTextQuery('external query'),
isExternal: true,
})}
/>,
)
fireEvent.click(findSubmitButton())
await waitFor(() => {
expect(mockSetExternalHitResult).toHaveBeenCalledWith(externalResponse)
expect(mockOnUpdateList).toHaveBeenCalledTimes(1)
})
})
})
})

View File

@ -0,0 +1,337 @@
/**
* Integration Test: Metadata Management Flow
*
* Tests the cross-module composition of metadata name validation, type constraints,
* and duplicate detection across the metadata management hooks.
*
* The unit-level use-check-metadata-name.spec.ts tests the validation hook alone.
* This integration test verifies:
* - Name validation combined with existing metadata list (duplicate detection)
* - Metadata type enum constraints matching expected data model
* - Full add/rename workflow: validate name check duplicates allow or reject
* - Name uniqueness logic: existing metadata keeps its own name, cannot take another's
*/
import type { MetadataItemWithValueLength } from '@/app/components/datasets/metadata/types'
import { renderHook } from '@testing-library/react'
import { DataType } from '@/app/components/datasets/metadata/types'
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => key,
}),
}))
const { default: useCheckMetadataName } = await import(
'@/app/components/datasets/metadata/hooks/use-check-metadata-name',
)
// --- Factory functions ---
const createMetadataItem = (
id: string,
name: string,
type = DataType.string,
count = 0,
): MetadataItemWithValueLength => ({
id,
name,
type,
count,
})
const createMetadataList = (): MetadataItemWithValueLength[] => [
createMetadataItem('meta-1', 'author', DataType.string, 5),
createMetadataItem('meta-2', 'created_date', DataType.time, 10),
createMetadataItem('meta-3', 'page_count', DataType.number, 3),
createMetadataItem('meta-4', 'source_url', DataType.string, 8),
createMetadataItem('meta-5', 'version', DataType.number, 2),
]
describe('Metadata Management Flow - Cross-Module Validation Composition', () => {
describe('Name Validation Flow: Format Rules', () => {
it('should accept valid lowercase names with underscores', () => {
const { result } = renderHook(() => useCheckMetadataName())
expect(result.current.checkName('valid_name').errorMsg).toBe('')
expect(result.current.checkName('author').errorMsg).toBe('')
expect(result.current.checkName('page_count').errorMsg).toBe('')
expect(result.current.checkName('v2_field').errorMsg).toBe('')
})
it('should reject empty names', () => {
const { result } = renderHook(() => useCheckMetadataName())
expect(result.current.checkName('').errorMsg).toBeTruthy()
})
it('should reject names with invalid characters', () => {
const { result } = renderHook(() => useCheckMetadataName())
expect(result.current.checkName('Author').errorMsg).toBeTruthy()
expect(result.current.checkName('my-field').errorMsg).toBeTruthy()
expect(result.current.checkName('field name').errorMsg).toBeTruthy()
expect(result.current.checkName('1field').errorMsg).toBeTruthy()
expect(result.current.checkName('_private').errorMsg).toBeTruthy()
})
it('should reject names exceeding 255 characters', () => {
const { result } = renderHook(() => useCheckMetadataName())
const longName = 'a'.repeat(256)
expect(result.current.checkName(longName).errorMsg).toBeTruthy()
const maxName = 'a'.repeat(255)
expect(result.current.checkName(maxName).errorMsg).toBe('')
})
})
describe('Metadata Type Constraints: Enum Values Match Expected Set', () => {
it('should define exactly three data types', () => {
const typeValues = Object.values(DataType)
expect(typeValues).toHaveLength(3)
})
it('should include string, number, and time types', () => {
expect(DataType.string).toBe('string')
expect(DataType.number).toBe('number')
expect(DataType.time).toBe('time')
})
it('should use consistent types in metadata items', () => {
const metadataList = createMetadataList()
const stringItems = metadataList.filter(m => m.type === DataType.string)
const numberItems = metadataList.filter(m => m.type === DataType.number)
const timeItems = metadataList.filter(m => m.type === DataType.time)
expect(stringItems).toHaveLength(2)
expect(numberItems).toHaveLength(2)
expect(timeItems).toHaveLength(1)
})
it('should enforce type-safe metadata item construction', () => {
const item = createMetadataItem('test-1', 'test_field', DataType.number, 0)
expect(item.id).toBe('test-1')
expect(item.name).toBe('test_field')
expect(item.type).toBe(DataType.number)
expect(item.count).toBe(0)
})
})
describe('Duplicate Name Detection: Add Metadata → Check Name → Detect Duplicates', () => {
it('should detect duplicate names against an existing metadata list', () => {
const { result } = renderHook(() => useCheckMetadataName())
const existingMetadata = createMetadataList()
const checkDuplicate = (newName: string): boolean => {
const formatCheck = result.current.checkName(newName)
if (formatCheck.errorMsg)
return false
return existingMetadata.some(m => m.name === newName)
}
expect(checkDuplicate('author')).toBe(true)
expect(checkDuplicate('created_date')).toBe(true)
expect(checkDuplicate('page_count')).toBe(true)
})
it('should allow names that do not conflict with existing metadata', () => {
const { result } = renderHook(() => useCheckMetadataName())
const existingMetadata = createMetadataList()
const isNameAvailable = (newName: string): boolean => {
const formatCheck = result.current.checkName(newName)
if (formatCheck.errorMsg)
return false
return !existingMetadata.some(m => m.name === newName)
}
expect(isNameAvailable('category')).toBe(true)
expect(isNameAvailable('file_size')).toBe(true)
expect(isNameAvailable('language')).toBe(true)
})
it('should reject names that fail format validation before duplicate check', () => {
const { result } = renderHook(() => useCheckMetadataName())
const validateAndCheckDuplicate = (newName: string): { valid: boolean, reason: string } => {
const formatCheck = result.current.checkName(newName)
if (formatCheck.errorMsg)
return { valid: false, reason: 'format' }
return { valid: true, reason: '' }
}
expect(validateAndCheckDuplicate('Author').reason).toBe('format')
expect(validateAndCheckDuplicate('').reason).toBe('format')
expect(validateAndCheckDuplicate('valid_name').valid).toBe(true)
})
})
describe('Name Uniqueness Across Edits: Rename Workflow', () => {
it('should allow an existing metadata item to keep its own name', () => {
const { result } = renderHook(() => useCheckMetadataName())
const existingMetadata = createMetadataList()
const isRenameValid = (itemId: string, newName: string): boolean => {
const formatCheck = result.current.checkName(newName)
if (formatCheck.errorMsg)
return false
// Allow keeping the same name (skip self in duplicate check)
return !existingMetadata.some(m => m.name === newName && m.id !== itemId)
}
// Author keeping its own name should be valid
expect(isRenameValid('meta-1', 'author')).toBe(true)
// page_count keeping its own name should be valid
expect(isRenameValid('meta-3', 'page_count')).toBe(true)
})
it('should reject renaming to another existing metadata name', () => {
const { result } = renderHook(() => useCheckMetadataName())
const existingMetadata = createMetadataList()
const isRenameValid = (itemId: string, newName: string): boolean => {
const formatCheck = result.current.checkName(newName)
if (formatCheck.errorMsg)
return false
return !existingMetadata.some(m => m.name === newName && m.id !== itemId)
}
// Author trying to rename to "page_count" (taken by meta-3)
expect(isRenameValid('meta-1', 'page_count')).toBe(false)
// version trying to rename to "source_url" (taken by meta-4)
expect(isRenameValid('meta-5', 'source_url')).toBe(false)
})
it('should allow renaming to a completely new valid name', () => {
const { result } = renderHook(() => useCheckMetadataName())
const existingMetadata = createMetadataList()
const isRenameValid = (itemId: string, newName: string): boolean => {
const formatCheck = result.current.checkName(newName)
if (formatCheck.errorMsg)
return false
return !existingMetadata.some(m => m.name === newName && m.id !== itemId)
}
expect(isRenameValid('meta-1', 'document_author')).toBe(true)
expect(isRenameValid('meta-2', 'publish_date')).toBe(true)
expect(isRenameValid('meta-3', 'total_pages')).toBe(true)
})
it('should reject renaming with an invalid format even if name is unique', () => {
const { result } = renderHook(() => useCheckMetadataName())
const existingMetadata = createMetadataList()
const isRenameValid = (itemId: string, newName: string): boolean => {
const formatCheck = result.current.checkName(newName)
if (formatCheck.errorMsg)
return false
return !existingMetadata.some(m => m.name === newName && m.id !== itemId)
}
expect(isRenameValid('meta-1', 'New Author')).toBe(false)
expect(isRenameValid('meta-2', '2024_date')).toBe(false)
expect(isRenameValid('meta-3', '')).toBe(false)
})
})
describe('Full Metadata Management Workflow', () => {
it('should support a complete add-validate-check-duplicate cycle', () => {
const { result } = renderHook(() => useCheckMetadataName())
const existingMetadata = createMetadataList()
const addMetadataField = (
name: string,
type: DataType,
): { success: boolean, error?: string } => {
const formatCheck = result.current.checkName(name)
if (formatCheck.errorMsg)
return { success: false, error: 'invalid_format' }
if (existingMetadata.some(m => m.name === name))
return { success: false, error: 'duplicate_name' }
existingMetadata.push(createMetadataItem(`meta-${existingMetadata.length + 1}`, name, type))
return { success: true }
}
// Add a valid new field
const result1 = addMetadataField('department', DataType.string)
expect(result1.success).toBe(true)
expect(existingMetadata).toHaveLength(6)
// Try to add a duplicate
const result2 = addMetadataField('author', DataType.string)
expect(result2.success).toBe(false)
expect(result2.error).toBe('duplicate_name')
expect(existingMetadata).toHaveLength(6)
// Try to add an invalid name
const result3 = addMetadataField('Invalid Name', DataType.string)
expect(result3.success).toBe(false)
expect(result3.error).toBe('invalid_format')
expect(existingMetadata).toHaveLength(6)
// Add another valid field
const result4 = addMetadataField('priority_level', DataType.number)
expect(result4.success).toBe(true)
expect(existingMetadata).toHaveLength(7)
})
it('should support a complete rename workflow with validation chain', () => {
const { result } = renderHook(() => useCheckMetadataName())
const existingMetadata = createMetadataList()
const renameMetadataField = (
itemId: string,
newName: string,
): { success: boolean, error?: string } => {
const formatCheck = result.current.checkName(newName)
if (formatCheck.errorMsg)
return { success: false, error: 'invalid_format' }
if (existingMetadata.some(m => m.name === newName && m.id !== itemId))
return { success: false, error: 'duplicate_name' }
const item = existingMetadata.find(m => m.id === itemId)
if (!item)
return { success: false, error: 'not_found' }
// Simulate the rename in-place
const index = existingMetadata.indexOf(item)
existingMetadata[index] = { ...item, name: newName }
return { success: true }
}
// Rename author to document_author
expect(renameMetadataField('meta-1', 'document_author').success).toBe(true)
expect(existingMetadata.find(m => m.id === 'meta-1')?.name).toBe('document_author')
// Try renaming created_date to page_count (already taken)
expect(renameMetadataField('meta-2', 'page_count').error).toBe('duplicate_name')
// Rename to invalid format
expect(renameMetadataField('meta-3', 'Page Count').error).toBe('invalid_format')
// Rename non-existent item
expect(renameMetadataField('meta-999', 'something').error).toBe('not_found')
})
it('should maintain validation consistency across multiple operations', () => {
const { result } = renderHook(() => useCheckMetadataName())
// Validate the same name multiple times for consistency
const name = 'consistent_field'
const results = Array.from({ length: 5 }, () => result.current.checkName(name))
expect(results.every(r => r.errorMsg === '')).toBe(true)
// Validate an invalid name multiple times
const invalidResults = Array.from({ length: 5 }, () => result.current.checkName('Invalid'))
expect(invalidResults.every(r => r.errorMsg !== '')).toBe(true)
})
})
})

View File

@ -0,0 +1,477 @@
/**
* Integration Test: Pipeline Data Source Store Composition
*
* Tests cross-slice interactions in the pipeline data source Zustand store.
* The unit-level slice specs test each slice in isolation.
* This integration test verifies:
* - Store initialization produces correct defaults across all slices
* - Cross-slice coordination (e.g. credential shared across slices)
* - State isolation: changes in one slice do not affect others
* - Full workflow simulation through credential source data path
*/
import type { NotionPage } from '@/models/common'
import type { CrawlResultItem, FileItem } from '@/models/datasets'
import type { OnlineDriveFile } from '@/models/pipeline'
import { createDataSourceStore } from '@/app/components/datasets/documents/create-from-pipeline/data-source/store'
import { CrawlStep } from '@/models/datasets'
import { OnlineDriveFileType } from '@/models/pipeline'
// --- Factory functions ---
const createFileItem = (id: string): FileItem => ({
fileID: id,
file: { id, name: `${id}.txt`, size: 1024 } as FileItem['file'],
progress: 100,
})
const createCrawlResultItem = (url: string, title?: string): CrawlResultItem => ({
title: title ?? `Page: ${url}`,
markdown: `# ${title ?? url}\n\nContent for ${url}`,
description: `Description for ${url}`,
source_url: url,
})
const createOnlineDriveFile = (id: string, name: string, type = OnlineDriveFileType.file): OnlineDriveFile => ({
id,
name,
size: 2048,
type,
})
const createNotionPage = (pageId: string): NotionPage => ({
page_id: pageId,
page_name: `Page ${pageId}`,
page_icon: null,
is_bound: true,
parent_id: 'parent-1',
type: 'page',
workspace_id: 'ws-1',
})
describe('Pipeline Data Source Store Composition - Cross-Slice Integration', () => {
describe('Store Initialization → All Slices Have Correct Defaults', () => {
it('should create a store with all five slices combined', () => {
const store = createDataSourceStore()
const state = store.getState()
// Common slice defaults
expect(state.currentCredentialId).toBe('')
expect(state.currentNodeIdRef.current).toBe('')
// Local file slice defaults
expect(state.localFileList).toEqual([])
expect(state.currentLocalFile).toBeUndefined()
// Online document slice defaults
expect(state.documentsData).toEqual([])
expect(state.onlineDocuments).toEqual([])
expect(state.searchValue).toBe('')
expect(state.selectedPagesId).toEqual(new Set())
// Website crawl slice defaults
expect(state.websitePages).toEqual([])
expect(state.step).toBe(CrawlStep.init)
expect(state.previewIndex).toBe(-1)
// Online drive slice defaults
expect(state.breadcrumbs).toEqual([])
expect(state.prefix).toEqual([])
expect(state.keywords).toBe('')
expect(state.selectedFileIds).toEqual([])
expect(state.onlineDriveFileList).toEqual([])
expect(state.bucket).toBe('')
expect(state.hasBucket).toBe(false)
})
})
describe('Cross-Slice Coordination: Shared Credential', () => {
it('should set credential that is accessible from the common slice', () => {
const store = createDataSourceStore()
store.getState().setCurrentCredentialId('cred-abc-123')
expect(store.getState().currentCredentialId).toBe('cred-abc-123')
})
it('should allow credential update independently of all other slices', () => {
const store = createDataSourceStore()
store.getState().setLocalFileList([createFileItem('f1')])
store.getState().setCurrentCredentialId('cred-xyz')
expect(store.getState().currentCredentialId).toBe('cred-xyz')
expect(store.getState().localFileList).toHaveLength(1)
})
})
describe('Local File Workflow: Set Files → Verify List → Clear', () => {
it('should set and retrieve local file list', () => {
const store = createDataSourceStore()
const files = [createFileItem('f1'), createFileItem('f2'), createFileItem('f3')]
store.getState().setLocalFileList(files)
expect(store.getState().localFileList).toHaveLength(3)
expect(store.getState().localFileList[0].fileID).toBe('f1')
expect(store.getState().localFileList[2].fileID).toBe('f3')
})
it('should update preview ref when setting file list', () => {
const store = createDataSourceStore()
const files = [createFileItem('f-preview')]
store.getState().setLocalFileList(files)
expect(store.getState().previewLocalFileRef.current).toBeDefined()
})
it('should clear files by setting empty list', () => {
const store = createDataSourceStore()
store.getState().setLocalFileList([createFileItem('f1')])
expect(store.getState().localFileList).toHaveLength(1)
store.getState().setLocalFileList([])
expect(store.getState().localFileList).toHaveLength(0)
})
it('should set and clear current local file selection', () => {
const store = createDataSourceStore()
const file = { id: 'current-file', name: 'current.txt' } as FileItem['file']
store.getState().setCurrentLocalFile(file)
expect(store.getState().currentLocalFile).toBeDefined()
expect(store.getState().currentLocalFile?.id).toBe('current-file')
store.getState().setCurrentLocalFile(undefined)
expect(store.getState().currentLocalFile).toBeUndefined()
})
})
describe('Online Document Workflow: Set Documents → Select Pages → Verify', () => {
it('should set documents data and online documents', () => {
const store = createDataSourceStore()
const pages = [createNotionPage('page-1'), createNotionPage('page-2')]
store.getState().setOnlineDocuments(pages)
expect(store.getState().onlineDocuments).toHaveLength(2)
expect(store.getState().onlineDocuments[0].page_id).toBe('page-1')
})
it('should update preview ref when setting online documents', () => {
const store = createDataSourceStore()
const pages = [createNotionPage('page-preview')]
store.getState().setOnlineDocuments(pages)
expect(store.getState().previewOnlineDocumentRef.current).toBeDefined()
expect(store.getState().previewOnlineDocumentRef.current?.page_id).toBe('page-preview')
})
it('should track selected page IDs', () => {
const store = createDataSourceStore()
const pages = [createNotionPage('p1'), createNotionPage('p2'), createNotionPage('p3')]
store.getState().setOnlineDocuments(pages)
store.getState().setSelectedPagesId(new Set(['p1', 'p3']))
expect(store.getState().selectedPagesId.size).toBe(2)
expect(store.getState().selectedPagesId.has('p1')).toBe(true)
expect(store.getState().selectedPagesId.has('p2')).toBe(false)
expect(store.getState().selectedPagesId.has('p3')).toBe(true)
})
it('should manage search value for filtering documents', () => {
const store = createDataSourceStore()
store.getState().setSearchValue('meeting notes')
expect(store.getState().searchValue).toBe('meeting notes')
})
it('should set and clear current document selection', () => {
const store = createDataSourceStore()
const page = createNotionPage('current-page')
store.getState().setCurrentDocument(page)
expect(store.getState().currentDocument?.page_id).toBe('current-page')
store.getState().setCurrentDocument(undefined)
expect(store.getState().currentDocument).toBeUndefined()
})
})
describe('Website Crawl Workflow: Set Pages → Track Step → Preview', () => {
it('should set website pages and update preview ref', () => {
const store = createDataSourceStore()
const pages = [
createCrawlResultItem('https://example.com'),
createCrawlResultItem('https://example.com/about'),
]
store.getState().setWebsitePages(pages)
expect(store.getState().websitePages).toHaveLength(2)
expect(store.getState().previewWebsitePageRef.current?.source_url).toBe('https://example.com')
})
it('should manage crawl step transitions', () => {
const store = createDataSourceStore()
expect(store.getState().step).toBe(CrawlStep.init)
store.getState().setStep(CrawlStep.running)
expect(store.getState().step).toBe(CrawlStep.running)
store.getState().setStep(CrawlStep.finished)
expect(store.getState().step).toBe(CrawlStep.finished)
})
it('should set crawl result with data and timing', () => {
const store = createDataSourceStore()
const result = {
data: [createCrawlResultItem('https://test.com')],
time_consuming: 3.5,
}
store.getState().setCrawlResult(result)
expect(store.getState().crawlResult?.data).toHaveLength(1)
expect(store.getState().crawlResult?.time_consuming).toBe(3.5)
})
it('should manage preview index for page navigation', () => {
const store = createDataSourceStore()
store.getState().setPreviewIndex(2)
expect(store.getState().previewIndex).toBe(2)
store.getState().setPreviewIndex(-1)
expect(store.getState().previewIndex).toBe(-1)
})
it('should set and clear current website selection', () => {
const store = createDataSourceStore()
const page = createCrawlResultItem('https://current.com')
store.getState().setCurrentWebsite(page)
expect(store.getState().currentWebsite?.source_url).toBe('https://current.com')
store.getState().setCurrentWebsite(undefined)
expect(store.getState().currentWebsite).toBeUndefined()
})
})
describe('Online Drive Workflow: Breadcrumbs → File Selection → Navigation', () => {
it('should manage breadcrumb navigation', () => {
const store = createDataSourceStore()
store.getState().setBreadcrumbs(['root', 'folder-a', 'subfolder'])
expect(store.getState().breadcrumbs).toEqual(['root', 'folder-a', 'subfolder'])
})
it('should support breadcrumb push/pop pattern', () => {
const store = createDataSourceStore()
store.getState().setBreadcrumbs(['root'])
store.getState().setBreadcrumbs([...store.getState().breadcrumbs, 'level-1'])
store.getState().setBreadcrumbs([...store.getState().breadcrumbs, 'level-2'])
expect(store.getState().breadcrumbs).toEqual(['root', 'level-1', 'level-2'])
// Pop back one level
store.getState().setBreadcrumbs(store.getState().breadcrumbs.slice(0, -1))
expect(store.getState().breadcrumbs).toEqual(['root', 'level-1'])
})
it('should manage file list and selection', () => {
const store = createDataSourceStore()
const files = [
createOnlineDriveFile('drive-1', 'report.pdf'),
createOnlineDriveFile('drive-2', 'data.csv'),
createOnlineDriveFile('drive-3', 'images', OnlineDriveFileType.folder),
]
store.getState().setOnlineDriveFileList(files)
expect(store.getState().onlineDriveFileList).toHaveLength(3)
store.getState().setSelectedFileIds(['drive-1', 'drive-2'])
expect(store.getState().selectedFileIds).toEqual(['drive-1', 'drive-2'])
})
it('should update preview ref when selecting files', () => {
const store = createDataSourceStore()
const files = [
createOnlineDriveFile('drive-a', 'file-a.txt'),
createOnlineDriveFile('drive-b', 'file-b.txt'),
]
store.getState().setOnlineDriveFileList(files)
store.getState().setSelectedFileIds(['drive-b'])
expect(store.getState().previewOnlineDriveFileRef.current?.id).toBe('drive-b')
})
it('should manage bucket and prefix for S3-like navigation', () => {
const store = createDataSourceStore()
store.getState().setBucket('my-data-bucket')
store.getState().setPrefix(['data', '2024'])
store.getState().setHasBucket(true)
expect(store.getState().bucket).toBe('my-data-bucket')
expect(store.getState().prefix).toEqual(['data', '2024'])
expect(store.getState().hasBucket).toBe(true)
})
it('should manage keywords for search filtering', () => {
const store = createDataSourceStore()
store.getState().setKeywords('quarterly report')
expect(store.getState().keywords).toBe('quarterly report')
})
})
describe('State Isolation: Changes to One Slice Do Not Affect Others', () => {
it('should keep local file state independent from online document state', () => {
const store = createDataSourceStore()
store.getState().setLocalFileList([createFileItem('local-1')])
store.getState().setOnlineDocuments([createNotionPage('notion-1')])
expect(store.getState().localFileList).toHaveLength(1)
expect(store.getState().onlineDocuments).toHaveLength(1)
// Clearing local files should not affect online documents
store.getState().setLocalFileList([])
expect(store.getState().localFileList).toHaveLength(0)
expect(store.getState().onlineDocuments).toHaveLength(1)
})
it('should keep website crawl state independent from online drive state', () => {
const store = createDataSourceStore()
store.getState().setWebsitePages([createCrawlResultItem('https://site.com')])
store.getState().setOnlineDriveFileList([createOnlineDriveFile('d1', 'file.txt')])
expect(store.getState().websitePages).toHaveLength(1)
expect(store.getState().onlineDriveFileList).toHaveLength(1)
// Clearing website pages should not affect drive files
store.getState().setWebsitePages([])
expect(store.getState().websitePages).toHaveLength(0)
expect(store.getState().onlineDriveFileList).toHaveLength(1)
})
it('should create fully independent store instances', () => {
const storeA = createDataSourceStore()
const storeB = createDataSourceStore()
storeA.getState().setCurrentCredentialId('cred-A')
storeA.getState().setLocalFileList([createFileItem('fa-1')])
expect(storeA.getState().currentCredentialId).toBe('cred-A')
expect(storeB.getState().currentCredentialId).toBe('')
expect(storeB.getState().localFileList).toEqual([])
})
})
describe('Full Workflow Simulation: Credential → Source → Data → Verify', () => {
it('should support a complete local file upload workflow', () => {
const store = createDataSourceStore()
// Step 1: Set credential
store.getState().setCurrentCredentialId('upload-cred-1')
// Step 2: Set file list
const files = [createFileItem('upload-1'), createFileItem('upload-2')]
store.getState().setLocalFileList(files)
// Step 3: Select current file for preview
store.getState().setCurrentLocalFile(files[0].file)
// Verify all state is consistent
expect(store.getState().currentCredentialId).toBe('upload-cred-1')
expect(store.getState().localFileList).toHaveLength(2)
expect(store.getState().currentLocalFile?.id).toBe('upload-1')
expect(store.getState().previewLocalFileRef.current).toBeDefined()
})
it('should support a complete website crawl workflow', () => {
const store = createDataSourceStore()
// Step 1: Set credential
store.getState().setCurrentCredentialId('crawl-cred-1')
// Step 2: Init crawl
store.getState().setStep(CrawlStep.running)
// Step 3: Crawl completes with results
const crawledPages = [
createCrawlResultItem('https://docs.example.com/guide'),
createCrawlResultItem('https://docs.example.com/api'),
createCrawlResultItem('https://docs.example.com/faq'),
]
store.getState().setCrawlResult({ data: crawledPages, time_consuming: 12.5 })
store.getState().setStep(CrawlStep.finished)
// Step 4: Set website pages from results
store.getState().setWebsitePages(crawledPages)
// Step 5: Set preview
store.getState().setPreviewIndex(1)
// Verify all state
expect(store.getState().currentCredentialId).toBe('crawl-cred-1')
expect(store.getState().step).toBe(CrawlStep.finished)
expect(store.getState().websitePages).toHaveLength(3)
expect(store.getState().crawlResult?.time_consuming).toBe(12.5)
expect(store.getState().previewIndex).toBe(1)
expect(store.getState().previewWebsitePageRef.current?.source_url).toBe('https://docs.example.com/guide')
})
it('should support a complete online drive navigation workflow', () => {
const store = createDataSourceStore()
// Step 1: Set credential
store.getState().setCurrentCredentialId('drive-cred-1')
// Step 2: Set bucket
store.getState().setBucket('company-docs')
store.getState().setHasBucket(true)
// Step 3: Navigate into folders
store.getState().setBreadcrumbs(['company-docs'])
store.getState().setPrefix(['projects'])
const folderFiles = [
createOnlineDriveFile('proj-1', 'project-alpha', OnlineDriveFileType.folder),
createOnlineDriveFile('proj-2', 'project-beta', OnlineDriveFileType.folder),
createOnlineDriveFile('readme', 'README.md', OnlineDriveFileType.file),
]
store.getState().setOnlineDriveFileList(folderFiles)
// Step 4: Navigate deeper
store.getState().setBreadcrumbs([...store.getState().breadcrumbs, 'project-alpha'])
store.getState().setPrefix([...store.getState().prefix, 'project-alpha'])
// Step 5: Select files
store.getState().setOnlineDriveFileList([
createOnlineDriveFile('doc-1', 'spec.pdf'),
createOnlineDriveFile('doc-2', 'design.fig'),
])
store.getState().setSelectedFileIds(['doc-1'])
// Verify full state
expect(store.getState().currentCredentialId).toBe('drive-cred-1')
expect(store.getState().bucket).toBe('company-docs')
expect(store.getState().breadcrumbs).toEqual(['company-docs', 'project-alpha'])
expect(store.getState().prefix).toEqual(['projects', 'project-alpha'])
expect(store.getState().onlineDriveFileList).toHaveLength(2)
expect(store.getState().selectedFileIds).toEqual(['doc-1'])
expect(store.getState().previewOnlineDriveFileRef.current?.name).toBe('spec.pdf')
})
})
})

View File

@ -0,0 +1,301 @@
/**
* Integration Test: Segment CRUD Flow
*
* Tests segment selection, search/filter, and modal state management across hooks.
* Validates cross-hook data contracts in the completed segment module.
*/
import type { SegmentDetailModel } from '@/models/datasets'
import { act, renderHook } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { useModalState } from '@/app/components/datasets/documents/detail/completed/hooks/use-modal-state'
import { useSearchFilter } from '@/app/components/datasets/documents/detail/completed/hooks/use-search-filter'
import { useSegmentSelection } from '@/app/components/datasets/documents/detail/completed/hooks/use-segment-selection'
const createSegment = (id: string, content = 'Test segment content'): SegmentDetailModel => ({
id,
position: 1,
document_id: 'doc-1',
content,
sign_content: content,
answer: '',
word_count: 50,
tokens: 25,
keywords: ['test'],
index_node_id: 'idx-1',
index_node_hash: 'hash-1',
hit_count: 0,
enabled: true,
disabled_at: 0,
disabled_by: '',
status: 'completed',
created_by: 'user-1',
created_at: Date.now(),
indexing_at: Date.now(),
completed_at: Date.now(),
error: null,
stopped_at: 0,
updated_at: Date.now(),
attachments: [],
} as SegmentDetailModel)
describe('Segment CRUD Flow', () => {
beforeEach(() => {
vi.clearAllMocks()
})
describe('Search and Filter → Segment List Query', () => {
it('should manage search input with debounce', () => {
vi.useFakeTimers()
const onPageChange = vi.fn()
const { result } = renderHook(() => useSearchFilter({ onPageChange }))
act(() => {
result.current.handleInputChange('keyword')
})
expect(result.current.inputValue).toBe('keyword')
expect(result.current.searchValue).toBe('')
act(() => {
vi.advanceTimersByTime(500)
})
expect(result.current.searchValue).toBe('keyword')
expect(onPageChange).toHaveBeenCalledWith(1)
vi.useRealTimers()
})
it('should manage status filter state', () => {
const onPageChange = vi.fn()
const { result } = renderHook(() => useSearchFilter({ onPageChange }))
// status value 1 maps to !!1 = true (enabled)
act(() => {
result.current.onChangeStatus({ value: 1, name: 'enabled' })
})
// onChangeStatus converts: value === 'all' ? 'all' : !!value
expect(result.current.selectedStatus).toBe(true)
act(() => {
result.current.onClearFilter()
})
expect(result.current.selectedStatus).toBe('all')
expect(result.current.inputValue).toBe('')
})
it('should provide status list for filter dropdown', () => {
const { result } = renderHook(() => useSearchFilter({ onPageChange: vi.fn() }))
expect(result.current.statusList).toBeInstanceOf(Array)
expect(result.current.statusList.length).toBe(3) // all, disabled, enabled
})
it('should compute selectDefaultValue based on selectedStatus', () => {
const { result } = renderHook(() => useSearchFilter({ onPageChange: vi.fn() }))
// Initial state: 'all'
expect(result.current.selectDefaultValue).toBe('all')
// Set to enabled (true)
act(() => {
result.current.onChangeStatus({ value: 1, name: 'enabled' })
})
expect(result.current.selectDefaultValue).toBe(1)
// Set to disabled (false)
act(() => {
result.current.onChangeStatus({ value: 0, name: 'disabled' })
})
expect(result.current.selectDefaultValue).toBe(0)
})
})
describe('Segment Selection → Batch Operations', () => {
const segments = [
createSegment('seg-1'),
createSegment('seg-2'),
createSegment('seg-3'),
]
it('should manage individual segment selection', () => {
const { result } = renderHook(() => useSegmentSelection(segments))
act(() => {
result.current.onSelected('seg-1')
})
expect(result.current.selectedSegmentIds).toContain('seg-1')
act(() => {
result.current.onSelected('seg-2')
})
expect(result.current.selectedSegmentIds).toContain('seg-1')
expect(result.current.selectedSegmentIds).toContain('seg-2')
expect(result.current.selectedSegmentIds).toHaveLength(2)
})
it('should toggle selection on repeated click', () => {
const { result } = renderHook(() => useSegmentSelection(segments))
act(() => {
result.current.onSelected('seg-1')
})
expect(result.current.selectedSegmentIds).toContain('seg-1')
act(() => {
result.current.onSelected('seg-1')
})
expect(result.current.selectedSegmentIds).not.toContain('seg-1')
})
it('should support select all toggle', () => {
const { result } = renderHook(() => useSegmentSelection(segments))
act(() => {
result.current.onSelectedAll()
})
expect(result.current.selectedSegmentIds).toHaveLength(3)
expect(result.current.isAllSelected).toBe(true)
act(() => {
result.current.onSelectedAll()
})
expect(result.current.selectedSegmentIds).toHaveLength(0)
expect(result.current.isAllSelected).toBe(false)
})
it('should detect partial selection via isSomeSelected', () => {
const { result } = renderHook(() => useSegmentSelection(segments))
act(() => {
result.current.onSelected('seg-1')
})
// After selecting one of three, isSomeSelected should be true
expect(result.current.selectedSegmentIds).toEqual(['seg-1'])
expect(result.current.isSomeSelected).toBe(true)
expect(result.current.isAllSelected).toBe(false)
})
it('should clear selection via onCancelBatchOperation', () => {
const { result } = renderHook(() => useSegmentSelection(segments))
act(() => {
result.current.onSelected('seg-1')
result.current.onSelected('seg-2')
})
expect(result.current.selectedSegmentIds).toHaveLength(2)
act(() => {
result.current.onCancelBatchOperation()
})
expect(result.current.selectedSegmentIds).toHaveLength(0)
})
})
describe('Modal State Management', () => {
const onNewSegmentModalChange = vi.fn()
it('should open segment detail modal on card click', () => {
const { result } = renderHook(() => useModalState({ onNewSegmentModalChange }))
const segment = createSegment('seg-detail-1', 'Detail content')
act(() => {
result.current.onClickCard(segment)
})
expect(result.current.currSegment.showModal).toBe(true)
expect(result.current.currSegment.segInfo).toBeDefined()
expect(result.current.currSegment.segInfo!.id).toBe('seg-detail-1')
})
it('should close segment detail modal', () => {
const { result } = renderHook(() => useModalState({ onNewSegmentModalChange }))
const segment = createSegment('seg-1')
act(() => {
result.current.onClickCard(segment)
})
expect(result.current.currSegment.showModal).toBe(true)
act(() => {
result.current.onCloseSegmentDetail()
})
expect(result.current.currSegment.showModal).toBe(false)
})
it('should manage full screen toggle', () => {
const { result } = renderHook(() => useModalState({ onNewSegmentModalChange }))
expect(result.current.fullScreen).toBe(false)
act(() => {
result.current.toggleFullScreen()
})
expect(result.current.fullScreen).toBe(true)
act(() => {
result.current.toggleFullScreen()
})
expect(result.current.fullScreen).toBe(false)
})
it('should manage collapsed state', () => {
const { result } = renderHook(() => useModalState({ onNewSegmentModalChange }))
expect(result.current.isCollapsed).toBe(true)
act(() => {
result.current.toggleCollapsed()
})
expect(result.current.isCollapsed).toBe(false)
})
it('should manage new child segment modal', () => {
const { result } = renderHook(() => useModalState({ onNewSegmentModalChange }))
expect(result.current.showNewChildSegmentModal).toBe(false)
act(() => {
result.current.handleAddNewChildChunk('chunk-parent-1')
})
expect(result.current.showNewChildSegmentModal).toBe(true)
expect(result.current.currChunkId).toBe('chunk-parent-1')
act(() => {
result.current.onCloseNewChildChunkModal()
})
expect(result.current.showNewChildSegmentModal).toBe(false)
})
})
describe('Cross-Hook Data Flow: Search → Selection → Modal', () => {
it('should maintain independent state across all three hooks', () => {
const segments = [createSegment('seg-1'), createSegment('seg-2')]
const { result: filterResult } = renderHook(() =>
useSearchFilter({ onPageChange: vi.fn() }),
)
const { result: selectionResult } = renderHook(() =>
useSegmentSelection(segments),
)
const { result: modalResult } = renderHook(() =>
useModalState({ onNewSegmentModalChange: vi.fn() }),
)
// Set search filter to enabled
act(() => {
filterResult.current.onChangeStatus({ value: 1, name: 'enabled' })
})
// Select a segment
act(() => {
selectionResult.current.onSelected('seg-1')
})
// Open detail modal
act(() => {
modalResult.current.onClickCard(segments[0])
})
// All states should be independent
expect(filterResult.current.selectedStatus).toBe(true) // !!1
expect(selectionResult.current.selectedSegmentIds).toContain('seg-1')
expect(modalResult.current.currSegment.showModal).toBe(true)
})
})
})

View File

@ -162,8 +162,10 @@ describe('useEmbeddedChatbot', () => {
await waitFor(() => {
expect(mockFetchChatList).toHaveBeenCalledWith('conversation-1', AppSourceType.webApp, 'app-1')
})
expect(result.current.pinnedConversationList).toEqual(pinnedData.data)
expect(result.current.conversationList).toEqual(listData.data)
await waitFor(() => {
expect(result.current.pinnedConversationList).toEqual(pinnedData.data)
expect(result.current.conversationList).toEqual(listData.data)
})
})
})

View File

@ -0,0 +1,309 @@
import type { QA } from '@/models/datasets'
import { render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { ChunkContainer, ChunkLabel, QAPreview } from '../chunk'
vi.mock('../../base/icons/src/public/knowledge', () => ({
SelectionMod: (props: React.ComponentProps<'svg'>) => (
<svg data-testid="selection-mod-icon" {...props} />
),
}))
function createQA(overrides: Partial<QA> = {}): QA {
return {
question: 'What is Dify?',
answer: 'Dify is an open-source LLM app development platform.',
...overrides,
}
}
describe('ChunkLabel', () => {
beforeEach(() => {
vi.clearAllMocks()
})
describe('Rendering', () => {
it('should render the label text', () => {
render(<ChunkLabel label="Chunk #1" characterCount={100} />)
expect(screen.getByText('Chunk #1')).toBeInTheDocument()
})
it('should render the character count with unit', () => {
render(<ChunkLabel label="Chunk #1" characterCount={256} />)
expect(screen.getByText('256 characters')).toBeInTheDocument()
})
it('should render the SelectionMod icon', () => {
render(<ChunkLabel label="Chunk" characterCount={10} />)
expect(screen.getByTestId('selection-mod-icon')).toBeInTheDocument()
})
it('should render a middle dot separator between label and count', () => {
render(<ChunkLabel label="Chunk" characterCount={10} />)
expect(screen.getByText('·')).toBeInTheDocument()
})
})
describe('Props', () => {
it('should display zero character count', () => {
render(<ChunkLabel label="Empty Chunk" characterCount={0} />)
expect(screen.getByText('0 characters')).toBeInTheDocument()
})
it('should display large character counts', () => {
render(<ChunkLabel label="Large" characterCount={999999} />)
expect(screen.getByText('999999 characters')).toBeInTheDocument()
})
})
describe('Edge Cases', () => {
it('should render with empty label', () => {
render(<ChunkLabel label="" characterCount={50} />)
expect(screen.getByText('50 characters')).toBeInTheDocument()
})
it('should render with special characters in label', () => {
render(<ChunkLabel label="Chunk <#1> & 'test'" characterCount={10} />)
expect(screen.getByText('Chunk <#1> & \'test\'')).toBeInTheDocument()
})
})
})
// Tests for ChunkContainer - wraps ChunkLabel with children content area
describe('ChunkContainer', () => {
beforeEach(() => {
vi.clearAllMocks()
})
describe('Rendering', () => {
it('should render ChunkLabel with correct props', () => {
render(
<ChunkContainer label="Chunk #1" characterCount={200}>
Content here
</ChunkContainer>,
)
expect(screen.getByText('Chunk #1')).toBeInTheDocument()
expect(screen.getByText('200 characters')).toBeInTheDocument()
})
it('should render children in the content area', () => {
render(
<ChunkContainer label="Chunk" characterCount={50}>
<p>Paragraph content</p>
</ChunkContainer>,
)
expect(screen.getByText('Paragraph content')).toBeInTheDocument()
})
it('should render the SelectionMod icon via ChunkLabel', () => {
render(
<ChunkContainer label="Chunk" characterCount={10}>
Content
</ChunkContainer>,
)
expect(screen.getByTestId('selection-mod-icon')).toBeInTheDocument()
})
})
describe('Structure', () => {
it('should have space-y-2 on the outer container', () => {
const { container } = render(
<ChunkContainer label="Chunk" characterCount={10}>Content</ChunkContainer>,
)
expect(container.firstElementChild).toHaveClass('space-y-2')
})
it('should render children inside a styled content div', () => {
render(
<ChunkContainer label="Chunk" characterCount={10}>
<span>Test child</span>
</ChunkContainer>,
)
const contentDiv = screen.getByText('Test child').parentElement
expect(contentDiv).toHaveClass('body-md-regular', 'text-text-secondary')
})
})
describe('Edge Cases', () => {
it('should render without children', () => {
const { container } = render(
<ChunkContainer label="Empty" characterCount={0} />,
)
expect(container.firstElementChild).toBeInTheDocument()
expect(screen.getByText('Empty')).toBeInTheDocument()
})
it('should render multiple children', () => {
render(
<ChunkContainer label="Multi" characterCount={100}>
<span>First</span>
<span>Second</span>
</ChunkContainer>,
)
expect(screen.getByText('First')).toBeInTheDocument()
expect(screen.getByText('Second')).toBeInTheDocument()
})
it('should render with string children', () => {
render(
<ChunkContainer label="Text" characterCount={5}>
Plain text content
</ChunkContainer>,
)
expect(screen.getByText('Plain text content')).toBeInTheDocument()
})
})
})
// Tests for QAPreview - displays question and answer pair
describe('QAPreview', () => {
beforeEach(() => {
vi.clearAllMocks()
})
describe('Rendering', () => {
it('should render the question text', () => {
const qa = createQA()
render(<QAPreview qa={qa} />)
expect(screen.getByText('What is Dify?')).toBeInTheDocument()
})
it('should render the answer text', () => {
const qa = createQA()
render(<QAPreview qa={qa} />)
expect(screen.getByText('Dify is an open-source LLM app development platform.')).toBeInTheDocument()
})
it('should render Q and A labels', () => {
const qa = createQA()
render(<QAPreview qa={qa} />)
expect(screen.getByText('Q')).toBeInTheDocument()
expect(screen.getByText('A')).toBeInTheDocument()
})
})
describe('Structure', () => {
it('should render Q label as a label element', () => {
const qa = createQA()
render(<QAPreview qa={qa} />)
const qLabel = screen.getByText('Q')
expect(qLabel.tagName).toBe('LABEL')
})
it('should render A label as a label element', () => {
const qa = createQA()
render(<QAPreview qa={qa} />)
const aLabel = screen.getByText('A')
expect(aLabel.tagName).toBe('LABEL')
})
it('should render question in a p element', () => {
const qa = createQA()
render(<QAPreview qa={qa} />)
const questionEl = screen.getByText(qa.question)
expect(questionEl.tagName).toBe('P')
})
it('should render answer in a p element', () => {
const qa = createQA()
render(<QAPreview qa={qa} />)
const answerEl = screen.getByText(qa.answer)
expect(answerEl.tagName).toBe('P')
})
it('should have the outer container with flex column layout', () => {
const qa = createQA()
const { container } = render(<QAPreview qa={qa} />)
expect(container.firstElementChild).toHaveClass('flex', 'flex-col', 'gap-y-2')
})
it('should apply text styling classes to question paragraph', () => {
const qa = createQA()
render(<QAPreview qa={qa} />)
const questionEl = screen.getByText(qa.question)
expect(questionEl).toHaveClass('body-md-regular', 'text-text-secondary')
})
it('should apply text styling classes to answer paragraph', () => {
const qa = createQA()
render(<QAPreview qa={qa} />)
const answerEl = screen.getByText(qa.answer)
expect(answerEl).toHaveClass('body-md-regular', 'text-text-secondary')
})
})
describe('Edge Cases', () => {
it('should render with empty question', () => {
const qa = createQA({ question: '' })
render(<QAPreview qa={qa} />)
expect(screen.getByText('Q')).toBeInTheDocument()
expect(screen.getByText('A')).toBeInTheDocument()
})
it('should render with empty answer', () => {
const qa = createQA({ answer: '' })
render(<QAPreview qa={qa} />)
expect(screen.getByText('Q')).toBeInTheDocument()
expect(screen.getByText(qa.question)).toBeInTheDocument()
})
it('should render with long text', () => {
const longText = 'x'.repeat(1000)
const qa = createQA({ question: longText, answer: longText })
render(<QAPreview qa={qa} />)
const elements = screen.getAllByText(longText)
expect(elements).toHaveLength(2)
})
it('should render with special characters in question and answer', () => {
const qa = createQA({
question: 'What about <html> & "quotes"?',
answer: 'It handles \'single\' & "double" quotes.',
})
render(<QAPreview qa={qa} />)
expect(screen.getByText('What about <html> & "quotes"?')).toBeInTheDocument()
expect(screen.getByText('It handles \'single\' & "double" quotes.')).toBeInTheDocument()
})
it('should render with multiline text', () => {
const qa = createQA({
question: 'Line1\nLine2',
answer: 'Answer1\nAnswer2',
})
render(<QAPreview qa={qa} />)
expect(screen.getByText(/Line1/)).toBeInTheDocument()
expect(screen.getByText(/Answer1/)).toBeInTheDocument()
})
})
})

View File

@ -1,6 +1,6 @@
import { cleanup, render } from '@testing-library/react'
import { afterEach, describe, expect, it } from 'vitest'
import DatasetsLoading from './loading'
import DatasetsLoading from '../loading'
afterEach(() => {
cleanup()

View File

@ -1,13 +1,6 @@
import { cleanup, render, screen } from '@testing-library/react'
import { afterEach, describe, expect, it, vi } from 'vitest'
import NoLinkedAppsPanel from './no-linked-apps-panel'
// Mock react-i18next
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => key,
}),
}))
import NoLinkedAppsPanel from '../no-linked-apps-panel'
// Mock useDocLink
vi.mock('@/context/i18n', () => ({
@ -21,17 +14,17 @@ afterEach(() => {
describe('NoLinkedAppsPanel', () => {
it('should render without crashing', () => {
render(<NoLinkedAppsPanel />)
expect(screen.getByText('datasetMenus.emptyTip')).toBeInTheDocument()
expect(screen.getByText('common.datasetMenus.emptyTip')).toBeInTheDocument()
})
it('should render the empty tip text', () => {
render(<NoLinkedAppsPanel />)
expect(screen.getByText('datasetMenus.emptyTip')).toBeInTheDocument()
expect(screen.getByText('common.datasetMenus.emptyTip')).toBeInTheDocument()
})
it('should render the view doc link', () => {
render(<NoLinkedAppsPanel />)
expect(screen.getByText('datasetMenus.viewDoc')).toBeInTheDocument()
expect(screen.getByText('common.datasetMenus.viewDoc')).toBeInTheDocument()
})
it('should render link with correct href', () => {

View File

@ -1,6 +1,6 @@
import { cleanup, render, screen } from '@testing-library/react'
import { afterEach, describe, expect, it } from 'vitest'
import ApiIndex from './index'
import ApiIndex from '../index'
afterEach(() => {
cleanup()

View File

@ -1,111 +0,0 @@
import { cleanup, render, screen } from '@testing-library/react'
import { afterEach, describe, expect, it } from 'vitest'
import { ChunkContainer, ChunkLabel, QAPreview } from './chunk'
afterEach(() => {
cleanup()
})
describe('ChunkLabel', () => {
it('should render label text', () => {
render(<ChunkLabel label="Chunk 1" characterCount={100} />)
expect(screen.getByText('Chunk 1')).toBeInTheDocument()
})
it('should render character count', () => {
render(<ChunkLabel label="Chunk 1" characterCount={150} />)
expect(screen.getByText('150 characters')).toBeInTheDocument()
})
it('should render separator dot', () => {
render(<ChunkLabel label="Chunk 1" characterCount={100} />)
expect(screen.getByText('·')).toBeInTheDocument()
})
it('should render with zero character count', () => {
render(<ChunkLabel label="Empty Chunk" characterCount={0} />)
expect(screen.getByText('0 characters')).toBeInTheDocument()
})
it('should render with large character count', () => {
render(<ChunkLabel label="Large Chunk" characterCount={999999} />)
expect(screen.getByText('999999 characters')).toBeInTheDocument()
})
})
describe('ChunkContainer', () => {
it('should render label and character count', () => {
render(<ChunkContainer label="Container 1" characterCount={200}>Content</ChunkContainer>)
expect(screen.getByText('Container 1')).toBeInTheDocument()
expect(screen.getByText('200 characters')).toBeInTheDocument()
})
it('should render children content', () => {
render(<ChunkContainer label="Container 1" characterCount={200}>Test Content</ChunkContainer>)
expect(screen.getByText('Test Content')).toBeInTheDocument()
})
it('should render with complex children', () => {
render(
<ChunkContainer label="Container" characterCount={100}>
<div data-testid="child-div">
<span>Nested content</span>
</div>
</ChunkContainer>,
)
expect(screen.getByTestId('child-div')).toBeInTheDocument()
expect(screen.getByText('Nested content')).toBeInTheDocument()
})
it('should render empty children', () => {
render(<ChunkContainer label="Empty" characterCount={0}>{null}</ChunkContainer>)
expect(screen.getByText('Empty')).toBeInTheDocument()
})
})
describe('QAPreview', () => {
const mockQA = {
question: 'What is the meaning of life?',
answer: 'The meaning of life is 42.',
}
it('should render question text', () => {
render(<QAPreview qa={mockQA} />)
expect(screen.getByText('What is the meaning of life?')).toBeInTheDocument()
})
it('should render answer text', () => {
render(<QAPreview qa={mockQA} />)
expect(screen.getByText('The meaning of life is 42.')).toBeInTheDocument()
})
it('should render Q label', () => {
render(<QAPreview qa={mockQA} />)
expect(screen.getByText('Q')).toBeInTheDocument()
})
it('should render A label', () => {
render(<QAPreview qa={mockQA} />)
expect(screen.getByText('A')).toBeInTheDocument()
})
it('should render with empty strings', () => {
render(<QAPreview qa={{ question: '', answer: '' }} />)
expect(screen.getByText('Q')).toBeInTheDocument()
expect(screen.getByText('A')).toBeInTheDocument()
})
it('should render with long text', () => {
const longQuestion = 'Q'.repeat(500)
const longAnswer = 'A'.repeat(500)
render(<QAPreview qa={{ question: longQuestion, answer: longAnswer }} />)
expect(screen.getByText(longQuestion)).toBeInTheDocument()
expect(screen.getByText(longAnswer)).toBeInTheDocument()
})
it('should render with special characters', () => {
render(<QAPreview qa={{ question: 'What about <script>?', answer: '& special chars!' }} />)
expect(screen.getByText('What about <script>?')).toBeInTheDocument()
expect(screen.getByText('& special chars!')).toBeInTheDocument()
})
})

View File

@ -4,7 +4,7 @@ import { describe, expect, it } from 'vitest'
import { ConfigurationMethodEnum, ModelStatusEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
import { RerankingModeEnum } from '@/models/datasets'
import { RETRIEVE_METHOD } from '@/types/app'
import { ensureRerankModelSelected, isReRankModelSelected } from './check-rerank-model'
import { ensureRerankModelSelected, isReRankModelSelected } from '../check-rerank-model'
// Test data factory
const createRetrievalConfig = (overrides: Partial<RetrievalConfig> = {}): RetrievalConfig => ({

View File

@ -1,6 +1,6 @@
import { render, screen } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import ChunkingModeLabel from './chunking-mode-label'
import ChunkingModeLabel from '../chunking-mode-label'
describe('ChunkingModeLabel', () => {
describe('Rendering', () => {

View File

@ -1,6 +1,6 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import { CredentialIcon } from './credential-icon'
import { CredentialIcon } from '../credential-icon'
describe('CredentialIcon', () => {
describe('Rendering', () => {

View File

@ -1,6 +1,6 @@
import { render } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import DocumentFileIcon from './document-file-icon'
import DocumentFileIcon from '../document-file-icon'
describe('DocumentFileIcon', () => {
describe('Rendering', () => {

View File

@ -0,0 +1,49 @@
import type { DocumentItem } from '@/models/datasets'
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import DocumentList from '../document-list'
vi.mock('../../document-file-icon', () => ({
default: ({ name, extension }: { name?: string, extension?: string }) => (
<span data-testid="file-icon">
{name}
.
{extension}
</span>
),
}))
describe('DocumentList', () => {
const mockList = [
{ id: 'doc-1', name: 'report', extension: 'pdf' },
{ id: 'doc-2', name: 'data', extension: 'csv' },
] as DocumentItem[]
const onChange = vi.fn()
beforeEach(() => {
vi.clearAllMocks()
})
it('should render all documents', () => {
render(<DocumentList list={mockList} onChange={onChange} />)
expect(screen.getByText('report')).toBeInTheDocument()
expect(screen.getByText('data')).toBeInTheDocument()
})
it('should render file icons', () => {
render(<DocumentList list={mockList} onChange={onChange} />)
expect(screen.getAllByTestId('file-icon')).toHaveLength(2)
})
it('should call onChange with document on click', () => {
render(<DocumentList list={mockList} onChange={onChange} />)
fireEvent.click(screen.getByText('report'))
expect(onChange).toHaveBeenCalledWith(mockList[0])
})
it('should render empty list without errors', () => {
const { container } = render(<DocumentList list={[]} onChange={onChange} />)
expect(container.firstChild).toBeInTheDocument()
})
})

View File

@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { fireEvent, render, screen } from '@testing-library/react'
import * as React from 'react'
import { ChunkingMode, DataSourceType } from '@/models/datasets'
import DocumentPicker from './index'
import DocumentPicker from '../index'
// Mock portal-to-follow-elem - always render content for testing
vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
@ -52,25 +52,6 @@ vi.mock('@/service/knowledge/use-document', () => ({
useDocumentList: mockUseDocumentList,
}))
// Mock icons - mock all remixicon components used in the component tree
vi.mock('@remixicon/react', () => ({
RiArrowDownSLine: () => <span data-testid="arrow-icon"></span>,
RiFile3Fill: () => <span data-testid="file-icon">📄</span>,
RiFileCodeFill: () => <span data-testid="file-code-icon">📄</span>,
RiFileExcelFill: () => <span data-testid="file-excel-icon">📄</span>,
RiFileGifFill: () => <span data-testid="file-gif-icon">📄</span>,
RiFileImageFill: () => <span data-testid="file-image-icon">📄</span>,
RiFileMusicFill: () => <span data-testid="file-music-icon">📄</span>,
RiFilePdf2Fill: () => <span data-testid="file-pdf-icon">📄</span>,
RiFilePpt2Fill: () => <span data-testid="file-ppt-icon">📄</span>,
RiFileTextFill: () => <span data-testid="file-text-icon">📄</span>,
RiFileVideoFill: () => <span data-testid="file-video-icon">📄</span>,
RiFileWordFill: () => <span data-testid="file-word-icon">📄</span>,
RiMarkdownFill: () => <span data-testid="file-markdown-icon">📄</span>,
RiSearchLine: () => <span data-testid="search-icon">🔍</span>,
RiCloseLine: () => <span data-testid="close-icon"></span>,
}))
// Factory function to create mock SimpleDocumentDetail
const createMockDocument = (overrides: Partial<SimpleDocumentDetail> = {}): SimpleDocumentDetail => ({
id: `doc-${Math.random().toString(36).substr(2, 9)}`,
@ -211,12 +192,6 @@ describe('DocumentPicker', () => {
expect(screen.getByText('--')).toBeInTheDocument()
})
it('should render arrow icon', () => {
renderComponent()
expect(screen.getByTestId('arrow-icon')).toBeInTheDocument()
})
it('should render general mode label', () => {
renderComponent({
value: {
@ -473,7 +448,7 @@ describe('DocumentPicker', () => {
describe('Memoization Logic', () => {
it('should be wrapped with React.memo', () => {
// React.memo components have a $$typeof property
expect((DocumentPicker as any).$$typeof).toBeDefined()
expect((DocumentPicker as unknown as { $$typeof: symbol }).$$typeof).toBeDefined()
})
it('should compute parentModeLabel correctly with useMemo', () => {
@ -952,7 +927,6 @@ describe('DocumentPicker', () => {
renderComponent({ onChange })
// Click on a document in the list
fireEvent.click(screen.getByText('Document 2'))
// handleChange should find the document and call onChange with full document
@ -1026,8 +1000,9 @@ describe('DocumentPicker', () => {
},
})
// FileIcon should be rendered via DocumentFileIcon - pdf renders pdf icon
expect(screen.getByTestId('file-pdf-icon')).toBeInTheDocument()
// FileIcon should render an SVG icon for the file extension
const trigger = screen.getByTestId('portal-trigger')
expect(trigger.querySelector('svg')).toBeInTheDocument()
})
})

View File

@ -1,20 +1,7 @@
import type { DocumentItem } from '@/models/datasets'
import { fireEvent, render, screen } from '@testing-library/react'
import * as React from 'react'
import PreviewDocumentPicker from './preview-document-picker'
// Override shared i18n mock for custom translations
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string, params?: Record<string, unknown>) => {
if (key === 'preprocessDocument' && params?.num)
return `${params.num} files`
const prefix = params?.ns ? `${params.ns}.` : ''
return `${prefix}${key}`
},
}),
}))
import PreviewDocumentPicker from '../preview-document-picker'
// Mock portal-to-follow-elem - always render content for testing
vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
@ -45,23 +32,6 @@ vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
),
}))
// Mock icons
vi.mock('@remixicon/react', () => ({
RiArrowDownSLine: () => <span data-testid="arrow-icon"></span>,
RiFile3Fill: () => <span data-testid="file-icon">📄</span>,
RiFileCodeFill: () => <span data-testid="file-code-icon">📄</span>,
RiFileExcelFill: () => <span data-testid="file-excel-icon">📄</span>,
RiFileGifFill: () => <span data-testid="file-gif-icon">📄</span>,
RiFileImageFill: () => <span data-testid="file-image-icon">📄</span>,
RiFileMusicFill: () => <span data-testid="file-music-icon">📄</span>,
RiFilePdf2Fill: () => <span data-testid="file-pdf-icon">📄</span>,
RiFilePpt2Fill: () => <span data-testid="file-ppt-icon">📄</span>,
RiFileTextFill: () => <span data-testid="file-text-icon">📄</span>,
RiFileVideoFill: () => <span data-testid="file-video-icon">📄</span>,
RiFileWordFill: () => <span data-testid="file-word-icon">📄</span>,
RiMarkdownFill: () => <span data-testid="file-markdown-icon">📄</span>,
}))
// Factory function to create mock DocumentItem
const createMockDocumentItem = (overrides: Partial<DocumentItem> = {}): DocumentItem => ({
id: `doc-${Math.random().toString(36).substr(2, 9)}`,
@ -134,19 +104,14 @@ describe('PreviewDocumentPicker', () => {
expect(screen.getByText('--')).toBeInTheDocument()
})
it('should render arrow icon', () => {
renderComponent()
expect(screen.getByTestId('arrow-icon')).toBeInTheDocument()
})
it('should render file icon', () => {
renderComponent({
value: createMockDocumentItem({ extension: 'txt' }),
files: [], // Use empty files to avoid duplicate icons
})
expect(screen.getByTestId('file-text-icon')).toBeInTheDocument()
const trigger = screen.getByTestId('portal-trigger')
expect(trigger.querySelector('svg')).toBeInTheDocument()
})
it('should render pdf icon for pdf extension', () => {
@ -155,7 +120,8 @@ describe('PreviewDocumentPicker', () => {
files: [], // Use empty files to avoid duplicate icons
})
expect(screen.getByTestId('file-pdf-icon')).toBeInTheDocument()
const trigger = screen.getByTestId('portal-trigger')
expect(trigger.querySelector('svg')).toBeInTheDocument()
})
})
@ -206,7 +172,8 @@ describe('PreviewDocumentPicker', () => {
value: createMockDocumentItem({ name: 'test.docx', extension: 'docx' }),
})
expect(screen.getByTestId('file-word-icon')).toBeInTheDocument()
const trigger = screen.getByTestId('portal-trigger')
expect(trigger.querySelector('svg')).toBeInTheDocument()
})
})
@ -282,7 +249,7 @@ describe('PreviewDocumentPicker', () => {
// Tests for component memoization
describe('Component Memoization', () => {
it('should be wrapped with React.memo', () => {
expect((PreviewDocumentPicker as any).$$typeof).toBeDefined()
expect((PreviewDocumentPicker as unknown as { $$typeof: symbol }).$$typeof).toBeDefined()
})
it('should not re-render when props are the same', () => {
@ -329,7 +296,6 @@ describe('PreviewDocumentPicker', () => {
renderComponent({ files, onChange })
// Click on a document
fireEvent.click(screen.getByText('Document 2'))
// handleChange should call onChange with the selected item
@ -506,21 +472,16 @@ describe('PreviewDocumentPicker', () => {
})
describe('extension variations', () => {
const extensions = [
{ ext: 'txt', icon: 'file-text-icon' },
{ ext: 'pdf', icon: 'file-pdf-icon' },
{ ext: 'docx', icon: 'file-word-icon' },
{ ext: 'xlsx', icon: 'file-excel-icon' },
{ ext: 'md', icon: 'file-markdown-icon' },
]
const extensions = ['txt', 'pdf', 'docx', 'xlsx', 'md']
it.each(extensions)('should render correct icon for $ext extension', ({ ext, icon }) => {
it.each(extensions)('should render icon for %s extension', (ext) => {
renderComponent({
value: createMockDocumentItem({ extension: ext }),
files: [], // Use empty files to avoid duplicate icons
})
expect(screen.getByTestId(icon)).toBeInTheDocument()
const trigger = screen.getByTestId('portal-trigger')
expect(trigger.querySelector('svg')).toBeInTheDocument()
})
})
})
@ -543,7 +504,6 @@ describe('PreviewDocumentPicker', () => {
renderComponent({ files, onChange })
// Click on first document
fireEvent.click(screen.getByText('Document 1'))
expect(onChange).toHaveBeenCalledWith(files[0])
@ -568,7 +528,7 @@ describe('PreviewDocumentPicker', () => {
onChange={vi.fn()}
/>,
)
expect(screen.getByText('3 files')).toBeInTheDocument()
expect(screen.getByText(/dataset\.preprocessDocument/)).toBeInTheDocument()
})
})
@ -609,7 +569,6 @@ describe('PreviewDocumentPicker', () => {
renderComponent({ files, onChange })
// Click first document
fireEvent.click(screen.getByText('Document 1'))
expect(onChange).toHaveBeenCalledWith(files[0])
@ -624,11 +583,9 @@ describe('PreviewDocumentPicker', () => {
renderComponent({ files: customFiles, onChange })
// Click on first custom file
fireEvent.click(screen.getByText('Custom File 1'))
expect(onChange).toHaveBeenCalledWith(customFiles[0])
// Click on second custom file
fireEvent.click(screen.getByText('Custom File 2'))
expect(onChange).toHaveBeenCalledWith(customFiles[1])
})

View File

@ -3,7 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import Toast from '@/app/components/base/toast'
import { useAutoDisabledDocuments } from '@/service/knowledge/use-document'
import AutoDisabledDocument from './auto-disabled-document'
import AutoDisabledDocument from '../auto-disabled-document'
type AutoDisabledDocumentsResponse = { document_ids: string[] }
@ -15,7 +15,6 @@ const createMockQueryResult = (
isLoading,
}) as ReturnType<typeof useAutoDisabledDocuments>
// Mock service hooks
const mockMutateAsync = vi.fn()
const mockInvalidDisabledDocument = vi.fn()
@ -27,7 +26,6 @@ vi.mock('@/service/knowledge/use-document', () => ({
useInvalidDisabledDocument: vi.fn(() => mockInvalidDisabledDocument),
}))
// Mock Toast
vi.mock('@/app/components/base/toast', () => ({
default: {
notify: vi.fn(),

View File

@ -3,9 +3,8 @@ import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/re
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { retryErrorDocs } from '@/service/datasets'
import { useDatasetErrorDocs } from '@/service/knowledge/use-dataset'
import RetryButton from './index-failed'
import RetryButton from '../index-failed'
// Mock service hooks
const mockRefetch = vi.fn()
vi.mock('@/service/knowledge/use-dataset', () => ({

View File

@ -1,6 +1,6 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import StatusWithAction from './status-with-action'
import StatusWithAction from '../status-with-action'
describe('StatusWithAction', () => {
describe('Rendering', () => {

View File

@ -1,9 +1,8 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { RETRIEVE_METHOD } from '@/types/app'
import EconomicalRetrievalMethodConfig from './index'
import EconomicalRetrievalMethodConfig from '../index'
// Mock dependencies
vi.mock('../../settings/option-card', () => ({
vi.mock('../../../settings/option-card', () => ({
default: ({ children, title, description, disabled, id }: {
children?: React.ReactNode
title?: string
@ -18,7 +17,7 @@ vi.mock('../../settings/option-card', () => ({
),
}))
vi.mock('../retrieval-param-config', () => ({
vi.mock('../../retrieval-param-config', () => ({
default: ({ value, onChange, type }: {
value: Record<string, unknown>
onChange: (value: Record<string, unknown>) => void

View File

@ -1,6 +1,6 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import ImageList from './index'
import ImageList from '../index'
// Track handleImageClick calls for testing
type FileEntity = {
@ -43,7 +43,7 @@ type ImageInfo = {
}
// Mock ImagePreviewer since it uses createPortal
vi.mock('../image-previewer', () => ({
vi.mock('../../image-previewer', () => ({
default: ({ images, initialIndex, onClose }: ImagePreviewerProps) => (
<div data-testid="image-previewer">
<span data-testid="preview-count">{images.length}</span>
@ -132,7 +132,6 @@ describe('ImageList', () => {
const images = createMockImages(15)
render(<ImageList images={images} size="md" limit={9} />)
// Click More button
const moreButton = screen.getByText(/\+6/)
fireEvent.click(moreButton)
@ -182,7 +181,6 @@ describe('ImageList', () => {
const images = createMockImages(3)
const { rerender } = render(<ImageList images={images} size="md" />)
// Click first image to open preview
const firstThumb = screen.getByTestId('file-thumb-https://example.com/image-1.png')
fireEvent.click(firstThumb)
@ -197,7 +195,6 @@ describe('ImageList', () => {
const newImages = createMockImages(2) // Only 2 images
rerender(<ImageList images={newImages} size="md" />)
// Click on a thumbnail that exists
const validThumb = screen.getByTestId('file-thumb-https://example.com/image-1.png')
fireEvent.click(validThumb)
expect(screen.getByTestId('image-previewer')).toBeInTheDocument()

View File

@ -1,6 +1,6 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import More from './more'
import More from '../more'
describe('More', () => {
describe('Rendering', () => {

View File

@ -1,6 +1,6 @@
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import ImagePreviewer from './index'
import ImagePreviewer from '../index'
// Mock fetch
const mockFetch = vi.fn()
@ -12,7 +12,6 @@ const mockCreateObjectURL = vi.fn(() => 'blob:mock-url')
globalThis.URL.revokeObjectURL = mockRevokeObjectURL
globalThis.URL.createObjectURL = mockCreateObjectURL
// Mock Image
class MockImage {
onload: (() => void) | null = null
onerror: (() => void) | null = null
@ -294,7 +293,6 @@ describe('ImagePreviewer', () => {
expect(screen.getByText('image1.png')).toBeInTheDocument()
})
// Click prev button multiple times - should stay at first image
const buttons = document.querySelectorAll('button')
const prevButton = Array.from(buttons).find(btn =>
btn.className.includes('left-8'),
@ -325,7 +323,6 @@ describe('ImagePreviewer', () => {
expect(screen.getByText('image3.png')).toBeInTheDocument()
})
// Click next button multiple times - should stay at last image
const buttons = document.querySelectorAll('button')
const nextButton = Array.from(buttons).find(btn =>
btn.className.includes('right-8'),
@ -372,7 +369,6 @@ describe('ImagePreviewer', () => {
expect(screen.getByText(/Failed to load image/)).toBeInTheDocument()
})
// Click retry button
const retryButton = document.querySelector('button.rounded-full')
if (retryButton) {
await act(async () => {

View File

@ -1,4 +1,4 @@
import type { FileEntity } from './types'
import type { FileEntity } from '../types'
import { act, render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import {
@ -6,7 +6,7 @@ import {
FileContextProvider,
useFileStore,
useFileStoreWithSelector,
} from './store'
} from '../store'
const createMockFile = (id: string): FileEntity => ({
id,

View File

@ -1,12 +1,12 @@
import type { FileEntity } from './types'
import type { FileEntity } from '../types'
import type { FileUploadConfigResponse } from '@/models/common'
import { describe, expect, it } from 'vitest'
import {
DEFAULT_IMAGE_FILE_BATCH_LIMIT,
DEFAULT_IMAGE_FILE_SIZE_LIMIT,
DEFAULT_SINGLE_CHUNK_ATTACHMENT_LIMIT,
} from './constants'
import { fileIsUploaded, getFileType, getFileUploadConfig, traverseFileEntry } from './utils'
} from '../constants'
import { fileIsUploaded, getFileType, getFileUploadConfig, traverseFileEntry } from '../utils'
describe('image-uploader utils', () => {
describe('getFileType', () => {

View File

@ -1,13 +1,12 @@
import type { PropsWithChildren } from 'react'
import type { FileEntity } from '../types'
import type { FileEntity } from '../../types'
import { act, fireEvent, render, renderHook, screen, waitFor } from '@testing-library/react'
import * as React from 'react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import Toast from '@/app/components/base/toast'
import { FileContextProvider } from '../store'
import { useUpload } from './use-upload'
import { FileContextProvider } from '../../store'
import { useUpload } from '../use-upload'
// Mock dependencies
vi.mock('@/service/use-common', () => ({
useFileUploadConfig: vi.fn(() => ({
data: {

View File

@ -1,9 +1,8 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import { FileContextProvider } from '../store'
import ImageInput from './image-input'
import { FileContextProvider } from '../../store'
import ImageInput from '../image-input'
// Mock dependencies
vi.mock('@/service/use-common', () => ({
useFileUploadConfig: vi.fn(() => ({
data: {

View File

@ -1,7 +1,7 @@
import type { FileEntity } from '../types'
import type { FileEntity } from '../../types'
import { fireEvent, render } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import ImageItem from './image-item'
import ImageItem from '../image-item'
const createMockFile = (overrides: Partial<FileEntity> = {}): FileEntity => ({
id: 'test-id',

View File

@ -1,9 +1,8 @@
import type { FileEntity } from '../types'
import type { FileEntity } from '../../types'
import { fireEvent, render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import ImageUploaderInChunkWrapper from './index'
import ImageUploaderInChunkWrapper from '../index'
// Mock dependencies
vi.mock('@/service/use-common', () => ({
useFileUploadConfig: vi.fn(() => ({
data: {

View File

@ -1,10 +1,9 @@
import type { FileEntity } from '../types'
import type { FileEntity } from '../../types'
import { fireEvent, render } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import { FileContextProvider } from '../store'
import ImageInput from './image-input'
import { FileContextProvider } from '../../store'
import ImageInput from '../image-input'
// Mock dependencies
vi.mock('@/service/use-common', () => ({
useFileUploadConfig: vi.fn(() => ({
data: {

View File

@ -1,7 +1,7 @@
import type { FileEntity } from '../types'
import type { FileEntity } from '../../types'
import { fireEvent, render } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import ImageItem from './image-item'
import ImageItem from '../image-item'
const createMockFile = (overrides: Partial<FileEntity> = {}): FileEntity => ({
id: 'test-id',

View File

@ -1,9 +1,8 @@
import type { FileEntity } from '../types'
import type { FileEntity } from '../../types'
import { fireEvent, render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import ImageUploaderInRetrievalTestingWrapper from './index'
import ImageUploaderInRetrievalTestingWrapper from '../index'
// Mock dependencies
vi.mock('@/service/use-common', () => ({
useFileUploadConfig: vi.fn(() => ({
data: {

View File

@ -7,7 +7,7 @@ import {
WeightedScoreEnum,
} from '@/models/datasets'
import { RETRIEVE_METHOD } from '@/types/app'
import RetrievalMethodConfig from './index'
import RetrievalMethodConfig from '../index'
// Mock provider context with controllable supportRetrievalMethods
let mockSupportRetrievalMethods: RETRIEVE_METHOD[] = [
@ -37,7 +37,7 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', ()
}))
// Mock child component RetrievalParamConfig to simplify testing
vi.mock('../retrieval-param-config', () => ({
vi.mock('../../retrieval-param-config', () => ({
default: ({ type, value, onChange, showMultiModalTip }: {
type: RETRIEVE_METHOD
value: RetrievalConfig
@ -585,7 +585,7 @@ describe('RetrievalMethodConfig', () => {
// Verify the component is wrapped with React.memo by checking its displayName or type
expect(RetrievalMethodConfig).toBeDefined()
// React.memo components have a $$typeof property
expect((RetrievalMethodConfig as any).$$typeof).toBeDefined()
expect((RetrievalMethodConfig as unknown as { $$typeof: symbol }).$$typeof).toBeDefined()
})
it('should not re-render when props are the same', () => {

View File

@ -1,10 +1,10 @@
import type { ReactNode } from 'react'
import { render, screen } from '@testing-library/react'
import { RETRIEVE_METHOD } from '@/types/app'
import { retrievalIcon } from '../../create/icons'
import RetrievalMethodInfo, { getIcon } from './index'
import { retrievalIcon } from '../../../create/icons'
import RetrievalMethodInfo, { getIcon } from '../index'
// Mock next/image
// Override global next/image auto-mock: tests assert on rendered <img> src attributes via data-testid
vi.mock('next/image', () => ({
default: ({ src, alt, className }: { src: string, alt: string, className?: string }) => (
<img src={src} alt={alt || ''} className={className} data-testid="method-icon" />
@ -24,7 +24,7 @@ vi.mock('@/app/components/base/radio-card', () => ({
}))
// Mock icons
vi.mock('../../create/icons', () => ({
vi.mock('../../../create/icons', () => ({
retrievalIcon: {
vector: 'vector-icon.png',
fullText: 'fulltext-icon.png',

View File

@ -2,13 +2,7 @@ import type { RetrievalConfig } from '@/types/app'
import { fireEvent, render, screen } from '@testing-library/react'
import { RerankingModeEnum, WeightedScoreEnum } from '@/models/datasets'
import { RETRIEVE_METHOD } from '@/types/app'
import RetrievalParamConfig from './index'
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => key,
}),
}))
import RetrievalParamConfig from '../index'
const mockNotify = vi.fn()
vi.mock('@/app/components/base/toast', () => ({
@ -268,7 +262,7 @@ describe('RetrievalParamConfig', () => {
expect(mockNotify).toHaveBeenCalledWith({
type: 'error',
message: 'errorMsg.rerankModelRequired',
message: 'workflow.errorMsg.rerankModelRequired',
})
})
@ -358,7 +352,7 @@ describe('RetrievalParamConfig', () => {
/>,
)
expect(screen.getByText('form.retrievalSetting.multiModalTip')).toBeInTheDocument()
expect(screen.getByText('datasetSettings.form.retrievalSetting.multiModalTip')).toBeInTheDocument()
})
it('should not show multimodal tip when showMultiModalTip is false', () => {
@ -372,7 +366,7 @@ describe('RetrievalParamConfig', () => {
/>,
)
expect(screen.queryByText('form.retrievalSetting.multiModalTip')).not.toBeInTheDocument()
expect(screen.queryByText('datasetSettings.form.retrievalSetting.multiModalTip')).not.toBeInTheDocument()
})
})
@ -505,7 +499,7 @@ describe('RetrievalParamConfig', () => {
/>,
)
expect(screen.getByText('weightedScore.title')).toBeInTheDocument()
expect(screen.getByText('dataset.weightedScore.title')).toBeInTheDocument()
})
it('should have RerankingModel option', () => {
@ -517,7 +511,7 @@ describe('RetrievalParamConfig', () => {
/>,
)
expect(screen.getByText('modelProvider.rerankModel.key')).toBeInTheDocument()
expect(screen.getByText('common.modelProvider.rerankModel.key')).toBeInTheDocument()
})
it('should show model selector when RerankingModel mode is selected', () => {
@ -570,7 +564,7 @@ describe('RetrievalParamConfig', () => {
)
const radioCards = screen.getAllByTestId('radio-card')
const weightedScoreCard = radioCards.find(card => card.getAttribute('data-title') === 'weightedScore.title')
const weightedScoreCard = radioCards.find(card => card.getAttribute('data-title') === 'dataset.weightedScore.title')
fireEvent.click(weightedScoreCard!)
expect(mockOnChange).toHaveBeenCalled()
@ -589,7 +583,7 @@ describe('RetrievalParamConfig', () => {
)
const radioCards = screen.getAllByTestId('radio-card')
const rerankModelCard = radioCards.find(card => card.getAttribute('data-title') === 'modelProvider.rerankModel.key')
const rerankModelCard = radioCards.find(card => card.getAttribute('data-title') === 'common.modelProvider.rerankModel.key')
fireEvent.click(rerankModelCard!)
expect(mockOnChange).not.toHaveBeenCalled()
@ -621,12 +615,12 @@ describe('RetrievalParamConfig', () => {
)
const radioCards = screen.getAllByTestId('radio-card')
const rerankModelCard = radioCards.find(card => card.getAttribute('data-title') === 'modelProvider.rerankModel.key')
const rerankModelCard = radioCards.find(card => card.getAttribute('data-title') === 'common.modelProvider.rerankModel.key')
fireEvent.click(rerankModelCard!)
expect(mockNotify).toHaveBeenCalledWith({
type: 'error',
message: 'errorMsg.rerankModelRequired',
message: 'workflow.errorMsg.rerankModelRequired',
})
})
@ -736,7 +730,7 @@ describe('RetrievalParamConfig', () => {
/>,
)
expect(screen.getByText('form.retrievalSetting.multiModalTip')).toBeInTheDocument()
expect(screen.getByText('datasetSettings.form.retrievalSetting.multiModalTip')).toBeInTheDocument()
})
it('should not show multimodal tip for hybrid search with WeightedScore', () => {
@ -764,7 +758,7 @@ describe('RetrievalParamConfig', () => {
/>,
)
expect(screen.queryByText('form.retrievalSetting.multiModalTip')).not.toBeInTheDocument()
expect(screen.queryByText('datasetSettings.form.retrievalSetting.multiModalTip')).not.toBeInTheDocument()
})
it('should not render rerank switch for hybrid search', () => {
@ -826,7 +820,7 @@ describe('RetrievalParamConfig', () => {
/>,
)
expect(screen.getByText('modelProvider.rerankModel.key')).toBeInTheDocument()
expect(screen.getByText('common.modelProvider.rerankModel.key')).toBeInTheDocument()
})
})
@ -846,7 +840,7 @@ describe('RetrievalParamConfig', () => {
)
const radioCards = screen.getAllByTestId('radio-card')
const weightedScoreCard = radioCards.find(card => card.getAttribute('data-title') === 'weightedScore.title')
const weightedScoreCard = radioCards.find(card => card.getAttribute('data-title') === 'dataset.weightedScore.title')
fireEvent.click(weightedScoreCard!)
expect(mockOnChange).toHaveBeenCalled()
@ -880,7 +874,7 @@ describe('RetrievalParamConfig', () => {
)
const radioCards = screen.getAllByTestId('radio-card')
const weightedScoreCard = radioCards.find(card => card.getAttribute('data-title') === 'weightedScore.title')
const weightedScoreCard = radioCards.find(card => card.getAttribute('data-title') === 'dataset.weightedScore.title')
fireEvent.click(weightedScoreCard!)
expect(mockOnChange).toHaveBeenCalled()

View File

@ -1,19 +1,17 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import Footer from './footer'
import Footer from '../footer'
// Configurable mock for search params
let mockSearchParams = new URLSearchParams()
const mockReplace = vi.fn()
// Mock next/navigation
vi.mock('next/navigation', () => ({
useRouter: () => ({ replace: mockReplace }),
useSearchParams: () => mockSearchParams,
}))
// Mock service hook
const mockInvalidDatasetList = vi.fn()
vi.mock('@/service/knowledge/use-dataset', () => ({
useInvalidDatasetList: () => mockInvalidDatasetList,
@ -23,7 +21,7 @@ vi.mock('@/service/knowledge/use-dataset', () => ({
let capturedActiveTab: string | undefined
let capturedDslUrl: string | undefined
vi.mock('./create-options/create-from-dsl-modal', () => ({
vi.mock('../create-options/create-from-dsl-modal', () => ({
default: ({ show, onClose, onSuccess, activeTab, dslUrl }: {
show: boolean
onClose: () => void
@ -48,9 +46,7 @@ vi.mock('./create-options/create-from-dsl-modal', () => ({
},
}))
// ============================================================================
// Footer Component Tests
// ============================================================================
describe('Footer', () => {
beforeEach(() => {
@ -60,9 +56,6 @@ describe('Footer', () => {
capturedDslUrl = undefined
})
// --------------------------------------------------------------------------
// Rendering Tests
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
render(<Footer />)
@ -88,9 +81,6 @@ describe('Footer', () => {
})
})
// --------------------------------------------------------------------------
// User Interactions Tests
// --------------------------------------------------------------------------
describe('User Interactions', () => {
it('should open modal when import button is clicked', () => {
render(<Footer />)
@ -104,12 +94,10 @@ describe('Footer', () => {
it('should close modal when onClose is called', () => {
render(<Footer />)
// Open modal
const importButton = screen.getByText(/importDSL/i)
fireEvent.click(importButton)
expect(screen.getByTestId('dsl-modal')).toBeInTheDocument()
// Close modal
const closeButton = screen.getByTestId('close-modal')
fireEvent.click(closeButton)
expect(screen.queryByTestId('dsl-modal')).not.toBeInTheDocument()
@ -118,7 +106,6 @@ describe('Footer', () => {
it('should call invalidDatasetList on success', () => {
render(<Footer />)
// Open modal
const importButton = screen.getByText(/importDSL/i)
fireEvent.click(importButton)
@ -130,9 +117,6 @@ describe('Footer', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have proper container classes', () => {
const { container } = render(<Footer />)
@ -147,9 +131,6 @@ describe('Footer', () => {
})
})
// --------------------------------------------------------------------------
// Memoization Tests
// --------------------------------------------------------------------------
describe('Memoization', () => {
it('should be memoized with React.memo', () => {
const { rerender } = render(<Footer />)
@ -158,9 +139,7 @@ describe('Footer', () => {
})
})
// --------------------------------------------------------------------------
// URL Parameter Tests (Branch Coverage)
// --------------------------------------------------------------------------
describe('URL Parameter Handling', () => {
it('should set activeTab to FROM_URL when dslUrl is present', () => {
mockSearchParams = new URLSearchParams('remoteInstallUrl=https://example.com/dsl')
@ -193,12 +172,10 @@ describe('Footer', () => {
render(<Footer />)
// Open modal
const importButton = screen.getByText(/importDSL/i)
fireEvent.click(importButton)
expect(screen.getByTestId('dsl-modal')).toBeInTheDocument()
// Close modal
const closeButton = screen.getByTestId('close-modal')
fireEvent.click(closeButton)
@ -210,11 +187,9 @@ describe('Footer', () => {
render(<Footer />)
// Open modal
const importButton = screen.getByText(/importDSL/i)
fireEvent.click(importButton)
// Close modal
const closeButton = screen.getByTestId('close-modal')
fireEvent.click(closeButton)

View File

@ -1,15 +1,10 @@
import { render, screen } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import Header from './header'
import Header from '../header'
// ============================================================================
// Header Component Tests
// ============================================================================
describe('Header', () => {
// --------------------------------------------------------------------------
// Rendering Tests
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
render(<Header />)
@ -41,9 +36,6 @@ describe('Header', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have proper container classes', () => {
const { container } = render(<Header />)
@ -58,9 +50,6 @@ describe('Header', () => {
})
})
// --------------------------------------------------------------------------
// Memoization Tests
// --------------------------------------------------------------------------
describe('Memoization', () => {
it('should be memoized with React.memo', () => {
const { rerender } = render(<Header />)

View File

@ -1,35 +1,30 @@
import { render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import CreateFromPipeline from './index'
import CreateFromPipeline from '../index'
// Mock child components to isolate testing
vi.mock('./header', () => ({
vi.mock('../header', () => ({
default: () => <div data-testid="mock-header">Header</div>,
}))
vi.mock('./list', () => ({
vi.mock('../list', () => ({
default: () => <div data-testid="mock-list">List</div>,
}))
vi.mock('./footer', () => ({
vi.mock('../footer', () => ({
default: () => <div data-testid="mock-footer">Footer</div>,
}))
vi.mock('../../base/effect', () => ({
vi.mock('../../../base/effect', () => ({
default: ({ className }: { className?: string }) => (
<div data-testid="mock-effect" className={className}>Effect</div>
),
}))
// ============================================================================
// CreateFromPipeline Component Tests
// ============================================================================
describe('CreateFromPipeline', () => {
// --------------------------------------------------------------------------
// Rendering Tests
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
render(<CreateFromPipeline />)
@ -57,9 +52,6 @@ describe('CreateFromPipeline', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have proper container classes', () => {
const { container } = render(<CreateFromPipeline />)
@ -86,9 +78,7 @@ describe('CreateFromPipeline', () => {
})
})
// --------------------------------------------------------------------------
// Component Order Tests
// --------------------------------------------------------------------------
describe('Component Order', () => {
it('should render components in correct order', () => {
const { container } = render(<CreateFromPipeline />)

View File

@ -1,11 +1,9 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import DSLConfirmModal from './dsl-confirm-modal'
import DSLConfirmModal from '../dsl-confirm-modal'
// ============================================================================
// DSLConfirmModal Component Tests
// ============================================================================
describe('DSLConfirmModal', () => {
const defaultProps = {
@ -17,9 +15,6 @@ describe('DSLConfirmModal', () => {
vi.clearAllMocks()
})
// --------------------------------------------------------------------------
// Rendering Tests
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
render(<DSLConfirmModal {...defaultProps} />)
@ -50,9 +45,7 @@ describe('DSLConfirmModal', () => {
})
})
// --------------------------------------------------------------------------
// Versions Display Tests
// --------------------------------------------------------------------------
describe('Versions Display', () => {
it('should display imported version when provided', () => {
render(
@ -81,9 +74,6 @@ describe('DSLConfirmModal', () => {
})
})
// --------------------------------------------------------------------------
// User Interactions Tests
// --------------------------------------------------------------------------
describe('User Interactions', () => {
it('should call onCancel when cancel button is clicked', () => {
render(<DSLConfirmModal {...defaultProps} />)
@ -114,9 +104,7 @@ describe('DSLConfirmModal', () => {
})
})
// --------------------------------------------------------------------------
// Button State Tests
// --------------------------------------------------------------------------
describe('Button State', () => {
it('should enable confirm button by default', () => {
render(<DSLConfirmModal {...defaultProps} />)
@ -140,9 +128,6 @@ describe('DSLConfirmModal', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have button container with proper styling', () => {
render(<DSLConfirmModal {...defaultProps} />)

View File

@ -1,11 +1,9 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import Header from './header'
import Header from '../header'
// ============================================================================
// Header Component Tests
// ============================================================================
describe('Header', () => {
const defaultProps = {
@ -16,9 +14,6 @@ describe('Header', () => {
vi.clearAllMocks()
})
// --------------------------------------------------------------------------
// Rendering Tests
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
render(<Header {...defaultProps} />)
@ -43,9 +38,6 @@ describe('Header', () => {
})
})
// --------------------------------------------------------------------------
// User Interactions Tests
// --------------------------------------------------------------------------
describe('User Interactions', () => {
it('should call onClose when close button is clicked', () => {
const { container } = render(<Header {...defaultProps} />)
@ -57,9 +49,6 @@ describe('Header', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have proper container styling', () => {
const { container } = render(<Header {...defaultProps} />)
@ -80,9 +69,6 @@ describe('Header', () => {
})
})
// --------------------------------------------------------------------------
// Memoization Tests
// --------------------------------------------------------------------------
describe('Memoization', () => {
it('should be memoized with React.memo', () => {
const { rerender } = render(<Header {...defaultProps} />)

View File

@ -1,13 +1,12 @@
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
import DSLConfirmModal from './dsl-confirm-modal'
import Header from './header'
import CreateFromDSLModal, { CreateFromDSLModalTab } from './index'
import Tab from './tab'
import TabItem from './tab/item'
import Uploader from './uploader'
import DSLConfirmModal from '../dsl-confirm-modal'
import Header from '../header'
import CreateFromDSLModal, { CreateFromDSLModalTab } from '../index'
import Tab from '../tab'
import TabItem from '../tab/item'
import Uploader from '../uploader'
// Mock next/navigation
const mockPush = vi.fn()
vi.mock('next/navigation', () => ({
useRouter: () => ({
@ -15,7 +14,6 @@ vi.mock('next/navigation', () => ({
}),
}))
// Mock service hooks
const mockImportDSL = vi.fn()
const mockImportDSLConfirm = vi.fn()
@ -37,7 +35,6 @@ vi.mock('@/app/components/workflow/plugin-dependency/hooks', () => ({
}),
}))
// Mock toast context
const mockNotify = vi.fn()
vi.mock('use-context-selector', async () => {
@ -48,7 +45,6 @@ vi.mock('use-context-selector', async () => {
}
})
// Test data builders
const createMockFile = (name = 'test.pipeline'): File => {
return new File(['test content'], name, { type: 'application/octet-stream' })
}
@ -88,9 +84,6 @@ describe('CreateFromDSLModal', () => {
mockHandleCheckPluginDependencies.mockReset()
})
// ============================================
// Rendering Tests
// ============================================
describe('Rendering', () => {
it('should render without crashing when show is true', () => {
render(
@ -172,9 +165,6 @@ describe('CreateFromDSLModal', () => {
})
})
// ============================================
// Props Testing
// ============================================
describe('Props', () => {
it('should use FROM_FILE as default activeTab', () => {
render(
@ -232,9 +222,6 @@ describe('CreateFromDSLModal', () => {
})
})
// ============================================
// State Management Tests
// ============================================
describe('State Management', () => {
it('should switch between tabs', () => {
render(
@ -248,7 +235,6 @@ describe('CreateFromDSLModal', () => {
// Initially file tab is active
expect(screen.getByText('app.dslUploader.button')).toBeInTheDocument()
// Click URL tab
fireEvent.click(screen.getByText('app.importFromDSLUrl'))
// URL input should be visible
@ -317,9 +303,7 @@ describe('CreateFromDSLModal', () => {
})
})
// ============================================
// API Call Tests
// ============================================
describe('API Calls', () => {
it('should call importDSL with URL mode when URL tab is active', async () => {
mockImportDSL.mockResolvedValue(createImportDSLResponse())
@ -526,9 +510,7 @@ describe('CreateFromDSLModal', () => {
})
})
// ============================================
// Event Handler Tests
// ============================================
describe('Event Handlers', () => {
it('should call onClose when header close button is clicked', () => {
const onClose = vi.fn()
@ -638,7 +620,6 @@ describe('CreateFromDSLModal', () => {
const importButton = screen.getByText('app.newApp.import').closest('button')!
// Click multiple times rapidly
fireEvent.click(importButton)
fireEvent.click(importButton)
fireEvent.click(importButton)
@ -650,9 +631,6 @@ describe('CreateFromDSLModal', () => {
})
})
// ============================================
// Memoization Tests
// ============================================
describe('Memoization', () => {
it('should correctly compute buttonDisabled based on currentTab and file/URL', () => {
render(
@ -684,9 +662,6 @@ describe('CreateFromDSLModal', () => {
})
})
// ============================================
// Edge Cases Tests
// ============================================
describe('Edge Cases', () => {
it('should handle empty URL gracefully', () => {
render(
@ -842,9 +817,7 @@ describe('CreateFromDSLModal', () => {
})
})
// ============================================
// File Import Tests (covers readFile, handleFile, file mode import)
// ============================================
describe('File Import', () => {
it('should read file content when file is selected', async () => {
mockImportDSL.mockResolvedValue(createImportDSLResponse())
@ -877,7 +850,6 @@ describe('CreateFromDSLModal', () => {
expect(importButton).not.toBeDisabled()
})
// Click import button
const importButton = screen.getByText('app.newApp.import').closest('button')!
fireEvent.click(importButton)
@ -927,9 +899,7 @@ describe('CreateFromDSLModal', () => {
})
})
// ============================================
// DSL Confirm Flow Tests (covers onDSLConfirm)
// ============================================
describe('DSL Confirm Flow', () => {
it('should handle DSL confirm success', async () => {
vi.useFakeTimers({ shouldAdvanceTime: true })
@ -978,7 +948,6 @@ describe('CreateFromDSLModal', () => {
vi.advanceTimersByTime(400)
})
// Click confirm button in error modal
await waitFor(() => {
expect(screen.getByText('app.newApp.Confirm')).toBeInTheDocument()
})
@ -1027,7 +996,6 @@ describe('CreateFromDSLModal', () => {
vi.advanceTimersByTime(400)
})
// Click confirm - should return early since importId is empty
await waitFor(() => {
expect(screen.getByText('app.newApp.Confirm')).toBeInTheDocument()
})
@ -1163,7 +1131,6 @@ describe('CreateFromDSLModal', () => {
// There are two Cancel buttons now (one in main modal footer, one in error modal)
// Find the Cancel button in the error modal context
const cancelButtons = screen.getAllByText('app.newApp.Cancel')
// Click the last Cancel button (the one in the error modal)
fireEvent.click(cancelButtons[cancelButtons.length - 1])
vi.useRealTimers()
@ -1171,9 +1138,7 @@ describe('CreateFromDSLModal', () => {
})
})
// ============================================
// Header Component Tests
// ============================================
describe('Header', () => {
beforeEach(() => {
vi.clearAllMocks()
@ -1206,9 +1171,7 @@ describe('Header', () => {
})
})
// ============================================
// Tab Component Tests
// ============================================
describe('Tab', () => {
beforeEach(() => {
vi.clearAllMocks()
@ -1261,9 +1224,7 @@ describe('Tab', () => {
})
})
// ============================================
// Tab Item Component Tests
// ============================================
describe('TabItem', () => {
beforeEach(() => {
vi.clearAllMocks()
@ -1353,9 +1314,7 @@ describe('TabItem', () => {
})
})
// ============================================
// Uploader Component Tests
// ============================================
describe('Uploader', () => {
beforeEach(() => {
vi.clearAllMocks()
@ -1679,7 +1638,6 @@ describe('Uploader', () => {
// After click, oncancel should be set
})
// Click browse link to trigger selectHandle
const browseLink = screen.getByText('app.dslUploader.browse')
fireEvent.click(browseLink)
@ -1755,9 +1713,7 @@ describe('Uploader', () => {
})
})
// ============================================
// DSLConfirmModal Component Tests
// ============================================
describe('DSLConfirmModal', () => {
beforeEach(() => {
vi.clearAllMocks()
@ -1923,9 +1879,6 @@ describe('DSLConfirmModal', () => {
})
})
// ============================================
// Integration Tests
// ============================================
describe('CreateFromDSLModal Integration', () => {
beforeEach(() => {
vi.clearAllMocks()
@ -1958,7 +1911,6 @@ describe('CreateFromDSLModal Integration', () => {
const input = screen.getByPlaceholderText('app.importFromDSLUrlPlaceholder')
fireEvent.change(input, { target: { value: 'https://example.com/pipeline.yaml' } })
// Click import
const importButton = screen.getByText('app.newApp.import').closest('button')!
fireEvent.click(importButton)
@ -1999,7 +1951,6 @@ describe('CreateFromDSLModal Integration', () => {
const input = screen.getByPlaceholderText('app.importFromDSLUrlPlaceholder')
fireEvent.change(input, { target: { value: 'https://example.com/old-pipeline.yaml' } })
// Click import
const importButton = screen.getByText('app.newApp.import').closest('button')!
fireEvent.click(importButton)

View File

@ -1,9 +1,8 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import Uploader from './uploader'
import Uploader from '../uploader'
// Mock ToastContext
const mockNotify = vi.fn()
vi.mock('@/app/components/base/toast', () => ({
ToastContext: {
@ -17,17 +16,11 @@ vi.mock('use-context-selector', () => ({
useContext: () => ({ notify: mockNotify }),
}))
// ============================================================================
// Test Data Factories
// ============================================================================
const createMockFile = (name = 'test.pipeline', _size = 1024): File => {
return new File(['test content'], name, { type: 'application/octet-stream' })
}
// ============================================================================
// Uploader Component Tests
// ============================================================================
describe('Uploader', () => {
const defaultProps = {
@ -39,9 +32,7 @@ describe('Uploader', () => {
vi.clearAllMocks()
})
// --------------------------------------------------------------------------
// Rendering Tests - No File
// --------------------------------------------------------------------------
describe('Rendering - No File', () => {
it('should render without crashing', () => {
render(<Uploader {...defaultProps} />)
@ -78,9 +69,7 @@ describe('Uploader', () => {
})
})
// --------------------------------------------------------------------------
// Rendering Tests - With File
// --------------------------------------------------------------------------
describe('Rendering - With File', () => {
it('should render file name when file is provided', () => {
const file = createMockFile('my-pipeline.pipeline')
@ -109,9 +98,6 @@ describe('Uploader', () => {
})
})
// --------------------------------------------------------------------------
// User Interactions Tests
// --------------------------------------------------------------------------
describe('User Interactions', () => {
it('should open file dialog when browse is clicked', () => {
render(<Uploader {...defaultProps} />)
@ -151,9 +137,7 @@ describe('Uploader', () => {
})
})
// --------------------------------------------------------------------------
// Custom className Tests
// --------------------------------------------------------------------------
describe('Custom className', () => {
it('should apply custom className', () => {
const { container } = render(<Uploader {...defaultProps} className="custom-class" />)
@ -168,9 +152,6 @@ describe('Uploader', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have proper container styling', () => {
const { container } = render(<Uploader {...defaultProps} />)
@ -192,9 +173,6 @@ describe('Uploader', () => {
})
})
// --------------------------------------------------------------------------
// Memoization Tests
// --------------------------------------------------------------------------
describe('Memoization', () => {
it('should be memoized with React.memo', () => {
const { rerender } = render(<Uploader {...defaultProps} />)

View File

@ -2,9 +2,8 @@ import type { ReactNode } from 'react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { act, renderHook, waitFor } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { CreateFromDSLModalTab, useDSLImport } from './use-dsl-import'
import { CreateFromDSLModalTab, useDSLImport } from '../use-dsl-import'
// Mock next/navigation
const mockPush = vi.fn()
vi.mock('next/navigation', () => ({
useRouter: () => ({
@ -12,7 +11,6 @@ vi.mock('next/navigation', () => ({
}),
}))
// Mock service hooks
const mockImportDSL = vi.fn()
const mockImportDSLConfirm = vi.fn()
@ -34,7 +32,6 @@ vi.mock('@/app/components/workflow/plugin-dependency/hooks', () => ({
}),
}))
// Mock toast context
const mockNotify = vi.fn()
vi.mock('use-context-selector', async () => {
@ -45,7 +42,6 @@ vi.mock('use-context-selector', async () => {
}
})
// Test data builders
const createImportDSLResponse = (overrides = {}) => ({
id: 'import-123',
status: 'completed' as const,

View File

@ -2,11 +2,9 @@ import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { CreateFromDSLModalTab } from '@/app/components/app/create-from-dsl-modal'
import Tab from './index'
import Tab from '../index'
// ============================================================================
// Tab Component Tests
// ============================================================================
describe('Tab', () => {
const defaultProps = {
@ -18,9 +16,6 @@ describe('Tab', () => {
vi.clearAllMocks()
})
// --------------------------------------------------------------------------
// Rendering Tests
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
render(<Tab {...defaultProps} />)
@ -44,9 +39,7 @@ describe('Tab', () => {
})
})
// --------------------------------------------------------------------------
// Active State Tests
// --------------------------------------------------------------------------
describe('Active State', () => {
it('should mark file tab as active when currentTab is FROM_FILE', () => {
const { container } = render(
@ -65,9 +58,6 @@ describe('Tab', () => {
})
})
// --------------------------------------------------------------------------
// User Interactions Tests
// --------------------------------------------------------------------------
describe('User Interactions', () => {
it('should call setCurrentTab with FROM_FILE when file tab is clicked', () => {
render(<Tab {...defaultProps} currentTab={CreateFromDSLModalTab.FROM_URL} />)
@ -96,9 +86,6 @@ describe('Tab', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have proper container styling', () => {
const { container } = render(<Tab {...defaultProps} />)

View File

@ -1,11 +1,9 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import Item from './item'
import Item from '../item'
// ============================================================================
// Item Component Tests
// ============================================================================
describe('Item', () => {
const defaultProps = {
@ -18,9 +16,6 @@ describe('Item', () => {
vi.clearAllMocks()
})
// --------------------------------------------------------------------------
// Rendering Tests
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
render(<Item {...defaultProps} />)
@ -45,9 +40,7 @@ describe('Item', () => {
})
})
// --------------------------------------------------------------------------
// Active State Tests
// --------------------------------------------------------------------------
describe('Active State', () => {
it('should have tertiary text color when inactive', () => {
const { container } = render(<Item {...defaultProps} isActive={false} />)
@ -68,9 +61,6 @@ describe('Item', () => {
})
})
// --------------------------------------------------------------------------
// User Interactions Tests
// --------------------------------------------------------------------------
describe('User Interactions', () => {
it('should call onClick when clicked', () => {
render(<Item {...defaultProps} />)
@ -88,9 +78,6 @@ describe('Item', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have proper container styling', () => {
const { container } = render(<Item {...defaultProps} />)
@ -99,9 +86,6 @@ describe('Item', () => {
})
})
// --------------------------------------------------------------------------
// Memoization Tests
// --------------------------------------------------------------------------
describe('Memoization', () => {
it('should be memoized with React.memo', () => {
const { rerender } = render(<Item {...defaultProps} />)

View File

@ -1,14 +1,13 @@
import { render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import BuiltInPipelineList from './built-in-pipeline-list'
import BuiltInPipelineList from '../built-in-pipeline-list'
// Mock child components
vi.mock('./create-card', () => ({
vi.mock('../create-card', () => ({
default: () => <div data-testid="create-card">CreateCard</div>,
}))
vi.mock('./template-card', () => ({
vi.mock('../template-card', () => ({
default: ({ type, pipeline, showMoreOperations }: { type: string, pipeline: { name: string }, showMoreOperations?: boolean }) => (
<div data-testid="template-card" data-type={type} data-show-more={String(showMoreOperations)}>
{pipeline.name}
@ -19,7 +18,6 @@ vi.mock('./template-card', () => ({
// Configurable locale mock
let mockLocale = 'en-US'
// Mock hooks
vi.mock('@/context/i18n', () => ({
useLocale: () => mockLocale,
}))
@ -36,9 +34,7 @@ vi.mock('@/service/use-pipeline', () => ({
usePipelineTemplateList: (...args: unknown[]) => mockUsePipelineTemplateList(...args),
}))
// ============================================================================
// BuiltInPipelineList Component Tests
// ============================================================================
describe('BuiltInPipelineList', () => {
beforeEach(() => {
@ -46,9 +42,6 @@ describe('BuiltInPipelineList', () => {
mockLocale = 'en-US'
})
// --------------------------------------------------------------------------
// Rendering Tests
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
mockUsePipelineTemplateList.mockReturnValue({
@ -71,9 +64,7 @@ describe('BuiltInPipelineList', () => {
})
})
// --------------------------------------------------------------------------
// Loading State Tests
// --------------------------------------------------------------------------
describe('Loading State', () => {
it('should not render TemplateCards when loading', () => {
mockUsePipelineTemplateList.mockReturnValue({
@ -88,9 +79,7 @@ describe('BuiltInPipelineList', () => {
})
})
// --------------------------------------------------------------------------
// Rendering with Data Tests
// --------------------------------------------------------------------------
describe('Rendering with Data', () => {
it('should render TemplateCard for each pipeline when not loading', () => {
const mockPipelines = [
@ -136,9 +125,7 @@ describe('BuiltInPipelineList', () => {
})
})
// --------------------------------------------------------------------------
// API Call Tests
// --------------------------------------------------------------------------
describe('API Call', () => {
it('should call usePipelineTemplateList with type built-in', () => {
mockUsePipelineTemplateList.mockReturnValue({
@ -154,9 +141,6 @@ describe('BuiltInPipelineList', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have grid layout', () => {
mockUsePipelineTemplateList.mockReturnValue({
@ -181,9 +165,7 @@ describe('BuiltInPipelineList', () => {
})
})
// --------------------------------------------------------------------------
// Locale Handling Tests (Branch Coverage)
// --------------------------------------------------------------------------
describe('Locale Handling', () => {
it('should use zh-Hans locale when set', () => {
mockLocale = 'zh-Hans'
@ -247,9 +229,7 @@ describe('BuiltInPipelineList', () => {
})
})
// --------------------------------------------------------------------------
// Empty Data Tests
// --------------------------------------------------------------------------
describe('Empty Data', () => {
it('should handle null pipeline_templates', () => {
mockUsePipelineTemplateList.mockReturnValue({

View File

@ -1,9 +1,8 @@
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import CreateCard from './create-card'
import CreateCard from '../create-card'
// Mock next/navigation
const mockPush = vi.fn()
vi.mock('next/navigation', () => ({
useRouter: () => ({ push: mockPush }),
@ -14,14 +13,12 @@ vi.mock('@/app/components/base/amplitude', () => ({
trackEvent: vi.fn(),
}))
// Mock Toast
vi.mock('@/app/components/base/toast', () => ({
default: {
notify: vi.fn(),
},
}))
// Mock service hooks
const mockCreateEmptyDataset = vi.fn()
const mockInvalidDatasetList = vi.fn()
@ -35,18 +32,13 @@ vi.mock('@/service/knowledge/use-dataset', () => ({
useInvalidDatasetList: () => mockInvalidDatasetList,
}))
// ============================================================================
// CreateCard Component Tests
// ============================================================================
describe('CreateCard', () => {
beforeEach(() => {
vi.clearAllMocks()
})
// --------------------------------------------------------------------------
// Rendering Tests
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
render(<CreateCard />)
@ -66,9 +58,6 @@ describe('CreateCard', () => {
})
})
// --------------------------------------------------------------------------
// User Interactions Tests
// --------------------------------------------------------------------------
describe('User Interactions', () => {
it('should call createEmptyDataset when clicked', async () => {
mockCreateEmptyDataset.mockImplementation((_data, callbacks) => {
@ -154,9 +143,6 @@ describe('CreateCard', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have proper card styling', () => {
const { container } = render(<CreateCard />)
@ -177,9 +163,6 @@ describe('CreateCard', () => {
})
})
// --------------------------------------------------------------------------
// Memoization Tests
// --------------------------------------------------------------------------
describe('Memoization', () => {
it('should be memoized with React.memo', () => {
const { rerender } = render(<CreateCard />)

View File

@ -1,10 +1,10 @@
import { render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import CustomizedList from './customized-list'
import CustomizedList from '../customized-list'
// Mock TemplateCard
vi.mock('./template-card', () => ({
vi.mock('../template-card', () => ({
default: ({ type, pipeline }: { type: string, pipeline: { name: string } }) => (
<div data-testid="template-card" data-type={type}>
{pipeline.name}
@ -18,18 +18,14 @@ vi.mock('@/service/use-pipeline', () => ({
usePipelineTemplateList: (...args: unknown[]) => mockUsePipelineTemplateList(...args),
}))
// ============================================================================
// CustomizedList Component Tests
// ============================================================================
describe('CustomizedList', () => {
beforeEach(() => {
vi.clearAllMocks()
})
// --------------------------------------------------------------------------
// Loading State Tests
// --------------------------------------------------------------------------
describe('Loading State', () => {
it('should return null when loading', () => {
mockUsePipelineTemplateList.mockReturnValue({
@ -42,9 +38,7 @@ describe('CustomizedList', () => {
})
})
// --------------------------------------------------------------------------
// Empty State Tests
// --------------------------------------------------------------------------
describe('Empty State', () => {
it('should return null when list is empty', () => {
mockUsePipelineTemplateList.mockReturnValue({
@ -67,9 +61,7 @@ describe('CustomizedList', () => {
})
})
// --------------------------------------------------------------------------
// Rendering with Data Tests
// --------------------------------------------------------------------------
describe('Rendering with Data', () => {
it('should render title when list has items', () => {
mockUsePipelineTemplateList.mockReturnValue({
@ -116,9 +108,7 @@ describe('CustomizedList', () => {
})
})
// --------------------------------------------------------------------------
// API Call Tests
// --------------------------------------------------------------------------
describe('API Call', () => {
it('should call usePipelineTemplateList with type customized', () => {
mockUsePipelineTemplateList.mockReturnValue({
@ -131,9 +121,6 @@ describe('CustomizedList', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have grid layout for cards', () => {
mockUsePipelineTemplateList.mockReturnValue({

View File

@ -1,25 +1,19 @@
import { render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import List from './index'
import List from '../index'
// Mock child components
vi.mock('./built-in-pipeline-list', () => ({
vi.mock('../built-in-pipeline-list', () => ({
default: () => <div data-testid="built-in-list">BuiltInPipelineList</div>,
}))
vi.mock('./customized-list', () => ({
vi.mock('../customized-list', () => ({
default: () => <div data-testid="customized-list">CustomizedList</div>,
}))
// ============================================================================
// List Component Tests
// ============================================================================
describe('List', () => {
// --------------------------------------------------------------------------
// Rendering Tests
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
render(<List />)
@ -37,9 +31,6 @@ describe('List', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have proper container classes', () => {
const { container } = render(<List />)
@ -54,9 +45,7 @@ describe('List', () => {
})
})
// --------------------------------------------------------------------------
// Component Order Tests
// --------------------------------------------------------------------------
describe('Component Order', () => {
it('should render BuiltInPipelineList before CustomizedList', () => {
const { container } = render(<List />)

View File

@ -1,11 +1,9 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import Actions from './actions'
import Actions from '../actions'
// ============================================================================
// Actions Component Tests
// ============================================================================
describe('Actions', () => {
const defaultProps = {
@ -21,9 +19,6 @@ describe('Actions', () => {
vi.clearAllMocks()
})
// --------------------------------------------------------------------------
// Rendering Tests
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
render(<Actions {...defaultProps} />)
@ -53,9 +48,7 @@ describe('Actions', () => {
})
})
// --------------------------------------------------------------------------
// More Operations Tests
// --------------------------------------------------------------------------
describe('More Operations', () => {
it('should render more operations button when showMoreOperations is true', () => {
const { container } = render(<Actions {...defaultProps} showMoreOperations={true} />)
@ -72,9 +65,6 @@ describe('Actions', () => {
})
})
// --------------------------------------------------------------------------
// User Interactions Tests
// --------------------------------------------------------------------------
describe('User Interactions', () => {
it('should call onApplyTemplate when choose button is clicked', () => {
render(<Actions {...defaultProps} />)
@ -95,9 +85,7 @@ describe('Actions', () => {
})
})
// --------------------------------------------------------------------------
// Button Variants Tests
// --------------------------------------------------------------------------
describe('Button Variants', () => {
it('should have primary variant for choose button', () => {
render(<Actions {...defaultProps} />)
@ -112,9 +100,6 @@ describe('Actions', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have absolute positioning', () => {
const { container } = render(<Actions {...defaultProps} />)
@ -141,9 +126,6 @@ describe('Actions', () => {
})
})
// --------------------------------------------------------------------------
// Memoization Tests
// --------------------------------------------------------------------------
describe('Memoization', () => {
it('should be memoized with React.memo', () => {
const { rerender } = render(<Actions {...defaultProps} />)

View File

@ -3,11 +3,7 @@ import { render, screen } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import { ChunkingMode } from '@/models/datasets'
import Content from './content'
// ============================================================================
// Test Data Factories
// ============================================================================
import Content from '../content'
const createIconInfo = (overrides: Partial<IconInfo> = {}): IconInfo => ({
icon_type: 'emoji',
@ -25,9 +21,7 @@ const createImageIconInfo = (overrides: Partial<IconInfo> = {}): IconInfo => ({
...overrides,
})
// ============================================================================
// Content Component Tests
// ============================================================================
describe('Content', () => {
const defaultProps = {
@ -37,9 +31,6 @@ describe('Content', () => {
chunkStructure: 'text' as ChunkingMode,
}
// --------------------------------------------------------------------------
// Rendering Tests
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
render(<Content {...defaultProps} />)
@ -75,9 +66,7 @@ describe('Content', () => {
})
})
// --------------------------------------------------------------------------
// Icon Rendering Tests
// --------------------------------------------------------------------------
describe('Icon Rendering', () => {
it('should render emoji icon correctly', () => {
const { container } = render(<Content {...defaultProps} />)
@ -104,9 +93,7 @@ describe('Content', () => {
})
})
// --------------------------------------------------------------------------
// Chunk Structure Tests
// --------------------------------------------------------------------------
describe('Chunk Structure', () => {
it('should handle text chunk structure', () => {
render(<Content {...defaultProps} chunkStructure={ChunkingMode.text} />)
@ -132,9 +119,6 @@ describe('Content', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have proper header layout', () => {
const { container } = render(<Content {...defaultProps} />)
@ -155,9 +139,6 @@ describe('Content', () => {
})
})
// --------------------------------------------------------------------------
// Edge Cases Tests
// --------------------------------------------------------------------------
describe('Edge Cases', () => {
it('should handle empty name', () => {
render(<Content {...defaultProps} name="" />)
@ -186,9 +167,6 @@ describe('Content', () => {
})
})
// --------------------------------------------------------------------------
// Memoization Tests
// --------------------------------------------------------------------------
describe('Memoization', () => {
it('should be memoized with React.memo', () => {
const { rerender } = render(<Content {...defaultProps} />)

View File

@ -4,9 +4,8 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import Toast from '@/app/components/base/toast'
import { ChunkingMode } from '@/models/datasets'
import EditPipelineInfo from './edit-pipeline-info'
import EditPipelineInfo from '../edit-pipeline-info'
// Mock service hooks
const mockUpdatePipeline = vi.fn()
const mockInvalidCustomizedTemplateList = vi.fn()
@ -17,7 +16,6 @@ vi.mock('@/service/use-pipeline', () => ({
useInvalidCustomizedTemplateList: () => mockInvalidCustomizedTemplateList,
}))
// Mock Toast
vi.mock('@/app/components/base/toast', () => ({
default: {
notify: vi.fn(),
@ -51,10 +49,6 @@ vi.mock('@/app/components/base/app-icon-picker', () => ({
},
}))
// ============================================================================
// Test Data Factories
// ============================================================================
const createPipelineTemplate = (overrides: Partial<PipelineTemplate> = {}): PipelineTemplate => ({
id: 'pipeline-1',
name: 'Test Pipeline',
@ -84,9 +78,7 @@ const createImagePipelineTemplate = (): PipelineTemplate => ({
position: 1,
})
// ============================================================================
// EditPipelineInfo Component Tests
// ============================================================================
describe('EditPipelineInfo', () => {
const defaultProps = {
@ -100,9 +92,6 @@ describe('EditPipelineInfo', () => {
_mockOnClose = undefined
})
// --------------------------------------------------------------------------
// Rendering Tests
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
render(<EditPipelineInfo {...defaultProps} />)
@ -149,9 +138,6 @@ describe('EditPipelineInfo', () => {
})
})
// --------------------------------------------------------------------------
// User Interactions Tests
// --------------------------------------------------------------------------
describe('User Interactions', () => {
it('should call onClose when close button is clicked', () => {
const { container } = render(<EditPipelineInfo {...defaultProps} />)
@ -238,9 +224,6 @@ describe('EditPipelineInfo', () => {
})
})
// --------------------------------------------------------------------------
// Validation Tests
// --------------------------------------------------------------------------
describe('Validation', () => {
it('should show error toast when name is empty', async () => {
render(<EditPipelineInfo {...defaultProps} />)
@ -274,9 +257,7 @@ describe('EditPipelineInfo', () => {
})
})
// --------------------------------------------------------------------------
// Icon Types Tests (Branch Coverage for lines 29-30, 36-37)
// --------------------------------------------------------------------------
describe('Icon Types', () => {
it('should initialize with emoji icon type when pipeline has emoji icon', () => {
const { container } = render(<EditPipelineInfo {...defaultProps} />)
@ -409,7 +390,6 @@ describe('EditPipelineInfo', () => {
const selectEmojiButton = screen.getByTestId('select-emoji')
fireEvent.click(selectEmojiButton)
// Save
const saveButton = screen.getByText(/operation\.save/i)
fireEvent.click(saveButton)
@ -440,7 +420,6 @@ describe('EditPipelineInfo', () => {
const selectImageButton = screen.getByTestId('select-image')
fireEvent.click(selectImageButton)
// Save
const saveButton = screen.getByText(/operation\.save/i)
fireEvent.click(saveButton)
@ -458,9 +437,7 @@ describe('EditPipelineInfo', () => {
})
})
// --------------------------------------------------------------------------
// AppIconPicker Tests (Branch Coverage)
// --------------------------------------------------------------------------
describe('AppIconPicker', () => {
it('should not show picker initially', () => {
render(<EditPipelineInfo {...defaultProps} />)
@ -525,7 +502,6 @@ describe('EditPipelineInfo', () => {
const selectEmojiButton = screen.getByTestId('select-emoji')
fireEvent.click(selectEmojiButton)
// Save
const saveButton = screen.getByText(/operation\.save/i)
fireEvent.click(saveButton)
@ -557,7 +533,6 @@ describe('EditPipelineInfo', () => {
const selectImageButton = screen.getByTestId('select-image')
fireEvent.click(selectImageButton)
// Save
const saveButton = screen.getByText(/operation\.save/i)
fireEvent.click(saveButton)
@ -576,9 +551,7 @@ describe('EditPipelineInfo', () => {
})
})
// --------------------------------------------------------------------------
// Save Request Tests
// --------------------------------------------------------------------------
describe('Save Request', () => {
it('should send correct request with emoji icon', async () => {
mockUpdatePipeline.mockImplementation((_data, callbacks) => {
@ -635,9 +608,6 @@ describe('EditPipelineInfo', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have proper container styling', () => {
const { container } = render(<EditPipelineInfo {...defaultProps} />)
@ -652,9 +622,6 @@ describe('EditPipelineInfo', () => {
})
})
// --------------------------------------------------------------------------
// Memoization Tests
// --------------------------------------------------------------------------
describe('Memoization', () => {
it('should be memoized with React.memo', () => {
const { rerender } = render(<EditPipelineInfo {...defaultProps} />)

View File

@ -3,9 +3,8 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import Toast from '@/app/components/base/toast'
import { ChunkingMode } from '@/models/datasets'
import TemplateCard from './index'
import TemplateCard from '../index'
// Mock next/navigation
const mockPush = vi.fn()
vi.mock('next/navigation', () => ({
useRouter: () => ({ push: mockPush }),
@ -16,7 +15,6 @@ vi.mock('@/app/components/base/amplitude', () => ({
trackEvent: vi.fn(),
}))
// Mock Toast
vi.mock('@/app/components/base/toast', () => ({
default: {
notify: vi.fn(),
@ -61,7 +59,7 @@ let _capturedHandleDelete: (() => void) | undefined
let _capturedHandleExportDSL: (() => void) | undefined
let _capturedOpenEditModal: (() => void) | undefined
vi.mock('./actions', () => ({
vi.mock('../actions', () => ({
default: ({ onApplyTemplate, handleShowTemplateDetails, showMoreOperations, openEditModal, handleExportDSL, handleDelete }: {
onApplyTemplate: () => void
handleShowTemplateDetails: () => void
@ -90,7 +88,7 @@ vi.mock('./actions', () => ({
}))
// Mock EditPipelineInfo component
vi.mock('./edit-pipeline-info', () => ({
vi.mock('../edit-pipeline-info', () => ({
default: ({ onClose }: { onClose: () => void }) => (
<div data-testid="edit-pipeline-info">
<button data-testid="edit-close" onClick={onClose}>Close</button>
@ -99,7 +97,7 @@ vi.mock('./edit-pipeline-info', () => ({
}))
// Mock Details component
vi.mock('./details', () => ({
vi.mock('../details', () => ({
default: ({ onClose, onApplyTemplate }: { onClose: () => void, onApplyTemplate: () => void }) => (
<div data-testid="details-component">
<button data-testid="details-close" onClick={onClose}>Close</button>
@ -108,7 +106,6 @@ vi.mock('./details', () => ({
),
}))
// Mock service hooks
const mockCreateDataset = vi.fn()
const mockInvalidDatasetList = vi.fn()
const mockGetPipelineTemplateInfo = vi.fn()
@ -151,10 +148,6 @@ vi.mock('@/app/components/workflow/plugin-dependency/hooks', () => ({
}),
}))
// ============================================================================
// Test Data Factories
// ============================================================================
const createPipelineTemplate = (overrides: Partial<PipelineTemplate> = {}): PipelineTemplate => ({
id: 'pipeline-1',
name: 'Test Pipeline',
@ -170,9 +163,7 @@ const createPipelineTemplate = (overrides: Partial<PipelineTemplate> = {}): Pipe
...overrides,
})
// ============================================================================
// TemplateCard Component Tests
// ============================================================================
describe('TemplateCard', () => {
const defaultProps = {
@ -197,9 +188,6 @@ describe('TemplateCard', () => {
})
})
// --------------------------------------------------------------------------
// Rendering Tests
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
render(<TemplateCard {...defaultProps} />)
@ -230,9 +218,7 @@ describe('TemplateCard', () => {
})
})
// --------------------------------------------------------------------------
// Use Template Flow Tests
// --------------------------------------------------------------------------
describe('Use Template Flow', () => {
it('should show error when template info fetch fails', async () => {
mockGetPipelineTemplateInfo.mockResolvedValue({ data: null })
@ -331,9 +317,7 @@ describe('TemplateCard', () => {
})
})
// --------------------------------------------------------------------------
// Details Modal Tests
// --------------------------------------------------------------------------
describe('Details Modal', () => {
it('should open details modal when details button is clicked', async () => {
render(<TemplateCard {...defaultProps} />)
@ -385,9 +369,7 @@ describe('TemplateCard', () => {
})
})
// --------------------------------------------------------------------------
// Pipeline ID Branch Tests
// --------------------------------------------------------------------------
describe('Pipeline ID Branch', () => {
it('should call handleCheckPluginDependencies when pipeline_id is present', async () => {
mockCreateDataset.mockImplementation((_data, callbacks) => {
@ -437,9 +419,7 @@ describe('TemplateCard', () => {
})
})
// --------------------------------------------------------------------------
// Export DSL Tests (Branch Coverage)
// --------------------------------------------------------------------------
describe('Export DSL', () => {
it('should not export when already exporting', async () => {
mockIsExporting = true
@ -522,9 +502,7 @@ describe('TemplateCard', () => {
})
})
// --------------------------------------------------------------------------
// Delete Flow Tests
// --------------------------------------------------------------------------
describe('Delete Flow', () => {
it('should show confirm dialog when delete is clicked', async () => {
render(<TemplateCard {...defaultProps} />)
@ -620,9 +598,7 @@ describe('TemplateCard', () => {
})
})
// --------------------------------------------------------------------------
// Edit Modal Tests
// --------------------------------------------------------------------------
describe('Edit Modal', () => {
it('should open edit modal when edit button is clicked', async () => {
render(<TemplateCard {...defaultProps} />)
@ -652,9 +628,7 @@ describe('TemplateCard', () => {
})
})
// --------------------------------------------------------------------------
// Props Tests
// --------------------------------------------------------------------------
describe('Props', () => {
it('should show more operations when showMoreOperations is true', () => {
render(<TemplateCard {...defaultProps} showMoreOperations={true} />)
@ -687,9 +661,6 @@ describe('TemplateCard', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have proper card styling', () => {
const { container } = render(<TemplateCard {...defaultProps} />)
@ -710,9 +681,6 @@ describe('TemplateCard', () => {
})
})
// --------------------------------------------------------------------------
// Memoization Tests
// --------------------------------------------------------------------------
describe('Memoization', () => {
it('should be memoized with React.memo', () => {
const { rerender } = render(<TemplateCard {...defaultProps} />)

View File

@ -1,11 +1,9 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import Operations from './operations'
import Operations from '../operations'
// ============================================================================
// Operations Component Tests
// ============================================================================
describe('Operations', () => {
const defaultProps = {
@ -18,9 +16,6 @@ describe('Operations', () => {
vi.clearAllMocks()
})
// --------------------------------------------------------------------------
// Rendering Tests
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
render(<Operations {...defaultProps} />)
@ -41,9 +36,6 @@ describe('Operations', () => {
})
})
// --------------------------------------------------------------------------
// User Interactions Tests
// --------------------------------------------------------------------------
describe('User Interactions', () => {
it('should call openEditModal when edit is clicked', () => {
render(<Operations {...defaultProps} />)
@ -106,9 +98,6 @@ describe('Operations', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have divider between sections', () => {
const { container } = render(<Operations {...defaultProps} />)
@ -131,9 +120,6 @@ describe('Operations', () => {
})
})
// --------------------------------------------------------------------------
// Memoization Tests
// --------------------------------------------------------------------------
describe('Memoization', () => {
it('should be memoized with React.memo', () => {
const { rerender } = render(<Operations {...defaultProps} />)

View File

@ -1,12 +1,10 @@
import { render, screen } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import ChunkStructureCard from './chunk-structure-card'
import { EffectColor } from './types'
import ChunkStructureCard from '../chunk-structure-card'
import { EffectColor } from '../types'
// ============================================================================
// ChunkStructureCard Component Tests
// ============================================================================
describe('ChunkStructureCard', () => {
const defaultProps = {
@ -16,9 +14,6 @@ describe('ChunkStructureCard', () => {
effectColor: EffectColor.indigo,
}
// --------------------------------------------------------------------------
// Rendering Tests
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
render(<ChunkStructureCard {...defaultProps} />)
@ -53,9 +48,7 @@ describe('ChunkStructureCard', () => {
})
})
// --------------------------------------------------------------------------
// Effect Colors Tests
// --------------------------------------------------------------------------
describe('Effect Colors', () => {
it('should apply indigo effect color', () => {
const { container } = render(
@ -90,9 +83,7 @@ describe('ChunkStructureCard', () => {
})
})
// --------------------------------------------------------------------------
// Icon Background Tests
// --------------------------------------------------------------------------
describe('Icon Background', () => {
it('should apply indigo icon background', () => {
const { container } = render(
@ -119,9 +110,7 @@ describe('ChunkStructureCard', () => {
})
})
// --------------------------------------------------------------------------
// Custom className Tests
// --------------------------------------------------------------------------
describe('Custom className', () => {
it('should apply custom className', () => {
const { container } = render(
@ -140,9 +129,6 @@ describe('ChunkStructureCard', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have proper card styling', () => {
const { container } = render(<ChunkStructureCard {...defaultProps} />)
@ -169,9 +155,6 @@ describe('ChunkStructureCard', () => {
})
})
// --------------------------------------------------------------------------
// Memoization Tests
// --------------------------------------------------------------------------
describe('Memoization', () => {
it('should be memoized with React.memo', () => {
const { rerender } = render(<ChunkStructureCard {...defaultProps} />)

View File

@ -2,17 +2,13 @@ import { renderHook } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import { ChunkingMode } from '@/models/datasets'
import { useChunkStructureConfig } from './hooks'
import { EffectColor } from './types'
import { useChunkStructureConfig } from '../hooks'
import { EffectColor } from '../types'
// ============================================================================
// useChunkStructureConfig Hook Tests
// ============================================================================
describe('useChunkStructureConfig', () => {
// --------------------------------------------------------------------------
// Return Value Tests
// --------------------------------------------------------------------------
describe('Return Value', () => {
it('should return config object', () => {
const { result } = renderHook(() => useChunkStructureConfig())
@ -36,9 +32,7 @@ describe('useChunkStructureConfig', () => {
})
})
// --------------------------------------------------------------------------
// Text/General Config Tests
// --------------------------------------------------------------------------
describe('Text/General Config', () => {
it('should have title for text mode', () => {
const { result } = renderHook(() => useChunkStructureConfig())
@ -61,9 +55,7 @@ describe('useChunkStructureConfig', () => {
})
})
// --------------------------------------------------------------------------
// Parent-Child Config Tests
// --------------------------------------------------------------------------
describe('Parent-Child Config', () => {
it('should have title for parent-child mode', () => {
const { result } = renderHook(() => useChunkStructureConfig())
@ -86,9 +78,7 @@ describe('useChunkStructureConfig', () => {
})
})
// --------------------------------------------------------------------------
// Q&A Config Tests
// --------------------------------------------------------------------------
describe('Q&A Config', () => {
it('should have title for qa mode', () => {
const { result } = renderHook(() => useChunkStructureConfig())
@ -111,9 +101,7 @@ describe('useChunkStructureConfig', () => {
})
})
// --------------------------------------------------------------------------
// Option Structure Tests
// --------------------------------------------------------------------------
describe('Option Structure', () => {
it('should have all required fields in each option', () => {
const { result } = renderHook(() => useChunkStructureConfig())

View File

@ -1,7 +1,7 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import Details from './index'
import Details from '../index'
// Mock WorkflowPreview
vi.mock('@/app/components/workflow/workflow-preview', () => ({
@ -12,16 +12,11 @@ vi.mock('@/app/components/workflow/workflow-preview', () => ({
),
}))
// Mock service hook
const mockUsePipelineTemplateById = vi.fn()
vi.mock('@/service/use-pipeline', () => ({
usePipelineTemplateById: (...args: unknown[]) => mockUsePipelineTemplateById(...args),
}))
// ============================================================================
// Test Data Factories
// ============================================================================
const createPipelineTemplateInfo = (overrides = {}) => ({
name: 'Test Pipeline',
description: 'This is a test pipeline',
@ -52,9 +47,7 @@ const createImageIconPipelineInfo = () => ({
},
})
// ============================================================================
// Details Component Tests
// ============================================================================
describe('Details', () => {
const defaultProps = {
@ -68,9 +61,7 @@ describe('Details', () => {
vi.clearAllMocks()
})
// --------------------------------------------------------------------------
// Loading State Tests
// --------------------------------------------------------------------------
describe('Loading State', () => {
it('should show loading when data is not available', () => {
mockUsePipelineTemplateById.mockReturnValue({
@ -83,9 +74,6 @@ describe('Details', () => {
})
})
// --------------------------------------------------------------------------
// Rendering Tests
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing when data is available', () => {
mockUsePipelineTemplateById.mockReturnValue({
@ -180,9 +168,6 @@ describe('Details', () => {
})
})
// --------------------------------------------------------------------------
// User Interactions Tests
// --------------------------------------------------------------------------
describe('User Interactions', () => {
it('should call onClose when close button is clicked', () => {
mockUsePipelineTemplateById.mockReturnValue({
@ -209,9 +194,7 @@ describe('Details', () => {
})
})
// --------------------------------------------------------------------------
// Icon Types Tests
// --------------------------------------------------------------------------
describe('Icon Types', () => {
it('should handle emoji icon type', () => {
mockUsePipelineTemplateById.mockReturnValue({
@ -245,9 +228,7 @@ describe('Details', () => {
})
})
// --------------------------------------------------------------------------
// API Call Tests
// --------------------------------------------------------------------------
describe('API Call', () => {
it('should call usePipelineTemplateById with correct params', () => {
mockUsePipelineTemplateById.mockReturnValue({
@ -276,9 +257,7 @@ describe('Details', () => {
})
})
// --------------------------------------------------------------------------
// Chunk Structure Tests
// --------------------------------------------------------------------------
describe('Chunk Structure', () => {
it('should render chunk structure card for text mode', () => {
mockUsePipelineTemplateById.mockReturnValue({
@ -308,9 +287,6 @@ describe('Details', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have proper container styling', () => {
mockUsePipelineTemplateById.mockReturnValue({
@ -343,9 +319,6 @@ describe('Details', () => {
})
})
// --------------------------------------------------------------------------
// Memoization Tests
// --------------------------------------------------------------------------
describe('Memoization', () => {
it('should be memoized with React.memo', () => {
mockUsePipelineTemplateById.mockReturnValue({

View File

@ -0,0 +1,141 @@
import type { ReactNode } from 'react'
import type { IndexingStatusResponse } from '@/models/datasets'
import { render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { DataSourceType } from '@/models/datasets'
import IndexingProgressItem from '../indexing-progress-item'
vi.mock('@/app/components/billing/priority-label', () => ({
default: () => <span data-testid="priority-label">Priority</span>,
}))
vi.mock('../../../common/document-file-icon', () => ({
default: ({ name }: { name?: string }) => <span data-testid="file-icon">{name}</span>,
}))
vi.mock('@/app/components/base/notion-icon', () => ({
default: ({ src }: { src?: string }) => <span data-testid="notion-icon">{src}</span>,
}))
vi.mock('@/app/components/base/tooltip', () => ({
default: ({ children, popupContent }: { children?: ReactNode, popupContent?: ReactNode }) => (
<div data-testid="tooltip" data-content={popupContent}>{children}</div>
),
}))
describe('IndexingProgressItem', () => {
beforeEach(() => {
vi.clearAllMocks()
})
const makeDetail = (overrides: Partial<IndexingStatusResponse> = {}): IndexingStatusResponse => ({
id: 'doc-1',
indexing_status: 'indexing',
processing_started_at: 0,
parsing_completed_at: 0,
cleaning_completed_at: 0,
splitting_completed_at: 0,
completed_at: null,
paused_at: null,
error: null,
stopped_at: null,
completed_segments: 50,
total_segments: 100,
...overrides,
})
it('should render name and progress for embedding status', () => {
render(
<IndexingProgressItem
detail={makeDetail()}
name="test.pdf"
sourceType={DataSourceType.FILE}
/>,
)
// Name appears in both the file-icon mock and the display div; verify at least one
expect(screen.getAllByText('test.pdf').length).toBeGreaterThanOrEqual(1)
expect(screen.getByText('50%')).toBeInTheDocument()
})
it('should render file icon for FILE source type', () => {
render(
<IndexingProgressItem
detail={makeDetail()}
name="report.docx"
sourceType={DataSourceType.FILE}
/>,
)
expect(screen.getByTestId('file-icon')).toBeInTheDocument()
})
it('should render notion icon for NOTION source type', () => {
render(
<IndexingProgressItem
detail={makeDetail()}
name="My Page"
sourceType={DataSourceType.NOTION}
notionIcon="notion-icon-url"
/>,
)
expect(screen.getByTestId('notion-icon')).toBeInTheDocument()
})
it('should render success icon for completed status', () => {
render(
<IndexingProgressItem
detail={makeDetail({ indexing_status: 'completed' })}
name="done.pdf"
/>,
)
// No progress percentage should be shown for completed
expect(screen.queryByText(/%/)).not.toBeInTheDocument()
})
it('should render error icon with tooltip for error status', () => {
render(
<IndexingProgressItem
detail={makeDetail({ indexing_status: 'error', error: 'Parse failed' })}
name="broken.pdf"
/>,
)
expect(screen.getByTestId('tooltip')).toHaveAttribute('data-content', 'Parse failed')
})
it('should show priority label when billing is enabled', () => {
render(
<IndexingProgressItem
detail={makeDetail()}
name="test.pdf"
enableBilling={true}
/>,
)
expect(screen.getByTestId('priority-label')).toBeInTheDocument()
})
it('should not show priority label when billing is disabled', () => {
render(
<IndexingProgressItem
detail={makeDetail()}
name="test.pdf"
enableBilling={false}
/>,
)
expect(screen.queryByTestId('priority-label')).not.toBeInTheDocument()
})
it('should apply error styling for error status', () => {
const { container } = render(
<IndexingProgressItem
detail={makeDetail({ indexing_status: 'error' })}
name="error.pdf"
/>,
)
const wrapper = container.firstChild as HTMLElement
expect(wrapper.className).toContain('bg-state-destructive-hover-alt')
})
})

View File

@ -0,0 +1,145 @@
import type { ProcessRuleResponse } from '@/models/datasets'
import { render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { ProcessMode } from '@/models/datasets'
import { RETRIEVE_METHOD } from '@/types/app'
import RuleDetail from '../rule-detail'
vi.mock('@/app/components/datasets/documents/detail/metadata', () => ({
FieldInfo: ({ label, displayedValue }: { label: string, displayedValue: string }) => (
<div data-testid="field-info">
<span data-testid="field-label">{label}</span>
<span data-testid="field-value">{displayedValue}</span>
</div>
),
}))
vi.mock('../../icons', () => ({
indexMethodIcon: { economical: '/icons/economical.svg', high_quality: '/icons/hq.svg' },
retrievalIcon: { fullText: '/icons/ft.svg', hybrid: '/icons/hy.svg', vector: '/icons/vec.svg' },
}))
describe('RuleDetail', () => {
beforeEach(() => {
vi.clearAllMocks()
})
const makeSourceData = (overrides: Partial<ProcessRuleResponse> = {}): ProcessRuleResponse => ({
mode: ProcessMode.general,
rules: {
segmentation: { separator: '\n', max_tokens: 500, chunk_overlap: 50 },
pre_processing_rules: [
{ id: 'remove_extra_spaces', enabled: true },
{ id: 'remove_urls_emails', enabled: false },
],
},
...overrides,
} as ProcessRuleResponse)
it('should render mode, segment length, text cleaning, index mode, and retrieval fields', () => {
render(
<RuleDetail
sourceData={makeSourceData()}
indexingType="high_quality"
retrievalMethod={RETRIEVE_METHOD.semantic}
/>,
)
const fieldInfos = screen.getAllByTestId('field-info')
// mode, segmentLength, textCleaning, indexMode, retrievalSetting = 5
expect(fieldInfos.length).toBe(5)
})
it('should display "custom" for general mode', () => {
render(
<RuleDetail
sourceData={makeSourceData({ mode: ProcessMode.general })}
indexingType="high_quality"
/>,
)
const values = screen.getAllByTestId('field-value')
expect(values[0].textContent).toContain('embedding.custom')
})
it('should display hierarchical mode with parent mode label', () => {
render(
<RuleDetail
sourceData={makeSourceData({
mode: ProcessMode.parentChild,
rules: {
parent_mode: 'paragraph',
segmentation: { separator: '\n', max_tokens: 1000, chunk_overlap: 50 },
subchunk_segmentation: { max_tokens: 200 },
pre_processing_rules: [],
} as unknown as ProcessRuleResponse['rules'],
})}
indexingType="high_quality"
/>,
)
const values = screen.getAllByTestId('field-value')
expect(values[0].textContent).toContain('embedding.hierarchical')
})
it('should display "-" when no sourceData mode', () => {
render(
<RuleDetail
sourceData={makeSourceData({ mode: undefined as unknown as ProcessMode })}
indexingType="high_quality"
/>,
)
const values = screen.getAllByTestId('field-value')
expect(values[0].textContent).toBe('-')
})
it('should display segment length for general mode', () => {
render(
<RuleDetail
sourceData={makeSourceData()}
indexingType="high_quality"
/>,
)
const values = screen.getAllByTestId('field-value')
expect(values[1].textContent).toBe('500')
})
it('should display enabled pre-processing rules', () => {
render(
<RuleDetail
sourceData={makeSourceData()}
indexingType="high_quality"
/>,
)
const values = screen.getAllByTestId('field-value')
// Only remove_extra_spaces is enabled
expect(values[2].textContent).toContain('stepTwo.removeExtraSpaces')
})
it('should display economical index mode', () => {
render(
<RuleDetail
sourceData={makeSourceData()}
indexingType="economy"
/>,
)
const values = screen.getAllByTestId('field-value')
// Index mode field is 4th (index 3)
expect(values[3].textContent).toContain('stepTwo.economical')
})
it('should display qualified index mode for high_quality', () => {
render(
<RuleDetail
sourceData={makeSourceData()}
indexingType="high_quality"
/>,
)
const values = screen.getAllByTestId('field-value')
expect(values[3].textContent).toContain('stepTwo.qualified')
})
})

View File

@ -0,0 +1,29 @@
import { render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import UpgradeBanner from '../upgrade-banner'
vi.mock('@/app/components/base/icons/src/vender/solid/general', () => ({
ZapFast: (props: React.SVGProps<SVGSVGElement>) => <svg data-testid="zap-icon" {...props} />,
}))
vi.mock('@/app/components/billing/upgrade-btn', () => ({
default: ({ loc }: { loc: string }) => <button data-testid="upgrade-btn" data-loc={loc}>Upgrade</button>,
}))
describe('UpgradeBanner', () => {
beforeEach(() => {
vi.clearAllMocks()
})
it('should render the banner with icon, text, and upgrade button', () => {
render(<UpgradeBanner />)
expect(screen.getByTestId('zap-icon')).toBeInTheDocument()
expect(screen.getByText('billing.plansCommon.documentProcessingPriorityUpgrade')).toBeInTheDocument()
expect(screen.getByTestId('upgrade-btn')).toBeInTheDocument()
})
it('should pass correct loc to UpgradeBtn', () => {
render(<UpgradeBanner />)
expect(screen.getByTestId('upgrade-btn')).toHaveAttribute('data-loc', 'knowledge-speed-up')
})
})

View File

@ -0,0 +1,179 @@
import { act, renderHook } from '@testing-library/react'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { useIndexingStatusPolling } from '../use-indexing-status-polling'
const mockFetchIndexingStatusBatch = vi.fn()
vi.mock('@/service/datasets', () => ({
fetchIndexingStatusBatch: (...args: unknown[]) => mockFetchIndexingStatusBatch(...args),
}))
describe('useIndexingStatusPolling', () => {
beforeEach(() => {
vi.useFakeTimers()
vi.clearAllMocks()
})
afterEach(() => {
vi.useRealTimers()
})
const defaultParams = { datasetId: 'ds-1', batchId: 'batch-1' }
it('should initialize with empty status list', async () => {
mockFetchIndexingStatusBatch.mockReturnValue(new Promise(() => {}))
const { result } = renderHook(() => useIndexingStatusPolling(defaultParams))
expect(result.current.statusList).toEqual([])
expect(result.current.isEmbedding).toBe(false)
expect(result.current.isEmbeddingCompleted).toBe(false)
})
it('should fetch status on mount and update state', async () => {
mockFetchIndexingStatusBatch.mockResolvedValue({
data: [{ indexing_status: 'indexing', completed_segments: 5, total_segments: 10 }],
})
const { result } = renderHook(() => useIndexingStatusPolling(defaultParams))
// Flush the resolved promise
await act(async () => {
await vi.advanceTimersByTimeAsync(0)
})
expect(mockFetchIndexingStatusBatch).toHaveBeenCalledWith({
datasetId: 'ds-1',
batchId: 'batch-1',
})
expect(result.current.statusList).toHaveLength(1)
expect(result.current.isEmbedding).toBe(true)
expect(result.current.isEmbeddingCompleted).toBe(false)
})
it('should stop polling when all completed', async () => {
mockFetchIndexingStatusBatch.mockResolvedValue({
data: [{ indexing_status: 'completed' }],
})
const { result } = renderHook(() => useIndexingStatusPolling(defaultParams))
await act(async () => {
await vi.advanceTimersByTimeAsync(0)
})
expect(result.current.isEmbeddingCompleted).toBe(true)
expect(result.current.isEmbedding).toBe(false)
// Should not schedule another poll
const callCount = mockFetchIndexingStatusBatch.mock.calls.length
await act(async () => {
await vi.advanceTimersByTimeAsync(5000)
})
expect(mockFetchIndexingStatusBatch).toHaveBeenCalledTimes(callCount)
})
it('should continue polling on fetch error', async () => {
mockFetchIndexingStatusBatch
.mockRejectedValueOnce(new Error('network'))
.mockResolvedValueOnce({
data: [{ indexing_status: 'completed' }],
})
const { result } = renderHook(() => useIndexingStatusPolling(defaultParams))
// First call: rejects
await act(async () => {
await vi.advanceTimersByTimeAsync(0)
})
// Advance past polling interval for retry
await act(async () => {
await vi.advanceTimersByTimeAsync(2500)
})
expect(result.current.isEmbeddingCompleted).toBe(true)
})
it('should detect embedding statuses', async () => {
mockFetchIndexingStatusBatch.mockResolvedValue({
data: [
{ indexing_status: 'splitting' },
{ indexing_status: 'parsing' },
],
})
const { result } = renderHook(() => useIndexingStatusPolling(defaultParams))
await act(async () => {
await vi.advanceTimersByTimeAsync(0)
})
expect(result.current.isEmbedding).toBe(true)
expect(result.current.isEmbeddingCompleted).toBe(false)
})
it('should detect mixed statuses (some completed, some embedding)', async () => {
mockFetchIndexingStatusBatch.mockResolvedValue({
data: [
{ indexing_status: 'completed' },
{ indexing_status: 'indexing' },
],
})
const { result } = renderHook(() => useIndexingStatusPolling(defaultParams))
await act(async () => {
await vi.advanceTimersByTimeAsync(0)
})
expect(result.current.statusList).toHaveLength(2)
expect(result.current.isEmbedding).toBe(true)
expect(result.current.isEmbeddingCompleted).toBe(false)
})
it('should cleanup on unmount', async () => {
mockFetchIndexingStatusBatch.mockResolvedValue({
data: [{ indexing_status: 'indexing' }],
})
const { unmount } = renderHook(() => useIndexingStatusPolling(defaultParams))
await act(async () => {
await vi.advanceTimersByTimeAsync(0)
})
const callCount = mockFetchIndexingStatusBatch.mock.calls.length
unmount()
await act(async () => {
await vi.advanceTimersByTimeAsync(5000)
})
expect(mockFetchIndexingStatusBatch).toHaveBeenCalledTimes(callCount)
})
it('should treat error and paused as completed statuses', async () => {
mockFetchIndexingStatusBatch.mockResolvedValue({
data: [
{ indexing_status: 'error' },
{ indexing_status: 'paused' },
],
})
const { result } = renderHook(() => useIndexingStatusPolling(defaultParams))
await act(async () => {
await vi.advanceTimersByTimeAsync(0)
})
expect(result.current.isEmbeddingCompleted).toBe(true)
expect(result.current.isEmbedding).toBe(false)
})
it('should poll at 2500ms intervals', async () => {
mockFetchIndexingStatusBatch.mockResolvedValue({
data: [{ indexing_status: 'indexing' }],
})
renderHook(() => useIndexingStatusPolling(defaultParams))
await act(async () => {
await vi.advanceTimersByTimeAsync(0)
})
expect(mockFetchIndexingStatusBatch).toHaveBeenCalledTimes(1)
await act(async () => {
await vi.advanceTimersByTimeAsync(2500)
})
expect(mockFetchIndexingStatusBatch).toHaveBeenCalledTimes(2)
})
})

View File

@ -0,0 +1,140 @@
import type { DataSourceInfo, FullDocumentDetail, IndexingStatusResponse } from '@/models/datasets'
import { describe, expect, it } from 'vitest'
import { createDocumentLookup, getFileType, getSourcePercent, isLegacyDataSourceInfo, isSourceEmbedding } from '../utils'
describe('isLegacyDataSourceInfo', () => {
it('should return true when upload_file object exists', () => {
const info = { upload_file: { id: '1', name: 'test.pdf' } } as unknown as DataSourceInfo
expect(isLegacyDataSourceInfo(info)).toBe(true)
})
it('should return false when upload_file is absent', () => {
const info = { notion_page_icon: 'icon' } as unknown as DataSourceInfo
expect(isLegacyDataSourceInfo(info)).toBe(false)
})
it('should return false for null', () => {
expect(isLegacyDataSourceInfo(null as unknown as DataSourceInfo)).toBe(false)
})
it('should return false when upload_file is a string', () => {
const info = { upload_file: 'not-an-object' } as unknown as DataSourceInfo
expect(isLegacyDataSourceInfo(info)).toBe(false)
})
})
describe('isSourceEmbedding', () => {
const embeddingStatuses = ['indexing', 'splitting', 'parsing', 'cleaning', 'waiting']
const nonEmbeddingStatuses = ['completed', 'error', 'paused', 'unknown']
it.each(embeddingStatuses)('should return true for status "%s"', (status) => {
expect(isSourceEmbedding({ indexing_status: status } as IndexingStatusResponse)).toBe(true)
})
it.each(nonEmbeddingStatuses)('should return false for status "%s"', (status) => {
expect(isSourceEmbedding({ indexing_status: status } as IndexingStatusResponse)).toBe(false)
})
})
describe('getSourcePercent', () => {
it('should calculate correct percentage', () => {
expect(getSourcePercent({ completed_segments: 50, total_segments: 100 } as IndexingStatusResponse)).toBe(50)
})
it('should return 0 when total is 0', () => {
expect(getSourcePercent({ completed_segments: 0, total_segments: 0 } as IndexingStatusResponse)).toBe(0)
})
it('should cap at 100', () => {
expect(getSourcePercent({ completed_segments: 150, total_segments: 100 } as IndexingStatusResponse)).toBe(100)
})
it('should round to nearest integer', () => {
expect(getSourcePercent({ completed_segments: 1, total_segments: 3 } as IndexingStatusResponse)).toBe(33)
})
it('should handle undefined segments as 0', () => {
expect(getSourcePercent({} as IndexingStatusResponse)).toBe(0)
})
})
describe('getFileType', () => {
it('should extract extension from filename', () => {
expect(getFileType('document.pdf')).toBe('pdf')
})
it('should return last extension for multi-dot names', () => {
expect(getFileType('archive.tar.gz')).toBe('gz')
})
it('should default to "txt" for undefined', () => {
expect(getFileType(undefined)).toBe('txt')
})
it('should default to "txt" for empty string', () => {
expect(getFileType('')).toBe('txt')
})
})
describe('createDocumentLookup', () => {
const documents = [
{
id: 'doc-1',
name: 'test.pdf',
data_source_type: 'upload_file',
data_source_info: {
upload_file: { id: 'f1', name: 'test.pdf' },
notion_page_icon: undefined,
},
},
{
id: 'doc-2',
name: 'notion-page',
data_source_type: 'notion_import',
data_source_info: {
upload_file: { id: 'f2', name: '' },
notion_page_icon: 'https://icon.url',
},
},
] as unknown as FullDocumentDetail[]
it('should get document by id', () => {
const lookup = createDocumentLookup(documents)
expect(lookup.getDocument('doc-1')).toBe(documents[0])
})
it('should return undefined for non-existent id', () => {
const lookup = createDocumentLookup(documents)
expect(lookup.getDocument('non-existent')).toBeUndefined()
})
it('should get name by id', () => {
const lookup = createDocumentLookup(documents)
expect(lookup.getName('doc-1')).toBe('test.pdf')
})
it('should get source type by id', () => {
const lookup = createDocumentLookup(documents)
expect(lookup.getSourceType('doc-1')).toBe('upload_file')
})
it('should get notion icon for legacy data source', () => {
const lookup = createDocumentLookup(documents)
expect(lookup.getNotionIcon('doc-2')).toBe('https://icon.url')
})
it('should return undefined notion icon for non-legacy info', () => {
const docs = [{
id: 'doc-3',
data_source_info: { some_other: 'field' },
}] as unknown as FullDocumentDetail[]
const lookup = createDocumentLookup(docs)
expect(lookup.getNotionIcon('doc-3')).toBeUndefined()
})
it('should handle empty documents list', () => {
const lookup = createDocumentLookup([])
expect(lookup.getDocument('any')).toBeUndefined()
expect(lookup.getName('any')).toBeUndefined()
})
})

View File

@ -3,7 +3,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import * as React from 'react'
import { createEmptyDataset } from '@/service/datasets'
import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
import EmptyDatasetCreationModal from './index'
import EmptyDatasetCreationModal from '../index'
// Mock Next.js router
const mockPush = vi.fn()
@ -54,15 +54,11 @@ describe('EmptyDatasetCreationModal', () => {
} as ReturnType<typeof createEmptyDataset> extends Promise<infer T> ? T : never)
})
// ==========================================
// Rendering Tests - Verify component renders correctly
// ==========================================
describe('Rendering', () => {
it('should render without crashing when show is true', () => {
// Arrange
const props = createDefaultProps()
// Act
render(<EmptyDatasetCreationModal {...props} />)
// Assert - Check modal title is rendered
@ -70,13 +66,10 @@ describe('EmptyDatasetCreationModal', () => {
})
it('should render modal with correct elements', () => {
// Arrange
const props = createDefaultProps()
// Act
render(<EmptyDatasetCreationModal {...props} />)
// Assert
expect(screen.getByText('datasetCreation.stepOne.modal.title')).toBeInTheDocument()
expect(screen.getByText('datasetCreation.stepOne.modal.tip')).toBeInTheDocument()
expect(screen.getByText('datasetCreation.stepOne.modal.input')).toBeInTheDocument()
@ -86,22 +79,17 @@ describe('EmptyDatasetCreationModal', () => {
})
it('should render input with empty value initially', () => {
// Arrange
const props = createDefaultProps()
// Act
render(<EmptyDatasetCreationModal {...props} />)
// Assert
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder') as HTMLInputElement
expect(input.value).toBe('')
})
it('should not render modal content when show is false', () => {
// Arrange
const props = createDefaultProps({ show: false })
// Act
render(<EmptyDatasetCreationModal {...props} />)
// Assert - Modal should not be visible (check for absence of title)
@ -109,29 +97,22 @@ describe('EmptyDatasetCreationModal', () => {
})
})
// ==========================================
// Props Testing - Verify all prop variations work correctly
// ==========================================
describe('Props', () => {
describe('show prop', () => {
it('should show modal when show is true', () => {
// Arrange & Act
render(<EmptyDatasetCreationModal show={true} onHide={vi.fn()} />)
// Assert
expect(screen.getByText('datasetCreation.stepOne.modal.title')).toBeInTheDocument()
})
it('should hide modal when show is false', () => {
// Arrange & Act
render(<EmptyDatasetCreationModal show={false} onHide={vi.fn()} />)
// Assert
expect(screen.queryByText('datasetCreation.stepOne.modal.title')).not.toBeInTheDocument()
})
it('should toggle visibility when show prop changes', () => {
// Arrange
const onHide = vi.fn()
const { rerender } = render(<EmptyDatasetCreationModal show={false} onHide={onHide} />)
@ -146,20 +127,16 @@ describe('EmptyDatasetCreationModal', () => {
describe('onHide prop', () => {
it('should call onHide when cancel button is clicked', () => {
// Arrange
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
// Act
const cancelButton = screen.getByText('datasetCreation.stepOne.modal.cancelButton')
fireEvent.click(cancelButton)
// Assert
expect(mockOnHide).toHaveBeenCalledTimes(1)
})
it('should call onHide when close icon is clicked', async () => {
// Arrange
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
@ -172,31 +149,24 @@ describe('EmptyDatasetCreationModal', () => {
expect(closeButton).toBeInTheDocument()
fireEvent.click(closeButton!)
// Assert
expect(mockOnHide).toHaveBeenCalledTimes(1)
})
})
})
// ==========================================
// State Management - Test input state updates
// ==========================================
describe('State Management', () => {
it('should update input value when user types', () => {
// Arrange
const props = createDefaultProps()
render(<EmptyDatasetCreationModal {...props} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder') as HTMLInputElement
// Act
fireEvent.change(input, { target: { value: 'My Dataset' } })
// Assert
expect(input.value).toBe('My Dataset')
})
it('should persist input value when modal is hidden and shown again via rerender', () => {
// Arrange
const onHide = vi.fn()
const { rerender } = render(<EmptyDatasetCreationModal show={true} onHide={onHide} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder') as HTMLInputElement
@ -215,12 +185,10 @@ describe('EmptyDatasetCreationModal', () => {
})
it('should handle consecutive input changes', () => {
// Arrange
const props = createDefaultProps()
render(<EmptyDatasetCreationModal {...props} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder') as HTMLInputElement
// Act & Assert
fireEvent.change(input, { target: { value: 'A' } })
expect(input.value).toBe('A')
@ -232,29 +200,23 @@ describe('EmptyDatasetCreationModal', () => {
})
})
// ==========================================
// User Interactions - Test event handlers
// ==========================================
describe('User Interactions', () => {
it('should submit form when confirm button is clicked with valid input', async () => {
// Arrange
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
// Act
fireEvent.change(input, { target: { value: 'Valid Dataset Name' } })
fireEvent.click(confirmButton)
// Assert
await waitFor(() => {
expect(mockCreateEmptyDataset).toHaveBeenCalledWith({ name: 'Valid Dataset Name' })
})
})
it('should show error notification when input is empty', async () => {
// Arrange
const props = createDefaultProps()
render(<EmptyDatasetCreationModal {...props} />)
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
@ -262,7 +224,6 @@ describe('EmptyDatasetCreationModal', () => {
// Act - Click confirm without entering a name
fireEvent.click(confirmButton)
// Assert
await waitFor(() => {
expect(mockNotify).toHaveBeenCalledWith({
type: 'error',
@ -273,7 +234,6 @@ describe('EmptyDatasetCreationModal', () => {
})
it('should show error notification when input exceeds 40 characters', async () => {
// Arrange
const props = createDefaultProps()
render(<EmptyDatasetCreationModal {...props} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
@ -284,7 +244,6 @@ describe('EmptyDatasetCreationModal', () => {
fireEvent.change(input, { target: { value: longName } })
fireEvent.click(confirmButton)
// Assert
await waitFor(() => {
expect(mockNotify).toHaveBeenCalledWith({
type: 'error',
@ -295,7 +254,6 @@ describe('EmptyDatasetCreationModal', () => {
})
it('should allow exactly 40 characters', async () => {
// Arrange
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
@ -306,94 +264,76 @@ describe('EmptyDatasetCreationModal', () => {
fireEvent.change(input, { target: { value: exactLengthName } })
fireEvent.click(confirmButton)
// Assert
await waitFor(() => {
expect(mockCreateEmptyDataset).toHaveBeenCalledWith({ name: exactLengthName })
})
})
it('should close modal on cancel button click', () => {
// Arrange
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
const cancelButton = screen.getByText('datasetCreation.stepOne.modal.cancelButton')
// Act
fireEvent.click(cancelButton)
// Assert
expect(mockOnHide).toHaveBeenCalledTimes(1)
})
})
// ==========================================
// API Calls - Test API interactions
// ==========================================
describe('API Calls', () => {
it('should call createEmptyDataset with correct parameters', async () => {
// Arrange
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
// Act
fireEvent.change(input, { target: { value: 'New Dataset' } })
fireEvent.click(confirmButton)
// Assert
await waitFor(() => {
expect(mockCreateEmptyDataset).toHaveBeenCalledWith({ name: 'New Dataset' })
})
})
it('should call invalidDatasetList after successful creation', async () => {
// Arrange
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
// Act
fireEvent.change(input, { target: { value: 'Test Dataset' } })
fireEvent.click(confirmButton)
// Assert
await waitFor(() => {
expect(mockInvalidDatasetList).toHaveBeenCalled()
})
})
it('should call onHide after successful creation', async () => {
// Arrange
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
// Act
fireEvent.change(input, { target: { value: 'Test Dataset' } })
fireEvent.click(confirmButton)
// Assert
await waitFor(() => {
expect(mockOnHide).toHaveBeenCalled()
})
})
it('should show error notification on API failure', async () => {
// Arrange
mockCreateEmptyDataset.mockRejectedValue(new Error('API Error'))
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
// Act
fireEvent.change(input, { target: { value: 'Test Dataset' } })
fireEvent.click(confirmButton)
// Assert
await waitFor(() => {
expect(mockNotify).toHaveBeenCalledWith({
type: 'error',
@ -403,14 +343,12 @@ describe('EmptyDatasetCreationModal', () => {
})
it('should not call onHide on API failure', async () => {
// Arrange
mockCreateEmptyDataset.mockRejectedValue(new Error('API Error'))
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
// Act
fireEvent.change(input, { target: { value: 'Test Dataset' } })
fireEvent.click(confirmButton)
@ -423,18 +361,15 @@ describe('EmptyDatasetCreationModal', () => {
})
it('should not invalidate dataset list on API failure', async () => {
// Arrange
mockCreateEmptyDataset.mockRejectedValue(new Error('API Error'))
const props = createDefaultProps()
render(<EmptyDatasetCreationModal {...props} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
// Act
fireEvent.change(input, { target: { value: 'Test Dataset' } })
fireEvent.click(confirmButton)
// Assert
await waitFor(() => {
expect(mockNotify).toHaveBeenCalled()
})
@ -442,12 +377,9 @@ describe('EmptyDatasetCreationModal', () => {
})
})
// ==========================================
// Router Navigation - Test Next.js router
// ==========================================
describe('Router Navigation', () => {
it('should navigate to dataset documents page after successful creation', async () => {
// Arrange
mockCreateEmptyDataset.mockResolvedValue({
id: 'test-dataset-456',
name: 'Test',
@ -457,18 +389,15 @@ describe('EmptyDatasetCreationModal', () => {
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
// Act
fireEvent.change(input, { target: { value: 'Test' } })
fireEvent.click(confirmButton)
// Assert
await waitFor(() => {
expect(mockPush).toHaveBeenCalledWith('/datasets/test-dataset-456/documents')
})
})
it('should not navigate on validation error', async () => {
// Arrange
const props = createDefaultProps()
render(<EmptyDatasetCreationModal {...props} />)
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
@ -476,7 +405,6 @@ describe('EmptyDatasetCreationModal', () => {
// Act - Click confirm with empty input
fireEvent.click(confirmButton)
// Assert
await waitFor(() => {
expect(mockNotify).toHaveBeenCalled()
})
@ -484,18 +412,15 @@ describe('EmptyDatasetCreationModal', () => {
})
it('should not navigate on API error', async () => {
// Arrange
mockCreateEmptyDataset.mockRejectedValue(new Error('API Error'))
const props = createDefaultProps()
render(<EmptyDatasetCreationModal {...props} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
// Act
fireEvent.change(input, { target: { value: 'Test' } })
fireEvent.click(confirmButton)
// Assert
await waitFor(() => {
expect(mockNotify).toHaveBeenCalled()
})
@ -503,12 +428,9 @@ describe('EmptyDatasetCreationModal', () => {
})
})
// ==========================================
// Edge Cases - Test boundary conditions and error handling
// ==========================================
describe('Edge Cases', () => {
it('should handle whitespace-only input as valid (component behavior)', async () => {
// Arrange
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
@ -525,41 +447,34 @@ describe('EmptyDatasetCreationModal', () => {
})
it('should handle special characters in input', async () => {
// Arrange
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
// Act
fireEvent.change(input, { target: { value: 'Test @#$% Dataset!' } })
fireEvent.click(confirmButton)
// Assert
await waitFor(() => {
expect(mockCreateEmptyDataset).toHaveBeenCalledWith({ name: 'Test @#$% Dataset!' })
})
})
it('should handle Unicode characters in input', async () => {
// Arrange
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
// Act
fireEvent.change(input, { target: { value: '数据集测试 🚀' } })
fireEvent.click(confirmButton)
// Assert
await waitFor(() => {
expect(mockCreateEmptyDataset).toHaveBeenCalledWith({ name: '数据集测试 🚀' })
})
})
it('should handle input at exactly 40 character boundary', async () => {
// Arrange
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
@ -570,14 +485,12 @@ describe('EmptyDatasetCreationModal', () => {
fireEvent.change(input, { target: { value: name40Chars } })
fireEvent.click(confirmButton)
// Assert
await waitFor(() => {
expect(mockCreateEmptyDataset).toHaveBeenCalledWith({ name: name40Chars })
})
})
it('should reject input at 41 character boundary', async () => {
// Arrange
const props = createDefaultProps()
render(<EmptyDatasetCreationModal {...props} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
@ -588,7 +501,6 @@ describe('EmptyDatasetCreationModal', () => {
fireEvent.change(input, { target: { value: name41Chars } })
fireEvent.click(confirmButton)
// Assert
await waitFor(() => {
expect(mockNotify).toHaveBeenCalledWith({
type: 'error',
@ -599,7 +511,6 @@ describe('EmptyDatasetCreationModal', () => {
})
it('should handle rapid consecutive submits', async () => {
// Arrange
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
@ -618,13 +529,11 @@ describe('EmptyDatasetCreationModal', () => {
})
it('should handle input with leading/trailing spaces', async () => {
// Arrange
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
// Act
fireEvent.change(input, { target: { value: ' Dataset Name ' } })
fireEvent.click(confirmButton)
@ -635,13 +544,11 @@ describe('EmptyDatasetCreationModal', () => {
})
it('should handle newline characters in input (browser strips newlines)', async () => {
// Arrange
const mockOnHide = vi.fn()
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
// Act
fireEvent.change(input, { target: { value: 'Line1\nLine2' } })
fireEvent.click(confirmButton)
@ -652,20 +559,15 @@ describe('EmptyDatasetCreationModal', () => {
})
})
// ==========================================
// Validation Tests - Test input validation
// ==========================================
describe('Validation', () => {
it('should not submit when input is empty string', async () => {
// Arrange
const props = createDefaultProps()
render(<EmptyDatasetCreationModal {...props} />)
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
// Act
fireEvent.click(confirmButton)
// Assert
await waitFor(() => {
expect(mockNotify).toHaveBeenCalledWith({
type: 'error',
@ -675,13 +577,11 @@ describe('EmptyDatasetCreationModal', () => {
})
it('should validate length before calling API', async () => {
// Arrange
const props = createDefaultProps()
render(<EmptyDatasetCreationModal {...props} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
// Act
fireEvent.change(input, { target: { value: 'A'.repeat(50) } })
fireEvent.click(confirmButton)
@ -696,7 +596,6 @@ describe('EmptyDatasetCreationModal', () => {
})
it('should validate empty string before length check', async () => {
// Arrange
const props = createDefaultProps()
render(<EmptyDatasetCreationModal {...props} />)
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
@ -714,12 +613,9 @@ describe('EmptyDatasetCreationModal', () => {
})
})
// ==========================================
// Integration Tests - Test complete flows
// ==========================================
describe('Integration', () => {
it('should complete full successful creation flow', async () => {
// Arrange
const mockOnHide = vi.fn()
mockCreateEmptyDataset.mockResolvedValue({
id: 'new-id-789',
@ -729,7 +625,6 @@ describe('EmptyDatasetCreationModal', () => {
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
// Act
fireEvent.change(input, { target: { value: 'Complete Flow Test' } })
fireEvent.click(confirmButton)
@ -747,14 +642,12 @@ describe('EmptyDatasetCreationModal', () => {
})
it('should handle error flow correctly', async () => {
// Arrange
const mockOnHide = vi.fn()
mockCreateEmptyDataset.mockRejectedValue(new Error('Server Error'))
render(<EmptyDatasetCreationModal show={true} onHide={mockOnHide} />)
const input = screen.getByPlaceholderText('datasetCreation.stepOne.modal.placeholder')
const confirmButton = screen.getByText('datasetCreation.stepOne.modal.confirmButton')
// Act
fireEvent.change(input, { target: { value: 'Error Test' } })
fireEvent.click(confirmButton)

View File

@ -2,7 +2,7 @@ import type { MockedFunction } from 'vitest'
import type { CustomFile as File } from '@/models/datasets'
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
import { fetchFilePreview } from '@/service/common'
import FilePreview from './index'
import FilePreview from '../index'
// Mock the fetchFilePreview service
vi.mock('@/service/common', () => ({
@ -48,9 +48,7 @@ const findLoadingSpinner = (container: HTMLElement) => {
return container.querySelector('.spin-animation')
}
// ============================================================================
// FilePreview Component Tests
// ============================================================================
describe('FilePreview', () => {
beforeEach(() => {
vi.clearAllMocks()
@ -58,33 +56,25 @@ describe('FilePreview', () => {
mockFetchFilePreview.mockResolvedValue({ content: 'Preview content here' })
})
// --------------------------------------------------------------------------
// Rendering Tests - Verify component renders properly
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', async () => {
// Arrange & Act
renderFilePreview()
// Assert
await waitFor(() => {
expect(screen.getByText('datasetCreation.stepOne.filePreview')).toBeInTheDocument()
})
})
it('should render file preview header', async () => {
// Arrange & Act
renderFilePreview()
// Assert
expect(screen.getByText('datasetCreation.stepOne.filePreview')).toBeInTheDocument()
})
it('should render close button with XMarkIcon', async () => {
// Arrange & Act
const { container } = renderFilePreview()
// Assert
const closeButton = container.querySelector('.cursor-pointer')
expect(closeButton).toBeInTheDocument()
const xMarkIcon = closeButton?.querySelector('svg')
@ -92,42 +82,32 @@ describe('FilePreview', () => {
})
it('should render file name without extension', async () => {
// Arrange
const file = createMockFile({ name: 'document.pdf' })
// Act
renderFilePreview({ file })
// Assert
await waitFor(() => {
expect(screen.getByText('document')).toBeInTheDocument()
})
})
it('should render file extension', async () => {
// Arrange
const file = createMockFile({ extension: 'pdf' })
// Act
renderFilePreview({ file })
// Assert
expect(screen.getByText('.pdf')).toBeInTheDocument()
})
it('should apply correct CSS classes to container', async () => {
// Arrange & Act
const { container } = renderFilePreview()
// Assert
const wrapper = container.firstChild as HTMLElement
expect(wrapper).toHaveClass('h-full')
})
})
// --------------------------------------------------------------------------
// Loading State Tests
// --------------------------------------------------------------------------
describe('Loading State', () => {
it('should show loading indicator initially', async () => {
// Arrange - Delay API response to keep loading state
@ -135,7 +115,6 @@ describe('FilePreview', () => {
() => new Promise(resolve => setTimeout(() => resolve({ content: 'test' }), 100)),
)
// Act
const { container } = renderFilePreview()
// Assert - Loading should be visible initially (using spin-animation class)
@ -144,13 +123,10 @@ describe('FilePreview', () => {
})
it('should hide loading indicator after content loads', async () => {
// Arrange
mockFetchFilePreview.mockResolvedValue({ content: 'Loaded content' })
// Act
const { container } = renderFilePreview()
// Assert
await waitFor(() => {
expect(screen.getByText('Loaded content')).toBeInTheDocument()
})
@ -160,7 +136,6 @@ describe('FilePreview', () => {
})
it('should show loading when file changes', async () => {
// Arrange
const file1 = createMockFile({ id: 'file-1', name: 'file1.txt' })
const file2 = createMockFile({ id: 'file-2', name: 'file2.txt' })
@ -207,48 +182,36 @@ describe('FilePreview', () => {
})
})
// --------------------------------------------------------------------------
// API Call Tests
// --------------------------------------------------------------------------
describe('API Calls', () => {
it('should call fetchFilePreview with correct fileID', async () => {
// Arrange
const file = createMockFile({ id: 'test-file-id' })
// Act
renderFilePreview({ file })
// Assert
await waitFor(() => {
expect(mockFetchFilePreview).toHaveBeenCalledWith({ fileID: 'test-file-id' })
})
})
it('should not call fetchFilePreview when file is undefined', async () => {
// Arrange & Act
renderFilePreview({ file: undefined })
// Assert
expect(mockFetchFilePreview).not.toHaveBeenCalled()
})
it('should not call fetchFilePreview when file has no id', async () => {
// Arrange
const file = createMockFile({ id: undefined })
// Act
renderFilePreview({ file })
// Assert
expect(mockFetchFilePreview).not.toHaveBeenCalled()
})
it('should call fetchFilePreview again when file changes', async () => {
// Arrange
const file1 = createMockFile({ id: 'file-1' })
const file2 = createMockFile({ id: 'file-2' })
// Act
const { rerender } = render(
<FilePreview file={file1} hidePreview={vi.fn()} />,
)
@ -259,7 +222,6 @@ describe('FilePreview', () => {
rerender(<FilePreview file={file2} hidePreview={vi.fn()} />)
// Assert
await waitFor(() => {
expect(mockFetchFilePreview).toHaveBeenCalledWith({ fileID: 'file-2' })
expect(mockFetchFilePreview).toHaveBeenCalledTimes(2)
@ -267,23 +229,18 @@ describe('FilePreview', () => {
})
it('should handle API success and display content', async () => {
// Arrange
mockFetchFilePreview.mockResolvedValue({ content: 'File preview content from API' })
// Act
renderFilePreview()
// Assert
await waitFor(() => {
expect(screen.getByText('File preview content from API')).toBeInTheDocument()
})
})
it('should handle API error gracefully', async () => {
// Arrange
mockFetchFilePreview.mockRejectedValue(new Error('Network error'))
// Act
const { container } = renderFilePreview()
// Assert - Component should not crash, loading may persist
@ -295,10 +252,8 @@ describe('FilePreview', () => {
})
it('should handle empty content response', async () => {
// Arrange
mockFetchFilePreview.mockResolvedValue({ content: '' })
// Act
const { container } = renderFilePreview()
// Assert - Should still render without loading
@ -309,29 +264,21 @@ describe('FilePreview', () => {
})
})
// --------------------------------------------------------------------------
// User Interactions Tests
// --------------------------------------------------------------------------
describe('User Interactions', () => {
it('should call hidePreview when close button is clicked', async () => {
// Arrange
const hidePreview = vi.fn()
const { container } = renderFilePreview({ hidePreview })
// Act
const closeButton = container.querySelector('.cursor-pointer') as HTMLElement
fireEvent.click(closeButton)
// Assert
expect(hidePreview).toHaveBeenCalledTimes(1)
})
it('should call hidePreview with event object when clicked', async () => {
// Arrange
const hidePreview = vi.fn()
const { container } = renderFilePreview({ hidePreview })
// Act
const closeButton = container.querySelector('.cursor-pointer') as HTMLElement
fireEvent.click(closeButton)
@ -341,52 +288,40 @@ describe('FilePreview', () => {
})
it('should handle multiple clicks on close button', async () => {
// Arrange
const hidePreview = vi.fn()
const { container } = renderFilePreview({ hidePreview })
// Act
const closeButton = container.querySelector('.cursor-pointer') as HTMLElement
fireEvent.click(closeButton)
fireEvent.click(closeButton)
fireEvent.click(closeButton)
// Assert
expect(hidePreview).toHaveBeenCalledTimes(3)
})
})
// --------------------------------------------------------------------------
// State Management Tests
// --------------------------------------------------------------------------
describe('State Management', () => {
it('should initialize with loading state true', async () => {
// Arrange - Keep loading indefinitely (never resolves)
mockFetchFilePreview.mockImplementation(() => new Promise(() => { /* intentionally empty */ }))
// Act
const { container } = renderFilePreview()
// Assert
const loadingElement = findLoadingSpinner(container)
expect(loadingElement).toBeInTheDocument()
})
it('should update previewContent state after successful fetch', async () => {
// Arrange
mockFetchFilePreview.mockResolvedValue({ content: 'New preview content' })
// Act
renderFilePreview()
// Assert
await waitFor(() => {
expect(screen.getByText('New preview content')).toBeInTheDocument()
})
})
it('should reset loading to true when file changes', async () => {
// Arrange
const file1 = createMockFile({ id: 'file-1' })
const file2 = createMockFile({ id: 'file-2' })
@ -394,7 +329,6 @@ describe('FilePreview', () => {
.mockResolvedValueOnce({ content: 'Content 1' })
.mockImplementationOnce(() => new Promise(() => { /* never resolves */ }))
// Act
const { rerender, container } = render(
<FilePreview file={file1} hidePreview={vi.fn()} />,
)
@ -414,7 +348,6 @@ describe('FilePreview', () => {
})
it('should preserve content until new content loads', async () => {
// Arrange
const file1 = createMockFile({ id: 'file-1' })
const file2 = createMockFile({ id: 'file-2' })
@ -424,7 +357,6 @@ describe('FilePreview', () => {
.mockResolvedValueOnce({ content: 'Content 1' })
.mockImplementationOnce(() => new Promise((resolve) => { resolveSecond = resolve }))
// Act
const { rerender } = render(
<FilePreview file={file1} hidePreview={vi.fn()} />,
)
@ -448,25 +380,18 @@ describe('FilePreview', () => {
})
})
// --------------------------------------------------------------------------
// Props Testing
// --------------------------------------------------------------------------
describe('Props', () => {
describe('file prop', () => {
it('should render correctly with file prop', async () => {
// Arrange
const file = createMockFile({ name: 'my-document.pdf', extension: 'pdf' })
// Act
renderFilePreview({ file })
// Assert
expect(screen.getByText('my-document')).toBeInTheDocument()
expect(screen.getByText('.pdf')).toBeInTheDocument()
})
it('should render correctly without file prop', async () => {
// Arrange & Act
renderFilePreview({ file: undefined })
// Assert - Header should still render
@ -474,10 +399,8 @@ describe('FilePreview', () => {
})
it('should handle file with multiple dots in name', async () => {
// Arrange
const file = createMockFile({ name: 'my.document.v2.pdf' })
// Act
renderFilePreview({ file })
// Assert - Should join all parts except last with comma
@ -485,10 +408,8 @@ describe('FilePreview', () => {
})
it('should handle file with no extension in name', async () => {
// Arrange
const file = createMockFile({ name: 'README' })
// Act
const { container } = renderFilePreview({ file })
// Assert - getFileName returns empty for single segment, but component still renders
@ -500,10 +421,8 @@ describe('FilePreview', () => {
})
it('should handle file with empty name', async () => {
// Arrange
const file = createMockFile({ name: '' })
// Act
const { container } = renderFilePreview({ file })
// Assert - Should not crash
@ -513,10 +432,8 @@ describe('FilePreview', () => {
describe('hidePreview prop', () => {
it('should accept hidePreview callback', async () => {
// Arrange
const hidePreview = vi.fn()
// Act
renderFilePreview({ hidePreview })
// Assert - No errors thrown
@ -525,15 +442,10 @@ describe('FilePreview', () => {
})
})
// --------------------------------------------------------------------------
// Edge Cases Tests
// --------------------------------------------------------------------------
describe('Edge Cases', () => {
it('should handle file with undefined id', async () => {
// Arrange
const file = createMockFile({ id: undefined })
// Act
const { container } = renderFilePreview({ file })
// Assert - Should not call API, remain in loading state
@ -542,10 +454,8 @@ describe('FilePreview', () => {
})
it('should handle file with empty string id', async () => {
// Arrange
const file = createMockFile({ id: '' })
// Act
renderFilePreview({ file })
// Assert - Empty string is falsy, should not call API
@ -553,48 +463,37 @@ describe('FilePreview', () => {
})
it('should handle very long file names', async () => {
// Arrange
const longName = `${'a'.repeat(200)}.pdf`
const file = createMockFile({ name: longName })
// Act
renderFilePreview({ file })
// Assert
expect(screen.getByText('a'.repeat(200))).toBeInTheDocument()
})
it('should handle file with special characters in name', async () => {
// Arrange
const file = createMockFile({ name: 'file-with_special@#$%.txt' })
// Act
renderFilePreview({ file })
// Assert
expect(screen.getByText('file-with_special@#$%')).toBeInTheDocument()
})
it('should handle very long preview content', async () => {
// Arrange
const longContent = 'x'.repeat(10000)
mockFetchFilePreview.mockResolvedValue({ content: longContent })
// Act
renderFilePreview()
// Assert
await waitFor(() => {
expect(screen.getByText(longContent)).toBeInTheDocument()
})
})
it('should handle preview content with special characters safely', async () => {
// Arrange
const specialContent = '<script>alert("xss")</script>\n\t& < > "'
mockFetchFilePreview.mockResolvedValue({ content: specialContent })
// Act
const { container } = renderFilePreview()
// Assert - Should render as text, not execute scripts
@ -607,25 +506,20 @@ describe('FilePreview', () => {
})
it('should handle preview content with unicode', async () => {
// Arrange
const unicodeContent = '中文内容 🚀 émojis & spëcîal çhàrs'
mockFetchFilePreview.mockResolvedValue({ content: unicodeContent })
// Act
renderFilePreview()
// Assert
await waitFor(() => {
expect(screen.getByText(unicodeContent)).toBeInTheDocument()
})
})
it('should handle preview content with newlines', async () => {
// Arrange
const multilineContent = 'Line 1\nLine 2\nLine 3'
mockFetchFilePreview.mockResolvedValue({ content: multilineContent })
// Act
const { container } = renderFilePreview()
// Assert - Content should be in the DOM
@ -639,10 +533,8 @@ describe('FilePreview', () => {
})
it('should handle null content from API', async () => {
// Arrange
mockFetchFilePreview.mockResolvedValue({ content: null as unknown as string })
// Act
const { container } = renderFilePreview()
// Assert - Should not crash
@ -652,16 +544,12 @@ describe('FilePreview', () => {
})
})
// --------------------------------------------------------------------------
// Side Effects and Cleanup Tests
// --------------------------------------------------------------------------
describe('Side Effects and Cleanup', () => {
it('should trigger effect when file prop changes', async () => {
// Arrange
const file1 = createMockFile({ id: 'file-1' })
const file2 = createMockFile({ id: 'file-2' })
// Act
const { rerender } = render(
<FilePreview file={file1} hidePreview={vi.fn()} />,
)
@ -672,19 +560,16 @@ describe('FilePreview', () => {
rerender(<FilePreview file={file2} hidePreview={vi.fn()} />)
// Assert
await waitFor(() => {
expect(mockFetchFilePreview).toHaveBeenCalledTimes(2)
})
})
it('should not trigger effect when hidePreview changes', async () => {
// Arrange
const file = createMockFile()
const hidePreview1 = vi.fn()
const hidePreview2 = vi.fn()
// Act
const { rerender } = render(
<FilePreview file={file} hidePreview={hidePreview1} />,
)
@ -703,11 +588,9 @@ describe('FilePreview', () => {
})
it('should handle rapid file changes', async () => {
// Arrange
const files = Array.from({ length: 5 }, (_, i) =>
createMockFile({ id: `file-${i}` }))
// Act
const { rerender } = render(
<FilePreview file={files[0]} hidePreview={vi.fn()} />,
)
@ -723,12 +606,10 @@ describe('FilePreview', () => {
})
it('should handle unmount during loading', async () => {
// Arrange
mockFetchFilePreview.mockImplementation(
() => new Promise(resolve => setTimeout(() => resolve({ content: 'delayed' }), 1000)),
)
// Act
const { unmount } = renderFilePreview()
// Unmount before API resolves
@ -739,10 +620,8 @@ describe('FilePreview', () => {
})
it('should handle file changing from defined to undefined', async () => {
// Arrange
const file = createMockFile()
// Act
const { rerender, container } = render(
<FilePreview file={file} hidePreview={vi.fn()} />,
)
@ -759,26 +638,19 @@ describe('FilePreview', () => {
})
})
// --------------------------------------------------------------------------
// getFileName Helper Tests
// --------------------------------------------------------------------------
describe('getFileName Helper', () => {
it('should extract name without extension for simple filename', async () => {
// Arrange
const file = createMockFile({ name: 'document.pdf' })
// Act
renderFilePreview({ file })
// Assert
expect(screen.getByText('document')).toBeInTheDocument()
})
it('should handle filename with multiple dots', async () => {
// Arrange
const file = createMockFile({ name: 'file.name.with.dots.txt' })
// Act
renderFilePreview({ file })
// Assert - Should join all parts except last with comma
@ -786,10 +658,8 @@ describe('FilePreview', () => {
})
it('should return empty for filename without dot', async () => {
// Arrange
const file = createMockFile({ name: 'nodotfile' })
// Act
const { container } = renderFilePreview({ file })
// Assert - slice(0, -1) on single element array returns empty
@ -799,7 +669,6 @@ describe('FilePreview', () => {
})
it('should return empty string when file is undefined', async () => {
// Arrange & Act
const { container } = renderFilePreview({ file: undefined })
// Assert - File name area should have empty first span
@ -808,38 +677,27 @@ describe('FilePreview', () => {
})
})
// --------------------------------------------------------------------------
// Accessibility Tests
// --------------------------------------------------------------------------
describe('Accessibility', () => {
it('should have clickable close button with visual indicator', async () => {
// Arrange & Act
const { container } = renderFilePreview()
// Assert
const closeButton = container.querySelector('.cursor-pointer')
expect(closeButton).toBeInTheDocument()
expect(closeButton).toHaveClass('cursor-pointer')
})
it('should have proper heading structure', async () => {
// Arrange & Act
renderFilePreview()
// Assert
expect(screen.getByText('datasetCreation.stepOne.filePreview')).toBeInTheDocument()
})
})
// --------------------------------------------------------------------------
// Error Handling Tests
// --------------------------------------------------------------------------
describe('Error Handling', () => {
it('should not crash on API network error', async () => {
// Arrange
mockFetchFilePreview.mockRejectedValue(new Error('Network Error'))
// Act
const { container } = renderFilePreview()
// Assert - Component should still render
@ -849,26 +707,20 @@ describe('FilePreview', () => {
})
it('should not crash on API timeout', async () => {
// Arrange
mockFetchFilePreview.mockRejectedValue(new Error('Timeout'))
// Act
const { container } = renderFilePreview()
// Assert
await waitFor(() => {
expect(container.firstChild).toBeInTheDocument()
})
})
it('should not crash on malformed API response', async () => {
// Arrange
mockFetchFilePreview.mockResolvedValue({} as { content: string })
// Act
const { container } = renderFilePreview()
// Assert
await waitFor(() => {
expect(container.firstChild).toBeInTheDocument()
})

View File

@ -1,26 +1,9 @@
import type { CustomFile as File, FileItem } from '@/models/datasets'
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { PROGRESS_NOT_STARTED } from './constants'
import FileUploader from './index'
import { PROGRESS_NOT_STARTED } from '../constants'
import FileUploader from '../index'
// Mock react-i18next
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => {
const translations: Record<string, string> = {
'stepOne.uploader.title': 'Upload Files',
'stepOne.uploader.button': 'Drag and drop files, or',
'stepOne.uploader.buttonSingleFile': 'Drag and drop file, or',
'stepOne.uploader.browse': 'Browse',
'stepOne.uploader.tip': 'Supports various file types',
}
return translations[key] || key
},
}),
}))
// Mock ToastContext
const mockNotify = vi.fn()
vi.mock('use-context-selector', async () => {
const actual = await vi.importActual<typeof import('use-context-selector')>('use-context-selector')
@ -118,22 +101,22 @@ describe('FileUploader', () => {
describe('rendering', () => {
it('should render the component', () => {
render(<FileUploader {...defaultProps} />)
expect(screen.getByText('Upload Files')).toBeInTheDocument()
expect(screen.getByText('datasetCreation.stepOne.uploader.title')).toBeInTheDocument()
})
it('should render dropzone when no files', () => {
render(<FileUploader {...defaultProps} />)
expect(screen.getByText(/Drag and drop files/i)).toBeInTheDocument()
expect(screen.getByText(/datasetCreation\.stepOne\.uploader\.button/)).toBeInTheDocument()
})
it('should render browse button', () => {
render(<FileUploader {...defaultProps} />)
expect(screen.getByText('Browse')).toBeInTheDocument()
expect(screen.getByText('datasetCreation.stepOne.uploader.browse')).toBeInTheDocument()
})
it('should apply custom title className', () => {
render(<FileUploader {...defaultProps} titleClassName="custom-class" />)
const title = screen.getByText('Upload Files')
const title = screen.getByText('datasetCreation.stepOne.uploader.title')
expect(title).toHaveClass('custom-class')
})
})
@ -162,19 +145,19 @@ describe('FileUploader', () => {
describe('batch upload mode', () => {
it('should show dropzone with batch upload enabled', () => {
render(<FileUploader {...defaultProps} supportBatchUpload={true} />)
expect(screen.getByText(/Drag and drop files/i)).toBeInTheDocument()
expect(screen.getByText(/datasetCreation\.stepOne\.uploader\.button/)).toBeInTheDocument()
})
it('should show single file text when batch upload disabled', () => {
render(<FileUploader {...defaultProps} supportBatchUpload={false} />)
expect(screen.getByText(/Drag and drop file/i)).toBeInTheDocument()
expect(screen.getByText(/datasetCreation\.stepOne\.uploader\.buttonSingleFile/)).toBeInTheDocument()
})
it('should hide dropzone when not batch upload and has files', () => {
const fileList = [createMockFileItem()]
render(<FileUploader {...defaultProps} supportBatchUpload={false} fileList={fileList} />)
expect(screen.queryByText(/Drag and drop/i)).not.toBeInTheDocument()
expect(screen.queryByText(/datasetCreation\.stepOne\.uploader\.button/)).not.toBeInTheDocument()
})
})
@ -217,7 +200,7 @@ describe('FileUploader', () => {
render(<FileUploader {...defaultProps} />)
// The browse label should trigger file input click
const browseLabel = screen.getByText('Browse')
const browseLabel = screen.getByText('datasetCreation.stepOne.uploader.browse')
expect(browseLabel).toHaveClass('cursor-pointer')
})
})

View File

@ -1,9 +1,9 @@
import type { FileListItemProps } from './file-list-item'
import type { FileListItemProps } from '../file-list-item'
import type { CustomFile as File, FileItem } from '@/models/datasets'
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { PROGRESS_COMPLETE, PROGRESS_ERROR, PROGRESS_NOT_STARTED } from '../constants'
import FileListItem from './file-list-item'
import { PROGRESS_COMPLETE, PROGRESS_ERROR, PROGRESS_NOT_STARTED } from '../../constants'
import FileListItem from '../file-list-item'
// Mock theme hook - can be changed per test
let mockTheme = 'light'

View File

@ -1,33 +1,12 @@
import type { RefObject } from 'react'
import type { UploadDropzoneProps } from './upload-dropzone'
import type { UploadDropzoneProps } from '../upload-dropzone'
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import UploadDropzone from './upload-dropzone'
import UploadDropzone from '../upload-dropzone'
// Helper to create mock ref objects for testing
const createMockRef = <T,>(value: T | null = null): RefObject<T | null> => ({ current: value })
// Mock react-i18next
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string, options?: Record<string, unknown>) => {
const translations: Record<string, string> = {
'stepOne.uploader.button': 'Drag and drop files, or',
'stepOne.uploader.buttonSingleFile': 'Drag and drop file, or',
'stepOne.uploader.browse': 'Browse',
'stepOne.uploader.tip': 'Supports {{supportTypes}}, Max {{size}}MB each, up to {{batchCount}} files at a time, {{totalCount}} files total',
}
let result = translations[key] || key
if (options && typeof options === 'object') {
Object.entries(options).forEach(([k, v]) => {
result = result.replace(`{{${k}}}`, String(v))
})
}
return result
},
}),
}))
describe('UploadDropzone', () => {
const defaultProps: UploadDropzoneProps = {
dropRef: createMockRef<HTMLDivElement>() as RefObject<HTMLDivElement | null>,
@ -73,17 +52,17 @@ describe('UploadDropzone', () => {
it('should render browse label when extensions are allowed', () => {
render(<UploadDropzone {...defaultProps} />)
expect(screen.getByText('Browse')).toBeInTheDocument()
expect(screen.getByText('datasetCreation.stepOne.uploader.browse')).toBeInTheDocument()
})
it('should not render browse label when no extensions allowed', () => {
render(<UploadDropzone {...defaultProps} acceptTypes={[]} />)
expect(screen.queryByText('Browse')).not.toBeInTheDocument()
expect(screen.queryByText('datasetCreation.stepOne.uploader.browse')).not.toBeInTheDocument()
})
it('should render file size and count limits', () => {
render(<UploadDropzone {...defaultProps} />)
const tipText = screen.getByText(/Supports.*Max.*15MB/i)
const tipText = screen.getByText(/datasetCreation\.stepOne\.uploader\.tip/)
expect(tipText).toBeInTheDocument()
})
})
@ -111,12 +90,12 @@ describe('UploadDropzone', () => {
describe('text content', () => {
it('should show batch upload text when supportBatchUpload is true', () => {
render(<UploadDropzone {...defaultProps} supportBatchUpload={true} />)
expect(screen.getByText(/Drag and drop files/i)).toBeInTheDocument()
expect(screen.getByText(/datasetCreation\.stepOne\.uploader\.button/)).toBeInTheDocument()
})
it('should show single file text when supportBatchUpload is false', () => {
render(<UploadDropzone {...defaultProps} supportBatchUpload={false} />)
expect(screen.getByText(/Drag and drop file/i)).toBeInTheDocument()
expect(screen.getByText(/datasetCreation\.stepOne\.uploader\.buttonSingleFile/)).toBeInTheDocument()
})
})
@ -146,7 +125,7 @@ describe('UploadDropzone', () => {
const onSelectFile = vi.fn()
render(<UploadDropzone {...defaultProps} onSelectFile={onSelectFile} />)
const browseLabel = screen.getByText('Browse')
const browseLabel = screen.getByText('datasetCreation.stepOne.uploader.browse')
fireEvent.click(browseLabel)
expect(onSelectFile).toHaveBeenCalledTimes(1)
@ -195,7 +174,7 @@ describe('UploadDropzone', () => {
it('should have cursor-pointer on browse label', () => {
render(<UploadDropzone {...defaultProps} />)
const browseLabel = screen.getByText('Browse')
const browseLabel = screen.getByText('datasetCreation.stepOne.uploader.browse')
expect(browseLabel).toHaveClass('cursor-pointer')
})
})

View File

@ -4,15 +4,14 @@ import { act, render, renderHook, waitFor } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { ToastContext } from '@/app/components/base/toast'
import { PROGRESS_COMPLETE, PROGRESS_ERROR, PROGRESS_NOT_STARTED } from '../constants'
import { PROGRESS_COMPLETE, PROGRESS_ERROR, PROGRESS_NOT_STARTED } from '../../constants'
// Import after mocks
import { useFileUpload } from './use-file-upload'
import { useFileUpload } from '../use-file-upload'
// Mock notify function
const mockNotify = vi.fn()
const mockClose = vi.fn()
// Mock ToastContext
vi.mock('use-context-selector', async () => {
const actual = await vi.importActual<typeof import('use-context-selector')>('use-context-selector')
return {
@ -44,12 +43,6 @@ vi.mock('@/service/use-common', () => ({
}))
// Mock i18n
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => key,
}),
}))
// Mock locale
vi.mock('@/context/i18n', () => ({
useLocale: () => 'en-US',
@ -59,7 +52,6 @@ vi.mock('@/i18n-config/language', () => ({
LanguagesSupported: ['en-US', 'zh-Hans'],
}))
// Mock config
vi.mock('@/config', () => ({
IS_CE_EDITION: false,
}))

View File

@ -2,7 +2,7 @@ import type { MockedFunction } from 'vitest'
import type { NotionPage } from '@/models/common'
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
import { fetchNotionPagePreview } from '@/service/datasets'
import NotionPagePreview from './index'
import NotionPagePreview from '../index'
// Mock the fetchNotionPagePreview service
vi.mock('@/service/datasets', () => ({
@ -85,13 +85,10 @@ const findLoadingSpinner = (container: HTMLElement) => {
return container.querySelector('.spin-animation')
}
// ============================================================================
// NotionPagePreview Component Tests
// ============================================================================
// Note: Branch coverage is ~88% because line 29 (`if (!currentPage) return`)
// is defensive code that cannot be reached - getPreviewContent is only called
// from useEffect when currentPage is truthy.
// ============================================================================
describe('NotionPagePreview', () => {
beforeEach(() => {
vi.clearAllMocks()
@ -106,31 +103,23 @@ describe('NotionPagePreview', () => {
})
})
// --------------------------------------------------------------------------
// Rendering Tests - Verify component renders properly
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', async () => {
// Arrange & Act
await renderNotionPagePreview()
// Assert
expect(screen.getByText('datasetCreation.stepOne.pagePreview')).toBeInTheDocument()
})
it('should render page preview header', async () => {
// Arrange & Act
await renderNotionPagePreview()
// Assert
expect(screen.getByText('datasetCreation.stepOne.pagePreview')).toBeInTheDocument()
})
it('should render close button with XMarkIcon', async () => {
// Arrange & Act
const { container } = await renderNotionPagePreview()
// Assert
const closeButton = container.querySelector('.cursor-pointer')
expect(closeButton).toBeInTheDocument()
const xMarkIcon = closeButton?.querySelector('svg')
@ -138,30 +127,23 @@ describe('NotionPagePreview', () => {
})
it('should render page name', async () => {
// Arrange
const page = createMockNotionPage({ page_name: 'My Notion Page' })
// Act
await renderNotionPagePreview({ currentPage: page })
// Assert
expect(screen.getByText('My Notion Page')).toBeInTheDocument()
})
it('should apply correct CSS classes to container', async () => {
// Arrange & Act
const { container } = await renderNotionPagePreview()
// Assert
const wrapper = container.firstChild as HTMLElement
expect(wrapper).toHaveClass('h-full')
})
it('should render NotionIcon component', async () => {
// Arrange
const page = createMockNotionPage()
// Act
const { container } = await renderNotionPagePreview({ currentPage: page })
// Assert - NotionIcon should be rendered (either as img or div or svg)
@ -170,15 +152,11 @@ describe('NotionPagePreview', () => {
})
})
// --------------------------------------------------------------------------
// NotionIcon Rendering Tests
// --------------------------------------------------------------------------
describe('NotionIcon Rendering', () => {
it('should render default icon when page_icon is null', async () => {
// Arrange
const page = createMockNotionPage({ page_icon: null })
// Act
const { container } = await renderNotionPagePreview({ currentPage: page })
// Assert - Should render RiFileTextLine icon (svg)
@ -187,33 +165,25 @@ describe('NotionPagePreview', () => {
})
it('should render emoji icon when page_icon has emoji type', async () => {
// Arrange
const page = createMockNotionPageWithEmojiIcon('📝')
// Act
await renderNotionPagePreview({ currentPage: page })
// Assert
expect(screen.getByText('📝')).toBeInTheDocument()
})
it('should render image icon when page_icon has url type', async () => {
// Arrange
const page = createMockNotionPageWithUrlIcon('https://example.com/icon.png')
// Act
const { container } = await renderNotionPagePreview({ currentPage: page })
// Assert
const img = container.querySelector('img[alt="page icon"]')
expect(img).toBeInTheDocument()
expect(img).toHaveAttribute('src', 'https://example.com/icon.png')
})
})
// --------------------------------------------------------------------------
// Loading State Tests
// --------------------------------------------------------------------------
describe('Loading State', () => {
it('should show loading indicator initially', async () => {
// Arrange - Delay API response to keep loading state
@ -230,13 +200,10 @@ describe('NotionPagePreview', () => {
})
it('should hide loading indicator after content loads', async () => {
// Arrange
mockFetchNotionPagePreview.mockResolvedValue({ content: 'Loaded content' })
// Act
const { container } = await renderNotionPagePreview()
// Assert
expect(screen.getByText('Loaded content')).toBeInTheDocument()
// Loading should be gone
const loadingElement = findLoadingSpinner(container)
@ -244,7 +211,6 @@ describe('NotionPagePreview', () => {
})
it('should show loading when currentPage changes', async () => {
// Arrange
const page1 = createMockNotionPage({ page_id: 'page-1', page_name: 'Page 1' })
const page2 = createMockNotionPage({ page_id: 'page-2', page_name: 'Page 2' })
@ -291,24 +257,19 @@ describe('NotionPagePreview', () => {
})
})
// --------------------------------------------------------------------------
// API Call Tests
// --------------------------------------------------------------------------
describe('API Calls', () => {
it('should call fetchNotionPagePreview with correct parameters', async () => {
// Arrange
const page = createMockNotionPage({
page_id: 'test-page-id',
type: 'database',
})
// Act
await renderNotionPagePreview({
currentPage: page,
notionCredentialId: 'test-credential-id',
})
// Assert
expect(mockFetchNotionPagePreview).toHaveBeenCalledWith({
pageID: 'test-page-id',
pageType: 'database',
@ -317,19 +278,15 @@ describe('NotionPagePreview', () => {
})
it('should not call fetchNotionPagePreview when currentPage is undefined', async () => {
// Arrange & Act
await renderNotionPagePreview({ currentPage: undefined }, false)
// Assert
expect(mockFetchNotionPagePreview).not.toHaveBeenCalled()
})
it('should call fetchNotionPagePreview again when currentPage changes', async () => {
// Arrange
const page1 = createMockNotionPage({ page_id: 'page-1' })
const page2 = createMockNotionPage({ page_id: 'page-2' })
// Act
const { rerender } = render(
<NotionPagePreview currentPage={page1} notionCredentialId="cred-123" hidePreview={vi.fn()} />,
)
@ -346,7 +303,6 @@ describe('NotionPagePreview', () => {
rerender(<NotionPagePreview currentPage={page2} notionCredentialId="cred-123" hidePreview={vi.fn()} />)
})
// Assert
await waitFor(() => {
expect(mockFetchNotionPagePreview).toHaveBeenCalledWith({
pageID: 'page-2',
@ -358,21 +314,16 @@ describe('NotionPagePreview', () => {
})
it('should handle API success and display content', async () => {
// Arrange
mockFetchNotionPagePreview.mockResolvedValue({ content: 'Notion page preview content from API' })
// Act
await renderNotionPagePreview()
// Assert
expect(screen.getByText('Notion page preview content from API')).toBeInTheDocument()
})
it('should handle API error gracefully', async () => {
// Arrange
mockFetchNotionPagePreview.mockRejectedValue(new Error('Network error'))
// Act
const { container } = await renderNotionPagePreview({}, false)
// Assert - Component should not crash
@ -384,10 +335,8 @@ describe('NotionPagePreview', () => {
})
it('should handle empty content response', async () => {
// Arrange
mockFetchNotionPagePreview.mockResolvedValue({ content: '' })
// Act
const { container } = await renderNotionPagePreview()
// Assert - Should still render without loading
@ -396,42 +345,30 @@ describe('NotionPagePreview', () => {
})
})
// --------------------------------------------------------------------------
// User Interactions Tests
// --------------------------------------------------------------------------
describe('User Interactions', () => {
it('should call hidePreview when close button is clicked', async () => {
// Arrange
const hidePreview = vi.fn()
const { container } = await renderNotionPagePreview({ hidePreview })
// Act
const closeButton = container.querySelector('.cursor-pointer') as HTMLElement
fireEvent.click(closeButton)
// Assert
expect(hidePreview).toHaveBeenCalledTimes(1)
})
it('should handle multiple clicks on close button', async () => {
// Arrange
const hidePreview = vi.fn()
const { container } = await renderNotionPagePreview({ hidePreview })
// Act
const closeButton = container.querySelector('.cursor-pointer') as HTMLElement
fireEvent.click(closeButton)
fireEvent.click(closeButton)
fireEvent.click(closeButton)
// Assert
expect(hidePreview).toHaveBeenCalledTimes(3)
})
})
// --------------------------------------------------------------------------
// State Management Tests
// --------------------------------------------------------------------------
describe('State Management', () => {
it('should initialize with loading state true', async () => {
// Arrange - Keep loading indefinitely (never resolves)
@ -440,24 +377,19 @@ describe('NotionPagePreview', () => {
// Act - Don't wait for content
const { container } = await renderNotionPagePreview({}, false)
// Assert
const loadingElement = findLoadingSpinner(container)
expect(loadingElement).toBeInTheDocument()
})
it('should update previewContent state after successful fetch', async () => {
// Arrange
mockFetchNotionPagePreview.mockResolvedValue({ content: 'New preview content' })
// Act
await renderNotionPagePreview()
// Assert
expect(screen.getByText('New preview content')).toBeInTheDocument()
})
it('should reset loading to true when currentPage changes', async () => {
// Arrange
const page1 = createMockNotionPage({ page_id: 'page-1' })
const page2 = createMockNotionPage({ page_id: 'page-2' })
@ -465,7 +397,6 @@ describe('NotionPagePreview', () => {
.mockResolvedValueOnce({ content: 'Content 1' })
.mockImplementationOnce(() => new Promise(() => { /* never resolves */ }))
// Act
const { rerender, container } = render(
<NotionPagePreview currentPage={page1} notionCredentialId="cred-123" hidePreview={vi.fn()} />,
)
@ -487,7 +418,6 @@ describe('NotionPagePreview', () => {
})
it('should replace old content with new content when page changes', async () => {
// Arrange
const page1 = createMockNotionPage({ page_id: 'page-1' })
const page2 = createMockNotionPage({ page_id: 'page-2' })
@ -497,7 +427,6 @@ describe('NotionPagePreview', () => {
.mockResolvedValueOnce({ content: 'Content 1' })
.mockImplementationOnce(() => new Promise((resolve) => { resolveSecond = resolve }))
// Act
const { rerender } = render(
<NotionPagePreview currentPage={page1} notionCredentialId="cred-123" hidePreview={vi.fn()} />,
)
@ -523,24 +452,17 @@ describe('NotionPagePreview', () => {
})
})
// --------------------------------------------------------------------------
// Props Testing
// --------------------------------------------------------------------------
describe('Props', () => {
describe('currentPage prop', () => {
it('should render correctly with currentPage prop', async () => {
// Arrange
const page = createMockNotionPage({ page_name: 'My Test Page' })
// Act
await renderNotionPagePreview({ currentPage: page })
// Assert
expect(screen.getByText('My Test Page')).toBeInTheDocument()
})
it('should render correctly without currentPage prop (undefined)', async () => {
// Arrange & Act
await renderNotionPagePreview({ currentPage: undefined }, false)
// Assert - Header should still render
@ -548,10 +470,8 @@ describe('NotionPagePreview', () => {
})
it('should handle page with empty name', async () => {
// Arrange
const page = createMockNotionPage({ page_name: '' })
// Act
const { container } = await renderNotionPagePreview({ currentPage: page })
// Assert - Should not crash
@ -559,52 +479,40 @@ describe('NotionPagePreview', () => {
})
it('should handle page with very long name', async () => {
// Arrange
const longName = 'a'.repeat(200)
const page = createMockNotionPage({ page_name: longName })
// Act
await renderNotionPagePreview({ currentPage: page })
// Assert
expect(screen.getByText(longName)).toBeInTheDocument()
})
it('should handle page with special characters in name', async () => {
// Arrange
const page = createMockNotionPage({ page_name: 'Page with <special> & "chars"' })
// Act
await renderNotionPagePreview({ currentPage: page })
// Assert
expect(screen.getByText('Page with <special> & "chars"')).toBeInTheDocument()
})
it('should handle page with unicode characters in name', async () => {
// Arrange
const page = createMockNotionPage({ page_name: '中文页面名称 🚀 日本語' })
// Act
await renderNotionPagePreview({ currentPage: page })
// Assert
expect(screen.getByText('中文页面名称 🚀 日本語')).toBeInTheDocument()
})
})
describe('notionCredentialId prop', () => {
it('should pass notionCredentialId to API call', async () => {
// Arrange
const page = createMockNotionPage()
// Act
await renderNotionPagePreview({
currentPage: page,
notionCredentialId: 'my-credential-id',
})
// Assert
expect(mockFetchNotionPagePreview).toHaveBeenCalledWith(
expect.objectContaining({ credentialID: 'my-credential-id' }),
)
@ -613,10 +521,8 @@ describe('NotionPagePreview', () => {
describe('hidePreview prop', () => {
it('should accept hidePreview callback', async () => {
// Arrange
const hidePreview = vi.fn()
// Act
await renderNotionPagePreview({ hidePreview })
// Assert - No errors thrown
@ -625,15 +531,10 @@ describe('NotionPagePreview', () => {
})
})
// --------------------------------------------------------------------------
// Edge Cases Tests
// --------------------------------------------------------------------------
describe('Edge Cases', () => {
it('should handle page with undefined page_id', async () => {
// Arrange
const page = createMockNotionPage({ page_id: undefined as unknown as string })
// Act
await renderNotionPagePreview({ currentPage: page })
// Assert - API should still be called (with undefined pageID)
@ -641,36 +542,28 @@ describe('NotionPagePreview', () => {
})
it('should handle page with empty string page_id', async () => {
// Arrange
const page = createMockNotionPage({ page_id: '' })
// Act
await renderNotionPagePreview({ currentPage: page })
// Assert
expect(mockFetchNotionPagePreview).toHaveBeenCalledWith(
expect.objectContaining({ pageID: '' }),
)
})
it('should handle very long preview content', async () => {
// Arrange
const longContent = 'x'.repeat(10000)
mockFetchNotionPagePreview.mockResolvedValue({ content: longContent })
// Act
await renderNotionPagePreview()
// Assert
expect(screen.getByText(longContent)).toBeInTheDocument()
})
it('should handle preview content with special characters safely', async () => {
// Arrange
const specialContent = '<script>alert("xss")</script>\n\t& < > "'
mockFetchNotionPagePreview.mockResolvedValue({ content: specialContent })
// Act
const { container } = await renderNotionPagePreview()
// Assert - Should render as text, not execute scripts
@ -680,26 +573,20 @@ describe('NotionPagePreview', () => {
})
it('should handle preview content with unicode', async () => {
// Arrange
const unicodeContent = '中文内容 🚀 émojis & spëcîal çhàrs'
mockFetchNotionPagePreview.mockResolvedValue({ content: unicodeContent })
// Act
await renderNotionPagePreview()
// Assert
expect(screen.getByText(unicodeContent)).toBeInTheDocument()
})
it('should handle preview content with newlines', async () => {
// Arrange
const multilineContent = 'Line 1\nLine 2\nLine 3'
mockFetchNotionPagePreview.mockResolvedValue({ content: multilineContent })
// Act
const { container } = await renderNotionPagePreview()
// Assert
const contentDiv = container.querySelector('[class*="fileContent"]')
expect(contentDiv).toBeInTheDocument()
expect(contentDiv?.textContent).toContain('Line 1')
@ -708,10 +595,8 @@ describe('NotionPagePreview', () => {
})
it('should handle null content from API', async () => {
// Arrange
mockFetchNotionPagePreview.mockResolvedValue({ content: null as unknown as string })
// Act
const { container } = await renderNotionPagePreview()
// Assert - Should not crash
@ -719,29 +604,22 @@ describe('NotionPagePreview', () => {
})
it('should handle different page types', async () => {
// Arrange
const databasePage = createMockNotionPage({ type: 'database' })
// Act
await renderNotionPagePreview({ currentPage: databasePage })
// Assert
expect(mockFetchNotionPagePreview).toHaveBeenCalledWith(
expect.objectContaining({ pageType: 'database' }),
)
})
})
// --------------------------------------------------------------------------
// Side Effects and Cleanup Tests
// --------------------------------------------------------------------------
describe('Side Effects and Cleanup', () => {
it('should trigger effect when currentPage prop changes', async () => {
// Arrange
const page1 = createMockNotionPage({ page_id: 'page-1' })
const page2 = createMockNotionPage({ page_id: 'page-2' })
// Act
const { rerender } = render(
<NotionPagePreview currentPage={page1} notionCredentialId="cred-123" hidePreview={vi.fn()} />,
)
@ -754,19 +632,16 @@ describe('NotionPagePreview', () => {
rerender(<NotionPagePreview currentPage={page2} notionCredentialId="cred-123" hidePreview={vi.fn()} />)
})
// Assert
await waitFor(() => {
expect(mockFetchNotionPagePreview).toHaveBeenCalledTimes(2)
})
})
it('should not trigger effect when hidePreview changes', async () => {
// Arrange
const page = createMockNotionPage()
const hidePreview1 = vi.fn()
const hidePreview2 = vi.fn()
// Act
const { rerender } = render(
<NotionPagePreview currentPage={page} notionCredentialId="cred-123" hidePreview={hidePreview1} />,
)
@ -785,10 +660,8 @@ describe('NotionPagePreview', () => {
})
it('should not trigger effect when notionCredentialId changes', async () => {
// Arrange
const page = createMockNotionPage()
// Act
const { rerender } = render(
<NotionPagePreview currentPage={page} notionCredentialId="cred-1" hidePreview={vi.fn()} />,
)
@ -806,11 +679,9 @@ describe('NotionPagePreview', () => {
})
it('should handle rapid page changes', async () => {
// Arrange
const pages = Array.from({ length: 5 }, (_, i) =>
createMockNotionPage({ page_id: `page-${i}` }))
// Act
const { rerender } = render(
<NotionPagePreview currentPage={pages[0]} notionCredentialId="cred-123" hidePreview={vi.fn()} />,
)
@ -829,7 +700,6 @@ describe('NotionPagePreview', () => {
})
it('should handle unmount during loading', async () => {
// Arrange
mockFetchNotionPagePreview.mockImplementation(
() => new Promise(resolve => setTimeout(() => resolve({ content: 'delayed' }), 1000)),
)
@ -845,10 +715,8 @@ describe('NotionPagePreview', () => {
})
it('should handle page changing from defined to undefined', async () => {
// Arrange
const page = createMockNotionPage()
// Act
const { rerender, container } = render(
<NotionPagePreview currentPage={page} notionCredentialId="cred-123" hidePreview={vi.fn()} />,
)
@ -867,38 +735,27 @@ describe('NotionPagePreview', () => {
})
})
// --------------------------------------------------------------------------
// Accessibility Tests
// --------------------------------------------------------------------------
describe('Accessibility', () => {
it('should have clickable close button with visual indicator', async () => {
// Arrange & Act
const { container } = await renderNotionPagePreview()
// Assert
const closeButton = container.querySelector('.cursor-pointer')
expect(closeButton).toBeInTheDocument()
expect(closeButton).toHaveClass('cursor-pointer')
})
it('should have proper heading structure', async () => {
// Arrange & Act
await renderNotionPagePreview()
// Assert
expect(screen.getByText('datasetCreation.stepOne.pagePreview')).toBeInTheDocument()
})
})
// --------------------------------------------------------------------------
// Error Handling Tests
// --------------------------------------------------------------------------
describe('Error Handling', () => {
it('should not crash on API network error', async () => {
// Arrange
mockFetchNotionPagePreview.mockRejectedValue(new Error('Network Error'))
// Act
const { container } = await renderNotionPagePreview({}, false)
// Assert - Component should still render
@ -908,122 +765,92 @@ describe('NotionPagePreview', () => {
})
it('should not crash on API timeout', async () => {
// Arrange
mockFetchNotionPagePreview.mockRejectedValue(new Error('Timeout'))
// Act
const { container } = await renderNotionPagePreview({}, false)
// Assert
await waitFor(() => {
expect(container.firstChild).toBeInTheDocument()
})
})
it('should not crash on malformed API response', async () => {
// Arrange
mockFetchNotionPagePreview.mockResolvedValue({} as { content: string })
// Act
const { container } = await renderNotionPagePreview()
// Assert
expect(container.firstChild).toBeInTheDocument()
})
it('should handle 404 error gracefully', async () => {
// Arrange
mockFetchNotionPagePreview.mockRejectedValue(new Error('404 Not Found'))
// Act
const { container } = await renderNotionPagePreview({}, false)
// Assert
await waitFor(() => {
expect(container.firstChild).toBeInTheDocument()
})
})
it('should handle 500 error gracefully', async () => {
// Arrange
mockFetchNotionPagePreview.mockRejectedValue(new Error('500 Internal Server Error'))
// Act
const { container } = await renderNotionPagePreview({}, false)
// Assert
await waitFor(() => {
expect(container.firstChild).toBeInTheDocument()
})
})
it('should handle authorization error gracefully', async () => {
// Arrange
mockFetchNotionPagePreview.mockRejectedValue(new Error('401 Unauthorized'))
// Act
const { container } = await renderNotionPagePreview({}, false)
// Assert
await waitFor(() => {
expect(container.firstChild).toBeInTheDocument()
})
})
})
// --------------------------------------------------------------------------
// Page Type Variations Tests
// --------------------------------------------------------------------------
describe('Page Type Variations', () => {
it('should handle page type', async () => {
// Arrange
const page = createMockNotionPage({ type: 'page' })
// Act
await renderNotionPagePreview({ currentPage: page })
// Assert
expect(mockFetchNotionPagePreview).toHaveBeenCalledWith(
expect.objectContaining({ pageType: 'page' }),
)
})
it('should handle database type', async () => {
// Arrange
const page = createMockNotionPage({ type: 'database' })
// Act
await renderNotionPagePreview({ currentPage: page })
// Assert
expect(mockFetchNotionPagePreview).toHaveBeenCalledWith(
expect.objectContaining({ pageType: 'database' }),
)
})
it('should handle unknown type', async () => {
// Arrange
const page = createMockNotionPage({ type: 'unknown_type' })
// Act
await renderNotionPagePreview({ currentPage: page })
// Assert
expect(mockFetchNotionPagePreview).toHaveBeenCalledWith(
expect.objectContaining({ pageType: 'unknown_type' }),
)
})
})
// --------------------------------------------------------------------------
// Icon Type Variations Tests
// --------------------------------------------------------------------------
describe('Icon Type Variations', () => {
it('should handle page with null icon', async () => {
// Arrange
const page = createMockNotionPage({ page_icon: null })
// Act
const { container } = await renderNotionPagePreview({ currentPage: page })
// Assert - Should render default icon
@ -1032,31 +859,24 @@ describe('NotionPagePreview', () => {
})
it('should handle page with emoji icon object', async () => {
// Arrange
const page = createMockNotionPageWithEmojiIcon('📄')
// Act
await renderNotionPagePreview({ currentPage: page })
// Assert
expect(screen.getByText('📄')).toBeInTheDocument()
})
it('should handle page with url icon object', async () => {
// Arrange
const page = createMockNotionPageWithUrlIcon('https://example.com/custom-icon.png')
// Act
const { container } = await renderNotionPagePreview({ currentPage: page })
// Assert
const img = container.querySelector('img[alt="page icon"]')
expect(img).toBeInTheDocument()
expect(img).toHaveAttribute('src', 'https://example.com/custom-icon.png')
})
it('should handle page with icon object having null values', async () => {
// Arrange
const page = createMockNotionPage({
page_icon: {
type: null,
@ -1065,7 +885,6 @@ describe('NotionPagePreview', () => {
},
})
// Act
const { container } = await renderNotionPagePreview({ currentPage: page })
// Assert - Should render, likely with default/fallback
@ -1073,7 +892,6 @@ describe('NotionPagePreview', () => {
})
it('should handle page with icon object having empty url', async () => {
// Arrange
// Suppress console.error for this test as we're intentionally testing empty src edge case
const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(vi.fn())
@ -1085,7 +903,6 @@ describe('NotionPagePreview', () => {
},
})
// Act
const { container } = await renderNotionPagePreview({ currentPage: page })
// Assert - Component should not crash, may render img or fallback
@ -1100,32 +917,24 @@ describe('NotionPagePreview', () => {
})
})
// --------------------------------------------------------------------------
// Content Display Tests
// --------------------------------------------------------------------------
describe('Content Display', () => {
it('should display content in fileContent div with correct class', async () => {
// Arrange
mockFetchNotionPagePreview.mockResolvedValue({ content: 'Test content' })
// Act
const { container } = await renderNotionPagePreview()
// Assert
const contentDiv = container.querySelector('[class*="fileContent"]')
expect(contentDiv).toBeInTheDocument()
expect(contentDiv).toHaveTextContent('Test content')
})
it('should preserve whitespace in content', async () => {
// Arrange
const contentWithWhitespace = ' indented content\n more indent'
mockFetchNotionPagePreview.mockResolvedValue({ content: contentWithWhitespace })
// Act
const { container } = await renderNotionPagePreview()
// Assert
const contentDiv = container.querySelector('[class*="fileContent"]')
expect(contentDiv).toBeInTheDocument()
// The CSS class has white-space: pre-line
@ -1133,13 +942,10 @@ describe('NotionPagePreview', () => {
})
it('should display empty string content without loading', async () => {
// Arrange
mockFetchNotionPagePreview.mockResolvedValue({ content: '' })
// Act
const { container } = await renderNotionPagePreview()
// Assert
const loadingElement = findLoadingSpinner(container)
expect(loadingElement).not.toBeInTheDocument()
const contentDiv = container.querySelector('[class*="fileContent"]')

View File

@ -0,0 +1,561 @@
import type { DataSourceAuth } from '@/app/components/header/account-setting/data-source-page-new/types'
import type { NotionPage } from '@/models/common'
import type { CrawlOptions, CrawlResultItem, DataSet, FileItem } from '@/models/datasets'
import { fireEvent, render, screen } from '@testing-library/react'
import { Plan } from '@/app/components/billing/type'
import { DataSourceType } from '@/models/datasets'
import StepOne from '../index'
// Mock config for website crawl features
vi.mock('@/config', () => ({
ENABLE_WEBSITE_FIRECRAWL: true,
ENABLE_WEBSITE_JINAREADER: false,
ENABLE_WEBSITE_WATERCRAWL: false,
}))
// Mock dataset detail context
let mockDatasetDetail: DataSet | undefined
vi.mock('@/context/dataset-detail', () => ({
useDatasetDetailContextWithSelector: (selector: (state: { dataset: DataSet | undefined }) => DataSet | undefined) => {
return selector({ dataset: mockDatasetDetail })
},
}))
// Mock provider context
let mockPlan = {
type: Plan.professional,
usage: { vectorSpace: 50, buildApps: 0, documentsUploadQuota: 0, vectorStorageQuota: 0 },
total: { vectorSpace: 100, buildApps: 0, documentsUploadQuota: 0, vectorStorageQuota: 0 },
}
let mockEnableBilling = false
vi.mock('@/context/provider-context', () => ({
useProviderContext: () => ({
plan: mockPlan,
enableBilling: mockEnableBilling,
}),
}))
vi.mock('../../file-uploader', () => ({
default: ({ onPreview, fileList }: { onPreview: (file: File) => void, fileList: FileItem[] }) => (
<div data-testid="file-uploader">
<span data-testid="file-count">{fileList.length}</span>
<button data-testid="preview-file" onClick={() => onPreview(new File(['test'], 'test.txt'))}>
Preview
</button>
</div>
),
}))
vi.mock('../../website', () => ({
default: ({ onPreview }: { onPreview: (item: CrawlResultItem) => void }) => (
<div data-testid="website">
<button
data-testid="preview-website"
onClick={() => onPreview({ title: 'Test', markdown: '', description: '', source_url: 'https://test.com' })}
>
Preview Website
</button>
</div>
),
}))
vi.mock('../../empty-dataset-creation-modal', () => ({
default: ({ show, onHide }: { show: boolean, onHide: () => void }) => (
show
? (
<div data-testid="empty-dataset-modal">
<button data-testid="close-modal" onClick={onHide}>Close</button>
</div>
)
: null
),
}))
// NotionConnector is a base component - imported directly without mock
// It only depends on i18n which is globally mocked
vi.mock('@/app/components/base/notion-page-selector', () => ({
NotionPageSelector: ({ onPreview }: { onPreview: (page: NotionPage) => void }) => (
<div data-testid="notion-page-selector">
<button
data-testid="preview-notion"
onClick={() => onPreview({ page_id: 'page-1', type: 'page' } as NotionPage)}
>
Preview Notion
</button>
</div>
),
}))
vi.mock('@/app/components/billing/vector-space-full', () => ({
default: () => <div data-testid="vector-space-full">Vector Space Full</div>,
}))
vi.mock('@/app/components/billing/plan-upgrade-modal', () => ({
default: ({ show, onClose }: { show: boolean, onClose: () => void }) => (
show
? (
<div data-testid="plan-upgrade-modal">
<button data-testid="close-upgrade-modal" onClick={onClose}>Close</button>
</div>
)
: null
),
}))
vi.mock('../../file-preview', () => ({
default: ({ file, hidePreview }: { file: File, hidePreview: () => void }) => (
<div data-testid="file-preview">
<span>{file.name}</span>
<button data-testid="hide-file-preview" onClick={hidePreview}>Hide</button>
</div>
),
}))
vi.mock('../../notion-page-preview', () => ({
default: ({ currentPage, hidePreview }: { currentPage: NotionPage, hidePreview: () => void }) => (
<div data-testid="notion-page-preview">
<span>{currentPage.page_id}</span>
<button data-testid="hide-notion-preview" onClick={hidePreview}>Hide</button>
</div>
),
}))
// WebsitePreview is a sibling component without API dependencies - imported directly
// It only depends on i18n which is globally mocked
vi.mock('../upgrade-card', () => ({
default: () => <div data-testid="upgrade-card">Upgrade Card</div>,
}))
const createMockCustomFile = (overrides: { id?: string, name?: string } = {}) => {
const file = new File(['test content'], overrides.name ?? 'test.txt', { type: 'text/plain' })
return Object.assign(file, {
id: overrides.id ?? 'uploaded-id',
extension: 'txt',
mime_type: 'text/plain',
created_by: 'user-1',
created_at: Date.now(),
})
}
const createMockFileItem = (overrides: Partial<FileItem> = {}): FileItem => ({
fileID: `file-${Date.now()}`,
file: createMockCustomFile(overrides.file as { id?: string, name?: string }),
progress: 100,
...overrides,
})
const createMockNotionPage = (overrides: Partial<NotionPage> = {}): NotionPage => ({
page_id: `page-${Date.now()}`,
type: 'page',
...overrides,
} as NotionPage)
const createMockCrawlResult = (overrides: Partial<CrawlResultItem> = {}): CrawlResultItem => ({
title: 'Test Page',
markdown: 'Test content',
description: 'Test description',
source_url: 'https://example.com',
...overrides,
})
const createMockDataSourceAuth = (overrides: Partial<DataSourceAuth> = {}): DataSourceAuth => ({
credential_id: 'cred-1',
provider: 'notion_datasource',
plugin_id: 'plugin-1',
credentials_list: [{ id: 'cred-1', name: 'Workspace 1' }],
...overrides,
} as DataSourceAuth)
const defaultProps = {
dataSourceType: DataSourceType.FILE,
dataSourceTypeDisable: false,
onSetting: vi.fn(),
files: [] as FileItem[],
updateFileList: vi.fn(),
updateFile: vi.fn(),
notionPages: [] as NotionPage[],
notionCredentialId: '',
updateNotionPages: vi.fn(),
updateNotionCredentialId: vi.fn(),
onStepChange: vi.fn(),
changeType: vi.fn(),
websitePages: [] as CrawlResultItem[],
updateWebsitePages: vi.fn(),
onWebsiteCrawlProviderChange: vi.fn(),
onWebsiteCrawlJobIdChange: vi.fn(),
crawlOptions: {
crawl_sub_pages: true,
only_main_content: true,
includes: '',
excludes: '',
limit: 10,
max_depth: '',
use_sitemap: true,
} as CrawlOptions,
onCrawlOptionsChange: vi.fn(),
authedDataSourceList: [] as DataSourceAuth[],
}
// NOTE: Child component unit tests (usePreviewState, DataSourceTypeSelector,
// NextStepButton, PreviewPanel) have been moved to their own dedicated spec files:
// - ./hooks/use-preview-state.spec.ts
// - ./components/data-source-type-selector.spec.tsx
// - ./components/next-step-button.spec.tsx
// - ./components/preview-panel.spec.tsx
// This file now focuses exclusively on StepOne parent component tests.
// StepOne Component Tests
describe('StepOne', () => {
beforeEach(() => {
vi.clearAllMocks()
mockDatasetDetail = undefined
mockPlan = {
type: Plan.professional,
usage: { vectorSpace: 50, buildApps: 0, documentsUploadQuota: 0, vectorStorageQuota: 0 },
total: { vectorSpace: 100, buildApps: 0, documentsUploadQuota: 0, vectorStorageQuota: 0 },
}
mockEnableBilling = false
})
describe('Rendering', () => {
it('should render without crashing', () => {
render(<StepOne {...defaultProps} />)
expect(screen.getByText('datasetCreation.steps.one')).toBeInTheDocument()
})
it('should render DataSourceTypeSelector when not editing existing dataset', () => {
render(<StepOne {...defaultProps} />)
expect(screen.getByText('datasetCreation.stepOne.dataSourceType.file')).toBeInTheDocument()
})
it('should render FileUploader when dataSourceType is FILE', () => {
render(<StepOne {...defaultProps} dataSourceType={DataSourceType.FILE} />)
expect(screen.getByTestId('file-uploader')).toBeInTheDocument()
})
it('should render NotionConnector when dataSourceType is NOTION and not authenticated', () => {
render(<StepOne {...defaultProps} dataSourceType={DataSourceType.NOTION} />)
// Assert - NotionConnector shows sync title and connect button
expect(screen.getByText('datasetCreation.stepOne.notionSyncTitle')).toBeInTheDocument()
expect(screen.getByRole('button', { name: /datasetCreation.stepOne.connect/i })).toBeInTheDocument()
})
it('should render NotionPageSelector when dataSourceType is NOTION and authenticated', () => {
const authedDataSourceList = [createMockDataSourceAuth()]
render(<StepOne {...defaultProps} dataSourceType={DataSourceType.NOTION} authedDataSourceList={authedDataSourceList} />)
expect(screen.getByTestId('notion-page-selector')).toBeInTheDocument()
})
it('should render Website when dataSourceType is WEB', () => {
render(<StepOne {...defaultProps} dataSourceType={DataSourceType.WEB} />)
expect(screen.getByTestId('website')).toBeInTheDocument()
})
it('should render empty dataset creation link when no datasetId', () => {
render(<StepOne {...defaultProps} />)
expect(screen.getByText('datasetCreation.stepOne.emptyDatasetCreation')).toBeInTheDocument()
})
it('should not render empty dataset creation link when datasetId exists', () => {
render(<StepOne {...defaultProps} datasetId="dataset-123" />)
expect(screen.queryByText('datasetCreation.stepOne.emptyDatasetCreation')).not.toBeInTheDocument()
})
})
// Props Tests
describe('Props', () => {
it('should pass files to FileUploader', () => {
const files = [createMockFileItem()]
render(<StepOne {...defaultProps} files={files} />)
expect(screen.getByTestId('file-count')).toHaveTextContent('1')
})
it('should call onSetting when NotionConnector connect button is clicked', () => {
const onSetting = vi.fn()
render(<StepOne {...defaultProps} dataSourceType={DataSourceType.NOTION} onSetting={onSetting} />)
// Act - The NotionConnector's button calls onSetting
fireEvent.click(screen.getByRole('button', { name: /datasetCreation.stepOne.connect/i }))
expect(onSetting).toHaveBeenCalledTimes(1)
})
it('should call changeType when data source type is changed', () => {
const changeType = vi.fn()
render(<StepOne {...defaultProps} changeType={changeType} />)
fireEvent.click(screen.getByText('datasetCreation.stepOne.dataSourceType.notion'))
expect(changeType).toHaveBeenCalledWith(DataSourceType.NOTION)
})
})
describe('State Management', () => {
it('should open empty dataset modal when link is clicked', () => {
render(<StepOne {...defaultProps} />)
fireEvent.click(screen.getByText('datasetCreation.stepOne.emptyDatasetCreation'))
expect(screen.getByTestId('empty-dataset-modal')).toBeInTheDocument()
})
it('should close empty dataset modal when close is clicked', () => {
render(<StepOne {...defaultProps} />)
fireEvent.click(screen.getByText('datasetCreation.stepOne.emptyDatasetCreation'))
fireEvent.click(screen.getByTestId('close-modal'))
expect(screen.queryByTestId('empty-dataset-modal')).not.toBeInTheDocument()
})
})
describe('Memoization', () => {
it('should correctly compute isNotionAuthed based on authedDataSourceList', () => {
// Arrange - No auth
const { rerender } = render(<StepOne {...defaultProps} dataSourceType={DataSourceType.NOTION} />)
// NotionConnector shows the sync title when not authenticated
expect(screen.getByText('datasetCreation.stepOne.notionSyncTitle')).toBeInTheDocument()
// Act - Add auth
const authedDataSourceList = [createMockDataSourceAuth()]
rerender(<StepOne {...defaultProps} dataSourceType={DataSourceType.NOTION} authedDataSourceList={authedDataSourceList} />)
expect(screen.getByTestId('notion-page-selector')).toBeInTheDocument()
})
it('should correctly compute fileNextDisabled when files are empty', () => {
render(<StepOne {...defaultProps} files={[]} />)
// Assert - Button should be disabled
expect(screen.getByRole('button', { name: /datasetCreation.stepOne.button/i })).toBeDisabled()
})
it('should correctly compute fileNextDisabled when files are loaded', () => {
const files = [createMockFileItem()]
render(<StepOne {...defaultProps} files={files} />)
// Assert - Button should be enabled
expect(screen.getByRole('button', { name: /datasetCreation.stepOne.button/i })).not.toBeDisabled()
})
it('should correctly compute fileNextDisabled when some files are not uploaded', () => {
// Arrange - Create a file item without id (not yet uploaded)
const file = new File(['test'], 'test.txt', { type: 'text/plain' })
const fileItem: FileItem = {
fileID: 'temp-id',
file: Object.assign(file, { id: undefined, extension: 'txt', mime_type: 'text/plain' }),
progress: 0,
}
render(<StepOne {...defaultProps} files={[fileItem]} />)
// Assert - Button should be disabled
expect(screen.getByRole('button', { name: /datasetCreation.stepOne.button/i })).toBeDisabled()
})
})
describe('Callbacks', () => {
it('should call onStepChange when next button is clicked with valid files', () => {
const onStepChange = vi.fn()
const files = [createMockFileItem()]
render(<StepOne {...defaultProps} files={files} onStepChange={onStepChange} />)
fireEvent.click(screen.getByRole('button', { name: /datasetCreation.stepOne.button/i }))
expect(onStepChange).toHaveBeenCalledTimes(1)
})
it('should show plan upgrade modal when batch upload not supported and multiple files', () => {
mockEnableBilling = true
mockPlan.type = Plan.sandbox
const files = [createMockFileItem(), createMockFileItem()]
render(<StepOne {...defaultProps} files={files} />)
fireEvent.click(screen.getByRole('button', { name: /datasetCreation.stepOne.button/i }))
expect(screen.getByTestId('plan-upgrade-modal')).toBeInTheDocument()
})
it('should show upgrade card when in sandbox plan with files', () => {
mockEnableBilling = true
mockPlan.type = Plan.sandbox
const files = [createMockFileItem()]
render(<StepOne {...defaultProps} files={files} />)
expect(screen.getByTestId('upgrade-card')).toBeInTheDocument()
})
})
// Vector Space Full Tests
describe('Vector Space Full', () => {
it('should show VectorSpaceFull when vector space is full and billing is enabled', () => {
mockEnableBilling = true
mockPlan.usage.vectorSpace = 100
mockPlan.total.vectorSpace = 100
const files = [createMockFileItem()]
render(<StepOne {...defaultProps} files={files} />)
expect(screen.getByTestId('vector-space-full')).toBeInTheDocument()
})
it('should disable next button when vector space is full', () => {
mockEnableBilling = true
mockPlan.usage.vectorSpace = 100
mockPlan.total.vectorSpace = 100
const files = [createMockFileItem()]
render(<StepOne {...defaultProps} files={files} />)
expect(screen.getByRole('button', { name: /datasetCreation.stepOne.button/i })).toBeDisabled()
})
})
// Preview Integration Tests
describe('Preview Integration', () => {
it('should show file preview when file preview button is clicked', () => {
render(<StepOne {...defaultProps} />)
fireEvent.click(screen.getByTestId('preview-file'))
expect(screen.getByTestId('file-preview')).toBeInTheDocument()
})
it('should hide file preview when hide button is clicked', () => {
render(<StepOne {...defaultProps} />)
fireEvent.click(screen.getByTestId('preview-file'))
fireEvent.click(screen.getByTestId('hide-file-preview'))
expect(screen.queryByTestId('file-preview')).not.toBeInTheDocument()
})
it('should show notion page preview when preview button is clicked', () => {
const authedDataSourceList = [createMockDataSourceAuth()]
render(<StepOne {...defaultProps} dataSourceType={DataSourceType.NOTION} authedDataSourceList={authedDataSourceList} />)
fireEvent.click(screen.getByTestId('preview-notion'))
expect(screen.getByTestId('notion-page-preview')).toBeInTheDocument()
})
it('should show website preview when preview button is clicked', () => {
render(<StepOne {...defaultProps} dataSourceType={DataSourceType.WEB} />)
fireEvent.click(screen.getByTestId('preview-website'))
// Assert - Check for pagePreview title which is shown by WebsitePreview
expect(screen.getByText('datasetCreation.stepOne.pagePreview')).toBeInTheDocument()
})
})
describe('Edge Cases', () => {
it('should handle empty notionPages array', () => {
const authedDataSourceList = [createMockDataSourceAuth()]
render(<StepOne {...defaultProps} dataSourceType={DataSourceType.NOTION} notionPages={[]} authedDataSourceList={authedDataSourceList} />)
// Assert - Button should be disabled when no pages selected
expect(screen.getByRole('button', { name: /datasetCreation.stepOne.button/i })).toBeDisabled()
})
it('should handle empty websitePages array', () => {
render(<StepOne {...defaultProps} dataSourceType={DataSourceType.WEB} websitePages={[]} />)
// Assert - Button should be disabled when no pages crawled
expect(screen.getByRole('button', { name: /datasetCreation.stepOne.button/i })).toBeDisabled()
})
it('should handle empty authedDataSourceList', () => {
render(<StepOne {...defaultProps} dataSourceType={DataSourceType.NOTION} authedDataSourceList={[]} />)
// Assert - Should show NotionConnector with connect button
expect(screen.getByText('datasetCreation.stepOne.notionSyncTitle')).toBeInTheDocument()
})
it('should handle authedDataSourceList without notion credentials', () => {
const authedDataSourceList = [createMockDataSourceAuth({ credentials_list: [] })]
render(<StepOne {...defaultProps} dataSourceType={DataSourceType.NOTION} authedDataSourceList={authedDataSourceList} />)
// Assert - Should show NotionConnector with connect button
expect(screen.getByText('datasetCreation.stepOne.notionSyncTitle')).toBeInTheDocument()
})
it('should clear previews when switching data source types', () => {
render(<StepOne {...defaultProps} />)
fireEvent.click(screen.getByTestId('preview-file'))
expect(screen.getByTestId('file-preview')).toBeInTheDocument()
// Act - Change to NOTION
fireEvent.click(screen.getByText('datasetCreation.stepOne.dataSourceType.notion'))
// Assert - File preview should be cleared
expect(screen.queryByTestId('file-preview')).not.toBeInTheDocument()
})
})
describe('Integration', () => {
it('should complete file upload flow', () => {
const onStepChange = vi.fn()
const files = [createMockFileItem()]
render(<StepOne {...defaultProps} files={files} onStepChange={onStepChange} />)
fireEvent.click(screen.getByRole('button', { name: /datasetCreation.stepOne.button/i }))
expect(onStepChange).toHaveBeenCalled()
})
it('should complete notion page selection flow', () => {
const onStepChange = vi.fn()
const authedDataSourceList = [createMockDataSourceAuth()]
const notionPages = [createMockNotionPage()]
render(
<StepOne
{...defaultProps}
dataSourceType={DataSourceType.NOTION}
authedDataSourceList={authedDataSourceList}
notionPages={notionPages}
onStepChange={onStepChange}
/>,
)
fireEvent.click(screen.getByRole('button', { name: /datasetCreation.stepOne.button/i }))
expect(onStepChange).toHaveBeenCalled()
})
it('should complete website crawl flow', () => {
const onStepChange = vi.fn()
const websitePages = [createMockCrawlResult()]
render(
<StepOne
{...defaultProps}
dataSourceType={DataSourceType.WEB}
websitePages={websitePages}
onStepChange={onStepChange}
/>,
)
fireEvent.click(screen.getByRole('button', { name: /datasetCreation.stepOne.button/i }))
expect(onStepChange).toHaveBeenCalled()
})
})
})

View File

@ -0,0 +1,89 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import UpgradeCard from '../upgrade-card'
const mockSetShowPricingModal = vi.fn()
vi.mock('@/context/modal-context', () => ({
useModalContext: () => ({
setShowPricingModal: mockSetShowPricingModal,
}),
}))
vi.mock('@/app/components/billing/upgrade-btn', () => ({
default: ({ onClick, className }: { onClick?: () => void, className?: string }) => (
<button type="button" className={className} onClick={onClick} data-testid="upgrade-btn">
upgrade
</button>
),
}))
describe('UpgradeCard', () => {
beforeEach(() => {
vi.clearAllMocks()
})
describe('Rendering', () => {
it('should render without crashing', () => {
render(<UpgradeCard />)
// Assert - title and description i18n keys are rendered
expect(screen.getByText(/uploadMultipleFiles\.title/i)).toBeInTheDocument()
})
it('should render the upgrade title text', () => {
render(<UpgradeCard />)
expect(screen.getByText(/uploadMultipleFiles\.title/i)).toBeInTheDocument()
})
it('should render the upgrade description text', () => {
render(<UpgradeCard />)
expect(screen.getByText(/uploadMultipleFiles\.description/i)).toBeInTheDocument()
})
it('should render the upgrade button', () => {
render(<UpgradeCard />)
expect(screen.getByRole('button')).toBeInTheDocument()
})
})
describe('User Interactions', () => {
it('should call setShowPricingModal when upgrade button is clicked', () => {
render(<UpgradeCard />)
fireEvent.click(screen.getByRole('button'))
expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
})
it('should not call setShowPricingModal without user interaction', () => {
render(<UpgradeCard />)
expect(mockSetShowPricingModal).not.toHaveBeenCalled()
})
it('should call setShowPricingModal on each button click', () => {
render(<UpgradeCard />)
const button = screen.getByRole('button')
fireEvent.click(button)
fireEvent.click(button)
expect(mockSetShowPricingModal).toHaveBeenCalledTimes(2)
})
})
describe('Memoization', () => {
it('should maintain rendering after rerender with same props', () => {
const { rerender } = render(<UpgradeCard />)
rerender(<UpgradeCard />)
expect(screen.getByText(/uploadMultipleFiles\.title/i)).toBeInTheDocument()
expect(screen.getByRole('button')).toBeInTheDocument()
})
})
})

View File

@ -0,0 +1,66 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { DataSourceType } from '@/models/datasets'
// Mock config to control web crawl feature flags
vi.mock('@/config', () => ({
ENABLE_WEBSITE_FIRECRAWL: true,
ENABLE_WEBSITE_JINAREADER: true,
ENABLE_WEBSITE_WATERCRAWL: false,
}))
// Mock CSS module
vi.mock('../../../index.module.css', () => ({
default: {
dataSourceItem: 'ds-item',
active: 'active',
disabled: 'disabled',
datasetIcon: 'icon',
notion: 'notion-icon',
web: 'web-icon',
},
}))
const { default: DataSourceTypeSelector } = await import('../data-source-type-selector')
describe('DataSourceTypeSelector', () => {
const defaultProps = {
currentType: DataSourceType.FILE,
disabled: false,
onChange: vi.fn(),
onClearPreviews: vi.fn(),
}
beforeEach(() => {
vi.clearAllMocks()
})
describe('rendering', () => {
it('should render file, notion, and web options', () => {
render(<DataSourceTypeSelector {...defaultProps} />)
expect(screen.getByText('datasetCreation.stepOne.dataSourceType.file')).toBeInTheDocument()
expect(screen.getByText('datasetCreation.stepOne.dataSourceType.notion')).toBeInTheDocument()
expect(screen.getByText('datasetCreation.stepOne.dataSourceType.web')).toBeInTheDocument()
})
it('should render as a 3-column grid', () => {
const { container } = render(<DataSourceTypeSelector {...defaultProps} />)
expect(container.firstElementChild).toHaveClass('grid-cols-3')
})
})
describe('interactions', () => {
it('should call onChange and onClearPreviews on type click', () => {
render(<DataSourceTypeSelector {...defaultProps} />)
fireEvent.click(screen.getByText('datasetCreation.stepOne.dataSourceType.notion'))
expect(defaultProps.onChange).toHaveBeenCalledWith(DataSourceType.NOTION)
expect(defaultProps.onClearPreviews).toHaveBeenCalledWith(DataSourceType.NOTION)
})
it('should not call onChange when disabled', () => {
render(<DataSourceTypeSelector {...defaultProps} disabled />)
fireEvent.click(screen.getByText('datasetCreation.stepOne.dataSourceType.notion'))
expect(defaultProps.onChange).not.toHaveBeenCalled()
})
})
})

View File

@ -0,0 +1,48 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import NextStepButton from '../next-step-button'
describe('NextStepButton', () => {
const defaultProps = {
disabled: false,
onClick: vi.fn(),
}
beforeEach(() => {
vi.clearAllMocks()
})
it('should render button text', () => {
render(<NextStepButton {...defaultProps} />)
expect(screen.getByText('datasetCreation.stepOne.button')).toBeInTheDocument()
})
it('should render a primary variant button', () => {
render(<NextStepButton {...defaultProps} />)
const btn = screen.getByRole('button')
expect(btn).toBeInTheDocument()
})
it('should call onClick when clicked', () => {
render(<NextStepButton {...defaultProps} />)
fireEvent.click(screen.getByRole('button'))
expect(defaultProps.onClick).toHaveBeenCalledOnce()
})
it('should be disabled when disabled prop is true', () => {
render(<NextStepButton disabled onClick={defaultProps.onClick} />)
expect(screen.getByRole('button')).toBeDisabled()
})
it('should not call onClick when disabled', () => {
render(<NextStepButton disabled onClick={defaultProps.onClick} />)
fireEvent.click(screen.getByRole('button'))
expect(defaultProps.onClick).not.toHaveBeenCalled()
})
it('should render arrow icon', () => {
const { container } = render(<NextStepButton {...defaultProps} />)
const svg = container.querySelector('svg')
expect(svg).toBeInTheDocument()
})
})

View File

@ -0,0 +1,119 @@
import type { NotionPage } from '@/models/common'
import type { CrawlResultItem } from '@/models/datasets'
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
// Mock child components - paths must match source file's imports (relative to source)
vi.mock('../../../file-preview', () => ({
default: ({ file, hidePreview }: { file: { name: string }, hidePreview: () => void }) => (
<div data-testid="file-preview">
<span>{file.name}</span>
<button data-testid="close-file" onClick={hidePreview}>close-file</button>
</div>
),
}))
vi.mock('../../../notion-page-preview', () => ({
default: ({ currentPage, hidePreview }: { currentPage: { page_name: string }, hidePreview: () => void }) => (
<div data-testid="notion-preview">
<span>{currentPage.page_name}</span>
<button data-testid="close-notion" onClick={hidePreview}>close-notion</button>
</div>
),
}))
vi.mock('../../../website/preview', () => ({
default: ({ payload, hidePreview }: { payload: { title: string }, hidePreview: () => void }) => (
<div data-testid="website-preview">
<span>{payload.title}</span>
<button data-testid="close-website" onClick={hidePreview}>close-website</button>
</div>
),
}))
vi.mock('@/app/components/billing/plan-upgrade-modal', () => ({
default: ({ show, onClose, title }: { show: boolean, onClose: () => void, title: string }) => show
? (
<div data-testid="plan-upgrade-modal">
<span>{title}</span>
<button data-testid="close-modal" onClick={onClose}>close-modal</button>
</div>
)
: null,
}))
const { default: PreviewPanel } = await import('../preview-panel')
describe('PreviewPanel', () => {
const defaultProps = {
currentFile: undefined,
currentNotionPage: undefined,
currentWebsite: undefined,
notionCredentialId: 'cred-1',
isShowPlanUpgradeModal: false,
hideFilePreview: vi.fn(),
hideNotionPagePreview: vi.fn(),
hideWebsitePreview: vi.fn(),
hidePlanUpgradeModal: vi.fn(),
}
beforeEach(() => {
vi.clearAllMocks()
})
describe('rendering', () => {
it('should render nothing when no preview is active', () => {
const { container } = render(<PreviewPanel {...defaultProps} />)
expect(container.querySelector('[data-testid]')).toBeNull()
})
it('should render file preview when currentFile is set', () => {
render(<PreviewPanel {...defaultProps} currentFile={{ name: 'test.pdf' } as unknown as File} />)
expect(screen.getByTestId('file-preview')).toBeInTheDocument()
expect(screen.getByText('test.pdf')).toBeInTheDocument()
})
it('should render notion preview when currentNotionPage is set', () => {
render(<PreviewPanel {...defaultProps} currentNotionPage={{ page_name: 'My Page' } as unknown as NotionPage} />)
expect(screen.getByTestId('notion-preview')).toBeInTheDocument()
expect(screen.getByText('My Page')).toBeInTheDocument()
})
it('should render website preview when currentWebsite is set', () => {
render(<PreviewPanel {...defaultProps} currentWebsite={{ title: 'My Site' } as unknown as CrawlResultItem} />)
expect(screen.getByTestId('website-preview')).toBeInTheDocument()
expect(screen.getByText('My Site')).toBeInTheDocument()
})
it('should render plan upgrade modal when isShowPlanUpgradeModal is true', () => {
render(<PreviewPanel {...defaultProps} isShowPlanUpgradeModal />)
expect(screen.getByTestId('plan-upgrade-modal')).toBeInTheDocument()
})
})
describe('interactions', () => {
it('should call hideFilePreview when file preview close clicked', () => {
render(<PreviewPanel {...defaultProps} currentFile={{ name: 'test.pdf' } as unknown as File} />)
fireEvent.click(screen.getByTestId('close-file'))
expect(defaultProps.hideFilePreview).toHaveBeenCalledOnce()
})
it('should call hidePlanUpgradeModal when modal close clicked', () => {
render(<PreviewPanel {...defaultProps} isShowPlanUpgradeModal />)
fireEvent.click(screen.getByTestId('close-modal'))
expect(defaultProps.hidePlanUpgradeModal).toHaveBeenCalledOnce()
})
it('should call hideNotionPagePreview when notion preview close clicked', () => {
render(<PreviewPanel {...defaultProps} currentNotionPage={{ page_name: 'My Page' } as unknown as NotionPage} />)
fireEvent.click(screen.getByTestId('close-notion'))
expect(defaultProps.hideNotionPagePreview).toHaveBeenCalledOnce()
})
it('should call hideWebsitePreview when website preview close clicked', () => {
render(<PreviewPanel {...defaultProps} currentWebsite={{ title: 'My Site' } as unknown as CrawlResultItem} />)
fireEvent.click(screen.getByTestId('close-website'))
expect(defaultProps.hideWebsitePreview).toHaveBeenCalledOnce()
})
})
})

View File

@ -0,0 +1,60 @@
import type { NotionPage } from '@/models/common'
import type { CrawlResultItem } from '@/models/datasets'
import { act, renderHook } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import usePreviewState from '../use-preview-state'
describe('usePreviewState', () => {
it('should initialize with all previews undefined', () => {
const { result } = renderHook(() => usePreviewState())
expect(result.current.currentFile).toBeUndefined()
expect(result.current.currentNotionPage).toBeUndefined()
expect(result.current.currentWebsite).toBeUndefined()
})
it('should show and hide file preview', () => {
const { result } = renderHook(() => usePreviewState())
const file = new File(['content'], 'test.pdf')
act(() => {
result.current.showFilePreview(file)
})
expect(result.current.currentFile).toBe(file)
act(() => {
result.current.hideFilePreview()
})
expect(result.current.currentFile).toBeUndefined()
})
it('should show and hide notion page preview', () => {
const { result } = renderHook(() => usePreviewState())
const page = { page_id: 'p1', page_name: 'Test' } as unknown as NotionPage
act(() => {
result.current.showNotionPagePreview(page)
})
expect(result.current.currentNotionPage).toBe(page)
act(() => {
result.current.hideNotionPagePreview()
})
expect(result.current.currentNotionPage).toBeUndefined()
})
it('should show and hide website preview', () => {
const { result } = renderHook(() => usePreviewState())
const website = { title: 'Example', source_url: 'https://example.com' } as unknown as CrawlResultItem
act(() => {
result.current.showWebsitePreview(website)
})
expect(result.current.currentWebsite).toBe(website)
act(() => {
result.current.hideWebsitePreview()
})
expect(result.current.currentWebsite).toBeUndefined()
})
})

File diff suppressed because it is too large Load Diff

View File

@ -1,10 +1,10 @@
import type { createDocumentResponse, FullDocumentDetail, IconInfo } from '@/models/datasets'
import type { createDocumentResponse, DataSet, FullDocumentDetail, IconInfo } from '@/models/datasets'
import { render, screen } from '@testing-library/react'
import { RETRIEVE_METHOD } from '@/types/app'
import StepThree from './index'
import StepThree from '../index'
// Mock the EmbeddingProcess component since it has complex async logic
vi.mock('../embedding-process', () => ({
vi.mock('../../embedding-process', () => ({
default: vi.fn(({ datasetId, batchId, documents, indexingType, retrievalMethod }) => (
<div data-testid="embedding-process">
<span data-testid="ep-dataset-id">{datasetId}</span>
@ -98,97 +98,74 @@ const renderStepThree = (props: Partial<Parameters<typeof StepThree>[0]> = {}) =
return render(<StepThree {...defaultProps} />)
}
// ============================================================================
// StepThree Component Tests
// ============================================================================
describe('StepThree', () => {
beforeEach(() => {
vi.clearAllMocks()
mockMediaType = 'pc'
})
// --------------------------------------------------------------------------
// Rendering Tests - Verify component renders properly
// --------------------------------------------------------------------------
describe('Rendering', () => {
it('should render without crashing', () => {
// Arrange & Act
renderStepThree()
// Assert
expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
})
it('should render with creation title when datasetId is not provided', () => {
// Arrange & Act
renderStepThree()
// Assert
expect(screen.getByText('datasetCreation.stepThree.creationTitle')).toBeInTheDocument()
expect(screen.getByText('datasetCreation.stepThree.creationContent')).toBeInTheDocument()
})
it('should render with addition title when datasetId is provided', () => {
// Arrange & Act
renderStepThree({
datasetId: 'existing-dataset-123',
datasetName: 'Existing Dataset',
})
// Assert
expect(screen.getByText('datasetCreation.stepThree.additionTitle')).toBeInTheDocument()
expect(screen.queryByText('datasetCreation.stepThree.creationTitle')).not.toBeInTheDocument()
})
it('should render label text in creation mode', () => {
// Arrange & Act
renderStepThree()
// Assert
expect(screen.getByText('datasetCreation.stepThree.label')).toBeInTheDocument()
})
it('should render side tip panel on desktop', () => {
// Arrange
mockMediaType = 'pc'
// Act
renderStepThree()
// Assert
expect(screen.getByText('datasetCreation.stepThree.sideTipTitle')).toBeInTheDocument()
expect(screen.getByText('datasetCreation.stepThree.sideTipContent')).toBeInTheDocument()
expect(screen.getByText('datasetPipeline.addDocuments.stepThree.learnMore')).toBeInTheDocument()
})
it('should not render side tip panel on mobile', () => {
// Arrange
mockMediaType = 'mobile'
// Act
renderStepThree()
// Assert
expect(screen.queryByText('datasetCreation.stepThree.sideTipTitle')).not.toBeInTheDocument()
expect(screen.queryByText('datasetCreation.stepThree.sideTipContent')).not.toBeInTheDocument()
})
it('should render EmbeddingProcess component', () => {
// Arrange & Act
renderStepThree()
// Assert
expect(screen.getByTestId('embedding-process')).toBeInTheDocument()
})
it('should render documentation link with correct href on desktop', () => {
// Arrange
mockMediaType = 'pc'
// Act
renderStepThree()
// Assert
const link = screen.getByText('datasetPipeline.addDocuments.stepThree.learnMore')
expect(link).toHaveAttribute('href', 'https://docs.dify.ai/en-US/use-dify/knowledge/integrate-knowledge-within-application')
expect(link).toHaveAttribute('target', '_blank')
@ -196,70 +173,53 @@ describe('StepThree', () => {
})
it('should apply correct container classes', () => {
// Arrange & Act
const { container } = renderStepThree()
// Assert
const outerDiv = container.firstChild as HTMLElement
expect(outerDiv).toHaveClass('flex', 'h-full', 'max-h-full', 'w-full', 'justify-center', 'overflow-y-auto')
})
})
// --------------------------------------------------------------------------
// Props Testing - Test all prop variations
// --------------------------------------------------------------------------
describe('Props', () => {
describe('datasetId prop', () => {
it('should render creation mode when datasetId is undefined', () => {
// Arrange & Act
renderStepThree({ datasetId: undefined })
// Assert
expect(screen.getByText('datasetCreation.stepThree.creationTitle')).toBeInTheDocument()
})
it('should render addition mode when datasetId is provided', () => {
// Arrange & Act
renderStepThree({ datasetId: 'dataset-123' })
// Assert
expect(screen.getByText('datasetCreation.stepThree.additionTitle')).toBeInTheDocument()
})
it('should pass datasetId to EmbeddingProcess', () => {
// Arrange
const datasetId = 'my-dataset-id'
// Act
renderStepThree({ datasetId })
// Assert
expect(screen.getByTestId('ep-dataset-id')).toHaveTextContent(datasetId)
})
it('should use creationCache dataset id when datasetId is not provided', () => {
// Arrange
const creationCache = createMockCreationCache()
// Act
renderStepThree({ creationCache })
// Assert
expect(screen.getByTestId('ep-dataset-id')).toHaveTextContent('dataset-123')
})
})
describe('datasetName prop', () => {
it('should display datasetName in creation mode', () => {
// Arrange & Act
renderStepThree({ datasetName: 'My Custom Dataset' })
// Assert
expect(screen.getByText('My Custom Dataset')).toBeInTheDocument()
})
it('should display datasetName in addition mode description', () => {
// Arrange & Act
renderStepThree({
datasetId: 'dataset-123',
datasetName: 'Existing Dataset Name',
@ -271,45 +231,35 @@ describe('StepThree', () => {
})
it('should fallback to creationCache dataset name when datasetName is not provided', () => {
// Arrange
const creationCache = createMockCreationCache()
creationCache.dataset!.name = 'Cache Dataset Name'
// Act
renderStepThree({ creationCache })
// Assert
expect(screen.getByText('Cache Dataset Name')).toBeInTheDocument()
})
})
describe('indexingType prop', () => {
it('should pass indexingType to EmbeddingProcess', () => {
// Arrange & Act
renderStepThree({ indexingType: 'high_quality' })
// Assert
expect(screen.getByTestId('ep-indexing-type')).toHaveTextContent('high_quality')
})
it('should use creationCache indexing_technique when indexingType is not provided', () => {
// Arrange
const creationCache = createMockCreationCache()
creationCache.dataset!.indexing_technique = 'economy' as any
creationCache.dataset!.indexing_technique = 'economy' as unknown as DataSet['indexing_technique']
// Act
renderStepThree({ creationCache })
// Assert
expect(screen.getByTestId('ep-indexing-type')).toHaveTextContent('economy')
})
it('should prefer creationCache indexing_technique over indexingType prop', () => {
// Arrange
const creationCache = createMockCreationCache()
creationCache.dataset!.indexing_technique = 'cache_technique' as any
creationCache.dataset!.indexing_technique = 'cache_technique' as unknown as DataSet['indexing_technique']
// Act
renderStepThree({ creationCache, indexingType: 'prop_technique' })
// Assert - creationCache takes precedence
@ -319,60 +269,47 @@ describe('StepThree', () => {
describe('retrievalMethod prop', () => {
it('should pass retrievalMethod to EmbeddingProcess', () => {
// Arrange & Act
renderStepThree({ retrievalMethod: RETRIEVE_METHOD.semantic })
// Assert
expect(screen.getByTestId('ep-retrieval-method')).toHaveTextContent('semantic_search')
})
it('should use creationCache retrieval method when retrievalMethod is not provided', () => {
// Arrange
const creationCache = createMockCreationCache()
creationCache.dataset!.retrieval_model_dict = { search_method: 'full_text_search' } as any
creationCache.dataset!.retrieval_model_dict = { search_method: 'full_text_search' } as unknown as DataSet['retrieval_model_dict']
// Act
renderStepThree({ creationCache })
// Assert
expect(screen.getByTestId('ep-retrieval-method')).toHaveTextContent('full_text_search')
})
})
describe('creationCache prop', () => {
it('should pass batchId from creationCache to EmbeddingProcess', () => {
// Arrange
const creationCache = createMockCreationCache()
creationCache.batch = 'custom-batch-123'
// Act
renderStepThree({ creationCache })
// Assert
expect(screen.getByTestId('ep-batch-id')).toHaveTextContent('custom-batch-123')
})
it('should pass documents from creationCache to EmbeddingProcess', () => {
// Arrange
const creationCache = createMockCreationCache()
creationCache.documents = [createMockDocument(), createMockDocument(), createMockDocument()] as any
creationCache.documents = [createMockDocument(), createMockDocument(), createMockDocument()] as unknown as createDocumentResponse['documents']
// Act
renderStepThree({ creationCache })
// Assert
expect(screen.getByTestId('ep-documents-count')).toHaveTextContent('3')
})
it('should use icon_info from creationCache dataset', () => {
// Arrange
const creationCache = createMockCreationCache()
creationCache.dataset!.icon_info = createMockIconInfo({
icon: '🚀',
icon_background: '#FF0000',
})
// Act
const { container } = renderStepThree({ creationCache })
// Assert - Check AppIcon component receives correct props
@ -381,7 +318,6 @@ describe('StepThree', () => {
})
it('should handle undefined creationCache', () => {
// Arrange & Act
renderStepThree({ creationCache: undefined })
// Assert - Should not crash, use fallback values
@ -390,14 +326,12 @@ describe('StepThree', () => {
})
it('should handle creationCache with undefined dataset', () => {
// Arrange
const creationCache: createDocumentResponse = {
dataset: undefined,
batch: 'batch-123',
documents: [],
}
// Act
renderStepThree({ creationCache })
// Assert - Should use default icon info
@ -406,12 +340,9 @@ describe('StepThree', () => {
})
})
// --------------------------------------------------------------------------
// Edge Cases Tests - Test null, undefined, empty values and boundaries
// --------------------------------------------------------------------------
describe('Edge Cases', () => {
it('should handle all props being undefined', () => {
// Arrange & Act
renderStepThree({
datasetId: undefined,
datasetName: undefined,
@ -426,7 +357,6 @@ describe('StepThree', () => {
})
it('should handle empty string datasetId', () => {
// Arrange & Act
renderStepThree({ datasetId: '' })
// Assert - Empty string is falsy, should show creation mode
@ -434,7 +364,6 @@ describe('StepThree', () => {
})
it('should handle empty string datasetName', () => {
// Arrange & Act
renderStepThree({ datasetName: '' })
// Assert - Should not crash
@ -442,23 +371,18 @@ describe('StepThree', () => {
})
it('should handle empty documents array in creationCache', () => {
// Arrange
const creationCache = createMockCreationCache()
creationCache.documents = []
// Act
renderStepThree({ creationCache })
// Assert
expect(screen.getByTestId('ep-documents-count')).toHaveTextContent('0')
})
it('should handle creationCache with missing icon_info', () => {
// Arrange
const creationCache = createMockCreationCache()
creationCache.dataset!.icon_info = undefined as any
creationCache.dataset!.icon_info = undefined as unknown as IconInfo
// Act
renderStepThree({ creationCache })
// Assert - Should use default icon info
@ -466,10 +390,8 @@ describe('StepThree', () => {
})
it('should handle very long datasetName', () => {
// Arrange
const longName = 'A'.repeat(500)
// Act
renderStepThree({ datasetName: longName })
// Assert - Should render without crashing
@ -477,10 +399,8 @@ describe('StepThree', () => {
})
it('should handle special characters in datasetName', () => {
// Arrange
const specialName = 'Dataset <script>alert("xss")</script> & "quotes" \'apostrophe\''
// Act
renderStepThree({ datasetName: specialName })
// Assert - Should render safely as text
@ -488,22 +408,17 @@ describe('StepThree', () => {
})
it('should handle unicode characters in datasetName', () => {
// Arrange
const unicodeName = '数据集名称 🚀 émojis & spëcîal çhàrs'
// Act
renderStepThree({ datasetName: unicodeName })
// Assert
expect(screen.getByText(unicodeName)).toBeInTheDocument()
})
it('should handle creationCache with null dataset name', () => {
// Arrange
const creationCache = createMockCreationCache()
creationCache.dataset!.name = null as any
creationCache.dataset!.name = null as unknown as string
// Act
const { container } = renderStepThree({ creationCache })
// Assert - Should not crash
@ -511,13 +426,10 @@ describe('StepThree', () => {
})
})
// --------------------------------------------------------------------------
// Conditional Rendering Tests - Test mode switching behavior
// --------------------------------------------------------------------------
describe('Conditional Rendering', () => {
describe('Creation Mode (no datasetId)', () => {
it('should show AppIcon component', () => {
// Arrange & Act
const { container } = renderStepThree()
// Assert - AppIcon should be rendered
@ -526,7 +438,6 @@ describe('StepThree', () => {
})
it('should show Divider component', () => {
// Arrange & Act
const { container } = renderStepThree()
// Assert - Divider should be rendered (it adds hr with specific classes)
@ -535,20 +446,16 @@ describe('StepThree', () => {
})
it('should show dataset name input area', () => {
// Arrange
const datasetName = 'Test Dataset Name'
// Act
renderStepThree({ datasetName })
// Assert
expect(screen.getByText(datasetName)).toBeInTheDocument()
})
})
describe('Addition Mode (with datasetId)', () => {
it('should not show AppIcon component', () => {
// Arrange & Act
renderStepThree({ datasetId: 'dataset-123' })
// Assert - Creation section should not be rendered
@ -556,7 +463,6 @@ describe('StepThree', () => {
})
it('should show addition description with dataset name', () => {
// Arrange & Act
renderStepThree({
datasetId: 'dataset-123',
datasetName: 'My Dataset',
@ -569,10 +475,8 @@ describe('StepThree', () => {
describe('Mobile vs Desktop', () => {
it('should show side panel on tablet', () => {
// Arrange
mockMediaType = 'tablet'
// Act
renderStepThree()
// Assert - Tablet is not mobile, should show side panel
@ -580,21 +484,16 @@ describe('StepThree', () => {
})
it('should not show side panel on mobile', () => {
// Arrange
mockMediaType = 'mobile'
// Act
renderStepThree()
// Assert
expect(screen.queryByText('datasetCreation.stepThree.sideTipTitle')).not.toBeInTheDocument()
})
it('should render EmbeddingProcess on mobile', () => {
// Arrange
mockMediaType = 'mobile'
// Act
renderStepThree()
// Assert - Main content should still be rendered
@ -603,64 +502,48 @@ describe('StepThree', () => {
})
})
// --------------------------------------------------------------------------
// EmbeddingProcess Integration Tests - Verify correct props are passed
// --------------------------------------------------------------------------
describe('EmbeddingProcess Integration', () => {
it('should pass correct datasetId to EmbeddingProcess with datasetId prop', () => {
// Arrange & Act
renderStepThree({ datasetId: 'direct-dataset-id' })
// Assert
expect(screen.getByTestId('ep-dataset-id')).toHaveTextContent('direct-dataset-id')
})
it('should pass creationCache dataset id when datasetId prop is undefined', () => {
// Arrange
const creationCache = createMockCreationCache()
creationCache.dataset!.id = 'cache-dataset-id'
// Act
renderStepThree({ creationCache })
// Assert
expect(screen.getByTestId('ep-dataset-id')).toHaveTextContent('cache-dataset-id')
})
it('should pass empty string for datasetId when both sources are undefined', () => {
// Arrange & Act
renderStepThree()
// Assert
expect(screen.getByTestId('ep-dataset-id')).toHaveTextContent('')
})
it('should pass batchId from creationCache', () => {
// Arrange
const creationCache = createMockCreationCache()
creationCache.batch = 'test-batch-456'
// Act
renderStepThree({ creationCache })
// Assert
expect(screen.getByTestId('ep-batch-id')).toHaveTextContent('test-batch-456')
})
it('should pass empty string for batchId when creationCache is undefined', () => {
// Arrange & Act
renderStepThree()
// Assert
expect(screen.getByTestId('ep-batch-id')).toHaveTextContent('')
})
it('should prefer datasetId prop over creationCache dataset id', () => {
// Arrange
const creationCache = createMockCreationCache()
creationCache.dataset!.id = 'cache-id'
// Act
renderStepThree({ datasetId: 'prop-id', creationCache })
// Assert - datasetId prop takes precedence
@ -668,12 +551,9 @@ describe('StepThree', () => {
})
})
// --------------------------------------------------------------------------
// Icon Rendering Tests - Verify AppIcon behavior
// --------------------------------------------------------------------------
describe('Icon Rendering', () => {
it('should use default icon info when creationCache is undefined', () => {
// Arrange & Act
const { container } = renderStepThree()
// Assert - Default background color should be applied
@ -683,7 +563,6 @@ describe('StepThree', () => {
})
it('should use icon_info from creationCache when available', () => {
// Arrange
const creationCache = createMockCreationCache()
creationCache.dataset!.icon_info = {
icon: '🎉',
@ -692,7 +571,6 @@ describe('StepThree', () => {
icon_url: '',
}
// Act
const { container } = renderStepThree({ creationCache })
// Assert - Custom background color should be applied
@ -702,11 +580,9 @@ describe('StepThree', () => {
})
it('should use default icon when creationCache dataset icon_info is undefined', () => {
// Arrange
const creationCache = createMockCreationCache()
delete (creationCache.dataset as any).icon_info
delete (creationCache.dataset as Partial<DataSet>).icon_info
// Act
const { container } = renderStepThree({ creationCache })
// Assert - Component should still render with default icon
@ -714,15 +590,11 @@ describe('StepThree', () => {
})
})
// --------------------------------------------------------------------------
// Layout Tests - Verify correct CSS classes and structure
// --------------------------------------------------------------------------
describe('Layout', () => {
it('should have correct outer container classes', () => {
// Arrange & Act
const { container } = renderStepThree()
// Assert
const outerDiv = container.firstChild as HTMLElement
expect(outerDiv).toHaveClass('flex')
expect(outerDiv).toHaveClass('h-full')
@ -730,49 +602,37 @@ describe('StepThree', () => {
})
it('should have correct inner container classes', () => {
// Arrange & Act
const { container } = renderStepThree()
// Assert
const innerDiv = container.querySelector('.max-w-\\[960px\\]')
expect(innerDiv).toBeInTheDocument()
expect(innerDiv).toHaveClass('shrink-0', 'grow')
})
it('should have content wrapper with correct max width', () => {
// Arrange & Act
const { container } = renderStepThree()
// Assert
const contentWrapper = container.querySelector('.max-w-\\[640px\\]')
expect(contentWrapper).toBeInTheDocument()
})
it('should have side tip panel with correct width on desktop', () => {
// Arrange
mockMediaType = 'pc'
// Act
const { container } = renderStepThree()
// Assert
const sidePanel = container.querySelector('.w-\\[328px\\]')
expect(sidePanel).toBeInTheDocument()
})
})
// --------------------------------------------------------------------------
// Accessibility Tests - Verify accessibility features
// --------------------------------------------------------------------------
describe('Accessibility', () => {
it('should have correct link attributes for external documentation link', () => {
// Arrange
mockMediaType = 'pc'
// Act
renderStepThree()
// Assert
const link = screen.getByText('datasetPipeline.addDocuments.stepThree.learnMore')
expect(link.tagName).toBe('A')
expect(link).toHaveAttribute('target', '_blank')
@ -780,35 +640,27 @@ describe('StepThree', () => {
})
it('should have semantic heading structure in creation mode', () => {
// Arrange & Act
renderStepThree()
// Assert
const title = screen.getByText('datasetCreation.stepThree.creationTitle')
expect(title).toBeInTheDocument()
expect(title.className).toContain('title-2xl-semi-bold')
})
it('should have semantic heading structure in addition mode', () => {
// Arrange & Act
renderStepThree({ datasetId: 'dataset-123' })
// Assert
const title = screen.getByText('datasetCreation.stepThree.additionTitle')
expect(title).toBeInTheDocument()
expect(title.className).toContain('title-2xl-semi-bold')
})
})
// --------------------------------------------------------------------------
// Side Panel Tests - Verify side panel behavior
// --------------------------------------------------------------------------
describe('Side Panel', () => {
it('should render RiBookOpenLine icon in side panel', () => {
// Arrange
mockMediaType = 'pc'
// Act
const { container } = renderStepThree()
// Assert - Icon should be present in side panel
@ -817,25 +669,19 @@ describe('StepThree', () => {
})
it('should have correct side panel section background', () => {
// Arrange
mockMediaType = 'pc'
// Act
const { container } = renderStepThree()
// Assert
const sidePanel = container.querySelector('.bg-background-section')
expect(sidePanel).toBeInTheDocument()
})
it('should have correct padding for side panel', () => {
// Arrange
mockMediaType = 'pc'
// Act
const { container } = renderStepThree()
// Assert
const sidePanelWrapper = container.querySelector('.pr-8')
expect(sidePanelWrapper).toBeInTheDocument()
})

View File

@ -10,12 +10,12 @@ import type {
Rules,
} from '@/models/datasets'
import type { RetrievalConfig } from '@/types/app'
import { act, fireEvent, render, renderHook, screen } from '@testing-library/react'
import { act, cleanup, fireEvent, render, renderHook, screen } from '@testing-library/react'
import { ConfigurationMethodEnum, ModelStatusEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
import { ChunkingMode, DataSourceType, ProcessMode } from '@/models/datasets'
import { RETRIEVE_METHOD } from '@/types/app'
import { PreviewPanel } from './components/preview-panel'
import { StepTwoFooter } from './components/step-two-footer'
import { PreviewPanel } from '../components/preview-panel'
import { StepTwoFooter } from '../components/step-two-footer'
import {
DEFAULT_MAXIMUM_CHUNK_LENGTH,
DEFAULT_OVERLAP,
@ -27,15 +27,11 @@ import {
useIndexingEstimate,
usePreviewState,
useSegmentationState,
} from './hooks'
import escape from './hooks/escape'
import unescape from './hooks/unescape'
} from '../hooks'
import escape from '../hooks/escape'
import unescape from '../hooks/unescape'
import StepTwo from '../index'
// ============================================
// Mock external dependencies
// ============================================
// Mock dataset detail context
const mockDataset = {
id: 'test-dataset-id',
doc_form: ChunkingMode.text,
@ -60,10 +56,6 @@ vi.mock('@/context/dataset-detail', () => ({
selector({ dataset: mockCurrentDataset, mutateDatasetRes: mockMutateDatasetRes }),
}))
// Note: @/context/i18n is globally mocked in vitest.setup.ts, no need to mock here
// Note: @/hooks/use-breakpoints uses real import
// Mock model hooks
const mockEmbeddingModelList = [
{ provider: 'openai', model: 'text-embedding-ada-002' },
{ provider: 'cohere', model: 'embed-english-v3.0' },
@ -99,7 +91,6 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', ()
useDefaultModel: () => ({ data: mockDefaultEmbeddingModel }),
}))
// Mock service hooks
const mockFetchDefaultProcessRuleMutate = vi.fn()
vi.mock('@/service/knowledge/use-create-dataset', () => ({
useFetchDefaultProcessRule: ({ onSuccess }: { onSuccess: (data: { rules: Rules, limits: { indexing_max_segmentation_tokens_length: number } }) => void }) => ({
@ -170,18 +161,55 @@ vi.mock('@/app/components/base/amplitude', () => ({
trackEvent: vi.fn(),
}))
// Note: @/app/components/base/toast - uses real import (base component)
// Note: @/app/components/datasets/common/check-rerank-model - uses real import
// Note: @/app/components/base/float-right-container - uses real import (base component)
// Enable IS_CE_EDITION to show QA checkbox in tests
vi.mock('@/config', async () => {
const actual = await vi.importActual('@/config')
return { ...actual, IS_CE_EDITION: true }
})
// Mock PreviewDocumentPicker to allow testing handlePickerChange
vi.mock('@/app/components/datasets/common/document-picker/preview-document-picker', () => ({
// eslint-disable-next-line ts/no-explicit-any
default: ({ onChange, value, files }: { onChange: (item: any) => void, value: any, files: any[] }) => (
<div data-testid="preview-picker">
<span>{value?.name}</span>
{files?.map((f: { id: string, name: string }) => (
<button key={f.id} data-testid={`picker-${f.id}`} onClick={() => onChange(f)}>
{f.name}
</button>
))}
</div>
),
}))
// Mock checkShowMultiModalTip - requires complex model list structure
vi.mock('@/app/components/datasets/settings/utils', () => ({
checkShowMultiModalTip: () => false,
}))
// ============================================
// Test data factories
// ============================================
// Mock complex child components to avoid deep dependency chains when rendering StepTwo
vi.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => ({
default: ({ onSelect, readonly }: { onSelect?: (val: Record<string, string>) => void, readonly?: boolean }) => (
<div data-testid="model-selector" data-readonly={readonly}>
<button onClick={() => onSelect?.({ provider: 'openai', model: 'text-embedding-3-small' })}>Select Model</button>
</div>
),
}))
vi.mock('@/app/components/datasets/common/retrieval-method-config', () => ({
default: ({ disabled }: { disabled?: boolean }) => (
<div data-testid="retrieval-method-config" data-disabled={disabled}>
Retrieval Config
</div>
),
}))
vi.mock('@/app/components/datasets/common/economical-retrieval-method-config', () => ({
default: ({ disabled }: { disabled?: boolean }) => (
<div data-testid="economical-retrieval-config" data-disabled={disabled}>
Economical Config
</div>
),
}))
const createMockFile = (overrides?: Partial<CustomFile>): CustomFile => ({
id: 'file-1',
@ -248,9 +276,7 @@ const createMockEstimate = (overrides?: Partial<FileIndexingEstimateResponse>):
...overrides,
})
// ============================================
// Utility Functions Tests (escape/unescape)
// ============================================
describe('escape utility', () => {
beforeEach(() => {
@ -371,10 +397,6 @@ describe('unescape utility', () => {
})
})
// ============================================
// useSegmentationState Hook Tests
// ============================================
describe('useSegmentationState', () => {
beforeEach(() => {
vi.clearAllMocks()
@ -713,9 +735,7 @@ describe('useSegmentationState', () => {
})
})
// ============================================
// useIndexingConfig Hook Tests
// ============================================
describe('useIndexingConfig', () => {
beforeEach(() => {
@ -887,9 +907,7 @@ describe('useIndexingConfig', () => {
})
})
// ============================================
// usePreviewState Hook Tests
// ============================================
describe('usePreviewState', () => {
beforeEach(() => {
@ -1116,9 +1134,7 @@ describe('usePreviewState', () => {
})
})
// ============================================
// useDocumentCreation Hook Tests
// ============================================
describe('useDocumentCreation', () => {
beforeEach(() => {
@ -1540,9 +1556,7 @@ describe('useDocumentCreation', () => {
})
})
// ============================================
// useIndexingEstimate Hook Tests
// ============================================
describe('useIndexingEstimate', () => {
beforeEach(() => {
@ -1682,9 +1696,7 @@ describe('useIndexingEstimate', () => {
})
})
// ============================================
// StepTwoFooter Component Tests
// ============================================
describe('StepTwoFooter', () => {
beforeEach(() => {
@ -1774,9 +1786,7 @@ describe('StepTwoFooter', () => {
})
})
// ============================================
// PreviewPanel Component Tests
// ============================================
describe('PreviewPanel', () => {
beforeEach(() => {
@ -1955,10 +1965,6 @@ describe('PreviewPanel', () => {
})
})
// ============================================
// Edge Cases Tests
// ============================================
describe('Edge Cases', () => {
beforeEach(() => {
vi.clearAllMocks()
@ -2072,9 +2078,7 @@ describe('Edge Cases', () => {
})
})
// ============================================
// Integration Scenarios
// ============================================
describe('Integration Scenarios', () => {
beforeEach(() => {
@ -2195,3 +2199,357 @@ describe('Integration Scenarios', () => {
})
})
})
// StepTwo Component Tests
describe('StepTwo Component', () => {
beforeEach(() => {
vi.clearAllMocks()
mockCurrentDataset = null
})
afterEach(() => {
cleanup()
})
const defaultStepTwoProps = {
dataSourceType: DataSourceType.FILE,
files: [createMockFile()],
isAPIKeySet: true,
onSetting: vi.fn(),
notionCredentialId: '',
onStepChange: vi.fn(),
}
describe('Rendering', () => {
it('should render without crashing', () => {
render(<StepTwo {...defaultStepTwoProps} />)
expect(screen.getByText(/stepTwo\.segmentation/i)).toBeInTheDocument()
})
it('should show general chunking options when not in upload', () => {
render(<StepTwo {...defaultStepTwoProps} />)
// Should render the segmentation section
expect(screen.getByText(/stepTwo\.segmentation/i)).toBeInTheDocument()
})
it('should show footer with Previous and Next buttons', () => {
render(<StepTwo {...defaultStepTwoProps} />)
expect(screen.getByText(/stepTwo\.previousStep/i)).toBeInTheDocument()
expect(screen.getByText(/stepTwo\.nextStep/i)).toBeInTheDocument()
})
})
describe('Initialization', () => {
it('should fetch default process rule when not in setting mode', () => {
render(<StepTwo {...defaultStepTwoProps} />)
expect(mockFetchDefaultProcessRuleMutate).toHaveBeenCalledWith('/datasets/process-rule')
})
it('should apply config from rules when in setting mode with document detail', () => {
const docDetail = createMockDocumentDetail()
render(
<StepTwo
{...defaultStepTwoProps}
isSetting={true}
documentDetail={docDetail}
datasetId="test-id"
/>,
)
// Should not fetch default rule when isSetting
expect(mockFetchDefaultProcessRuleMutate).not.toHaveBeenCalled()
})
})
describe('User Interactions', () => {
it('should call onStepChange(-1) when Previous button is clicked', () => {
const onStepChange = vi.fn()
render(<StepTwo {...defaultStepTwoProps} onStepChange={onStepChange} />)
fireEvent.click(screen.getByText(/stepTwo\.previousStep/i))
expect(onStepChange).toHaveBeenCalledWith(-1)
})
it('should trigger handleCreate when Next Step button is clicked', async () => {
const onStepChange = vi.fn()
render(<StepTwo {...defaultStepTwoProps} onStepChange={onStepChange} />)
await act(async () => {
fireEvent.click(screen.getByText(/stepTwo\.nextStep/i))
})
// handleCreate validates, builds params, and calls executeCreation
// which calls onStepChange(1) on success
expect(onStepChange).toHaveBeenCalledWith(1)
})
it('should trigger updatePreview when preview button is clicked', () => {
render(<StepTwo {...defaultStepTwoProps} />)
// GeneralChunkingOptions renders a "Preview Chunk" button
const previewButtons = screen.getAllByText(/stepTwo\.previewChunk/i)
fireEvent.click(previewButtons[0])
// updatePreview calls estimateHook.fetchEstimate()
// No error means the handler executed successfully
})
it('should trigger handleDocFormChange through parent-child option switch', () => {
render(<StepTwo {...defaultStepTwoProps} />)
// ParentChildOptions renders an OptionCard; find the title element and click its parent card
const parentChildTitles = screen.getAllByText(/stepTwo\.parentChild/i)
// The first match is the title; click it to trigger onDocFormChange
fireEvent.click(parentChildTitles[0])
// handleDocFormChange sets docForm, segmentationType, and resets estimate
})
})
describe('Conditional Rendering', () => {
it('should show options based on currentDataset doc_form', () => {
mockCurrentDataset = { ...mockDataset, doc_form: ChunkingMode.parentChild }
render(
<StepTwo
{...defaultStepTwoProps}
datasetId="test-id"
/>,
)
// When currentDataset has parentChild doc_form, should show parent-child option
expect(screen.getByText(/stepTwo\.segmentation/i)).toBeInTheDocument()
})
it('should render setting mode with Save/Cancel buttons', () => {
const docDetail = createMockDocumentDetail()
render(
<StepTwo
{...defaultStepTwoProps}
isSetting={true}
documentDetail={docDetail}
datasetId="test-id"
/>,
)
expect(screen.getByText(/stepTwo\.save/i)).toBeInTheDocument()
expect(screen.getByText(/stepTwo\.cancel/i)).toBeInTheDocument()
})
it('should call onCancel when Cancel button is clicked in setting mode', () => {
const onCancel = vi.fn()
const docDetail = createMockDocumentDetail()
render(
<StepTwo
{...defaultStepTwoProps}
isSetting={true}
documentDetail={docDetail}
datasetId="test-id"
onCancel={onCancel}
/>,
)
fireEvent.click(screen.getByText(/stepTwo\.cancel/i))
expect(onCancel).toHaveBeenCalled()
})
it('should trigger handleCreate (Save) in setting mode', async () => {
const onSave = vi.fn()
const docDetail = createMockDocumentDetail()
render(
<StepTwo
{...defaultStepTwoProps}
isSetting={true}
documentDetail={docDetail}
datasetId="test-id"
onSave={onSave}
/>,
)
await act(async () => {
fireEvent.click(screen.getByText(/stepTwo\.save/i))
})
// handleCreate → validateParams → buildCreationParams → executeCreation → onSave
expect(onSave).toHaveBeenCalled()
})
it('should show both general and parent-child options in create page', () => {
render(<StepTwo {...defaultStepTwoProps} />)
// When isInInit (no datasetId, no isSetting), both options should show
expect(screen.getByText('datasetCreation.stepTwo.general')).toBeInTheDocument()
expect(screen.getByText('datasetCreation.stepTwo.parentChild')).toBeInTheDocument()
})
it('should only show parent-child option when dataset has parentChild doc_form', () => {
mockCurrentDataset = { ...mockDataset, doc_form: ChunkingMode.parentChild }
render(
<StepTwo
{...defaultStepTwoProps}
datasetId="test-id"
/>,
)
// showGeneralOption should be false (parentChild not in [text, qa])
// showParentChildOption should be true
expect(screen.getByText('datasetCreation.stepTwo.parentChild')).toBeInTheDocument()
})
it('should show general option only when dataset has text doc_form', () => {
mockCurrentDataset = { ...mockDataset, doc_form: ChunkingMode.text }
render(
<StepTwo
{...defaultStepTwoProps}
datasetId="test-id"
/>,
)
// showGeneralOption should be true (text is in [text, qa])
expect(screen.getByText('datasetCreation.stepTwo.general')).toBeInTheDocument()
})
})
describe('Upload in Dataset', () => {
it('should show general option when in upload with text doc_form', () => {
mockCurrentDataset = { ...mockDataset, doc_form: ChunkingMode.text }
render(
<StepTwo
{...defaultStepTwoProps}
datasetId="test-id"
/>,
)
expect(screen.getByText(/stepTwo\.segmentation/i)).toBeInTheDocument()
})
it('should show general option for empty dataset (no doc_form)', () => {
// eslint-disable-next-line ts/no-explicit-any
mockCurrentDataset = { ...mockDataset, doc_form: undefined as any }
render(
<StepTwo
{...defaultStepTwoProps}
datasetId="test-id"
/>,
)
expect(screen.getByText(/stepTwo\.segmentation/i)).toBeInTheDocument()
})
it('should show both options in empty dataset upload', () => {
// eslint-disable-next-line ts/no-explicit-any
mockCurrentDataset = { ...mockDataset, doc_form: undefined as any }
render(
<StepTwo
{...defaultStepTwoProps}
datasetId="test-id"
/>,
)
// isUploadInEmptyDataset=true shows both options
expect(screen.getByText('datasetCreation.stepTwo.general')).toBeInTheDocument()
expect(screen.getByText('datasetCreation.stepTwo.parentChild')).toBeInTheDocument()
})
})
describe('Indexing Mode', () => {
it('should render indexing mode section', () => {
render(<StepTwo {...defaultStepTwoProps} />)
// IndexingModeSection renders the index mode title
expect(screen.getByText(/stepTwo\.indexMode/i)).toBeInTheDocument()
})
it('should render embedding model selector when QUALIFIED', () => {
render(<StepTwo {...defaultStepTwoProps} />)
// ModelSelector is mocked and rendered with data-testid
expect(screen.getByTestId('model-selector')).toBeInTheDocument()
})
it('should render retrieval method config', () => {
render(<StepTwo {...defaultStepTwoProps} />)
// RetrievalMethodConfig is mocked with data-testid
expect(screen.getByTestId('retrieval-method-config')).toBeInTheDocument()
})
it('should disable model and retrieval config when datasetId has existing data source', () => {
mockCurrentDataset = { ...mockDataset, data_source_type: DataSourceType.FILE }
render(
<StepTwo
{...defaultStepTwoProps}
datasetId="test-id"
/>,
)
// isModelAndRetrievalConfigDisabled should be true
const modelSelector = screen.getByTestId('model-selector')
expect(modelSelector).toHaveAttribute('data-readonly', 'true')
})
})
describe('Preview Panel', () => {
it('should render preview panel', () => {
render(<StepTwo {...defaultStepTwoProps} />)
expect(screen.getByText('datasetCreation.stepTwo.preview')).toBeInTheDocument()
})
it('should hide document picker in setting mode', () => {
const docDetail = createMockDocumentDetail()
render(
<StepTwo
{...defaultStepTwoProps}
isSetting={true}
documentDetail={docDetail}
datasetId="test-id"
/>,
)
// Preview panel should still render
expect(screen.getByText('datasetCreation.stepTwo.preview')).toBeInTheDocument()
})
})
describe('Handler Functions - Uncovered Paths', () => {
beforeEach(() => {
vi.clearAllMocks()
mockCurrentDataset = null
})
afterEach(() => {
cleanup()
})
it('should switch to QUALIFIED when selecting parentChild in ECONOMICAL mode', async () => {
render(<StepTwo {...defaultStepTwoProps} isAPIKeySet={false} />)
await vi.waitFor(() => {
expect(screen.getByText(/stepTwo\.segmentation/i)).toBeInTheDocument()
})
const parentChildTitles = screen.getAllByText(/stepTwo\.parentChild/i)
fireEvent.click(parentChildTitles[0])
})
it('should open QA confirm dialog and confirm switch when QA selected in ECONOMICAL mode', async () => {
render(<StepTwo {...defaultStepTwoProps} isAPIKeySet={false} />)
await vi.waitFor(() => {
expect(screen.getByText(/stepTwo\.segmentation/i)).toBeInTheDocument()
})
const qaCheckbox = screen.getByText(/stepTwo\.useQALanguage/i)
fireEvent.click(qaCheckbox)
// Dialog should open → click Switch to confirm (triggers handleQAConfirm)
const switchButton = await screen.findByText(/stepTwo\.switch/i)
expect(switchButton).toBeInTheDocument()
fireEvent.click(switchButton)
})
it('should close QA confirm dialog when cancel is clicked', async () => {
render(<StepTwo {...defaultStepTwoProps} isAPIKeySet={false} />)
await vi.waitFor(() => {
expect(screen.getByText(/stepTwo\.segmentation/i)).toBeInTheDocument()
})
// Open QA confirm dialog
const qaCheckbox = screen.getByText(/stepTwo\.useQALanguage/i)
fireEvent.click(qaCheckbox)
const dialogCancelButtons = await screen.findAllByText(/stepTwo\.cancel/i)
fireEvent.click(dialogCancelButtons[0])
})
it('should handle picker change when selecting a different file', () => {
const files = [
createMockFile({ id: 'file-1', name: 'first.pdf', extension: 'pdf' }),
createMockFile({ id: 'file-2', name: 'second.pdf', extension: 'pdf' }),
]
render(<StepTwo {...defaultStepTwoProps} files={files} />)
const pickerButton = screen.getByTestId('picker-file-2')
fireEvent.click(pickerButton)
})
it('should show error toast when preview is clicked with maxChunkLength exceeding limit', () => {
// Set a high maxChunkLength via the DOM attribute
document.body.setAttribute('data-public-indexing-max-segmentation-tokens-length', '100')
render(<StepTwo {...defaultStepTwoProps} />)
// The default maxChunkLength (1024) now exceeds the limit (100)
const previewButtons = screen.getAllByText(/stepTwo\.previewChunk/i)
fireEvent.click(previewButtons[0])
// Restore
document.body.removeAttribute('data-public-indexing-max-segmentation-tokens-length')
})
})
})

View File

@ -0,0 +1,168 @@
import type { PreProcessingRule } from '@/models/datasets'
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { ChunkingMode } from '@/models/datasets'
import { GeneralChunkingOptions } from '../general-chunking-options'
vi.mock('@/app/components/datasets/settings/summary-index-setting', () => ({
default: ({ onSummaryIndexSettingChange }: { onSummaryIndexSettingChange?: (val: Record<string, unknown>) => void }) => (
<div data-testid="summary-index-setting">
<button data-testid="summary-toggle" onClick={() => onSummaryIndexSettingChange?.({ enable: true })}>Toggle</button>
</div>
),
}))
vi.mock('@/config', () => ({
IS_CE_EDITION: true,
}))
const ns = 'datasetCreation'
const createRules = (): PreProcessingRule[] => [
{ id: 'remove_extra_spaces', enabled: true },
{ id: 'remove_urls_emails', enabled: false },
]
const defaultProps = {
segmentIdentifier: '\\n',
maxChunkLength: 500,
overlap: 50,
rules: createRules(),
currentDocForm: ChunkingMode.text,
docLanguage: 'English',
isActive: true,
isInUpload: false,
isNotUploadInEmptyDataset: false,
hasCurrentDatasetDocForm: false,
onSegmentIdentifierChange: vi.fn(),
onMaxChunkLengthChange: vi.fn(),
onOverlapChange: vi.fn(),
onRuleToggle: vi.fn(),
onDocFormChange: vi.fn(),
onDocLanguageChange: vi.fn(),
onPreview: vi.fn(),
onReset: vi.fn(),
locale: 'en',
}
describe('GeneralChunkingOptions', () => {
beforeEach(() => {
vi.clearAllMocks()
})
describe('Rendering', () => {
it('should render general chunking title', () => {
render(<GeneralChunkingOptions {...defaultProps} />)
expect(screen.getByText(`${ns}.stepTwo.general`)).toBeInTheDocument()
})
it('should render delimiter, max length and overlap inputs when active', () => {
render(<GeneralChunkingOptions {...defaultProps} />)
expect(screen.getByText(`${ns}.stepTwo.separator`)).toBeInTheDocument()
expect(screen.getByText(`${ns}.stepTwo.maxLength`)).toBeInTheDocument()
expect(screen.getAllByText(new RegExp(`${ns}.stepTwo.overlap`)).length).toBeGreaterThan(0)
})
it('should render preprocessing rules as checkboxes', () => {
render(<GeneralChunkingOptions {...defaultProps} />)
expect(screen.getByText(`${ns}.stepTwo.removeExtraSpaces`)).toBeInTheDocument()
expect(screen.getByText(`${ns}.stepTwo.removeUrlEmails`)).toBeInTheDocument()
})
it('should render preview and reset buttons when active', () => {
render(<GeneralChunkingOptions {...defaultProps} />)
expect(screen.getByText(`${ns}.stepTwo.previewChunk`)).toBeInTheDocument()
expect(screen.getByText(`${ns}.stepTwo.reset`)).toBeInTheDocument()
})
it('should not render body when not active', () => {
render(<GeneralChunkingOptions {...defaultProps} isActive={false} />)
expect(screen.queryByText(`${ns}.stepTwo.separator`)).not.toBeInTheDocument()
})
})
describe('User Interactions', () => {
it('should call onPreview when preview button clicked', () => {
const onPreview = vi.fn()
render(<GeneralChunkingOptions {...defaultProps} onPreview={onPreview} />)
fireEvent.click(screen.getByText(`${ns}.stepTwo.previewChunk`))
expect(onPreview).toHaveBeenCalledOnce()
})
it('should call onReset when reset button clicked', () => {
const onReset = vi.fn()
render(<GeneralChunkingOptions {...defaultProps} onReset={onReset} />)
fireEvent.click(screen.getByText(`${ns}.stepTwo.reset`))
expect(onReset).toHaveBeenCalledOnce()
})
it('should call onRuleToggle when rule clicked', () => {
const onRuleToggle = vi.fn()
render(<GeneralChunkingOptions {...defaultProps} onRuleToggle={onRuleToggle} />)
fireEvent.click(screen.getByText(`${ns}.stepTwo.removeUrlEmails`))
expect(onRuleToggle).toHaveBeenCalledWith('remove_urls_emails')
})
it('should call onDocFormChange with text mode when card switched', () => {
const onDocFormChange = vi.fn()
render(<GeneralChunkingOptions {...defaultProps} isActive={false} onDocFormChange={onDocFormChange} />)
// OptionCard fires onSwitched which calls onDocFormChange(ChunkingMode.text)
// Since isActive=false, clicking the card triggers the switch
const titleEl = screen.getByText(`${ns}.stepTwo.general`)
fireEvent.click(titleEl.closest('[class*="rounded-xl"]')!)
expect(onDocFormChange).toHaveBeenCalledWith(ChunkingMode.text)
})
})
describe('QA Mode (CE Edition)', () => {
it('should render QA language checkbox', () => {
render(<GeneralChunkingOptions {...defaultProps} />)
expect(screen.getByText(`${ns}.stepTwo.useQALanguage`)).toBeInTheDocument()
})
it('should toggle QA mode when checkbox clicked', () => {
const onDocFormChange = vi.fn()
render(<GeneralChunkingOptions {...defaultProps} onDocFormChange={onDocFormChange} />)
fireEvent.click(screen.getByText(`${ns}.stepTwo.useQALanguage`))
expect(onDocFormChange).toHaveBeenCalledWith(ChunkingMode.qa)
})
it('should toggle back to text mode from QA mode', () => {
const onDocFormChange = vi.fn()
render(<GeneralChunkingOptions {...defaultProps} currentDocForm={ChunkingMode.qa} onDocFormChange={onDocFormChange} />)
fireEvent.click(screen.getByText(`${ns}.stepTwo.useQALanguage`))
expect(onDocFormChange).toHaveBeenCalledWith(ChunkingMode.text)
})
it('should not toggle QA mode when hasCurrentDatasetDocForm is true', () => {
const onDocFormChange = vi.fn()
render(<GeneralChunkingOptions {...defaultProps} hasCurrentDatasetDocForm onDocFormChange={onDocFormChange} />)
fireEvent.click(screen.getByText(`${ns}.stepTwo.useQALanguage`))
expect(onDocFormChange).not.toHaveBeenCalled()
})
it('should show QA warning tip when in QA mode', () => {
render(<GeneralChunkingOptions {...defaultProps} currentDocForm={ChunkingMode.qa} />)
expect(screen.getAllByText(`${ns}.stepTwo.QATip`).length).toBeGreaterThan(0)
})
})
describe('Summary Index Setting', () => {
it('should render SummaryIndexSetting when showSummaryIndexSetting is true', () => {
render(<GeneralChunkingOptions {...defaultProps} showSummaryIndexSetting />)
expect(screen.getByTestId('summary-index-setting')).toBeInTheDocument()
})
it('should not render SummaryIndexSetting when showSummaryIndexSetting is false', () => {
render(<GeneralChunkingOptions {...defaultProps} showSummaryIndexSetting={false} />)
expect(screen.queryByTestId('summary-index-setting')).not.toBeInTheDocument()
})
it('should call onSummaryIndexSettingChange', () => {
const onSummaryIndexSettingChange = vi.fn()
render(<GeneralChunkingOptions {...defaultProps} showSummaryIndexSetting onSummaryIndexSettingChange={onSummaryIndexSettingChange} />)
fireEvent.click(screen.getByTestId('summary-toggle'))
expect(onSummaryIndexSettingChange).toHaveBeenCalledWith({ enable: true })
})
})
})

View File

@ -0,0 +1,213 @@
import type { DefaultModel } from '@/app/components/header/account-setting/model-provider-page/declarations'
import type { RetrievalConfig } from '@/types/app'
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { ChunkingMode } from '@/models/datasets'
import { IndexingType } from '../../hooks'
import { IndexingModeSection } from '../indexing-mode-section'
vi.mock('next/link', () => ({
default: ({ children, href, ...props }: { children?: React.ReactNode, href?: string, className?: string }) => <a href={href} {...props}>{children}</a>,
}))
// Mock external domain components
vi.mock('@/app/components/datasets/common/retrieval-method-config', () => ({
default: ({ onChange, disabled }: { value?: RetrievalConfig, onChange?: (val: Record<string, unknown>) => void, disabled?: boolean }) => (
<div data-testid="retrieval-method-config" data-disabled={disabled}>
<button onClick={() => onChange?.({ search_method: 'updated' })}>Change Retrieval</button>
</div>
),
}))
vi.mock('@/app/components/datasets/common/economical-retrieval-method-config', () => ({
default: ({ disabled }: { value?: RetrievalConfig, onChange?: (val: Record<string, unknown>) => void, disabled?: boolean }) => (
<div data-testid="economical-retrieval-config" data-disabled={disabled}>
Economical Config
</div>
),
}))
vi.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => ({
default: ({ onSelect, readonly }: { onSelect?: (val: Record<string, string>) => void, readonly?: boolean }) => (
<div data-testid="model-selector" data-readonly={readonly}>
<button onClick={() => onSelect?.({ provider: 'openai', model: 'text-embedding-3-small' })}>Select Model</button>
</div>
),
}))
vi.mock('@/context/i18n', () => ({
useDocLink: () => (path: string) => `https://docs.dify.ai${path}`,
}))
const ns = 'datasetCreation'
const createDefaultModel = (overrides?: Partial<DefaultModel>): DefaultModel => ({
provider: 'openai',
model: 'text-embedding-ada-002',
...overrides,
})
const createRetrievalConfig = (): RetrievalConfig => ({
search_method: 'semantic_search' as RetrievalConfig['search_method'],
reranking_enable: false,
reranking_model: { reranking_provider_name: '', reranking_model_name: '' },
top_k: 3,
score_threshold_enabled: false,
score_threshold: 0,
})
const defaultProps = {
indexType: IndexingType.QUALIFIED,
hasSetIndexType: false,
docForm: ChunkingMode.text,
embeddingModel: createDefaultModel(),
embeddingModelList: [],
retrievalConfig: createRetrievalConfig(),
showMultiModalTip: false,
isModelAndRetrievalConfigDisabled: false,
isQAConfirmDialogOpen: false,
onIndexTypeChange: vi.fn(),
onEmbeddingModelChange: vi.fn(),
onRetrievalConfigChange: vi.fn(),
onQAConfirmDialogClose: vi.fn(),
onQAConfirmDialogConfirm: vi.fn(),
}
describe('IndexingModeSection', () => {
beforeEach(() => {
vi.clearAllMocks()
})
describe('Rendering', () => {
it('should render index mode title', () => {
render(<IndexingModeSection {...defaultProps} />)
expect(screen.getByText(`${ns}.stepTwo.indexMode`)).toBeInTheDocument()
})
it('should render qualified option when not locked to economical', () => {
render(<IndexingModeSection {...defaultProps} />)
expect(screen.getByText(`${ns}.stepTwo.qualified`)).toBeInTheDocument()
})
it('should render economical option when not locked to qualified', () => {
render(<IndexingModeSection {...defaultProps} />)
expect(screen.getByText(`${ns}.stepTwo.economical`)).toBeInTheDocument()
})
it('should only show qualified option when hasSetIndexType and type is qualified', () => {
render(<IndexingModeSection {...defaultProps} hasSetIndexType indexType={IndexingType.QUALIFIED} />)
expect(screen.getByText(`${ns}.stepTwo.qualified`)).toBeInTheDocument()
expect(screen.queryByText(`${ns}.stepTwo.economical`)).not.toBeInTheDocument()
})
it('should only show economical option when hasSetIndexType and type is economical', () => {
render(<IndexingModeSection {...defaultProps} hasSetIndexType indexType={IndexingType.ECONOMICAL} />)
expect(screen.getByText(`${ns}.stepTwo.economical`)).toBeInTheDocument()
expect(screen.queryByText(`${ns}.stepTwo.qualified`)).not.toBeInTheDocument()
})
})
describe('Embedding Model', () => {
it('should show model selector when indexType is qualified', () => {
render(<IndexingModeSection {...defaultProps} indexType={IndexingType.QUALIFIED} />)
expect(screen.getByTestId('model-selector')).toBeInTheDocument()
})
it('should not show model selector when indexType is economical', () => {
render(<IndexingModeSection {...defaultProps} indexType={IndexingType.ECONOMICAL} />)
expect(screen.queryByTestId('model-selector')).not.toBeInTheDocument()
})
it('should mark model selector as readonly when disabled', () => {
render(<IndexingModeSection {...defaultProps} isModelAndRetrievalConfigDisabled />)
expect(screen.getByTestId('model-selector')).toHaveAttribute('data-readonly', 'true')
})
it('should call onEmbeddingModelChange when model selected', () => {
const onEmbeddingModelChange = vi.fn()
render(<IndexingModeSection {...defaultProps} onEmbeddingModelChange={onEmbeddingModelChange} />)
fireEvent.click(screen.getByText('Select Model'))
expect(onEmbeddingModelChange).toHaveBeenCalledWith({ provider: 'openai', model: 'text-embedding-3-small' })
})
})
describe('Retrieval Config', () => {
it('should show RetrievalMethodConfig when qualified', () => {
render(<IndexingModeSection {...defaultProps} indexType={IndexingType.QUALIFIED} />)
expect(screen.getByTestId('retrieval-method-config')).toBeInTheDocument()
})
it('should show EconomicalRetrievalMethodConfig when economical', () => {
render(<IndexingModeSection {...defaultProps} indexType={IndexingType.ECONOMICAL} />)
expect(screen.getByTestId('economical-retrieval-config')).toBeInTheDocument()
})
it('should call onRetrievalConfigChange from qualified config', () => {
const onRetrievalConfigChange = vi.fn()
render(<IndexingModeSection {...defaultProps} onRetrievalConfigChange={onRetrievalConfigChange} />)
fireEvent.click(screen.getByText('Change Retrieval'))
expect(onRetrievalConfigChange).toHaveBeenCalledWith({ search_method: 'updated' })
})
})
describe('Index Type Switching', () => {
it('should call onIndexTypeChange when switching to qualified', () => {
const onIndexTypeChange = vi.fn()
render(<IndexingModeSection {...defaultProps} indexType={IndexingType.ECONOMICAL} onIndexTypeChange={onIndexTypeChange} />)
const qualifiedCard = screen.getByText(`${ns}.stepTwo.qualified`).closest('[class*="rounded-xl"]')!
fireEvent.click(qualifiedCard)
expect(onIndexTypeChange).toHaveBeenCalledWith(IndexingType.QUALIFIED)
})
it('should disable economical when docForm is QA', () => {
render(<IndexingModeSection {...defaultProps} docForm={ChunkingMode.qa} />)
// The economical option card should have disabled styling
const economicalText = screen.getByText(`${ns}.stepTwo.economical`)
const card = economicalText.closest('[class*="rounded-xl"]')
expect(card).toHaveClass('pointer-events-none')
})
})
describe('High Quality Tip', () => {
it('should show high quality tip when qualified is selected and not locked', () => {
render(<IndexingModeSection {...defaultProps} indexType={IndexingType.QUALIFIED} hasSetIndexType={false} />)
expect(screen.getByText(`${ns}.stepTwo.highQualityTip`)).toBeInTheDocument()
})
it('should not show high quality tip when index type is locked', () => {
render(<IndexingModeSection {...defaultProps} indexType={IndexingType.QUALIFIED} hasSetIndexType />)
expect(screen.queryByText(`${ns}.stepTwo.highQualityTip`)).not.toBeInTheDocument()
})
})
describe('QA Confirm Dialog', () => {
it('should call onQAConfirmDialogClose when cancel clicked', () => {
const onClose = vi.fn()
render(<IndexingModeSection {...defaultProps} isQAConfirmDialogOpen onQAConfirmDialogClose={onClose} />)
const cancelBtns = screen.getAllByText(`${ns}.stepTwo.cancel`)
fireEvent.click(cancelBtns[0])
expect(onClose).toHaveBeenCalled()
})
it('should call onQAConfirmDialogConfirm when confirm clicked', () => {
const onConfirm = vi.fn()
render(<IndexingModeSection {...defaultProps} isQAConfirmDialogOpen onQAConfirmDialogConfirm={onConfirm} />)
fireEvent.click(screen.getByText(`${ns}.stepTwo.switch`))
expect(onConfirm).toHaveBeenCalled()
})
})
describe('Dataset Settings Link', () => {
it('should show settings link when economical and hasSetIndexType', () => {
render(<IndexingModeSection {...defaultProps} hasSetIndexType indexType={IndexingType.ECONOMICAL} datasetId="ds-123" />)
expect(screen.getByText(`${ns}.stepTwo.datasetSettingLink`)).toBeInTheDocument()
expect(screen.getByText(`${ns}.stepTwo.datasetSettingLink`).closest('a')).toHaveAttribute('href', '/datasets/ds-123/settings')
})
it('should show settings link under model selector when disabled', () => {
render(<IndexingModeSection {...defaultProps} isModelAndRetrievalConfigDisabled datasetId="ds-456" />)
const links = screen.getAllByText(`${ns}.stepTwo.datasetSettingLink`)
expect(links.length).toBeGreaterThan(0)
})
})
})

View File

@ -0,0 +1,92 @@
import { render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { DelimiterInput, MaxLengthInput, OverlapInput } from '../inputs'
// i18n mock returns namespaced keys like "datasetCreation.stepTwo.separator"
const ns = 'datasetCreation'
describe('DelimiterInput', () => {
beforeEach(() => {
vi.clearAllMocks()
})
it('should render separator label', () => {
render(<DelimiterInput />)
expect(screen.getByText(`${ns}.stepTwo.separator`)).toBeInTheDocument()
})
it('should render text input with placeholder', () => {
render(<DelimiterInput />)
const input = screen.getByPlaceholderText(`${ns}.stepTwo.separatorPlaceholder`)
expect(input).toBeInTheDocument()
expect(input).toHaveAttribute('type', 'text')
})
it('should pass through value and onChange props', () => {
const onChange = vi.fn()
render(<DelimiterInput value="test-val" onChange={onChange} />)
expect(screen.getByDisplayValue('test-val')).toBeInTheDocument()
})
it('should render tooltip content', () => {
render(<DelimiterInput />)
// Tooltip triggers render; component mounts without error
expect(screen.getByText(`${ns}.stepTwo.separator`)).toBeInTheDocument()
})
})
describe('MaxLengthInput', () => {
beforeEach(() => {
vi.clearAllMocks()
})
it('should render max length label', () => {
render(<MaxLengthInput onChange={vi.fn()} />)
expect(screen.getByText(`${ns}.stepTwo.maxLength`)).toBeInTheDocument()
})
it('should render number input', () => {
render(<MaxLengthInput onChange={vi.fn()} />)
const input = screen.getByRole('spinbutton')
expect(input).toBeInTheDocument()
})
it('should accept value prop', () => {
render(<MaxLengthInput value={500} onChange={vi.fn()} />)
expect(screen.getByDisplayValue('500')).toBeInTheDocument()
})
it('should have min of 1', () => {
render(<MaxLengthInput onChange={vi.fn()} />)
const input = screen.getByRole('spinbutton')
expect(input).toHaveAttribute('min', '1')
})
})
describe('OverlapInput', () => {
beforeEach(() => {
vi.clearAllMocks()
})
it('should render overlap label', () => {
render(<OverlapInput onChange={vi.fn()} />)
expect(screen.getAllByText(new RegExp(`${ns}.stepTwo.overlap`)).length).toBeGreaterThan(0)
})
it('should render number input', () => {
render(<OverlapInput onChange={vi.fn()} />)
const input = screen.getByRole('spinbutton')
expect(input).toBeInTheDocument()
})
it('should accept value prop', () => {
render(<OverlapInput value={50} onChange={vi.fn()} />)
expect(screen.getByDisplayValue('50')).toBeInTheDocument()
})
it('should have min of 1', () => {
render(<OverlapInput onChange={vi.fn()} />)
const input = screen.getByRole('spinbutton')
expect(input).toHaveAttribute('min', '1')
})
})

View File

@ -0,0 +1,160 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { OptionCard, OptionCardHeader } from '../option-card'
// Override global next/image auto-mock: tests assert on rendered <img> elements
vi.mock('next/image', () => ({
default: ({ src, alt, ...props }: { src?: string, alt?: string, width?: number, height?: number }) => (
<img src={src} alt={alt} {...props} />
),
}))
describe('OptionCardHeader', () => {
const defaultProps = {
icon: <span data-testid="icon">icon</span>,
title: <span>Test Title</span>,
description: 'Test description',
}
beforeEach(() => {
vi.clearAllMocks()
})
it('should render icon, title and description', () => {
render(<OptionCardHeader {...defaultProps} />)
expect(screen.getByTestId('icon')).toBeInTheDocument()
expect(screen.getByText('Test Title')).toBeInTheDocument()
expect(screen.getByText('Test description')).toBeInTheDocument()
})
it('should show effect image when active and effectImg provided', () => {
const { container } = render(
<OptionCardHeader {...defaultProps} isActive effectImg="/effect.png" />,
)
const img = container.querySelector('img')
expect(img).toBeInTheDocument()
})
it('should not show effect image when not active', () => {
const { container } = render(
<OptionCardHeader {...defaultProps} isActive={false} effectImg="/effect.png" />,
)
expect(container.querySelector('img')).not.toBeInTheDocument()
})
it('should apply cursor-pointer when not disabled', () => {
const { container } = render(<OptionCardHeader {...defaultProps} />)
expect(container.firstChild).toHaveClass('cursor-pointer')
})
it('should not apply cursor-pointer when disabled', () => {
const { container } = render(<OptionCardHeader {...defaultProps} disabled />)
expect(container.firstChild).not.toHaveClass('cursor-pointer')
})
it('should apply activeClassName when active', () => {
const { container } = render(
<OptionCardHeader {...defaultProps} isActive activeClassName="custom-active" />,
)
expect(container.firstChild).toHaveClass('custom-active')
})
it('should not apply activeClassName when not active', () => {
const { container } = render(
<OptionCardHeader {...defaultProps} isActive={false} activeClassName="custom-active" />,
)
expect(container.firstChild).not.toHaveClass('custom-active')
})
})
describe('OptionCard', () => {
const defaultProps = {
icon: <span data-testid="icon">icon</span>,
title: <span>Card Title</span> as React.ReactNode,
description: 'Card description',
}
beforeEach(() => {
vi.clearAllMocks()
})
it('should render header content', () => {
render(<OptionCard {...defaultProps} />)
expect(screen.getByText('Card Title')).toBeInTheDocument()
expect(screen.getByText('Card description')).toBeInTheDocument()
})
it('should call onSwitched when clicked while not active and not disabled', () => {
const onSwitched = vi.fn()
const { container } = render(
<OptionCard {...defaultProps} isActive={false} onSwitched={onSwitched} />,
)
fireEvent.click(container.firstChild!)
expect(onSwitched).toHaveBeenCalledOnce()
})
it('should not call onSwitched when already active', () => {
const onSwitched = vi.fn()
const { container } = render(
<OptionCard {...defaultProps} isActive onSwitched={onSwitched} />,
)
fireEvent.click(container.firstChild!)
expect(onSwitched).not.toHaveBeenCalled()
})
it('should not call onSwitched when disabled', () => {
const onSwitched = vi.fn()
const { container } = render(
<OptionCard {...defaultProps} disabled onSwitched={onSwitched} />,
)
fireEvent.click(container.firstChild!)
expect(onSwitched).not.toHaveBeenCalled()
})
it('should show children and actions when active', () => {
render(
<OptionCard {...defaultProps} isActive actions={<button>Action</button>}>
<div>Body Content</div>
</OptionCard>,
)
expect(screen.getByText('Body Content')).toBeInTheDocument()
expect(screen.getByText('Action')).toBeInTheDocument()
})
it('should not show children when not active', () => {
render(
<OptionCard {...defaultProps} isActive={false}>
<div>Body Content</div>
</OptionCard>,
)
expect(screen.queryByText('Body Content')).not.toBeInTheDocument()
})
it('should apply selected border style when active and not noHighlight', () => {
const { container } = render(<OptionCard {...defaultProps} isActive />)
expect(container.firstChild).toHaveClass('border-components-option-card-option-selected-border')
})
it('should not apply selected border when noHighlight is true', () => {
const { container } = render(<OptionCard {...defaultProps} isActive noHighlight />)
expect(container.firstChild).not.toHaveClass('border-components-option-card-option-selected-border')
})
it('should apply disabled opacity and pointer-events styles', () => {
const { container } = render(<OptionCard {...defaultProps} disabled />)
expect(container.firstChild).toHaveClass('pointer-events-none')
expect(container.firstChild).toHaveClass('opacity-50')
})
it('should forward custom className', () => {
const { container } = render(<OptionCard {...defaultProps} className="custom-class" />)
expect(container.firstChild).toHaveClass('custom-class')
})
it('should forward custom style', () => {
const { container } = render(
<OptionCard {...defaultProps} style={{ maxWidth: '300px' }} />,
)
expect((container.firstChild as HTMLElement).style.maxWidth).toBe('300px')
})
})

View File

@ -0,0 +1,150 @@
import type { ParentChildConfig } from '../../hooks'
import type { PreProcessingRule } from '@/models/datasets'
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { ChunkingMode } from '@/models/datasets'
import { ParentChildOptions } from '../parent-child-options'
vi.mock('@/app/components/datasets/settings/summary-index-setting', () => ({
default: ({ onSummaryIndexSettingChange }: { onSummaryIndexSettingChange?: (val: Record<string, unknown>) => void }) => (
<div data-testid="summary-index-setting">
<button data-testid="summary-toggle" onClick={() => onSummaryIndexSettingChange?.({ enable: true })}>Toggle</button>
</div>
),
}))
vi.mock('@/config', () => ({
IS_CE_EDITION: true,
}))
const ns = 'datasetCreation'
const createRules = (): PreProcessingRule[] => [
{ id: 'remove_extra_spaces', enabled: true },
{ id: 'remove_urls_emails', enabled: false },
]
const createParentChildConfig = (overrides?: Partial<ParentChildConfig>): ParentChildConfig => ({
chunkForContext: 'paragraph',
parent: { delimiter: '\\n\\n', maxLength: 2000 },
child: { delimiter: '\\n', maxLength: 500 },
...overrides,
})
const defaultProps = {
parentChildConfig: createParentChildConfig(),
rules: createRules(),
currentDocForm: ChunkingMode.parentChild,
isActive: true,
isInUpload: false,
isNotUploadInEmptyDataset: false,
onDocFormChange: vi.fn(),
onChunkForContextChange: vi.fn(),
onParentDelimiterChange: vi.fn(),
onParentMaxLengthChange: vi.fn(),
onChildDelimiterChange: vi.fn(),
onChildMaxLengthChange: vi.fn(),
onRuleToggle: vi.fn(),
onPreview: vi.fn(),
onReset: vi.fn(),
}
describe('ParentChildOptions', () => {
beforeEach(() => {
vi.clearAllMocks()
})
describe('Rendering', () => {
it('should render parent-child title', () => {
render(<ParentChildOptions {...defaultProps} />)
expect(screen.getByText(`${ns}.stepTwo.parentChild`)).toBeInTheDocument()
})
it('should render parent chunk context section when active', () => {
render(<ParentChildOptions {...defaultProps} />)
expect(screen.getByText(`${ns}.stepTwo.parentChunkForContext`)).toBeInTheDocument()
expect(screen.getByText(`${ns}.stepTwo.paragraph`)).toBeInTheDocument()
expect(screen.getByText(`${ns}.stepTwo.fullDoc`)).toBeInTheDocument()
})
it('should render child chunk retrieval section when active', () => {
render(<ParentChildOptions {...defaultProps} />)
expect(screen.getByText(`${ns}.stepTwo.childChunkForRetrieval`)).toBeInTheDocument()
})
it('should render rules section when active', () => {
render(<ParentChildOptions {...defaultProps} />)
expect(screen.getByText(`${ns}.stepTwo.removeExtraSpaces`)).toBeInTheDocument()
expect(screen.getByText(`${ns}.stepTwo.removeUrlEmails`)).toBeInTheDocument()
})
it('should render preview and reset buttons when active', () => {
render(<ParentChildOptions {...defaultProps} />)
expect(screen.getByText(`${ns}.stepTwo.previewChunk`)).toBeInTheDocument()
expect(screen.getByText(`${ns}.stepTwo.reset`)).toBeInTheDocument()
})
it('should not render body when not active', () => {
render(<ParentChildOptions {...defaultProps} isActive={false} />)
expect(screen.queryByText(`${ns}.stepTwo.parentChunkForContext`)).not.toBeInTheDocument()
})
})
describe('User Interactions', () => {
it('should call onPreview when preview button clicked', () => {
const onPreview = vi.fn()
render(<ParentChildOptions {...defaultProps} onPreview={onPreview} />)
fireEvent.click(screen.getByText(`${ns}.stepTwo.previewChunk`))
expect(onPreview).toHaveBeenCalledOnce()
})
it('should call onReset when reset button clicked', () => {
const onReset = vi.fn()
render(<ParentChildOptions {...defaultProps} onReset={onReset} />)
fireEvent.click(screen.getByText(`${ns}.stepTwo.reset`))
expect(onReset).toHaveBeenCalledOnce()
})
it('should call onRuleToggle when rule clicked', () => {
const onRuleToggle = vi.fn()
render(<ParentChildOptions {...defaultProps} onRuleToggle={onRuleToggle} />)
fireEvent.click(screen.getByText(`${ns}.stepTwo.removeUrlEmails`))
expect(onRuleToggle).toHaveBeenCalledWith('remove_urls_emails')
})
it('should call onDocFormChange with parentChild when card switched', () => {
const onDocFormChange = vi.fn()
render(<ParentChildOptions {...defaultProps} isActive={false} onDocFormChange={onDocFormChange} />)
const titleEl = screen.getByText(`${ns}.stepTwo.parentChild`)
fireEvent.click(titleEl.closest('[class*="rounded-xl"]')!)
expect(onDocFormChange).toHaveBeenCalledWith(ChunkingMode.parentChild)
})
it('should call onChunkForContextChange when full-doc chosen', () => {
const onChunkForContextChange = vi.fn()
render(<ParentChildOptions {...defaultProps} onChunkForContextChange={onChunkForContextChange} />)
fireEvent.click(screen.getByText(`${ns}.stepTwo.fullDoc`))
expect(onChunkForContextChange).toHaveBeenCalledWith('full-doc')
})
it('should call onChunkForContextChange when paragraph chosen', () => {
const onChunkForContextChange = vi.fn()
const config = createParentChildConfig({ chunkForContext: 'full-doc' })
render(<ParentChildOptions {...defaultProps} parentChildConfig={config} onChunkForContextChange={onChunkForContextChange} />)
fireEvent.click(screen.getByText(`${ns}.stepTwo.paragraph`))
expect(onChunkForContextChange).toHaveBeenCalledWith('paragraph')
})
})
describe('Summary Index Setting', () => {
it('should render SummaryIndexSetting when showSummaryIndexSetting is true', () => {
render(<ParentChildOptions {...defaultProps} showSummaryIndexSetting />)
expect(screen.getByTestId('summary-index-setting')).toBeInTheDocument()
})
it('should not render SummaryIndexSetting when showSummaryIndexSetting is false', () => {
render(<ParentChildOptions {...defaultProps} showSummaryIndexSetting={false} />)
expect(screen.queryByTestId('summary-index-setting')).not.toBeInTheDocument()
})
})
})

View File

@ -0,0 +1,166 @@
import type { ParentChildConfig } from '../../hooks'
import type { FileIndexingEstimateResponse } from '@/models/datasets'
import { render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { ChunkingMode, DataSourceType } from '@/models/datasets'
import { PreviewPanel } from '../preview-panel'
vi.mock('@/app/components/base/float-right-container', () => ({
default: ({ children }: { children: React.ReactNode }) => <div data-testid="float-container">{children}</div>,
}))
vi.mock('@/app/components/base/badge', () => ({
default: ({ text }: { text: string }) => <span data-testid="badge">{text}</span>,
}))
vi.mock('@/app/components/base/skeleton', () => ({
SkeletonContainer: ({ children }: { children: React.ReactNode }) => <div data-testid="skeleton">{children}</div>,
SkeletonPoint: () => <span />,
SkeletonRectangle: () => <span />,
SkeletonRow: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}))
vi.mock('../../../../chunk', () => ({
ChunkContainer: ({ children, label }: { children: React.ReactNode, label: string }) => (
<div data-testid="chunk-container">
{label}
:
{' '}
{children}
</div>
),
QAPreview: ({ qa }: { qa: { question: string } }) => <div data-testid="qa-preview">{qa.question}</div>,
}))
vi.mock('../../../../common/document-picker/preview-document-picker', () => ({
default: () => <div data-testid="doc-picker" />,
}))
vi.mock('../../../../documents/detail/completed/common/summary-label', () => ({
default: ({ summary }: { summary: string }) => <span data-testid="summary">{summary}</span>,
}))
vi.mock('../../../../formatted-text/flavours/preview-slice', () => ({
PreviewSlice: ({ label, text }: { label: string, text: string }) => (
<span data-testid="preview-slice">
{label}
:
{' '}
{text}
</span>
),
}))
vi.mock('../../../../formatted-text/formatted', () => ({
FormattedText: ({ children }: { children: React.ReactNode }) => <p data-testid="formatted-text">{children}</p>,
}))
vi.mock('../../../../preview/container', () => ({
default: ({ children, header }: { children: React.ReactNode, header: React.ReactNode }) => (
<div data-testid="preview-container">
{header}
{children}
</div>
),
}))
vi.mock('../../../../preview/header', () => ({
PreviewHeader: ({ children, title }: { children: React.ReactNode, title: string }) => (
<div data-testid="preview-header">
{title}
{children}
</div>
),
}))
vi.mock('@/config', () => ({
FULL_DOC_PREVIEW_LENGTH: 3,
}))
describe('PreviewPanel', () => {
const defaultProps = {
isMobile: false,
dataSourceType: DataSourceType.FILE,
currentDocForm: ChunkingMode.text,
parentChildConfig: { chunkForContext: 'paragraph' } as ParentChildConfig,
pickerFiles: [{ id: '1', name: 'file.pdf', extension: 'pdf' }],
pickerValue: { id: '1', name: 'file.pdf', extension: 'pdf' },
isIdle: false,
isPending: false,
onPickerChange: vi.fn(),
}
beforeEach(() => {
vi.clearAllMocks()
})
it('should render preview header with title', () => {
render(<PreviewPanel {...defaultProps} />)
expect(screen.getByTestId('preview-header')).toHaveTextContent('datasetCreation.stepTwo.preview')
})
it('should render document picker', () => {
render(<PreviewPanel {...defaultProps} />)
expect(screen.getByTestId('doc-picker')).toBeInTheDocument()
})
it('should show idle state when isIdle is true', () => {
render(<PreviewPanel {...defaultProps} isIdle={true} />)
expect(screen.getByText('datasetCreation.stepTwo.previewChunkTip')).toBeInTheDocument()
})
it('should show loading skeletons when isPending', () => {
render(<PreviewPanel {...defaultProps} isPending={true} />)
expect(screen.getAllByTestId('skeleton')).toHaveLength(10)
})
it('should render text preview chunks', () => {
const estimate: Partial<FileIndexingEstimateResponse> = {
total_segments: 2,
preview: [
{ content: 'chunk 1 text', child_chunks: [], summary: '' },
{ content: 'chunk 2 text', child_chunks: [], summary: 'summary text' },
],
}
render(<PreviewPanel {...defaultProps} estimate={estimate as FileIndexingEstimateResponse} />)
expect(screen.getAllByTestId('chunk-container')).toHaveLength(2)
})
it('should render QA preview', () => {
const estimate: Partial<FileIndexingEstimateResponse> = {
qa_preview: [
{ question: 'Q1', answer: 'A1' },
],
}
render(
<PreviewPanel
{...defaultProps}
currentDocForm={ChunkingMode.qa}
estimate={estimate as FileIndexingEstimateResponse}
/>,
)
expect(screen.getByTestId('qa-preview')).toHaveTextContent('Q1')
})
it('should render parent-child preview', () => {
const estimate: Partial<FileIndexingEstimateResponse> = {
preview: [
{ content: 'parent chunk', child_chunks: ['child1', 'child2'], summary: '' },
],
}
render(
<PreviewPanel
{...defaultProps}
currentDocForm={ChunkingMode.parentChild}
estimate={estimate as FileIndexingEstimateResponse}
/>,
)
expect(screen.getAllByTestId('preview-slice')).toHaveLength(2)
})
it('should show badge with chunk count for non-QA mode', () => {
const estimate: Partial<FileIndexingEstimateResponse> = { total_segments: 5, preview: [] }
render(<PreviewPanel {...defaultProps} estimate={estimate as FileIndexingEstimateResponse} />)
expect(screen.getByTestId('badge')).toBeInTheDocument()
})
})

View File

@ -0,0 +1,46 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { StepTwoFooter } from '../step-two-footer'
describe('StepTwoFooter', () => {
const defaultProps = {
isCreating: false,
onPrevious: vi.fn(),
onCreate: vi.fn(),
onCancel: vi.fn(),
}
beforeEach(() => {
vi.clearAllMocks()
})
it('should render previous and next buttons when not isSetting', () => {
render(<StepTwoFooter {...defaultProps} />)
expect(screen.getByText('datasetCreation.stepTwo.previousStep')).toBeInTheDocument()
expect(screen.getByText('datasetCreation.stepTwo.nextStep')).toBeInTheDocument()
})
it('should render save and cancel buttons when isSetting', () => {
render(<StepTwoFooter {...defaultProps} isSetting />)
expect(screen.getByText('datasetCreation.stepTwo.save')).toBeInTheDocument()
expect(screen.getByText('datasetCreation.stepTwo.cancel')).toBeInTheDocument()
})
it('should call onPrevious on previous button click', () => {
render(<StepTwoFooter {...defaultProps} />)
fireEvent.click(screen.getByText('datasetCreation.stepTwo.previousStep'))
expect(defaultProps.onPrevious).toHaveBeenCalledOnce()
})
it('should call onCreate on next button click', () => {
render(<StepTwoFooter {...defaultProps} />)
fireEvent.click(screen.getByText('datasetCreation.stepTwo.nextStep'))
expect(defaultProps.onCreate).toHaveBeenCalledOnce()
})
it('should call onCancel on cancel button click in settings mode', () => {
render(<StepTwoFooter {...defaultProps} isSetting />)
fireEvent.click(screen.getByText('datasetCreation.stepTwo.cancel'))
expect(defaultProps.onCancel).toHaveBeenCalledOnce()
})
})

View File

@ -0,0 +1,75 @@
import { describe, expect, it } from 'vitest'
import escape from '../escape'
describe('escape', () => {
// Basic special character escaping
it('should escape null character', () => {
expect(escape('\0')).toBe('\\0')
})
it('should escape backspace', () => {
expect(escape('\b')).toBe('\\b')
})
it('should escape form feed', () => {
expect(escape('\f')).toBe('\\f')
})
it('should escape newline', () => {
expect(escape('\n')).toBe('\\n')
})
it('should escape carriage return', () => {
expect(escape('\r')).toBe('\\r')
})
it('should escape tab', () => {
expect(escape('\t')).toBe('\\t')
})
it('should escape vertical tab', () => {
expect(escape('\v')).toBe('\\v')
})
it('should escape single quote', () => {
expect(escape('\'')).toBe('\\\'')
})
// Multiple special characters in one string
it('should escape multiple special characters', () => {
expect(escape('line1\nline2\ttab')).toBe('line1\\nline2\\ttab')
})
it('should escape mixed special characters', () => {
expect(escape('\n\r\t')).toBe('\\n\\r\\t')
})
it('should return empty string for null input', () => {
expect(escape(null as unknown as string)).toBe('')
})
it('should return empty string for undefined input', () => {
expect(escape(undefined as unknown as string)).toBe('')
})
it('should return empty string for empty string input', () => {
expect(escape('')).toBe('')
})
it('should return empty string for non-string input', () => {
expect(escape(123 as unknown as string)).toBe('')
})
// Pass-through for normal strings
it('should leave normal text unchanged', () => {
expect(escape('hello world')).toBe('hello world')
})
it('should leave special regex characters unchanged', () => {
expect(escape('a.b*c+d')).toBe('a.b*c+d')
})
it('should handle strings with no special characters', () => {
expect(escape('abc123')).toBe('abc123')
})
})

View File

@ -0,0 +1,96 @@
import { describe, expect, it } from 'vitest'
import unescape from '../unescape'
describe('unescape', () => {
// Basic escape sequences
it('should unescape \\n to newline', () => {
expect(unescape('\\n')).toBe('\n')
})
it('should unescape \\t to tab', () => {
expect(unescape('\\t')).toBe('\t')
})
it('should unescape \\r to carriage return', () => {
expect(unescape('\\r')).toBe('\r')
})
it('should unescape \\b to backspace', () => {
expect(unescape('\\b')).toBe('\b')
})
it('should unescape \\f to form feed', () => {
expect(unescape('\\f')).toBe('\f')
})
it('should unescape \\v to vertical tab', () => {
expect(unescape('\\v')).toBe('\v')
})
it('should unescape \\0 to null character', () => {
expect(unescape('\\0')).toBe('\0')
})
it('should unescape \\\\ to backslash', () => {
expect(unescape('\\\\')).toBe('\\')
})
it('should unescape \\\' to single quote', () => {
expect(unescape('\\\'')).toBe('\'')
})
it('should unescape \\" to double quote', () => {
expect(unescape('\\"')).toBe('"')
})
// Hex escape sequences (\\xNN)
it('should unescape 2-digit hex sequences', () => {
expect(unescape('\\x41')).toBe('A')
expect(unescape('\\x61')).toBe('a')
})
// Unicode escape sequences (\\uNNNN)
it('should unescape 4-digit unicode sequences', () => {
expect(unescape('\\u0041')).toBe('A')
expect(unescape('\\u4e2d')).toBe('中')
})
// Variable-length unicode (\\u{NNNN})
it('should unescape variable-length unicode sequences', () => {
expect(unescape('\\u{41}')).toBe('A')
expect(unescape('\\u{1F600}')).toBe('😀')
})
// Octal escape sequences
it('should unescape octal sequences', () => {
expect(unescape('\\101')).toBe('A') // 0o101 = 65 = 'A'
expect(unescape('\\12')).toBe('\n') // 0o12 = 10 = '\n'
})
// Python-style 8-digit unicode (\\UNNNNNNNN)
it('should unescape Python-style 8-digit unicode', () => {
expect(unescape('\\U0001F3B5')).toBe('🎵')
})
// Multiple escape sequences
it('should unescape multiple sequences in one string', () => {
expect(unescape('line1\\nline2\\ttab')).toBe('line1\nline2\ttab')
})
// Mixed content
it('should leave non-escape content unchanged', () => {
expect(unescape('hello world')).toBe('hello world')
})
it('should handle mixed escaped and non-escaped content', () => {
expect(unescape('before\\nafter')).toBe('before\nafter')
})
it('should handle empty string', () => {
expect(unescape('')).toBe('')
})
it('should handle string with no escape sequences', () => {
expect(unescape('abc123')).toBe('abc123')
})
})

View File

@ -0,0 +1,186 @@
import type { CustomFile, FullDocumentDetail, ProcessRule } from '@/models/datasets'
import type { RetrievalConfig } from '@/types/app'
import { renderHook } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { ChunkingMode, DataSourceType } from '@/models/datasets'
import { RETRIEVE_METHOD } from '@/types/app'
// Hoisted mocks
const mocks = vi.hoisted(() => ({
toastNotify: vi.fn(),
mutateAsync: vi.fn(),
isReRankModelSelected: vi.fn(() => true),
trackEvent: vi.fn(),
invalidDatasetList: vi.fn(),
}))
vi.mock('@/app/components/base/toast', () => ({
default: { notify: mocks.toastNotify },
}))
vi.mock('@/app/components/base/amplitude', () => ({
trackEvent: mocks.trackEvent,
}))
vi.mock('@/app/components/datasets/common/check-rerank-model', () => ({
isReRankModelSelected: mocks.isReRankModelSelected,
}))
vi.mock('@/service/knowledge/use-create-dataset', () => ({
useCreateFirstDocument: () => ({ mutateAsync: mocks.mutateAsync, isPending: false }),
useCreateDocument: () => ({ mutateAsync: mocks.mutateAsync, isPending: false }),
getNotionInfo: vi.fn(() => []),
getWebsiteInfo: vi.fn(() => ({})),
}))
vi.mock('@/service/knowledge/use-dataset', () => ({
useInvalidDatasetList: () => mocks.invalidDatasetList,
}))
const { useDocumentCreation } = await import('../use-document-creation')
const { IndexingType } = await import('../use-indexing-config')
describe('useDocumentCreation', () => {
const defaultOptions = {
dataSourceType: DataSourceType.FILE,
files: [{ id: 'f-1', name: 'test.txt' }] as CustomFile[],
notionPages: [],
notionCredentialId: '',
websitePages: [],
}
const defaultValidationParams = {
segmentationType: 'general',
maxChunkLength: 1024,
limitMaxChunkLength: 4000,
overlap: 50,
indexType: IndexingType.QUALIFIED,
embeddingModel: { provider: 'openai', model: 'text-embedding-3-small' },
rerankModelList: [],
retrievalConfig: {
search_method: RETRIEVE_METHOD.semantic,
reranking_enable: false,
reranking_model: { reranking_provider_name: '', reranking_model_name: '' },
top_k: 3,
score_threshold_enabled: false,
score_threshold: 0.5,
} as RetrievalConfig,
}
beforeEach(() => {
vi.clearAllMocks()
mocks.isReRankModelSelected.mockReturnValue(true)
})
describe('validateParams', () => {
it('should return true for valid params', () => {
const { result } = renderHook(() => useDocumentCreation(defaultOptions))
expect(result.current.validateParams(defaultValidationParams)).toBe(true)
})
it('should return false when overlap > maxChunkLength', () => {
const { result } = renderHook(() => useDocumentCreation(defaultOptions))
const invalid = { ...defaultValidationParams, overlap: 2000, maxChunkLength: 1000 }
expect(result.current.validateParams(invalid)).toBe(false)
expect(mocks.toastNotify).toHaveBeenCalledWith(
expect.objectContaining({ type: 'error' }),
)
})
it('should return false when maxChunkLength > limitMaxChunkLength', () => {
const { result } = renderHook(() => useDocumentCreation(defaultOptions))
const invalid = { ...defaultValidationParams, maxChunkLength: 5000, limitMaxChunkLength: 4000 }
expect(result.current.validateParams(invalid)).toBe(false)
})
it('should return false when qualified but no embedding model', () => {
const { result } = renderHook(() => useDocumentCreation(defaultOptions))
const invalid = {
...defaultValidationParams,
indexType: IndexingType.QUALIFIED,
embeddingModel: { provider: '', model: '' },
}
expect(result.current.validateParams(invalid)).toBe(false)
})
it('should return false when rerank model not selected', () => {
mocks.isReRankModelSelected.mockReturnValue(false)
const { result } = renderHook(() => useDocumentCreation(defaultOptions))
expect(result.current.validateParams(defaultValidationParams)).toBe(false)
})
it('should skip embedding/rerank checks when isSetting is true', () => {
mocks.isReRankModelSelected.mockReturnValue(false)
const { result } = renderHook(() =>
useDocumentCreation({ ...defaultOptions, isSetting: true }),
)
const params = {
...defaultValidationParams,
embeddingModel: { provider: '', model: '' },
}
expect(result.current.validateParams(params)).toBe(true)
})
})
describe('buildCreationParams', () => {
it('should build params for FILE data source', () => {
const { result } = renderHook(() => useDocumentCreation(defaultOptions))
const processRule = { mode: 'custom', rules: {} } as unknown as ProcessRule
const retrievalConfig = defaultValidationParams.retrievalConfig
const embeddingModel = { provider: 'openai', model: 'text-embedding-3-small' }
const params = result.current.buildCreationParams(
ChunkingMode.text,
'English',
processRule,
retrievalConfig,
embeddingModel,
'high_quality',
)
expect(params).not.toBeNull()
expect(params!.data_source!.type).toBe(DataSourceType.FILE)
expect(params!.data_source!.info_list.file_info_list?.file_ids).toContain('f-1')
expect(params!.embedding_model).toBe('text-embedding-3-small')
expect(params!.embedding_model_provider).toBe('openai')
})
it('should build params for isSetting mode', () => {
const detail = { id: 'doc-1' } as FullDocumentDetail
const { result } = renderHook(() =>
useDocumentCreation({ ...defaultOptions, isSetting: true, documentDetail: detail }),
)
const params = result.current.buildCreationParams(
ChunkingMode.text,
'English',
{ mode: 'custom', rules: {} } as unknown as ProcessRule,
defaultValidationParams.retrievalConfig,
{ provider: 'openai', model: 'text-embedding-3-small' },
'high_quality',
)
expect(params!.original_document_id).toBe('doc-1')
expect(params!.data_source).toBeUndefined()
})
})
describe('validatePreviewParams', () => {
it('should return true when maxChunkLength is within limit', () => {
const { result } = renderHook(() => useDocumentCreation(defaultOptions))
expect(result.current.validatePreviewParams(1024)).toBe(true)
})
it('should return false when maxChunkLength exceeds limit', () => {
const { result } = renderHook(() => useDocumentCreation(defaultOptions))
expect(result.current.validatePreviewParams(999999)).toBe(false)
expect(mocks.toastNotify).toHaveBeenCalled()
})
})
describe('isCreating', () => {
it('should reflect mutation pending state', () => {
const { result } = renderHook(() => useDocumentCreation(defaultOptions))
expect(result.current.isCreating).toBe(false)
})
})
})

View File

@ -0,0 +1,161 @@
import { act, renderHook } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { RETRIEVE_METHOD } from '@/types/app'
// Hoisted mock state
const mocks = vi.hoisted(() => ({
rerankModelList: [] as Array<{ provider: { provider: string }, model: string }>,
rerankDefaultModel: null as { provider: { provider: string }, model: string } | null,
isRerankDefaultModelValid: null as { provider: { provider: string }, model: string } | null,
embeddingModelList: [] as Array<{ provider: { provider: string }, model: string }>,
defaultEmbeddingModel: null as { provider: { provider: string }, model: string } | null,
}))
vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
useModelListAndDefaultModelAndCurrentProviderAndModel: () => ({
modelList: mocks.rerankModelList,
defaultModel: mocks.rerankDefaultModel,
currentModel: mocks.isRerankDefaultModelValid,
}),
useModelList: () => ({ data: mocks.embeddingModelList }),
useDefaultModel: () => ({ data: mocks.defaultEmbeddingModel }),
}))
vi.mock('@/app/components/datasets/settings/utils', () => ({
checkShowMultiModalTip: vi.fn(() => false),
}))
const { IndexingType, useIndexingConfig } = await import('../use-indexing-config')
describe('useIndexingConfig', () => {
const defaultOptions = {
isAPIKeySet: true,
hasSetIndexType: false,
}
beforeEach(() => {
vi.clearAllMocks()
mocks.rerankModelList = []
mocks.rerankDefaultModel = null
mocks.isRerankDefaultModelValid = null
mocks.embeddingModelList = []
mocks.defaultEmbeddingModel = null
})
describe('initial state', () => {
it('should default to QUALIFIED when API key is set', () => {
const { result } = renderHook(() => useIndexingConfig(defaultOptions))
expect(result.current.indexType).toBe(IndexingType.QUALIFIED)
})
it('should default to ECONOMICAL when API key is not set', () => {
const { result } = renderHook(() =>
useIndexingConfig({ ...defaultOptions, isAPIKeySet: false }),
)
expect(result.current.indexType).toBe(IndexingType.ECONOMICAL)
})
it('should use initial index type when provided', () => {
const { result } = renderHook(() =>
useIndexingConfig({
...defaultOptions,
initialIndexType: IndexingType.ECONOMICAL,
}),
)
expect(result.current.indexType).toBe(IndexingType.ECONOMICAL)
})
it('should use initial embedding model when provided', () => {
const { result } = renderHook(() =>
useIndexingConfig({
...defaultOptions,
initialEmbeddingModel: { provider: 'openai', model: 'text-embedding-3-small' },
}),
)
expect(result.current.embeddingModel).toEqual({
provider: 'openai',
model: 'text-embedding-3-small',
})
})
it('should use initial retrieval config when provided', () => {
const config = {
search_method: RETRIEVE_METHOD.fullText,
reranking_enable: false,
reranking_model: { reranking_provider_name: '', reranking_model_name: '' },
top_k: 5,
score_threshold_enabled: true,
score_threshold: 0.8,
}
const { result } = renderHook(() =>
useIndexingConfig({ ...defaultOptions, initialRetrievalConfig: config }),
)
expect(result.current.retrievalConfig.search_method).toBe(RETRIEVE_METHOD.fullText)
expect(result.current.retrievalConfig.top_k).toBe(5)
})
})
describe('setters', () => {
it('should update index type', () => {
const { result } = renderHook(() => useIndexingConfig(defaultOptions))
act(() => {
result.current.setIndexType(IndexingType.ECONOMICAL)
})
expect(result.current.indexType).toBe(IndexingType.ECONOMICAL)
})
it('should update embedding model', () => {
const { result } = renderHook(() => useIndexingConfig(defaultOptions))
act(() => {
result.current.setEmbeddingModel({ provider: 'cohere', model: 'embed-v3' })
})
expect(result.current.embeddingModel).toEqual({ provider: 'cohere', model: 'embed-v3' })
})
it('should update retrieval config', () => {
const { result } = renderHook(() => useIndexingConfig(defaultOptions))
const newConfig = {
...result.current.retrievalConfig,
top_k: 10,
}
act(() => {
result.current.setRetrievalConfig(newConfig)
})
expect(result.current.retrievalConfig.top_k).toBe(10)
})
})
describe('getIndexingTechnique', () => {
it('should return initialIndexType when provided', () => {
const { result } = renderHook(() =>
useIndexingConfig({
...defaultOptions,
initialIndexType: IndexingType.ECONOMICAL,
}),
)
expect(result.current.getIndexingTechnique()).toBe(IndexingType.ECONOMICAL)
})
it('should return current indexType when no initialIndexType', () => {
const { result } = renderHook(() => useIndexingConfig(defaultOptions))
expect(result.current.getIndexingTechnique()).toBe(IndexingType.QUALIFIED)
})
})
describe('computed properties', () => {
it('should expose hasSetIndexType from options', () => {
const { result } = renderHook(() =>
useIndexingConfig({ ...defaultOptions, hasSetIndexType: true }),
)
expect(result.current.hasSetIndexType).toBe(true)
})
it('should expose showMultiModalTip as boolean', () => {
const { result } = renderHook(() => useIndexingConfig(defaultOptions))
expect(typeof result.current.showMultiModalTip).toBe('boolean')
})
})
})

View File

@ -0,0 +1,127 @@
import type { IndexingType } from '../use-indexing-config'
import type { NotionPage } from '@/models/common'
import type { ChunkingMode, CrawlResultItem, CustomFile, ProcessRule } from '@/models/datasets'
import { renderHook } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { DataSourceType } from '@/models/datasets'
// Hoisted mocks
const mocks = vi.hoisted(() => ({
fileMutate: vi.fn(),
fileReset: vi.fn(),
notionMutate: vi.fn(),
notionReset: vi.fn(),
webMutate: vi.fn(),
webReset: vi.fn(),
}))
vi.mock('@/service/knowledge/use-create-dataset', () => ({
useFetchFileIndexingEstimateForFile: () => ({
mutate: mocks.fileMutate,
reset: mocks.fileReset,
data: { tokens: 100, total_segments: 5 },
isIdle: true,
isPending: false,
}),
useFetchFileIndexingEstimateForNotion: () => ({
mutate: mocks.notionMutate,
reset: mocks.notionReset,
data: null,
isIdle: true,
isPending: false,
}),
useFetchFileIndexingEstimateForWeb: () => ({
mutate: mocks.webMutate,
reset: mocks.webReset,
data: null,
isIdle: true,
isPending: false,
}),
}))
const { useIndexingEstimate } = await import('../use-indexing-estimate')
describe('useIndexingEstimate', () => {
const defaultOptions = {
dataSourceType: DataSourceType.FILE,
currentDocForm: 'text_model' as ChunkingMode,
docLanguage: 'English',
files: [{ id: 'f-1', name: 'test.txt' }] as unknown as CustomFile[],
previewNotionPage: {} as unknown as NotionPage,
notionCredentialId: '',
previewWebsitePage: {} as unknown as CrawlResultItem,
indexingTechnique: 'high_quality' as unknown as IndexingType,
processRule: { mode: 'custom', rules: {} } as unknown as ProcessRule,
}
beforeEach(() => {
vi.clearAllMocks()
})
describe('currentMutation selection', () => {
it('should select file mutation for FILE type', () => {
const { result } = renderHook(() => useIndexingEstimate(defaultOptions))
expect(result.current.estimate).toEqual({ tokens: 100, total_segments: 5 })
})
it('should select notion mutation for NOTION type', () => {
const { result } = renderHook(() => useIndexingEstimate({
...defaultOptions,
dataSourceType: DataSourceType.NOTION,
}))
expect(result.current.estimate).toBeNull()
})
it('should select web mutation for WEB type', () => {
const { result } = renderHook(() => useIndexingEstimate({
...defaultOptions,
dataSourceType: DataSourceType.WEB,
}))
expect(result.current.estimate).toBeNull()
})
})
describe('fetchEstimate', () => {
it('should call file mutate for FILE type', () => {
const { result } = renderHook(() => useIndexingEstimate(defaultOptions))
result.current.fetchEstimate()
expect(mocks.fileMutate).toHaveBeenCalledOnce()
})
it('should call notion mutate for NOTION type', () => {
const { result } = renderHook(() => useIndexingEstimate({
...defaultOptions,
dataSourceType: DataSourceType.NOTION,
}))
result.current.fetchEstimate()
expect(mocks.notionMutate).toHaveBeenCalledOnce()
})
it('should call web mutate for WEB type', () => {
const { result } = renderHook(() => useIndexingEstimate({
...defaultOptions,
dataSourceType: DataSourceType.WEB,
}))
result.current.fetchEstimate()
expect(mocks.webMutate).toHaveBeenCalledOnce()
})
})
describe('state properties', () => {
it('should expose isIdle', () => {
const { result } = renderHook(() => useIndexingEstimate(defaultOptions))
expect(result.current.isIdle).toBe(true)
})
it('should expose isPending', () => {
const { result } = renderHook(() => useIndexingEstimate(defaultOptions))
expect(result.current.isPending).toBe(false)
})
it('should expose reset function', () => {
const { result } = renderHook(() => useIndexingEstimate(defaultOptions))
result.current.reset()
expect(mocks.fileReset).toHaveBeenCalledOnce()
})
})
})

View File

@ -0,0 +1,198 @@
import type { NotionPage } from '@/models/common'
import type { CrawlResultItem, CustomFile } from '@/models/datasets'
import { act, renderHook } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { DataSourceType } from '@/models/datasets'
import { usePreviewState } from '../use-preview-state'
// Factory functions
const createFile = (id: string, name: string): CustomFile => ({
id,
name,
size: 1024,
type: 'text/plain',
extension: 'txt',
created_by: 'user',
created_at: Date.now(),
} as unknown as CustomFile)
const createNotionPage = (pageId: string, pageName: string): NotionPage => ({
page_id: pageId,
page_name: pageName,
page_icon: null,
parent_id: '',
type: 'page',
is_bound: true,
} as unknown as NotionPage)
const createWebsitePage = (url: string, title: string): CrawlResultItem => ({
source_url: url,
title,
markdown: '',
description: '',
} as unknown as CrawlResultItem)
describe('usePreviewState', () => {
const files = [createFile('f-1', 'file1.txt'), createFile('f-2', 'file2.txt')]
const notionPages = [createNotionPage('np-1', 'Page 1'), createNotionPage('np-2', 'Page 2')]
const websitePages = [createWebsitePage('https://a.com', 'Site A'), createWebsitePage('https://b.com', 'Site B')]
beforeEach(() => {
vi.clearAllMocks()
})
describe('initial state for FILE', () => {
it('should set first file as preview', () => {
const { result } = renderHook(() => usePreviewState({
dataSourceType: DataSourceType.FILE,
files,
notionPages: [],
websitePages: [],
}))
expect(result.current.previewFile).toBe(files[0])
})
})
describe('initial state for NOTION', () => {
it('should set first notion page as preview', () => {
const { result } = renderHook(() => usePreviewState({
dataSourceType: DataSourceType.NOTION,
files: [],
notionPages,
websitePages: [],
}))
expect(result.current.previewNotionPage).toBe(notionPages[0])
})
})
describe('initial state for WEB', () => {
it('should set first website page as preview', () => {
const { result } = renderHook(() => usePreviewState({
dataSourceType: DataSourceType.WEB,
files: [],
notionPages: [],
websitePages,
}))
expect(result.current.previewWebsitePage).toBe(websitePages[0])
})
})
describe('getPreviewPickerItems', () => {
it('should return files for FILE type', () => {
const { result } = renderHook(() => usePreviewState({
dataSourceType: DataSourceType.FILE,
files,
notionPages: [],
websitePages: [],
}))
const items = result.current.getPreviewPickerItems()
expect(items).toHaveLength(2)
})
it('should return mapped notion pages for NOTION type', () => {
const { result } = renderHook(() => usePreviewState({
dataSourceType: DataSourceType.NOTION,
files: [],
notionPages,
websitePages: [],
}))
const items = result.current.getPreviewPickerItems()
expect(items).toHaveLength(2)
expect(items[0]).toEqual({ id: 'np-1', name: 'Page 1', extension: 'md' })
})
it('should return mapped website pages for WEB type', () => {
const { result } = renderHook(() => usePreviewState({
dataSourceType: DataSourceType.WEB,
files: [],
notionPages: [],
websitePages,
}))
const items = result.current.getPreviewPickerItems()
expect(items).toHaveLength(2)
expect(items[0]).toEqual({ id: 'https://a.com', name: 'Site A', extension: 'md' })
})
})
describe('getPreviewPickerValue', () => {
it('should return current preview file for FILE type', () => {
const { result } = renderHook(() => usePreviewState({
dataSourceType: DataSourceType.FILE,
files,
notionPages: [],
websitePages: [],
}))
const value = result.current.getPreviewPickerValue()
expect(value).toBe(files[0])
})
it('should return mapped notion page value for NOTION type', () => {
const { result } = renderHook(() => usePreviewState({
dataSourceType: DataSourceType.NOTION,
files: [],
notionPages,
websitePages: [],
}))
const value = result.current.getPreviewPickerValue()
expect(value).toEqual({ id: 'np-1', name: 'Page 1', extension: 'md' })
})
})
describe('handlePreviewChange', () => {
it('should change preview file for FILE type', () => {
const { result } = renderHook(() => usePreviewState({
dataSourceType: DataSourceType.FILE,
files,
notionPages: [],
websitePages: [],
}))
act(() => {
result.current.handlePreviewChange({ id: 'f-2', name: 'file2.txt' })
})
expect(result.current.previewFile).toEqual({ id: 'f-2', name: 'file2.txt' })
})
it('should change preview notion page for NOTION type', () => {
const { result } = renderHook(() => usePreviewState({
dataSourceType: DataSourceType.NOTION,
files: [],
notionPages,
websitePages: [],
}))
act(() => {
result.current.handlePreviewChange({ id: 'np-2', name: 'Page 2' })
})
expect(result.current.previewNotionPage).toBe(notionPages[1])
})
it('should change preview website page for WEB type', () => {
const { result } = renderHook(() => usePreviewState({
dataSourceType: DataSourceType.WEB,
files: [],
notionPages: [],
websitePages,
}))
act(() => {
result.current.handlePreviewChange({ id: 'https://b.com', name: 'Site B' })
})
expect(result.current.previewWebsitePage).toBe(websitePages[1])
})
it('should not change if selected page not found (NOTION)', () => {
const { result } = renderHook(() => usePreviewState({
dataSourceType: DataSourceType.NOTION,
files: [],
notionPages,
websitePages: [],
}))
act(() => {
result.current.handlePreviewChange({ id: 'non-existent', name: 'x' })
})
expect(result.current.previewNotionPage).toBe(notionPages[0])
})
})
})

View File

@ -0,0 +1,372 @@
import type { PreProcessingRule, Rules } from '@/models/datasets'
import { act, renderHook } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { ChunkingMode, ProcessMode } from '@/models/datasets'
import {
DEFAULT_MAXIMUM_CHUNK_LENGTH,
DEFAULT_OVERLAP,
DEFAULT_SEGMENT_IDENTIFIER,
defaultParentChildConfig,
useSegmentationState,
} from '../use-segmentation-state'
describe('useSegmentationState', () => {
beforeEach(() => {
vi.clearAllMocks()
})
// --- Default state ---
describe('default state', () => {
it('should initialize with default values', () => {
const { result } = renderHook(() => useSegmentationState())
expect(result.current.segmentationType).toBe(ProcessMode.general)
expect(result.current.segmentIdentifier).toBe(DEFAULT_SEGMENT_IDENTIFIER)
expect(result.current.maxChunkLength).toBe(DEFAULT_MAXIMUM_CHUNK_LENGTH)
expect(result.current.overlap).toBe(DEFAULT_OVERLAP)
expect(result.current.rules).toEqual([])
expect(result.current.parentChildConfig).toEqual(defaultParentChildConfig)
})
it('should accept initial segmentation type', () => {
const { result } = renderHook(() =>
useSegmentationState({ initialSegmentationType: ProcessMode.parentChild }),
)
expect(result.current.segmentationType).toBe(ProcessMode.parentChild)
})
it('should accept initial summary index setting', () => {
const setting = { enable: true }
const { result } = renderHook(() =>
useSegmentationState({ initialSummaryIndexSetting: setting }),
)
expect(result.current.summaryIndexSetting).toEqual(setting)
})
})
// --- Setters ---
describe('setters', () => {
it('should update segmentation type', () => {
const { result } = renderHook(() => useSegmentationState())
act(() => {
result.current.setSegmentationType(ProcessMode.parentChild)
})
expect(result.current.segmentationType).toBe(ProcessMode.parentChild)
})
it('should update max chunk length', () => {
const { result } = renderHook(() => useSegmentationState())
act(() => {
result.current.setMaxChunkLength(2048)
})
expect(result.current.maxChunkLength).toBe(2048)
})
it('should update overlap', () => {
const { result } = renderHook(() => useSegmentationState())
act(() => {
result.current.setOverlap(100)
})
expect(result.current.overlap).toBe(100)
})
it('should update rules', () => {
const newRules: PreProcessingRule[] = [
{ id: 'remove_extra_spaces', enabled: true },
{ id: 'remove_urls_emails', enabled: false },
]
const { result } = renderHook(() => useSegmentationState())
act(() => {
result.current.setRules(newRules)
})
expect(result.current.rules).toEqual(newRules)
})
})
// --- Segment identifier with escaping ---
describe('setSegmentIdentifier', () => {
it('should escape the value when setting', () => {
const { result } = renderHook(() => useSegmentationState())
act(() => {
result.current.setSegmentIdentifier('\n\n')
})
expect(result.current.segmentIdentifier).toBe('\\n\\n')
})
it('should reset to default when empty and canEmpty is false', () => {
const { result } = renderHook(() => useSegmentationState())
act(() => {
result.current.setSegmentIdentifier('')
})
expect(result.current.segmentIdentifier).toBe(DEFAULT_SEGMENT_IDENTIFIER)
})
it('should allow empty value when canEmpty is true', () => {
const { result } = renderHook(() => useSegmentationState())
act(() => {
result.current.setSegmentIdentifier('', true)
})
expect(result.current.segmentIdentifier).toBe('')
})
})
// --- Toggle rule ---
describe('toggleRule', () => {
it('should toggle a rule enabled state', () => {
const { result } = renderHook(() => useSegmentationState())
const rules: PreProcessingRule[] = [
{ id: 'remove_extra_spaces', enabled: true },
{ id: 'remove_urls_emails', enabled: false },
]
act(() => {
result.current.setRules(rules)
})
act(() => {
result.current.toggleRule('remove_extra_spaces')
})
expect(result.current.rules[0].enabled).toBe(false)
expect(result.current.rules[1].enabled).toBe(false)
})
it('should toggle second rule without affecting first', () => {
const { result } = renderHook(() => useSegmentationState())
const rules: PreProcessingRule[] = [
{ id: 'remove_extra_spaces', enabled: true },
{ id: 'remove_urls_emails', enabled: false },
]
act(() => {
result.current.setRules(rules)
})
act(() => {
result.current.toggleRule('remove_urls_emails')
})
expect(result.current.rules[0].enabled).toBe(true)
expect(result.current.rules[1].enabled).toBe(true)
})
})
// --- Parent-child config ---
describe('parent-child config', () => {
it('should update parent delimiter with escaping', () => {
const { result } = renderHook(() => useSegmentationState())
act(() => {
result.current.updateParentConfig('delimiter', '\n')
})
expect(result.current.parentChildConfig.parent.delimiter).toBe('\\n')
})
it('should update parent maxLength', () => {
const { result } = renderHook(() => useSegmentationState())
act(() => {
result.current.updateParentConfig('maxLength', 2048)
})
expect(result.current.parentChildConfig.parent.maxLength).toBe(2048)
})
it('should update child delimiter with escaping', () => {
const { result } = renderHook(() => useSegmentationState())
act(() => {
result.current.updateChildConfig('delimiter', '\t')
})
expect(result.current.parentChildConfig.child.delimiter).toBe('\\t')
})
it('should update child maxLength', () => {
const { result } = renderHook(() => useSegmentationState())
act(() => {
result.current.updateChildConfig('maxLength', 256)
})
expect(result.current.parentChildConfig.child.maxLength).toBe(256)
})
it('should set empty delimiter when value is empty', () => {
const { result } = renderHook(() => useSegmentationState())
act(() => {
result.current.updateParentConfig('delimiter', '')
})
expect(result.current.parentChildConfig.parent.delimiter).toBe('')
})
it('should set chunk for context mode', () => {
const { result } = renderHook(() => useSegmentationState())
act(() => {
result.current.setChunkForContext('full-doc')
})
expect(result.current.parentChildConfig.chunkForContext).toBe('full-doc')
})
})
// --- Reset to defaults ---
describe('resetToDefaults', () => {
it('should reset to default config when defaults are set', () => {
const { result } = renderHook(() => useSegmentationState())
const defaultRules: Rules = {
pre_processing_rules: [{ id: 'remove_extra_spaces', enabled: true }],
segmentation: {
separator: '---',
max_tokens: 500,
chunk_overlap: 25,
},
parent_mode: 'paragraph',
subchunk_segmentation: {
separator: '\n',
max_tokens: 200,
},
}
act(() => {
result.current.setDefaultConfig(defaultRules)
})
// Change values
act(() => {
result.current.setMaxChunkLength(2048)
result.current.setOverlap(200)
})
act(() => {
result.current.resetToDefaults()
})
expect(result.current.maxChunkLength).toBe(500)
expect(result.current.overlap).toBe(25)
expect(result.current.parentChildConfig).toEqual(defaultParentChildConfig)
})
it('should reset parent-child config even without default config', () => {
const { result } = renderHook(() => useSegmentationState())
act(() => {
result.current.updateParentConfig('maxLength', 9999)
})
act(() => {
result.current.resetToDefaults()
})
expect(result.current.parentChildConfig).toEqual(defaultParentChildConfig)
})
})
// --- applyConfigFromRules ---
describe('applyConfigFromRules', () => {
it('should apply general config from rules', () => {
const { result } = renderHook(() => useSegmentationState())
const rulesConfig: Rules = {
pre_processing_rules: [{ id: 'remove_extra_spaces', enabled: true }],
segmentation: {
separator: '|||',
max_tokens: 800,
chunk_overlap: 30,
},
parent_mode: 'paragraph',
subchunk_segmentation: {
separator: '\n',
max_tokens: 200,
},
}
act(() => {
result.current.applyConfigFromRules(rulesConfig, false)
})
expect(result.current.maxChunkLength).toBe(800)
expect(result.current.overlap).toBe(30)
expect(result.current.rules).toEqual(rulesConfig.pre_processing_rules)
})
it('should apply hierarchical config from rules', () => {
const { result } = renderHook(() => useSegmentationState())
const rulesConfig: Rules = {
pre_processing_rules: [],
segmentation: {
separator: '\n\n',
max_tokens: 1024,
chunk_overlap: 50,
},
parent_mode: 'full-doc',
subchunk_segmentation: {
separator: '\n',
max_tokens: 256,
},
}
act(() => {
result.current.applyConfigFromRules(rulesConfig, true)
})
expect(result.current.parentChildConfig.chunkForContext).toBe('full-doc')
expect(result.current.parentChildConfig.child.maxLength).toBe(256)
})
})
// --- getProcessRule ---
describe('getProcessRule', () => {
it('should build general process rule', () => {
const { result } = renderHook(() => useSegmentationState())
const rule = result.current.getProcessRule(ChunkingMode.text)
expect(rule.mode).toBe(ProcessMode.general)
expect(rule.rules!.segmentation.max_tokens).toBe(DEFAULT_MAXIMUM_CHUNK_LENGTH)
expect(rule.rules!.segmentation.chunk_overlap).toBe(DEFAULT_OVERLAP)
})
it('should build parent-child process rule', () => {
const { result } = renderHook(() => useSegmentationState())
const rule = result.current.getProcessRule(ChunkingMode.parentChild)
expect(rule.mode).toBe('hierarchical')
expect(rule.rules!.parent_mode).toBe('paragraph')
expect(rule.rules!.subchunk_segmentation).toBeDefined()
})
it('should include summary index setting in process rule', () => {
const setting = { enable: true }
const { result } = renderHook(() =>
useSegmentationState({ initialSummaryIndexSetting: setting }),
)
const rule = result.current.getProcessRule(ChunkingMode.text)
expect(rule.summary_index_setting).toEqual(setting)
})
})
// --- Summary index setting ---
describe('handleSummaryIndexSettingChange', () => {
it('should update summary index setting', () => {
const { result } = renderHook(() =>
useSegmentationState({ initialSummaryIndexSetting: { enable: false } }),
)
act(() => {
result.current.handleSummaryIndexSettingChange({ enable: true })
})
expect(result.current.summaryIndexSetting).toEqual({ enable: true })
})
it('should merge with existing setting', () => {
const { result } = renderHook(() =>
useSegmentationState({ initialSummaryIndexSetting: { enable: true } }),
)
act(() => {
result.current.handleSummaryIndexSettingChange({ enable: false })
})
expect(result.current.summaryIndexSetting?.enable).toBe(false)
})
})
})

View File

@ -1,8 +1,8 @@
import type { ILanguageSelectProps } from './index'
import type { ILanguageSelectProps } from '../index'
import { fireEvent, render, screen } from '@testing-library/react'
import * as React from 'react'
import { languages } from '@/i18n-config/language'
import LanguageSelect from './index'
import LanguageSelect from '../index'
// Get supported languages for test assertions
const supportedLanguages = languages.filter(lang => lang.supported)
@ -20,37 +20,27 @@ describe('LanguageSelect', () => {
vi.clearAllMocks()
})
// ==========================================
// Rendering Tests - Verify component renders correctly
// ==========================================
describe('Rendering', () => {
it('should render without crashing', () => {
// Arrange
const props = createDefaultProps()
// Act
render(<LanguageSelect {...props} />)
// Assert
expect(screen.getByText('English')).toBeInTheDocument()
})
it('should render current language text', () => {
// Arrange
const props = createDefaultProps({ currentLanguage: 'Chinese Simplified' })
// Act
render(<LanguageSelect {...props} />)
// Assert
expect(screen.getByText('Chinese Simplified')).toBeInTheDocument()
})
it('should render dropdown arrow icon', () => {
// Arrange
const props = createDefaultProps()
// Act
const { container } = render(<LanguageSelect {...props} />)
// Assert - RiArrowDownSLine renders as SVG
@ -59,7 +49,6 @@ describe('LanguageSelect', () => {
})
it('should render all supported languages in dropdown when opened', () => {
// Arrange
const props = createDefaultProps()
render(<LanguageSelect {...props} />)
@ -75,12 +64,10 @@ describe('LanguageSelect', () => {
})
it('should render check icon for selected language', () => {
// Arrange
const selectedLanguage = 'Japanese'
const props = createDefaultProps({ currentLanguage: selectedLanguage })
render(<LanguageSelect {...props} />)
// Act
const button = screen.getByRole('button')
fireEvent.click(button)
@ -91,9 +78,7 @@ describe('LanguageSelect', () => {
})
})
// ==========================================
// Props Testing - Verify all prop variations work correctly
// ==========================================
describe('Props', () => {
describe('currentLanguage prop', () => {
it('should display English when currentLanguage is English', () => {
@ -126,47 +111,36 @@ describe('LanguageSelect', () => {
describe('disabled prop', () => {
it('should have disabled button when disabled is true', () => {
// Arrange
const props = createDefaultProps({ disabled: true })
// Act
render(<LanguageSelect {...props} />)
// Assert
const button = screen.getByRole('button')
expect(button).toBeDisabled()
})
it('should have enabled button when disabled is false', () => {
// Arrange
const props = createDefaultProps({ disabled: false })
// Act
render(<LanguageSelect {...props} />)
// Assert
const button = screen.getByRole('button')
expect(button).not.toBeDisabled()
})
it('should have enabled button when disabled is undefined', () => {
// Arrange
const props = createDefaultProps()
delete (props as Partial<ILanguageSelectProps>).disabled
// Act
render(<LanguageSelect {...props} />)
// Assert
const button = screen.getByRole('button')
expect(button).not.toBeDisabled()
})
it('should apply disabled styling when disabled is true', () => {
// Arrange
const props = createDefaultProps({ disabled: true })
// Act
const { container } = render(<LanguageSelect {...props} />)
// Assert - Check for disabled class on text elements
@ -175,13 +149,10 @@ describe('LanguageSelect', () => {
})
it('should apply cursor-not-allowed styling when disabled', () => {
// Arrange
const props = createDefaultProps({ disabled: true })
// Act
const { container } = render(<LanguageSelect {...props} />)
// Assert
const elementWithCursor = container.querySelector('.cursor-not-allowed')
expect(elementWithCursor).toBeInTheDocument()
})
@ -205,16 +176,12 @@ describe('LanguageSelect', () => {
})
})
// ==========================================
// User Interactions - Test event handlers
// ==========================================
describe('User Interactions', () => {
it('should open dropdown when button is clicked', () => {
// Arrange
const props = createDefaultProps()
render(<LanguageSelect {...props} />)
// Act
const button = screen.getByRole('button')
fireEvent.click(button)
@ -223,24 +190,20 @@ describe('LanguageSelect', () => {
})
it('should call onSelect when a language option is clicked', () => {
// Arrange
const mockOnSelect = vi.fn()
const props = createDefaultProps({ onSelect: mockOnSelect })
render(<LanguageSelect {...props} />)
// Act
const button = screen.getByRole('button')
fireEvent.click(button)
const frenchOption = screen.getByText('French')
fireEvent.click(frenchOption)
// Assert
expect(mockOnSelect).toHaveBeenCalledTimes(1)
expect(mockOnSelect).toHaveBeenCalledWith('French')
})
it('should call onSelect with correct language when selecting different languages', () => {
// Arrange
const mockOnSelect = vi.fn()
const props = createDefaultProps({ onSelect: mockOnSelect })
render(<LanguageSelect {...props} />)
@ -259,11 +222,9 @@ describe('LanguageSelect', () => {
})
it('should not open dropdown when disabled', () => {
// Arrange
const props = createDefaultProps({ disabled: true })
render(<LanguageSelect {...props} />)
// Act
const button = screen.getByRole('button')
fireEvent.click(button)
@ -273,21 +234,17 @@ describe('LanguageSelect', () => {
})
it('should not call onSelect when component is disabled', () => {
// Arrange
const mockOnSelect = vi.fn()
const props = createDefaultProps({ onSelect: mockOnSelect, disabled: true })
render(<LanguageSelect {...props} />)
// Act
const button = screen.getByRole('button')
fireEvent.click(button)
// Assert
expect(mockOnSelect).not.toHaveBeenCalled()
})
it('should handle rapid consecutive clicks', () => {
// Arrange
const mockOnSelect = vi.fn()
const props = createDefaultProps({ onSelect: mockOnSelect })
render(<LanguageSelect {...props} />)
@ -303,9 +260,7 @@ describe('LanguageSelect', () => {
})
})
// ==========================================
// Component Memoization - Test React.memo behavior
// ==========================================
describe('Memoization', () => {
it('should be wrapped with React.memo', () => {
// Assert - Check component has memo wrapper
@ -313,7 +268,6 @@ describe('LanguageSelect', () => {
})
it('should not re-render when props remain the same', () => {
// Arrange
const mockOnSelect = vi.fn()
const props = createDefaultProps({ onSelect: mockOnSelect })
const renderSpy = vi.fn()
@ -325,7 +279,6 @@ describe('LanguageSelect', () => {
}
const MemoizedTracked = React.memo(TrackedLanguageSelect)
// Act
const { rerender } = render(<MemoizedTracked {...props} />)
rerender(<MemoizedTracked {...props} />)
@ -334,43 +287,33 @@ describe('LanguageSelect', () => {
})
it('should re-render when currentLanguage changes', () => {
// Arrange
const props = createDefaultProps({ currentLanguage: 'English' })
// Act
const { rerender } = render(<LanguageSelect {...props} />)
expect(screen.getByText('English')).toBeInTheDocument()
rerender(<LanguageSelect {...props} currentLanguage="French" />)
// Assert
expect(screen.getByText('French')).toBeInTheDocument()
})
it('should re-render when disabled changes', () => {
// Arrange
const props = createDefaultProps({ disabled: false })
// Act
const { rerender } = render(<LanguageSelect {...props} />)
expect(screen.getByRole('button')).not.toBeDisabled()
rerender(<LanguageSelect {...props} disabled={true} />)
// Assert
expect(screen.getByRole('button')).toBeDisabled()
})
})
// ==========================================
// Edge Cases - Test boundary conditions and error handling
// ==========================================
describe('Edge Cases', () => {
it('should handle empty string as currentLanguage', () => {
// Arrange
const props = createDefaultProps({ currentLanguage: '' })
// Act
render(<LanguageSelect {...props} />)
// Assert - Component should still render
@ -379,10 +322,8 @@ describe('LanguageSelect', () => {
})
it('should handle non-existent language as currentLanguage', () => {
// Arrange
const props = createDefaultProps({ currentLanguage: 'NonExistentLanguage' })
// Act
render(<LanguageSelect {...props} />)
// Assert - Should display the value even if not in list
@ -393,19 +334,15 @@ describe('LanguageSelect', () => {
// Arrange - Turkish has special character in prompt_name
const props = createDefaultProps({ currentLanguage: 'Türkçe' })
// Act
render(<LanguageSelect {...props} />)
// Assert
expect(screen.getByText('Türkçe')).toBeInTheDocument()
})
it('should handle very long language names', () => {
// Arrange
const longLanguageName = 'A'.repeat(100)
const props = createDefaultProps({ currentLanguage: longLanguageName })
// Act
render(<LanguageSelect {...props} />)
// Assert - Should not crash and should display the text
@ -413,11 +350,9 @@ describe('LanguageSelect', () => {
})
it('should render correct number of language options', () => {
// Arrange
const props = createDefaultProps()
render(<LanguageSelect {...props} />)
// Act
const button = screen.getByRole('button')
fireEvent.click(button)
@ -431,11 +366,9 @@ describe('LanguageSelect', () => {
})
it('should only show supported languages in dropdown', () => {
// Arrange
const props = createDefaultProps()
render(<LanguageSelect {...props} />)
// Act
const button = screen.getByRole('button')
fireEvent.click(button)
@ -452,7 +385,6 @@ describe('LanguageSelect', () => {
// Arrange - This tests TypeScript boundary, but runtime should not crash
const props = createDefaultProps()
// Act
render(<LanguageSelect {...props} />)
const button = screen.getByRole('button')
fireEvent.click(button)
@ -463,11 +395,9 @@ describe('LanguageSelect', () => {
})
it('should maintain selection state visually with check icon', () => {
// Arrange
const props = createDefaultProps({ currentLanguage: 'Russian' })
const { container } = render(<LanguageSelect {...props} />)
// Act
const button = screen.getByRole('button')
fireEvent.click(button)
@ -478,28 +408,21 @@ describe('LanguageSelect', () => {
})
})
// ==========================================
// Accessibility - Basic accessibility checks
// ==========================================
describe('Accessibility', () => {
it('should have accessible button element', () => {
// Arrange
const props = createDefaultProps()
// Act
render(<LanguageSelect {...props} />)
// Assert
const button = screen.getByRole('button')
expect(button).toBeInTheDocument()
})
it('should have clickable language options', () => {
// Arrange
const props = createDefaultProps()
render(<LanguageSelect {...props} />)
// Act
const button = screen.getByRole('button')
fireEvent.click(button)
@ -509,16 +432,12 @@ describe('LanguageSelect', () => {
})
})
// ==========================================
// Integration with Popover - Test Popover behavior
// ==========================================
describe('Popover Integration', () => {
it('should use manualClose prop on Popover', () => {
// Arrange
const mockOnSelect = vi.fn()
const props = createDefaultProps({ onSelect: mockOnSelect })
// Act
render(<LanguageSelect {...props} />)
const button = screen.getByRole('button')
fireEvent.click(button)
@ -528,11 +447,9 @@ describe('LanguageSelect', () => {
})
it('should have correct popup z-index class', () => {
// Arrange
const props = createDefaultProps()
const { container } = render(<LanguageSelect {...props} />)
// Act
const button = screen.getByRole('button')
fireEvent.click(button)
@ -542,12 +459,9 @@ describe('LanguageSelect', () => {
})
})
// ==========================================
// Styling Tests - Verify correct CSS classes applied
// ==========================================
describe('Styling', () => {
it('should apply tertiary button styling', () => {
// Arrange
const props = createDefaultProps()
const { container } = render(<LanguageSelect {...props} />)
@ -556,11 +470,9 @@ describe('LanguageSelect', () => {
})
it('should apply hover styling class to options', () => {
// Arrange
const props = createDefaultProps()
const { container } = render(<LanguageSelect {...props} />)
// Act
const button = screen.getByRole('button')
fireEvent.click(button)
@ -570,11 +482,9 @@ describe('LanguageSelect', () => {
})
it('should apply correct text styling to language options', () => {
// Arrange
const props = createDefaultProps()
const { container } = render(<LanguageSelect {...props} />)
// Act
const button = screen.getByRole('button')
fireEvent.click(button)
@ -584,7 +494,6 @@ describe('LanguageSelect', () => {
})
it('should apply disabled styling to icon when disabled', () => {
// Arrange
const props = createDefaultProps({ disabled: true })
const { container } = render(<LanguageSelect {...props} />)

Some files were not shown because too many files have changed in this diff Show More