juanatsap
945928d930
Fixed two critical landscape mode issues on mobile devices: 1. Button backdrop blur bar now shows in landscape mode - Added iOS-style blur backdrop with 70px height for landscape - Consistent visual experience between portrait and landscape - Supports dark mode with appropriate theming 2. Photo positioned on the right in landscape with better sizing - Changed from stacked single-column to two-column grid layout - Photo now positioned on right side (180px vs previous 120px) - Text (name, experience, intro) on left, photo on right - Better use of horizontal space in landscape orientation - Left-aligned text for cleaner layout with photo on right Test results (iPhone SE & iPhone 12 landscape): ✅ Two-column layout with photo on right ✅ Photo properly sized and positioned (180px) ✅ Button backdrop visible with blur effect ✅ No horizontal scroll ✅ All landscape tests passing Test: tests/mjs/59-landscape-photo-and-backdrop-test.mjs
CV Project Test Suite (Active Tests)
28 comprehensive tests covering all functionality from UI interactions to PDF generation.
Quick Start
# Run all tests with master test runner
bun tests/run-all.mjs
# Run individual test
bun tests/mjs/0-zoom.test.mjs
bun tests/mjs/28-references-pdf-download.test.mjs
Core Functionality Tests (0-14)
0-zoom.test.mjs
Zoom control functionality - slider, toggle, persistence
1-toggles.test.mjs
Length/Icon/Theme toggles with screenshot verification
2-keyboard-shortcuts.test.mjs
L/I/V/? keyboard shortcuts
3-hyperscript.test.mjs
Hyperscript parsing and function definitions
4-htmx.test.mjs
HTMX library and request/response cycle
5-language.test.mjs
Bilingual support (EN/ES) switching
6-modals.test.mjs
Info, shortcuts, and PDF modal dialogs
7-mobile-responsive.test.mjs
Mobile viewport and touch interactions
8-hover-sync.test.mjs
Hover state synchronization across UI
9-hyperscript-def-limit.test.mjs
Hyperscript 0.9.14+ def limit validation
10-zoom-persistence.test.mjs
Zoom level localStorage persistence
11-zoom-ui-exclusion.test.mjs
UI elements excluded from zoom
12-skeleton-language-transitions.test.mjs
Skeleton loaders for language transitions (13 sections)
13-color-theme-switcher.test.mjs
Dynamic color theme switcher (auto/light/dark)
14-button-positioning.test.mjs
Responsive button positioning
Advanced Feature Tests (15-28)
14-pdf-modal.test.mjs
PDF download modal with thumbnail selection
15-icon-toggle-debug.test.mjs
Icon toggle debugging and validation
22-theme-consistency.test.mjs
Theme consistency across reloads
23-dark-theme-borders.test.mjs
Dark theme border colors
24-course-inline-icons.test.mjs
Course section inline icon sizes
24-pdf-download-params.test.mjs
PDF download URL parameters
25-inline-icons-comprehensive.test.mjs
Comprehensive inline icon testing
26-course-list-icons.test.mjs
Course list icon rendering
27-course-icons-final.test.mjs
Final course icon validation
28-references-pdf-download.test.mjs
References section PDF download button
29-pdf-toast-notifications.test.mjs
Toast notification system for PDF downloads
- Toast elements exist in DOM
- JavaScript functions available (showPDFToast, hidePDFToast)
- Manual toast trigger and auto-hide
- PDF modal integration - Scenario A (Stay in modal)
- PDF modal integration - Scenario B (Close modal early, toast appears)
- Toast content updates (preparing → success)
- Progress bar animation
- CSS animations defined (toastSlideIn, toastLifecycle, progressShrink)
Migration Tests
test-preference-migration.test.mjs
LocalStorage preference migration (extended→long, true/false→show/hide)
verify-migration.test.mjs
Migration verification and validation
Test Requirements
- Server: Running on http://localhost:1999
- Browser: Playwright Chromium (headed mode)
- Runtime: Bun (
#!/usr/bin/env bun) - Exit: Ctrl+C after manual verification
Test Output
All tests provide:
- ✅ Clear pass/fail indicators
- 📊 Summary of test results
- ❌ Detailed error messages with file:line references
- 🎉 Success confirmation
- 💡 Browser stays open for manual inspection
Screenshots
Tests save screenshots to tests/screenshots/:
- Before/after comparison for visual verification
- Dark theme validation
- Icon toggle validation
Running Tests
# All tests
bun tests/run-all.mjs
# Individual test
bun tests/mjs/{number}-{feature}.test.mjs
# Example
bun tests/mjs/28-references-pdf-download.test.mjs
Last Updated: 2025-11-20 Test Count: 28 active tests Coverage: Complete functionality coverage including toast notifications Status: Production specification