# CV Project - Test Suite Documentation

Complete testing infrastructure for the CV website application.

## Quick Start

```bash
# Run all systematic tests
bun tests/run-all.mjs

# Run individual test
bun tests/mjs/0-zoom.test.mjs
bun tests/mjs/1-toggles.test.mjs
bun tests/mjs/2-keyboard-shortcuts.test.mjs
```

## Active Test Suite (`tests/mjs/`)

Systematic numbered tests - the source of truth for functionality verification.

### 0-zoom.test.mjs
**Purpose**: Zoom control functionality
- ✅ Zoom control elements exist
- ✅ Zoom toggle shows/hides control
- ✅ Zoom slider changes page zoom
- ✅ Real-time zoom updates (no refresh)

**Run**: `bun tests/mjs/0-zoom.test.mjs`

### 1-toggles.test.mjs
**Purpose**: Comprehensive toggle testing with real-time visual verification
- ✅ Length toggle (Action Bar)
- ✅ Icon toggle (Action Bar) - **with screenshot verification**
- ✅ Theme toggle (Action Bar)
- ✅ Length toggle (Menu + Sync)
- ✅ Icon toggle (Menu + Sync) - **verifies no refresh needed**
- ✅ Theme toggle (Menu + Sync)
- ✅ localStorage persistence
- ✅ Synchronization between action bar and menu

**Critical**: This test caught the icon toggle bug (class name mismatch: .show-logos vs .show-icons)

**Run**: `bun tests/mjs/1-toggles.test.mjs`

### 2-keyboard-shortcuts.test.mjs
**Purpose**: Keyboard shortcut functionality
- ✅ L key - Toggle CV length
- ✅ I key - Toggle icons
- ✅ V key - Toggle theme
- ✅ ? key - Open shortcuts modal
- ✅ Input field safety (shortcuts ignored in input/textarea)

**Run**: `bun tests/mjs/2-keyboard-shortcuts.test.mjs`

## Planned Tests (Coming Soon)

### 3-hyperscript.test.mjs (Planned)
- Parse error detection
- Function definition verification
- Keyboard event handling
- Operator precedence validation

### 4-htmx.test.mjs (Planned)
- HTMX swap behavior
- Loading indicators
- Atomic updates
- Request/response cycle

### 5-language.test.mjs (Planned)
- English/Spanish toggle
- URL parameter persistence
- Content switching

### 6-modals.test.mjs (Planned)
- Info modal
- Shortcuts modal
- PDF modal
- Modal accessibility

## Legacy Tests (Archive)

All previous tests preserved in `/tests/archive/` organized by category.

### Archive Structure
```
tests/archive/
├── toggles/       - Toggle implementation tests
├── zoom/          - Zoom functionality tests
├── hyperscript/   - Hyperscript validation
├── htmx/          - HTMX behavior tests
├── keyboard/      - Keyboard shortcut tests
├── language/      - Language switching tests
├── visual/        - Visual regression tests
├── performance/   - Performance tests
├── integration/   - Full integration tests
└── misc/          - Miscellaneous tests
```

See `/tests/archive/README.md` for details.

## Test Infrastructure

### Master Test Runner
**File**: `tests/run-all.mjs`

Runs all numbered tests in sequence, provides summary report.

```bash
bun tests/run-all.mjs
```

### Screenshots
Toggle tests save screenshots to `tests/screenshots/`:
- `before-icon-toggle.png` - Before clicking icon toggle
- `after-icon-toggle.png` - After clicking icon toggle

Use these to visually verify real-time rendering changes.

## Test Requirements

- **Server**: Must be running on http://localhost:1999
- **Browser**: Playwright launches Chromium (headed mode for manual verification)
- **Bun**: All tests use `#!/usr/bin/env bun`
- **Exit**: Press Ctrl+C after reviewing test results

## Test Output Format

All tests provide:
- ✅ Clear pass/fail indicators
- 📊 Summary of results
- ❌ Detailed error messages
- 🎉 Success confirmation
- 💡 Browser stays open for manual verification

## Test Development Guidelines

### Creating New Tests

1. **Numbering**: Use next available number (3, 4, 5...)
2. **Naming**: `{number}-{feature}.test.mjs`
3. **Structure**: Follow pattern from existing tests
4. **Documentation**: Update this file

### Test Template

```javascript
#!/usr/bin/env bun
/**
 * {FEATURE} TEST
 * ==============
 * Description of what this tests
 */

import { chromium } from 'playwright';

const URL = "http://localhost:1999";

async function test{Feature}() {
  console.log('🧪 {FEATURE} TEST\n');
  console.log('='.repeat(70));

  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });

  const errors = [];
  const testResults = [];

  // ... test implementation ...

  console.log("\nBrowser will stay open for manual inspection.");
  console.log("Press Ctrl+C when done.\n");

  await new Promise(() => {}); // Keep browser open
}

await test{Feature}();
```

## Coverage Gaps (To Do)

Based on analysis, we still need:
- [ ] Hyperscript parse error detection
- [ ] HTMX swap validation
- [ ] Language switching
- [ ] Modal functionality
- [ ] Hover state synchronization
- [ ] Scroll behavior
- [ ] Accessibility (WCAG AA)
- [ ] Performance (Core Web Vitals)
- [ ] Cross-browser compatibility
- [ ] Mobile responsive

## Historical Notes

### Migration - Nov 17, 2025
- Organized 60+ legacy tests into archive
- Created systematic numbered test suite
- Fixed icon toggle real-time rendering bug
- Established master test runner
- **85% test redundancy eliminated**

### Key Bug Fixes Caught By Tests
1. **Icon Toggle Bug** (1-toggles.test.mjs)
   - Class name mismatch: `.show-logos` vs `.show-icons`
   - Required page refresh to see changes
   - Fixed by correcting class names in cv-functions.js

2. **Hyperscript Parser Limit** (archived)
   - Max 3 def statements total across all files
   - Moved toggle functions to JavaScript
   - Upgraded hyperscript 0.9.12 → 0.9.14

## Contributing

When adding tests:
1. Keep tests focused (single responsibility)
2. Make them self-documenting
3. Provide clear pass/fail criteria
4. Update this documentation
5. Add to run-all.mjs automatically (it auto-discovers numbered tests)

---

**Last Updated**: 2025-11-17
**Test Count**: 3 active, 60+ archived
**Coverage**: Core features (toggles, zoom, keyboard)
**Status**: Production-ready systematic testing