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