Files

T

juanatsap 3f77fedeaf fix: icon toggle real-time rendering + hyperscript architecture cleanup

CRITICAL FIX: Icon toggle now works without page refresh
- Changed class name from 'show-logos' to 'show-icons' (CSS mismatch bug)
- Updated localStorage key from 'cv-logos' to 'cv-icons'
- Fixed toggleIcons() function in cv-functions.js

HYPERSCRIPT ARCHITECTURE:
- Moved 6 toggle functions from hyperscript to JavaScript (cv-functions.js)
- Solves hyperscript 0.9.14 parser limitation (max 3 def statements total)
- Upgraded hyperscript from 0.9.12 to 0.9.14
- Fixed operator precedence in keyboard shortcuts
- Cleaned view-controls.html templates (inline → function calls)

NEW FILES:
- static/js/cv-functions.js - Global toggle functions (6 functions)
- HYPERSCRIPT-RULES.md - Permanent architecture documentation
- tests/mjs/0-zoom.test.mjs - Zoom functionality test
- tests/mjs/1-toggles.test.mjs - Comprehensive toggle test with real-time verification
- tests/TEST-SUMMARY.md - Test suite documentation

TESTS:
- Real-time DOM update verification (no refresh required)
- Screenshot capture for visual regression
- localStorage persistence validation
- Toggle synchronization between action bar and menu

BREAKING CHANGE: localStorage key changed from 'cv-logos' to 'cv-icons'
Users may need to re-toggle icons preference on first load after update.

2025-11-17 13:00:03 +00:00

2.2 KiB

Raw Blame History

Test Suite Summary

Test Organization

All tests are now organized in /tests/mjs/ with numbered prefixes for execution order.

Available Tests

Test File	Purpose	Status
`0-zoom.test.mjs`	Zoom control functionality	✅ Ready
`1-toggles.test.mjs`	Comprehensive toggle testing with real-time verification	✅ Ready

Test Improvements

1-toggles.test.mjs Enhancements

Key Features Added:

✅ Real-time visual verification - Tests verify DOM updates happen immediately without refresh
✅ Screenshot capture - Takes before/after screenshots for icon toggle
✅ localStorage validation - Verifies state persistence
✅ Synchronization testing - Ensures action bar and menu toggles stay in sync
✅ Detailed reporting - Clear pass/fail for each test with explanations

Tests Performed:

Length Toggle (Action Bar)
Icon Toggle (Action Bar) - with screenshot verification
Theme Toggle (Action Bar)
Length Toggle (Menu + Sync)
Icon Toggle (Menu + Sync) - with real-time rendering check
Theme Toggle (Menu + Sync)

Critical Addition: Tests explicitly check if visual changes happen without page refresh (the bug reported by user)

Running Tests

# Individual test
bun tests/mjs/0-zoom.test.mjs
bun tests/mjs/1-toggles.test.mjs

# All tests in order
for test in tests/mjs/*.test.mjs; do bun "$test"; done

Test Output

Each test provides:

Clear ✅/❌ indicators
Before/after state comparison
localStorage verification
Console error detection
Summary with total pass/fail count

Screenshots

Toggle test saves screenshots to tests/screenshots/:

before-icon-toggle.png
after-icon-toggle.png

Use these to visually verify rendering happens without refresh.

Notes

Server must be running on http://localhost:1999
Tests run in headed mode (browser visible) for manual verification
Press Ctrl+C to exit after reviewing results
All tests are executable (chmod +x already applied)

Next Steps

Additional tests to add:

Keyboard shortcuts test (L, I, V keys)
Hamburger menu animation test
Print/PDF button tests
Responsive design tests

2.2 KiB Raw Blame History