cv-site/tests/mjs/33-keyboard-shortcuts-refactored.test.mjs

/**
 * Test keyboard shortcuts after refactoring to use external helper functions
 */
import puppeteer from 'puppeteer';

const BASE_URL = 'http://localhost:1999';

async function testKeyboardShortcuts() {
    console.log('🧪 KEYBOARD SHORTCUTS TEST (Refactored)\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());
    });

    try {
        await page.goto(BASE_URL, { waitUntil: 'networkidle2', timeout: 15000 });

        // Test '?' shortcut - opens modal
        console.log("Testing '?' 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 ? '✅ PASS' : '❌ FAIL'}`);

        // Close modal
        if (modalOpen) {
            await page.keyboard.press('Escape');
            await new Promise(r => setTimeout(r, 200));
        }

        // Test 'V' shortcut - toggles theme
        console.log("Testing 'V' shortcut...");
        const vBefore = await page.evaluate(() => document.getElementById('themeToggle')?.checked);
        await page.keyboard.press('v');
        await new Promise(r => setTimeout(r, 400));
        const vAfter = await page.evaluate(() => document.getElementById('themeToggle')?.checked);
        const vWorks = vBefore !== vAfter;
        console.log(`   'V' toggles theme: ${vWorks ? '✅ PASS' : '❌ FAIL'} (${vBefore} → ${vAfter})`);

        // Test 'L' shortcut - toggles length
        console.log("Testing '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 ? '✅ PASS' : '❌ FAIL'} (${lBefore} → ${lAfter})`);

        // Test 'I' shortcut - toggles icons
        console.log("Testing 'I' shortcut...");
        const iBefore = await page.evaluate(() => document.getElementById('iconToggle')?.checked);
        await page.keyboard.press('i');
        await new Promise(r => setTimeout(r, 400));
        const iAfter = await page.evaluate(() => document.getElementById('iconToggle')?.checked);
        const iWorks = iBefore !== iAfter;
        console.log(`   'I' toggles icons: ${iWorks ? '✅ PASS' : '❌ FAIL'} (${iBefore} → ${iAfter})`);

        // Summary
        console.log('\n=== SUMMARY ===');
        const allPass = modalOpen && vWorks && lWorks && iWorks;
        console.log(`All shortcuts work: ${allPass ? '✅ ALL PASS' : '❌ SOME FAILED'}`);
        console.log(`Console errors: ${errors.length ? errors.join(', ') : 'None'}`);

        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);
    }
}

testKeyboardShortcuts();