# 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:

```bash
pytest tests/frontend/test_existing_ui_integration.py -v
```

Run specific test class:

```bash
pytest tests/frontend/test_existing_ui_integration.py::TestFrontendAuthentication -v
```

Run single test:

```bash
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:

```python
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:

```python
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