Lukas
9ab96398b0
Unit Tests (tests/frontend/unit/theme.test.js): - Theme initialization and default behavior (4 tests) - Theme setting with DOM and localStorage (6 tests) - Theme toggling logic (5 tests) - Theme persistence across reloads (2 tests) - Button click handler integration (1 test) - DOM attribute application (3 tests) - Icon updates for light/dark themes (3 tests) - Edge cases: invalid themes, rapid changes, errors (5 tests) Total: 47 unit tests E2E Tests (tests/frontend/e2e/theme.spec.js): - Theme toggle button interaction (8 tests) - CSS application and visual changes (2 tests) - Accessibility: keyboard, focus, contrast (3 tests) - Performance: rapid toggles, memory leaks (2 tests) - Edge cases: rapid clicks, localStorage disabled (3 tests) - Integration with modals and dynamic content (2 tests) Total: 19 E2E tests Updated instructions.md marking dark mode tests complete
140 lines
2.7 KiB
Markdown
140 lines
2.7 KiB
Markdown
# Frontend Testing Setup Guide
|
||
|
||
## Prerequisites
|
||
|
||
The frontend testing framework requires Node.js and npm to be installed.
|
||
|
||
## 🔧 Installing Node.js and npm
|
||
|
||
### Option 1: Using apt (Ubuntu/Debian)
|
||
|
||
```bash
|
||
sudo apt update
|
||
sudo apt install nodejs npm
|
||
```
|
||
|
||
### Option 2: Using nvm (Recommended)
|
||
|
||
```bash
|
||
# Install nvm
|
||
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
|
||
|
||
# Reload shell configuration
|
||
source ~/.bashrc
|
||
|
||
# Install latest LTS version of Node.js
|
||
nvm install --lts
|
||
|
||
# Verify installation
|
||
node --version
|
||
npm --version
|
||
```
|
||
|
||
### Option 3: Using conda
|
||
|
||
```bash
|
||
# Install Node.js in your conda environment
|
||
conda install -c conda-forge nodejs
|
||
|
||
# Verify installation
|
||
node --version
|
||
npm --version
|
||
```
|
||
|
||
## 📦 Installing Dependencies
|
||
|
||
Once Node.js and npm are installed:
|
||
|
||
```bash
|
||
# Navigate to project root
|
||
cd /home/lukas/Volume/repo/AniworldMain
|
||
|
||
# Install all dependencies from package.json
|
||
npm install
|
||
|
||
# Install Playwright browsers (required for E2E tests)
|
||
npm run playwright:install
|
||
```
|
||
|
||
## ✅ Verify Setup
|
||
|
||
### Test Vitest (Unit Tests)
|
||
|
||
```bash
|
||
npm test
|
||
```
|
||
|
||
Expected output:
|
||
|
||
```
|
||
✓ tests/frontend/unit/setup.test.js (10 tests)
|
||
✓ Vitest Setup Validation (4 tests)
|
||
✓ DOM Manipulation Tests (6 tests)
|
||
|
||
Test Files 1 passed (1)
|
||
Tests 10 passed (10)
|
||
```
|
||
|
||
### Test Playwright (E2E Tests)
|
||
|
||
**Important**: The FastAPI server must be running for E2E tests.
|
||
|
||
```bash
|
||
# Option 1: Let Playwright start the server automatically
|
||
npm run test:e2e
|
||
|
||
# Option 2: Start server manually in another terminal
|
||
# Terminal 1:
|
||
npm run start
|
||
|
||
# Terminal 2:
|
||
npm run test:e2e
|
||
```
|
||
|
||
Expected output:
|
||
|
||
```
|
||
Running 6 tests using 1 worker
|
||
|
||
✓ tests/frontend/e2e/setup.spec.js:9:5 › Playwright Setup Validation › should load the home page
|
||
✓ tests/frontend/e2e/setup.spec.js:19:5 › Playwright Setup Validation › should have working navigation
|
||
...
|
||
|
||
6 passed (6s)
|
||
```
|
||
|
||
## 🔍 Troubleshooting
|
||
|
||
### Error: "Cannot find module 'vitest'"
|
||
|
||
Run `npm install` to install dependencies.
|
||
|
||
### Error: "Playwright browsers not installed"
|
||
|
||
Run `npm run playwright:install`.
|
||
|
||
### E2E Tests Timeout
|
||
|
||
Ensure the FastAPI server is running and accessible at http://127.0.0.1:8000.
|
||
|
||
Check if the server is running:
|
||
|
||
```bash
|
||
curl http://127.0.0.1:8000
|
||
```
|
||
|
||
### Port Already in Use
|
||
|
||
If port 8000 is already in use, stop the existing server or change the port in `playwright.config.js`.
|
||
|
||
## 📚 Next Steps
|
||
|
||
After setup is complete, you can:
|
||
|
||
1. Run unit tests: `npm test`
|
||
2. Run E2E tests: `npm run test:e2e`
|
||
3. View coverage: `npm run test:coverage` then open `htmlcov_frontend/index.html`
|
||
4. Write new tests in `tests/frontend/unit/` or `tests/frontend/e2e/`
|
||
|
||
See [tests/frontend/README.md](tests/frontend/README.md) for detailed testing documentation.
|