E2E Tests (tests/frontend/e2e/settings_modal.spec.js): - Modal open/close: button, overlay, Escape (5 tests) - Configuration sections: all sections display (5 tests) - Load configuration: directory, count, scheduler, status (4 tests) - Edit fields: name, directory, scheduler, interval (6 tests) - Save configuration: main, scheduler, feedback (4 tests) - Reset configuration to original values (2 tests) - Browse directory functionality (2 tests) - Connection test and status update (2 tests) - Scheduler status: next/last rescan, running (3 tests) - Accessibility: labels, keyboard nav, focus trap (4 tests) - Edge cases: rapid changes, long inputs, multiple opens (5 tests) - Theme integration: respect theme, toggle (2 tests) Total: 44 E2E tests Integration Tests (tests/integration/test_config_backup_restore.py): - Backup creation: default/custom name, auth, file creation (6 tests) - Backup listing: array, metadata, recent, auth (5 tests) - Backup restoration: valid, nonexistent, pre-backup, auth (6 tests) - Backup deletion: existing, removes file/list, auth (5 tests) - Complete workflows: full cycle, multiple cycles (3 tests) - Edge cases: invalid names, concurrent ops, long names (4 tests) Total: 29 integration tests Updated instructions.md marking settings modal tests complete
Frontend Integration Tests
This directory contains integration tests for the existing JavaScript frontend (app.js, websocket_client.js, queue.js) with the FastAPI backend.
Test Coverage
test_existing_ui_integration.py
Comprehensive test suite for frontend-backend integration:
Authentication Tests (TestFrontendAuthentication)
- Auth status endpoint behavior (configured/not configured/authenticated states)
- JWT token login flow
- Logout functionality
- Unauthorized request handling (401 responses)
- Authenticated request success
Anime API Tests (TestFrontendAnimeAPI)
- GET /api/v1/anime - anime list retrieval
- POST /api/v1/anime/search - search functionality
- POST /api/v1/anime/rescan - trigger library rescan
Download API Tests (TestFrontendDownloadAPI)
- Adding episodes to download queue
- Getting queue status
- Starting/pausing/stopping download queue
WebSocket Integration Tests (TestFrontendWebSocketIntegration)
- WebSocket connection establishment with JWT token
- Queue update broadcasts
- Download progress updates
Configuration API Tests (TestFrontendConfigAPI)
- GET /api/config - configuration retrieval
- POST /api/config - configuration updates
JavaScript Integration Tests (TestFrontendJavaScriptIntegration)
- Bearer token authentication pattern (makeAuthenticatedRequest)
- 401 error handling
- Queue operations compatibility
Error Handling Tests (TestFrontendErrorHandling)
- JSON error responses
- Validation error handling (400/422)
Real-Time Update Tests (TestFrontendRealTimeUpdates)
- download_started notifications
- download_completed notifications
- Multiple clients receiving broadcasts
Data Format Tests (TestFrontendDataFormats)
- Anime list format validation
- Queue status format validation
- WebSocket message format validation
Running the Tests
Run all frontend integration tests:
pytest tests/frontend/test_existing_ui_integration.py -v
Run specific test class:
pytest tests/frontend/test_existing_ui_integration.py::TestFrontendAuthentication -v
Run single test:
pytest tests/frontend/test_existing_ui_integration.py::TestFrontendAuthentication::test_login_returns_jwt_token -v
Key Test Patterns
Authenticated Client Fixture
Most tests use the authenticated_client fixture which:
- Sets up master password
- Logs in to get JWT token
- Adds Authorization header to all requests
WebSocket Testing
WebSocket tests use async context managers to establish connections:
async with authenticated_client.websocket_connect(
f"/ws/connect?token={token}"
) as websocket:
message = await websocket.receive_json()
# Test message format
API Mocking
Service layer is mocked to isolate frontend-backend integration:
with patch("src.server.api.anime.get_anime_service") as mock:
mock_service = AsyncMock()
mock_service.get_all_series = AsyncMock(return_value=[...])
mock.return_value = mock_service
Frontend JavaScript Files Tested
- app.js: Main application logic, authentication, anime management
- websocket_client.js: WebSocket client wrapper, connection management
- queue.js: Download queue management, real-time updates
Integration Points Verified
- Authentication Flow: JWT token generation, validation, and usage
- API Endpoints: All REST API endpoints used by frontend
- WebSocket Communication: Real-time event broadcasting
- Data Formats: Response formats match frontend expectations
- Error Handling: Proper error responses for frontend consumption
Dependencies
- pytest
- pytest-asyncio
- httpx (for async HTTP testing)
- FastAPI test client with WebSocket support
Notes
- Tests use in-memory state, no database persistence
- Auth service is reset before each test
- WebSocket service singleton is reused across tests
- Fixtures are scoped appropriately to avoid test pollution