juanatsap
da81a0b148
Issue 1: Blur bar compatibility (Android doesn't always show at bottom) ✅ Solution: Wrap blur bar in @supports query for backdrop-filter - Only shows on devices that support backdrop-filter (primarily iOS) - Android devices without support won't see the bar - Prevents layout issues on non-iOS devices Issue 2: Keyboard shortcuts button on real mobile (no physical keyboard) ✅ Solution: Device detection + conditional hiding - Added device-detection.js: Detects real mobile vs desktop browser - Checks user agent (Android, iPhone, iPad, etc.) + touch support - Adds 'is-mobile-device' or 'is-desktop' class to <html> - CSS hides shortcuts button only on real mobile devices - Desktop browser in mobile view: shortcuts button still visible (for testing) Implementation Details: 1. Device Detection (static/js/device-detection.js): - User agent detection: /Android|iPhone|iPad|etc./ - Touch support check: ontouchstart + maxTouchPoints - Class added to <html>: is-mobile-device or is-desktop 2. Blur Bar (@supports query): - Detects backdrop-filter support before applying - iOS: Shows blur bar with backdrop-filter - Android (most): No blur bar (no backdrop-filter support) - Prevents empty/broken bar on incompatible devices 3. CSS Hiding Rules: - .is-mobile-device .shortcuts-btn { display: none !important; } - Also hides zoom-toggle-btn and zoom-control on real mobile - Desktop mobile view: shortcuts button remains visible Files Modified: - static/js/device-detection.js: NEW - Device detection logic - templates/index.html: Load device-detection.js early - static/css/05-responsive/_breakpoints.css: @supports wrapper for blur bar - static/css/04-interactive/_scroll-behavior.css: Hide shortcuts on real mobile - tests/mjs/52-mobile-device-detection-test.mjs: Comprehensive device detection test Test Results: ✅ iPhone (real mobile): is-mobile-device class, shortcuts hidden ✅ Desktop browser (mobile view): is-desktop class, shortcuts visible ✅ Blur bar: Only shows on devices with backdrop-filter support
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