CodeSource
/
Readur
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(tests): resolve issue in document details unit tests

This commit is contained in:
perf3ct 2025-10-27 14:51:43 -07:00
parent 2d2a99ec66
commit 8337b988b7
No known key found for this signature in database
GPG Key ID: 569C4EEC436F5232
2 changed files with 120 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

233
frontend/src/pages/__tests__/DocumentDetailsPage.ocr.test.tsx
View File

@ -2,31 +2,14 @@ import { describe, test, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import DocumentDetailsPage from '../DocumentDetailsPage';
import { ThemeProvider as CustomThemeProvider } from '../../contexts/ThemeContext';
import type { Document, OcrResponse } from '../../services/api';
import * as apiModule from '../../services/api';
// Mock the entire api module with mock functions
vi.mock('../../services/api', async () => {
const actual = await vi.importActual<typeof import('../../services/api')>('../../services/api');
return {
...actual,
documentService: {
getById: vi.fn(),
download: vi.fn(),
getOcrText: vi.fn(),
getThumbnail: vi.fn(),
getProcessedImage: vi.fn(),
bulkRetryOcr: vi.fn(),
delete: vi.fn(),
},
default: {
get: vi.fn(),
post: vi.fn(),
put: vi.fn(),
delete: vi.fn(),
},
};
});
const theme = createTheme();
// Mock components that are used by DocumentDetailsPage but not part of our test focus
// Mock all the child components to simplify rendering
vi.mock('../../components/DocumentViewer', () => ({
default: () => null,
}));
@ -54,58 +37,13 @@ vi.mock('../../components/RetryHistoryModal', () => ({
// Mock react-i18next
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string, params?: any) => {
// Provide simple translations for the keys we need
t: (key: string) => {
const translations: Record<string, string> = {
'documentDetails.errors.notFound': 'Document not found',
'documentDetails.actions.backToDocuments': 'Back to Documents',
'documentDetails.actions.download': 'Download',
'documentDetails.actions.viewDocument': 'View Document',
'documentDetails.actions.viewOcrText': 'View OCR Text',
'documentDetails.actions.deleteDocument': 'Delete Document',
'documentDetails.actions.editLabels': 'Edit Labels',
'documentDetails.actions.viewProcessedImage': 'View Processed Image',
'documentDetails.actions.retryOcr': 'Retry OCR',
'documentDetails.actions.retryHistory': 'Retry History',
'documentDetails.subtitle': 'Document Details',
'documentDetails.metadata.fileSize': 'File Size',
'documentDetails.metadata.uploadDate': 'Upload Date',
'documentDetails.metadata.sourceType': 'Source Type',
'documentDetails.metadata.originalPath': 'Original Path',
'documentDetails.metadata.originalCreated': 'Original Created',
'documentDetails.metadata.originalModified': 'Original Modified',
'documentDetails.metadata.ocrStatus': 'OCR Status',
'documentDetails.metadata.textExtracted': 'Text Extracted',
'documentDetails.ocr.title': 'OCR Text Content',
'documentDetails.ocr.confidence': 'Confidence',
'documentDetails.ocr.words': 'Words',
'documentDetails.ocr.processingTime': 'Processing Time',
'documentDetails.ocr.loading': 'Loading OCR text...',
'documentDetails.ocr.loadFailed': 'Failed to load OCR text',
'documentDetails.ocr.noText': 'No OCR text available',
'documentDetails.ocr.error': 'OCR Error',
'documentDetails.ocr.expand': 'Expand',
'documentDetails.ocr.expandTooltip': 'Expand OCR Text',
'documentDetails.tagsLabels.title': 'Tags & Labels',
'documentDetails.tagsLabels.tags': 'Tags',
'documentDetails.tagsLabels.labels': 'Labels',
'documentDetails.tagsLabels.noLabels': 'No labels assigned',
'navigation.documents': 'Documents',
'common.status.error': 'An error occurred',
'common.actions.close': 'Close',
'common.actions.download': 'Download',
'common.actions.cancel': 'Cancel',
};
if (params) {
let translation = translations[key] || key;
// Simple parameter replacement
Object.keys(params).forEach((param) => {
translation = translation.replace(`{{${param}}}`, params[param]);
});
return translation;
}
return translations[key] || key;
},
i18n: {
@ -114,19 +52,6 @@ vi.mock('react-i18next', () => ({
}),
}));
// Import components and types AFTER the mocks are set up
import DocumentDetailsPage from '../DocumentDetailsPage';
import * as apiModule from '../../services/api';
import type { Document, OcrResponse } from '../../services/api';
import { ThemeProvider as CustomThemeProvider } from '../../contexts/ThemeContext';
// Get references to the mocked services
const mockDocumentService = vi.mocked(apiModule.documentService, true);
const mockApi = vi.mocked(apiModule.default, true);
// Create MUI theme for wrapping components
const theme = createTheme();
/**
* Helper function to create a base mock document
*/
@ -181,10 +106,6 @@ const renderDocumentDetailsPage = (documentId = 'test-doc-id') => {
describe('DocumentDetailsPage - OCR Word Count Display', () => {
beforeEach(() => {
console.log('mockDocumentService:', mockDocumentService);
console.log('mockDocumentService.getThumbnail:', mockDocumentService.getThumbnail);
vi.clearAllMocks();
// Mock window.matchMedia (needed for ThemeContext)
Object.defineProperty(window, 'matchMedia', {
writable: true,
@ -200,24 +121,20 @@ describe('DocumentDetailsPage - OCR Word Count Display', () => {
})),
});
// Setup all default mocks - use type assertion since we know they're vi.fn() mocks
(mockDocumentService.getThumbnail as ReturnType<typeof vi.fn>).mockRejectedValue(new Error('No thumbnail'));
(mockDocumentService.bulkRetryOcr as ReturnType<typeof vi.fn>).mockResolvedValue({ data: { success: true } } as any);
(mockDocumentService.delete as ReturnType<typeof vi.fn>).mockResolvedValue({} as any);
(mockApi.get as ReturnType<typeof vi.fn>).mockResolvedValue({ status: 200, data: [] });
(mockApi.post as ReturnType<typeof vi.fn>).mockResolvedValue({ status: 200, data: {} });
(mockApi.put as ReturnType<typeof vi.fn>).mockResolvedValue({ status: 200, data: {} });
// Mock the api.get method for labels
vi.spyOn(apiModule.default, 'get').mockResolvedValue({
status: 200,
data: [],
} as any);
});
afterEach(() => {
vi.restoreAllMocks();
});
/**
* Test Case 1: Verify OCR word count of 0 renders correctly
*
* This tests the bug fix at lines 839, 1086, and 1184 where we changed:
* - Before: {ocrData.ocr_word_count && (
* - After: {ocrData.ocr_word_count != null && (
*
* With ocr_word_count = 0, the old condition would be falsy and not render,
* but the new condition correctly checks for null/undefined.
* The component should display "0" when ocr_word_count is 0 (using != null check)
*/
test('displays OCR word count of 0 correctly', async () => {
const mockDocument = createBaseMockDocument({
@ -230,79 +147,74 @@ describe('DocumentDetailsPage - OCR Word Count Display', () => {
ocr_text: '', // Empty document
});
(mockDocumentService.getById as ReturnType<typeof vi.fn>).mockResolvedValue({ data: mockDocument });
(mockDocumentService.getOcrText as ReturnType<typeof vi.fn>).mockResolvedValue({ data: mockOcrData });
// Mock the document service methods
vi.spyOn(apiModule.documentService, 'getById').mockResolvedValue({ data: mockDocument } as any);
vi.spyOn(apiModule.documentService, 'getOcrText').mockResolvedValue({ data: mockOcrData } as any);
vi.spyOn(apiModule.documentService, 'getThumbnail').mockRejectedValue(new Error('No thumbnail'));
renderDocumentDetailsPage();
// Wait for the document to load
await waitFor(() => {
expect(screen.getByText('test.pdf')).toBeInTheDocument();
});
}, { timeout: 3000 });
// Wait for OCR data to load
await waitFor(() => {
expect(mockDocumentService.getOcrText).toHaveBeenCalled();
});
expect(apiModule.documentService.getOcrText).toHaveBeenCalled();
}, { timeout: 3000 });
// Verify that the word count section renders (it should now with != null check)
// Verify that the word count section renders with value "0"
await waitFor(() => {
// The word count should be displayed as "0"
const wordCountElements = screen.getAllByText('0');
expect(wordCountElements.length).toBeGreaterThan(0);
// Verify "Words" label is present (indicates the stat box rendered)
expect(screen.getByText('0')).toBeInTheDocument();
expect(screen.getByText('Words')).toBeInTheDocument();
});
}, { timeout: 3000 });
});
/**
* Test Case 2: Verify OCR word count of null does not render
*
* When ocr_word_count is null, the != null check should be false,
* and the word count stat should not appear.
* When ocr_word_count is null, the word count stat box should not appear
*/
test('does not display word count when ocr_word_count is null', async () => {
const mockDocument = createBaseMockDocument({
has_ocr_text: true,
ocr_word_count: undefined, // Will be null in the API response
});
const mockOcrData = createMockOcrResponse({
ocr_word_count: undefined,
});
(mockDocumentService.getById as ReturnType<typeof vi.fn>).mockResolvedValue({ data: mockDocument });
(mockDocumentService.getOcrText as ReturnType<typeof vi.fn>).mockResolvedValue({ data: mockOcrData });
const mockOcrData = createMockOcrResponse({
ocr_word_count: null as any, // Explicitly null
});
vi.spyOn(apiModule.documentService, 'getById').mockResolvedValue({ data: mockDocument } as any);
vi.spyOn(apiModule.documentService, 'getOcrText').mockResolvedValue({ data: mockOcrData } as any);
vi.spyOn(apiModule.documentService, 'getThumbnail').mockRejectedValue(new Error('No thumbnail'));
renderDocumentDetailsPage();
// Wait for the document to load
await waitFor(() => {
expect(screen.getByText('test.pdf')).toBeInTheDocument();
});
}, { timeout: 3000 });
// Wait for OCR data to load
await waitFor(() => {
expect(mockDocumentService.getOcrText).toHaveBeenCalled();
});
expect(apiModule.documentService.getOcrText).toHaveBeenCalled();
}, { timeout: 3000 });
// Verify OCR section still renders (document has OCR text)
// Wait for component to finish rendering
await waitFor(() => {
expect(screen.getByText('OCR Text Content')).toBeInTheDocument();
});
// The document title should be visible
expect(screen.getByText('test.pdf')).toBeInTheDocument();
}, { timeout: 3000 });
// Word count stat box should not render
// We check that "Words" label doesn't appear in the stats section
// Word count stat box should not render - check there's no "Words" label
const wordsLabels = screen.queryAllByText('Words');
expect(wordsLabels.length).toBe(0);
});
/**
* Test Case 3: Verify OCR word count of undefined does not render
*
* Similar to null case - when the field is explicitly undefined,
* the stat should not render.
* When ocr_word_count is undefined (field not present), the stat box should not appear
*/
test('does not display word count when ocr_word_count is undefined', async () => {
const mockDocument = createBaseMockDocument({
@ -314,48 +226,43 @@ describe('DocumentDetailsPage - OCR Word Count Display', () => {
document_id: 'test-doc-id',
filename: 'test.pdf',
has_ocr_text: true,
ocr_text: 'Some text',
ocr_text: 'Some text without word count',
ocr_confidence: 85.0,
ocr_processing_time_ms: 1200,
ocr_status: 'completed',
// ocr_word_count is intentionally omitted
// ocr_word_count is intentionally omitted (undefined)
};
(mockDocumentService.getById as ReturnType<typeof vi.fn>).mockResolvedValue({ data: mockDocument });
(mockDocumentService.getOcrText as ReturnType<typeof vi.fn>).mockResolvedValue({ data: mockOcrData });
vi.spyOn(apiModule.documentService, 'getById').mockResolvedValue({ data: mockDocument } as any);
vi.spyOn(apiModule.documentService, 'getOcrText').mockResolvedValue({ data: mockOcrData } as any);
vi.spyOn(apiModule.documentService, 'getThumbnail').mockRejectedValue(new Error('No thumbnail'));
renderDocumentDetailsPage();
// Wait for the document to load
await waitFor(() => {
expect(screen.getByText('test.pdf')).toBeInTheDocument();
});
}, { timeout: 3000 });
// Wait for OCR data to load
await waitFor(() => {
expect(mockDocumentService.getOcrText).toHaveBeenCalled();
});
expect(apiModule.documentService.getOcrText).toHaveBeenCalled();
}, { timeout: 3000 });
// Verify OCR section renders
// Wait for component to finish rendering
await waitFor(() => {
expect(screen.getByText('OCR Text Content')).toBeInTheDocument();
});
// The document title should be visible
expect(screen.getByText('test.pdf')).toBeInTheDocument();
}, { timeout: 3000 });
// Confidence should render (it's present in mockOcrData)
await waitFor(() => {
expect(screen.getByText(/85%/)).toBeInTheDocument();
});
// Word count should NOT render
// Word count should NOT render - no "Words" label
const wordsLabels = screen.queryAllByText('Words');
expect(wordsLabels.length).toBe(0);
});
/**
* Test Case 4: Verify valid OCR word count renders correctly
*
* This is the happy path - a normal document with a valid word count
* should display properly.
* A normal document with a valid word count should display properly
*/
test('displays valid OCR word count correctly', async () => {
const mockDocument = createBaseMockDocument({
@ -366,40 +273,42 @@ describe('DocumentDetailsPage - OCR Word Count Display', () => {
const mockOcrData = createMockOcrResponse({
ocr_word_count: 290,
ocr_text: 'This is a sample document with approximately 290 words...',
ocr_confidence: 95.5,
ocr_processing_time_ms: 1500,
});
(mockDocumentService.getById as ReturnType<typeof vi.fn>).mockResolvedValue({ data: mockDocument });
(mockDocumentService.getOcrText as ReturnType<typeof vi.fn>).mockResolvedValue({ data: mockOcrData });
vi.spyOn(apiModule.documentService, 'getById').mockResolvedValue({ data: mockDocument } as any);
vi.spyOn(apiModule.documentService, 'getOcrText').mockResolvedValue({ data: mockOcrData } as any);
vi.spyOn(apiModule.documentService, 'getThumbnail').mockRejectedValue(new Error('No thumbnail'));
renderDocumentDetailsPage();
// Wait for the document to load
await waitFor(() => {
expect(screen.getByText('test.pdf')).toBeInTheDocument();
});
}, { timeout: 3000 });
// Wait for OCR data to load
await waitFor(() => {
expect(mockDocumentService.getOcrText).toHaveBeenCalled();
});
expect(apiModule.documentService.getOcrText).toHaveBeenCalled();
}, { timeout: 3000 });
// Verify word count displays with proper formatting
await waitFor(() => {
// Should display "290" formatted with toLocaleString()
expect(screen.getByText('290')).toBeInTheDocument();
expect(screen.getByText('Words')).toBeInTheDocument();
});
}, { timeout: 3000 });
// Also verify confidence is displayed
// Also verify confidence is displayed (95.5 rounds to 96)
await waitFor(() => {
expect(screen.getByText(/96%/)).toBeInTheDocument(); // 95.5 rounds to 96
expect(screen.getByText(/96%/)).toBeInTheDocument();
expect(screen.getByText('Confidence')).toBeInTheDocument();
});
}, { timeout: 3000 });
// Verify processing time is displayed
await waitFor(() => {
expect(screen.getByText('1500ms')).toBeInTheDocument();
expect(screen.getByText('Processing Time')).toBeInTheDocument();
});
}, { timeout: 3000 });
});
});

