/** * Comprehensive test for all hyperscript refactoring * Tests: keyboard shortcuts, zoom control, PDF modal card selection */ import puppeteer from 'puppeteer'; const BASE_URL = 'http://localhost:1999'; async function testAll() { console.log('๐Ÿงช COMPREHENSIVE HYPERSCRIPT REFACTORING TEST\n'); console.log('=' .repeat(60) + '\n'); const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox'] }); const page = await browser.newPage(); const errors = []; page.on('pageerror', err => errors.push(err.message)); page.on('console', msg => { if (msg.type() === 'error') errors.push(msg.text()); }); let allPass = true; try { await page.goto(BASE_URL, { waitUntil: 'networkidle2', timeout: 15000 }); // ============================================================== // TEST 1: Hyperscript Functions Loaded // ============================================================== console.log('1๏ธโƒฃ Testing hyperscript functions loaded...\n'); const funcs = await page.evaluate(() => ({ // Keyboard functions handleToggleShortcut: typeof handleToggleShortcut === 'function', openModalShortcut: typeof openModalShortcut === 'function', // Zoom functions initZoomControl: typeof initZoomControl === 'function', handleZoomInput: typeof handleZoomInput === 'function', handleZoomReset: typeof handleZoomReset === 'function', // PDF modal functions selectPdfCard: typeof selectPdfCard === 'function', handlePdfCardKey: typeof handlePdfCardKey === 'function', // Core functions initScrollBehavior: typeof initScrollBehavior === 'function', handleScroll: typeof handleScroll === 'function', printFriendly: typeof printFriendly === 'function' })); const funcResults = Object.entries(funcs).map(([name, exists]) => { const status = exists ? 'โœ…' : 'โŒ'; if (!exists) allPass = false; return ` ${name}: ${status}`; }); console.log(funcResults.join('\n')); console.log(); // ============================================================== // TEST 2: Keyboard Shortcuts // ============================================================== console.log('2๏ธโƒฃ Testing keyboard shortcuts...\n'); // Test '?' shortcut await page.keyboard.press('?'); await new Promise(r => setTimeout(r, 400)); const modalOpen = await page.evaluate(() => { const m = document.getElementById('shortcuts-modal'); return m && m.open; }); console.log(` '?' opens modal: ${modalOpen ? 'โœ…' : 'โŒ'}`); if (!modalOpen) allPass = false; if (modalOpen) { await page.keyboard.press('Escape'); await new Promise(r => setTimeout(r, 200)); } // Test 'L' shortcut const lBefore = await page.evaluate(() => document.getElementById('lengthToggle')?.checked); await page.keyboard.press('l'); await new Promise(r => setTimeout(r, 400)); const lAfter = await page.evaluate(() => document.getElementById('lengthToggle')?.checked); const lWorks = lBefore !== lAfter; console.log(` 'L' toggles length: ${lWorks ? 'โœ…' : 'โŒ'}`); if (!lWorks) allPass = false; console.log(); // ============================================================== // TEST 3: Zoom Control Functions // ============================================================== console.log('3๏ธโƒฃ Testing zoom control...\n'); // Test zoom slider functionality via function call const zoomTest = await page.evaluate(() => { const slider = document.getElementById('zoom-slider'); if (!slider) return { error: 'No slider found' }; // Set slider to 150 slider.value = 150; handleZoomInput(slider); const wrapper = document.getElementById('zoom-wrapper'); const valueDisplay = document.getElementById('zoom-value-current'); return { sliderValue: slider.value, wrapperZoom: wrapper ? wrapper.style.zoom : null, displayValue: valueDisplay ? valueDisplay.textContent : null }; }); const zoomSliderWorks = zoomTest.sliderValue === '150' && zoomTest.displayValue === '150'; console.log(` Zoom slider at 150%: ${zoomSliderWorks ? 'โœ…' : 'โŒ'}`); if (!zoomSliderWorks) allPass = false; // Test reset function const resetTest = await page.evaluate(() => { handleZoomReset(); const slider = document.getElementById('zoom-slider'); const valueDisplay = document.getElementById('zoom-value-current'); return { sliderValue: slider ? slider.value : null, displayValue: valueDisplay ? valueDisplay.textContent : null }; }); const resetWorks = resetTest.sliderValue === '100' && resetTest.displayValue === '100'; console.log(` Zoom reset to 100%: ${resetWorks ? 'โœ…' : 'โŒ'}`); if (!resetWorks) allPass = false; console.log(); // ============================================================== // TEST 4: PDF Modal Card Selection // ============================================================== console.log('4๏ธโƒฃ Testing PDF modal card selection...\n'); // Open PDF modal await page.evaluate(() => document.getElementById('pdf-modal').showModal()); await new Promise(r => setTimeout(r, 500)); const pdfModalOpen = await page.evaluate(() => { const modal = document.getElementById('pdf-modal'); return modal && modal.open; }); console.log(` PDF modal opens: ${pdfModalOpen ? 'โœ…' : 'โŒ'}`); if (!pdfModalOpen) allPass = false; if (pdfModalOpen) { // Test card selection const cardTest = await page.evaluate(() => { const shortCard = document.querySelector('[data-cv-format="short"]'); if (!shortCard) return { error: 'Short card not found' }; // Click short card selectPdfCard(shortCard); return { shortSelected: shortCard.classList.contains('selected'), shortAriaChecked: shortCard.getAttribute('aria-checked'), defaultNotSelected: !document.querySelector('[data-cv-format="default"]').classList.contains('selected'), formatStored: window.selectedPdfFormat }; }); const cardSelectWorks = cardTest.shortSelected && cardTest.shortAriaChecked === 'true' && cardTest.defaultNotSelected; console.log(` Card selection works: ${cardSelectWorks ? 'โœ…' : 'โŒ'}`); if (!cardSelectWorks) allPass = false; // Close modal await page.keyboard.press('Escape'); await new Promise(r => setTimeout(r, 200)); } console.log(); // ============================================================== // SUMMARY // ============================================================== console.log('=' .repeat(60)); console.log('\n๐Ÿ“Š TEST SUMMARY\n'); console.log(` Overall: ${allPass ? 'โœ… ALL TESTS PASSED' : 'โŒ SOME TESTS FAILED'}`); console.log(` Console errors: ${errors.length ? errors.join(', ') : 'None'}`); console.log(); await browser.close(); process.exit(allPass && errors.length === 0 ? 0 : 1); } catch (error) { console.error('Test error:', error.message); await browser.close(); process.exit(1); } } testAll();