juanatsap
f87a1a5c28
CRITICAL BUG FIX: Hover states now sync between action bar and hamburger menu Changes: 1. Added mouseenter/mouseleave handlers to menu PDF button - templates/partials/navigation/hamburger-menu.html:178-181 - Added .menu-pdf-btn class for targeting - Added hyperscript hover sync events 2. Updated syncPdfHover() function - static/js/cv-functions.js:71-82 - Now selects both .pdf-btn and .menu-pdf-btn - Both buttons get .pdf-hover-sync class on hover 3. Updated syncPrintHover() function - static/js/cv-functions.js:88-99 - Now selects both .print-btn and .menu-print-btn - Both buttons get .print-hover-sync class on hover 4. Added CSS for menu PDF button hover sync - static/css/main.css:2690-2700 - .menu-pdf-btn.pdf-hover-sync styling (white bg, red icon) - Matches action bar PDF button hover state 5. Created comprehensive hover sync test - tests/mjs/8-hover-sync.test.mjs - Tests all 4 hover scenarios (bar→menu, menu→bar for both buttons) - Validates event handlers and CSS class application - Manual verification instructions included Behavior now correct: ✅ Hovering action bar PDF button highlights menu PDF button ✅ Hovering action bar Print button highlights menu Print button ✅ Hovering menu PDF button highlights action bar PDF button ✅ Hovering menu Print button highlights action bar Print button Fixes documented bug from PROJECT-MEMORY.md Section 3.
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
# 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 toggleafter-icon-toggle.png- After clicking icon toggle
Use these to visually verify rendering changes.