Files

Lukas 9ab96398b0 feat: Add comprehensive dark mode/theme tests

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

2026-02-01 09:39:57 +01:00

2.7 KiB

Raw Blame History

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)

sudo apt update
sudo apt install nodejs npm

Option 2: Using nvm (Recommended)

# 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

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

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

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.

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

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:

Run unit tests: npm test
Run E2E tests: npm run test:e2e
View coverage: npm run test:coverage then open htmlcov_frontend/index.html
Write new tests in tests/frontend/unit/ or tests/frontend/e2e/

See tests/frontend/README.md for detailed testing documentation.

2.7 KiB Raw Blame History Unescape Escape