cv-site/tests/TEST-SUMMARY.md

CV Project - Test Suite Documentation

Complete testing infrastructure for the CV website application.

Quick Start

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

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

#!/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