
FileManager Component Overview Purpose: Modal component for selecting and managing PDF files with preview capabilities Architecture: - Responsive Layouts: MobileLayout.tsx (stacked) vs DesktopLayout.tsx (3-column) - Central State: FileManagerContext handles file operations, selection, and modal state - File Storage: IndexedDB persistence with thumbnail caching Key Components: - FileSourceButtons: Switch between Recent/Local/Drive sources - FileListArea: Scrollable file grid with search functionality - FilePreview: PDF thumbnails with dynamic shadow stacking (1-2 shadow pages based on file count) - FileDetails: File info card with metadata - CompactFileDetails: Mobile-optimized file info layout File Flow: 1. Users select source → browse/search files → select multiple files → preview with navigation → open in tools 2. Files persist across tool switches via FileContext integration 3. Memory management handles large PDFs (up to 100GB+) ```mermaid graph TD FM[FileManager] --> ML[MobileLayout] FM --> DL[DesktopLayout] ML --> FSB[FileSourceButtons<br/>Recent/Local/Drive] ML --> FLA[FileListArea] ML --> FD[FileDetails] DL --> FSB DL --> FLA DL --> FD FLA --> FLI[FileListItem] FD --> FP[FilePreview] FD --> CFD[CompactFileDetails] ``` --------- Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
Convert Tool Test Suite
This directory contains comprehensive tests for the Convert Tool functionality.
Test Files Overview
1. ConvertTool.test.tsx
Purpose: Unit/Component testing for the Convert Tool UI components
- Tests dropdown behavior and navigation
- Tests format availability based on endpoint status
- Tests UI state management and form validation
- Mocks backend dependencies for isolated testing
Key Test Areas:
- FROM dropdown enables/disables formats based on endpoint availability
- TO dropdown shows correct conversions for selected source format
- Format-specific options appear/disappear correctly
- Parameter validation and state management
2. ConvertIntegration.test.ts
Purpose: Integration testing for Convert Tool business logic
- Tests parameter validation and conversion matrix logic
- Tests endpoint resolution and availability checking
- Tests file extension detection
- Provides framework for testing actual conversions (requires backend)
Key Test Areas:
- Endpoint availability checking matches real backend status
- Conversion parameters are correctly validated
- File extension detection works properly
- Conversion matrix returns correct available formats
3. ConvertE2E.spec.ts
Purpose: End-to-End testing using Playwright with Dynamic Endpoint Discovery
- Automatically discovers available conversion endpoints from the backend
- Tests complete user workflows from file upload to download
- Tests actual file conversions with real backend
- Skips tests for unavailable endpoints automatically
- Tests error handling and edge cases
- Tests UI/UX flow and user interactions
Key Test Areas:
- Dynamic endpoint discovery using
/api/v1/config/endpoints-enabled
API - Complete conversion workflows for all available endpoints
- Unavailable endpoint testing - verifies disabled conversions are properly blocked
- File upload, conversion, and download process
- Error handling for corrupted files and network issues
- Performance testing with large files
- UI responsiveness and progress indicators
Supported Conversions (tested if available):
- PDF ↔ Images (PNG, JPG, GIF, BMP, TIFF, WebP)
- PDF ↔ Office (DOCX, PPTX)
- PDF ↔ Text (TXT, HTML, XML, CSV, Markdown)
- Office → PDF (DOCX, PPTX, XLSX, etc.)
- Email (EML) → PDF
- HTML → PDF, URL → PDF
- Markdown → PDF
Running the Tests
Important: All commands should be run from the frontend/
directory:
cd frontend
Setup (First Time Only)
# Install dependencies (includes test frameworks)
npm install
# Install Playwright browsers for E2E tests
npx playwright install
Unit Tests (ConvertTool.test.tsx)
# Run all unit tests
npm test
# Run specific test file
npm test ConvertTool.test.tsx
# Run with coverage
npm run test:coverage
# Run in watch mode (re-runs on file changes)
npm run test:watch
# Run specific test pattern
npm test -- --grep "dropdown"
Integration Tests (ConvertIntegration.test.ts)
# Run integration tests
npm test ConvertIntegration.test.ts
# Run with verbose output
npm test ConvertIntegration.test.ts -- --reporter=verbose
E2E Tests (ConvertE2E.spec.ts)
# Prerequisites: Backend must be running on localhost:8080
# Start backend first, then:
# Run all E2E tests (automatically discovers available endpoints)
npm run test:e2e
# Run specific E2E test file
npx playwright test ConvertE2E.spec.ts
# Run with UI mode for debugging
npx playwright test --ui
# Run specific test by endpoint name (dynamic)
npx playwright test -g "pdf-to-img:"
# Run only available conversion tests
npx playwright test -g "Dynamic Conversion Tests"
# Run only unavailable conversion tests
npx playwright test -g "Unavailable Conversions"
# Run in headed mode (see browser)
npx playwright test --headed
# Generate HTML report
npx playwright test ConvertE2E.spec.ts --reporter=html
Test Discovery Process:
- Tests automatically query
/api/v1/config/endpoints-enabled
to discover available conversions - Tests are generated dynamically for each available endpoint
- Tests for unavailable endpoints verify they're properly disabled in the UI
- Console output shows which endpoints were discovered
Test Requirements
For Unit Tests
- No special requirements
- All dependencies are mocked
- Can run in any environment
For Integration Tests
- May require backend API for full functionality
- Uses mock data for endpoint availability
- Tests business logic in isolation
For E2E Tests
- Requires running backend server (localhost:8080)
- Requires test fixture files (see ../test-fixtures/README.md)
- Requires frontend dev server (localhost:5173)
- Tests real conversion functionality
Test Data
The tests use realistic endpoint availability data based on your current server configuration:
Available Endpoints (should pass):
file-to-pdf
: true (DOCX, XLSX, PPTX → PDF)img-to-pdf
: true (PNG, JPG, etc. → PDF)markdown-to-pdf
: true (MD → PDF)pdf-to-csv
: true (PDF → CSV)pdf-to-img
: true (PDF → PNG, JPG, etc.)pdf-to-text
: true (PDF → TXT)
Disabled Endpoints (should be blocked):
eml-to-pdf
: falsehtml-to-pdf
: falsepdf-to-html
: falsepdf-to-markdown
: falsepdf-to-pdfa
: falsepdf-to-presentation
: falsepdf-to-word
: falsepdf-to-xml
: false
Test Scenarios
Success Scenarios (Available Endpoints)
- PDF → Image: PDF to PNG/JPG with various DPI and color settings
- PDF → Data: PDF to CSV (table extraction), PDF to TXT (text extraction)
- Office → PDF: DOCX/XLSX/PPTX to PDF conversion
- Image → PDF: PNG/JPG to PDF with image options
- Markdown → PDF: MD to PDF with formatting preservation
Blocked Scenarios (Disabled Endpoints)
- EML conversions: Should be disabled in FROM dropdown
- PDF → Office: PDF to Word/PowerPoint should be disabled
- PDF → Web: PDF to HTML/XML should be disabled
- PDF → PDF/A: Should be disabled
Error Scenarios
- Corrupted files: Should show helpful error messages
- Network failures: Should handle backend unavailability
- Large files: Should handle memory constraints gracefully
- Invalid parameters: Should validate before submission
Adding New Tests
When adding new conversion formats:
-
Update ConvertTool.test.tsx:
- Add the new format to test data
- Test dropdown behavior for the new format
- Test format-specific options if any
-
Update ConvertIntegration.test.ts:
- Add endpoint availability test cases
- Add conversion matrix test cases
- Add parameter validation tests
-
Update ConvertE2E.spec.ts:
- Add end-to-end workflow tests
- Add test fixture files
- Test actual conversion functionality
-
Update test fixtures:
- Add sample files for the new format
- Update ../test-fixtures/README.md
Debugging Failed Tests
Unit Test Failures
- Check mock data matches real endpoint status
- Verify component props and state management
- Check for React hook dependency issues
Integration Test Failures
- Verify conversion matrix includes new formats
- Check endpoint name mappings
- Ensure parameter validation logic is correct
E2E Test Failures
- Ensure backend server is running
- Check test fixture files exist and are valid
- Verify element selectors match current UI
- Check for timing issues (increase timeouts if needed)
Test Maintenance
Regular Updates Needed
- Endpoint Status: Update mock data when backend endpoints change
- UI Selectors: Update test selectors when UI changes
- Test Fixtures: Replace old test files with new ones periodically
- Performance Benchmarks: Update expected performance metrics
CI/CD Integration
- Unit tests: Run on every commit
- Integration tests: Run on pull requests
- E2E tests: Run on staging deployment
- Performance tests: Run weekly or on major releases
Performance Expectations
These tests focus on frontend functionality, not backend performance:
- File upload/UI: < 1 second for small test files
- Dropdown interactions: < 200ms
- Form validation: < 100ms
- Conversion UI flow: < 5 seconds for small test files
Tests will fail if UI interactions are slow, indicating frontend performance issues.