46
frontend/src/test/comprehensive-mocks.ts
View File

@ -7,14 +7,14 @@ import { vi } from 'vitest';
*/
export const createComprehensiveAxiosMock = () => {
const mockAxiosInstance = {
get: vi.fn().mockResolvedValue({ data: {} }),
post: vi.fn().mockResolvedValue({ data: { success: true } }),
put: vi.fn().mockResolvedValue({ data: { success: true } }),
delete: vi.fn().mockResolvedValue({ data: { success: true } }),
patch: vi.fn().mockResolvedValue({ data: { success: true } }),
request: vi.fn().mockResolvedValue({ data: { success: true } }),
head: vi.fn().mockResolvedValue({ data: {} }),
options: vi.fn().mockResolvedValue({ data: {} }),
get: vi.fn().mockResolvedValue({ status: 200, data: {} }),
post: vi.fn().mockResolvedValue({ status: 200, data: { success: true } }),
put: vi.fn().mockResolvedValue({ status: 200, data: { success: true } }),
delete: vi.fn().mockResolvedValue({ status: 200, data: { success: true } }),
patch: vi.fn().mockResolvedValue({ status: 200, data: { success: true } }),
request: vi.fn().mockResolvedValue({ status: 200, data: { success: true } }),
head: vi.fn().mockResolvedValue({ status: 200, data: {} }),
options: vi.fn().mockResolvedValue({ status: 200, data: {} }),
defaults: {
headers: {
common: {},
@ -52,16 +52,25 @@ export const createComprehensiveAxiosMock = () => {
/**
* Creates comprehensive API service mocks
*/
export const createComprehensiveApiMocks = () => ({
api: {
get: vi.fn().mockResolvedValue({ data: {} }),
post: vi.fn().mockResolvedValue({ data: { success: true } }),
put: vi.fn().mockResolvedValue({ data: { success: true } }),
delete: vi.fn().mockResolvedValue({ data: { success: true } }),
patch: vi.fn().mockResolvedValue({ data: { success: true } }),
export const createComprehensiveApiMocks = () => {
const mockApi = {
get: vi.fn().mockResolvedValue({ status: 200, data: [] }),
post: vi.fn().mockResolvedValue({ status: 200, data: { success: true } }),
put: vi.fn().mockResolvedValue({ status: 200, data: { success: true } }),
delete: vi.fn().mockResolvedValue({ status: 200, data: { success: true } }),
patch: vi.fn().mockResolvedValue({ status: 200, data: { success: true } }),
defaults: { headers: { common: {} } },
},
documentService: {
interceptors: {
request: { use: vi.fn(), eject: vi.fn() },
response: { use: vi.fn(), eject: vi.fn() },
},
};
return {
api: mockApi,
default: mockApi, // Add default export for api
documentService: {
getById: vi.fn().mockResolvedValue({ data: {} }),
getRetryRecommendations: vi.fn().mockResolvedValue({
data: { recommendations: [], total_recommendations: 0 }
}),
@ -122,7 +131,8 @@ export const createComprehensiveApiMocks = () => ({
queueService: {
getQueueStatus: vi.fn().mockResolvedValue({ data: { active: 0, waiting: 0 } }),
},
});
}};
/**
* Standard pattern for mocking both axios and API services