cv-site/tests/TEST-SUMMARY.md

CV Project - Test Suite Documentation

⚠️ SINGLE SOURCE OF TRUTH

These tests define what "working" means. If a test passes, the feature MUST work. If a feature breaks, a test MUST fail.

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
bun tests/mjs/3-hyperscript.test.mjs
bun tests/mjs/4-htmx.test.mjs
bun tests/mjs/5-language.test.mjs
bun tests/mjs/6-modals.test.mjs
bun tests/mjs/7-mobile-responsive.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

3-hyperscript.test.mjs

Purpose: Hyperscript integrity and parse error detection

• ✅ No parse errors on page load
• ✅ Function definitions verified (toggleCVLength, toggleIcons, toggleTheme, handleKeyboardShortcut)
• ✅ Keyboard event handlers work
• ✅ Def statement count (≤3 limit)
• ✅ Operator precedence validation

Run: bun tests/mjs/3-hyperscript.test.mjs

4-htmx.test.mjs

Purpose: HTMX functionality validation

• ✅ HTMX library loaded
• ✅ HTMX elements present (hx-get, hx-post, hx-swap, hx-target)
• ✅ Request/response cycle
• ✅ Loading indicators

Run: bun tests/mjs/4-htmx.test.mjs

5-language.test.mjs

Purpose: Language switching functionality

• ✅ Language toggle controls exist
• ✅ Default language (English)
• ✅ Spanish via URL parameter (?lang=es)
• ✅ Language toggle button
• ✅ localStorage/cookie persistence

Run: bun tests/mjs/5-language.test.mjs

6-modals.test.mjs

Purpose: Modal functionality and accessibility

• ✅ Modal elements exist (info, shortcuts, PDF)
• ✅ Shortcuts modal opens with ? key
• ✅ Info modal opens
• ✅ PDF modal opens
• ✅ ESC key closes modals
• ✅ Accessibility attributes (role, aria-label, aria-modal)

Run: bun tests/mjs/6-modals.test.mjs

7-mobile-responsive.test.mjs

Purpose: Mobile viewport rendering and interactions

• ✅ Mobile viewport (375px) - no horizontal scroll
• ✅ Tablet viewport (768px) - proper layout
• ✅ Touch interactions (hamburger menu)
• ✅ Responsive breakpoints (320px - 1920px)
• ✅ Viewport meta tag
• ✅ Touch-friendly button sizes (≥44px)
• ✅ Text readability (≥14px font)

Run: bun tests/mjs/7-mobile-responsive.test.mjs

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}();

Future Enhancements (Optional)

Core functionality COMPLETELY covered. Optional future tests:

• Print CSS validation (8-print.test.mjs)
• PDF generation testing (9-pdf.test.mjs)
• Performance benchmarks - Core Web Vitals
• Cross-browser - Firefox, Safari
• Accessibility audit - WCAG AA compliance
• Advanced interactions - Hover states, scroll behavior

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: 8 active, 60+ archived Coverage: Complete (UI, keyboard, libraries, i18n, modals, mobile) Status: SINGLE SOURCE OF TRUTH - Production specification