# Description of Changes TLDR: - Implemented `ConvertFromCbzSettings` component for CBZ to PDF options - Added `ConvertToCbzSettings` component for PDF to CBZ options - Extended conversion constants with new CBZ-related formats and mappings - Updated `ConvertSettings` to include CBZ-specific configuration forms - Updated `useConvertOperation` to handle CBZ conversion parameters For backend reference see this PR: #4472 This pull request adds support for converting between CBZ (Comic Book Zip) and PDF formats in the frontend conversion tool. It introduces new UI components for CBZ-to-PDF and PDF-to-CBZ conversion options, updates the conversion parameters and form data logic, and integrates these formats into the available conversion options and endpoints. **CBZ/PDF Conversion Support:** * Added `ConvertFromCbzSettings` and `ConvertToCbzSettings` components to provide user options for CBZ-to-PDF and PDF-to-CBZ conversions, including "Optimize for ebook" and DPI settings. **Conversion Logic and Parameters:** * Extended the `ConvertParameters` interface and default parameters to include `cbzOptions` (for CBZ-to-PDF) and `cbzOutputOptions` (for PDF-to-CBZ). **Conversion Matrix and Endpoint Integration:** * Added CBZ to the supported "from" and "to" format lists, updated the conversion matrix to allow CBZ-to-PDF and PDF-to-CBZ, and mapped the new conversions to appropriate API endpoints. * Updated URL mapping to recognize `/cbz-to-pdf` and `/pdf-to-cbz` as conversion tool routes. ### Front-end <img width="1852" height="994" alt="image" src="https://github.com/user-attachments/assets/b902438a-8ce7-4eed-a4f8-d80677c0c796" /> <img width="270" height="994" alt="image" src="https://github.com/user-attachments/assets/87556380-e0c5-4974-93c2-d36f86268b49" /> <img width="417" height="389" alt="image" src="https://github.com/user-attachments/assets/1889a3ec-0c06-442a-b3bb-71e1a7c34e4c" /> <img width="1853" height="994" alt="image" src="https://github.com/user-attachments/assets/d6d68f5f-ed70-4be9-89b1-2e4b7cd90921" /> <img width="265" height="994" alt="image" src="https://github.com/user-attachments/assets/36a05dd5-164f-46a7-b8af-aa815d6c0767" /> <!-- Please provide a summary of the changes, including: - What was changed - Why the change was made - Any challenges encountered Closes #(issue_number) --> --- ## Checklist ### General - [X] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [X] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [X] I have performed a self-review of my own code - [X] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### Translations (if applicable) - [ ] I ran [`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md) ### UI Changes (if applicable) - [X] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [X] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details. --------- Signed-off-by: Balázs Szücs <[email protected]>
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-enabledAPI - 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-enabledto 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.