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.
This commit is contained in:
juanatsap
2025-11-17 13:00:03 +00:00
parent 7fc4f76706
commit 3f77fedeaf
8 changed files with 883 additions and 118 deletions
+63
View File
@@ -0,0 +1,63 @@
# CV Project Test Suite
Organized test files for the CV application. All tests use Playwright for browser automation.
## Test Files
### 0-zoom.test.mjs
**Purpose**: Test zoom control functionality
- Verifies zoom control elements exist
- Tests visibility toggle
- Validates zoom slider interaction
- Checks real-time zoom updates
**Run**: `bun tests/mjs/0-zoom.test.mjs`
### 1-toggles.test.mjs
**Purpose**: Comprehensive toggle testing with real-time visual verification
- Tests all 3 toggles (Length, Icons, Theme)
- Validates action bar toggles
- Tests hamburger menu toggles
- Verifies synchronization between action bar and menu
- Checks localStorage persistence
- **Critical**: Validates that toggles update DOM immediately (no refresh needed)
- Takes screenshots for visual comparison
**Run**: `bun tests/mjs/1-toggles.test.mjs`
## Running All Tests
```bash
# Run individual tests
bun tests/mjs/0-zoom.test.mjs
bun tests/mjs/1-toggles.test.mjs
# Run all tests sequentially
for test in tests/mjs/*.test.mjs; do
echo "Running $test..."
bun "$test"
echo ""
done
```
## Test Requirements
- Server must be running on http://localhost:1999
- Browser window will stay open after tests for manual verification
- Press Ctrl+C to exit test
## Test Output
All tests provide:
- ✅ Clear pass/fail indicators
- 📊 Summary of results
- ❌ Detailed error messages
- 🎉 Success confirmation
## 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 rendering changes.