Aniworld/tests/frontend

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:

1. Sets up master password
2. Logs in to get JWT token
3. 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

1. Authentication Flow: JWT token generation, validation, and usage
2. API Endpoints: All REST API endpoints used by frontend
3. WebSocket Communication: Real-time event broadcasting
4. Data Formats: Response formats match frontend expectations
5. 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