ConnorYoh 7e3321ee16
Feature/v2/filemanager (#4121)
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>
2025-08-08 15:15:09 +01:00
..
2025-08-01 16:08:04 +01:00

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:

  1. Tests automatically query /api/v1/config/endpoints-enabled to discover available conversions
  2. Tests are generated dynamically for each available endpoint
  3. Tests for unavailable endpoints verify they're properly disabled in the UI
  4. 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: false
  • html-to-pdf: false
  • pdf-to-html: false
  • pdf-to-markdown: false
  • pdf-to-pdfa: false
  • pdf-to-presentation: false
  • pdf-to-word: false
  • pdf-to-xml: false

Test Scenarios

Success Scenarios (Available Endpoints)

  1. PDF → Image: PDF to PNG/JPG with various DPI and color settings
  2. PDF → Data: PDF to CSV (table extraction), PDF to TXT (text extraction)
  3. Office → PDF: DOCX/XLSX/PPTX to PDF conversion
  4. Image → PDF: PNG/JPG to PDF with image options
  5. Markdown → PDF: MD to PDF with formatting preservation

Blocked Scenarios (Disabled Endpoints)

  1. EML conversions: Should be disabled in FROM dropdown
  2. PDF → Office: PDF to Word/PowerPoint should be disabled
  3. PDF → Web: PDF to HTML/XML should be disabled
  4. PDF → PDF/A: Should be disabled

Error Scenarios

  1. Corrupted files: Should show helpful error messages
  2. Network failures: Should handle backend unavailability
  3. Large files: Should handle memory constraints gracefully
  4. Invalid parameters: Should validate before submission

Adding New Tests

When adding new conversion formats:

  1. Update ConvertTool.test.tsx:

    • Add the new format to test data
    • Test dropdown behavior for the new format
    • Test format-specific options if any
  2. Update ConvertIntegration.test.ts:

    • Add endpoint availability test cases
    • Add conversion matrix test cases
    • Add parameter validation tests
  3. Update ConvertE2E.spec.ts:

    • Add end-to-end workflow tests
    • Add test fixture files
    • Test actual conversion functionality
  4. 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

  1. Endpoint Status: Update mock data when backend endpoints change
  2. UI Selectors: Update test selectors when UI changes
  3. Test Fixtures: Replace old test files with new ones periodically
  4. 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.