cv-site/test-keyboard-shortcuts.mjs

#!/usr/bin/env node
import { chromium } from 'playwright';

(async () => {
  console.log('⌨️  KEYBOARD SHORTCUTS TEST\n');
  console.log('Testing new shortcuts: L, I, V\n');

  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto(`http://localhost:1999/?lang=en&_=${Date.now()}`);
  await page.waitForTimeout(2000);

  console.log('═'.repeat(60));
  console.log('TEST RESULTS');
  console.log('═'.repeat(60) + '\n');

  let passCount = 0;
  let failCount = 0;

  // TEST 1: L key toggles length
  console.log('1. KEYBOARD SHORTCUT "L" (Toggle Length)');
  const lengthTest = await page.evaluate(async () => {
    const paper = document.querySelector('.cv-paper');
    const initialLong = paper.classList.contains('cv-long');

    // Press 'L' key
    const event = new KeyboardEvent('keydown', { key: 'l', bubbles: true });
    document.body.dispatchEvent(event);

    await new Promise(r => setTimeout(r, 100));
    const afterPress = paper.classList.contains('cv-long');

    return { initialLong, afterPress, toggled: initialLong !== afterPress };
  });

  if (lengthTest.toggled) {
    console.log('   ✅ PASS - L key toggled CV length');
    console.log(`      Before: ${lengthTest.initialLong ? 'long' : 'short'}`);
    console.log(`      After: ${lengthTest.afterPress ? 'long' : 'short'}\n`);
    passCount++;
  } else {
    console.log('   ❌ FAIL - L key did not toggle length\n');
    failCount++;
  }

  // TEST 2: I key toggles icons
  console.log('2. KEYBOARD SHORTCUT "I" (Toggle Icons)');
  const iconsTest = await page.evaluate(async () => {
    const paper = document.querySelector('.cv-paper');
    const initialHasIcons = paper.classList.contains('show-icons');

    // Press 'I' key
    const event = new KeyboardEvent('keydown', { key: 'i', bubbles: true });
    document.body.dispatchEvent(event);

    await new Promise(r => setTimeout(r, 100));
    const afterPress = paper.classList.contains('show-icons');

    return { initialHasIcons, afterPress, toggled: initialHasIcons !== afterPress };
  });

  if (iconsTest.toggled) {
    console.log('   ✅ PASS - I key toggled icons');
    console.log(`      Before: ${iconsTest.initialHasIcons ? 'visible' : 'hidden'}`);
    console.log(`      After: ${iconsTest.afterPress ? 'visible' : 'hidden'}\n`);
    passCount++;
  } else {
    console.log('   ❌ FAIL - I key did not toggle icons\n');
    failCount++;
  }

  // TEST 3: V key toggles theme/view
  console.log('3. KEYBOARD SHORTCUT "V" (Toggle Theme/View)');
  const themeTest = await page.evaluate(async () => {
    const container = document.querySelector('.cv-container');
    const initialClean = container.classList.contains('theme-clean');

    // Press 'V' key
    const event = new KeyboardEvent('keydown', { key: 'v', bubbles: true });
    document.body.dispatchEvent(event);

    await new Promise(r => setTimeout(r, 100));
    const afterPress = container.classList.contains('theme-clean');

    return { initialClean, afterPress, toggled: initialClean !== afterPress };
  });

  if (themeTest.toggled) {
    console.log('   ✅ PASS - V key toggled theme');
    console.log(`      Before: ${themeTest.initialClean ? 'clean' : 'default'}`);
    console.log(`      After: ${themeTest.afterPress ? 'clean' : 'default'}\n`);
    passCount++;
  } else {
    console.log('   ❌ FAIL - V key did not toggle theme\n');
    failCount++;
  }

  // TEST 4: Shortcuts don't trigger in input fields
  console.log('4. SHORTCUTS IGNORED IN INPUT FIELDS');
  const inputSafetyTest = await page.evaluate(async () => {
    // Create a temporary input
    const input = document.createElement('input');
    input.type = 'text';
    document.body.appendChild(input);
    input.focus();

    const container = document.querySelector('.cv-container');
    const initialClean = container.classList.contains('theme-clean');

    // Try pressing 'V' while focused in input
    const event = new KeyboardEvent('keydown', { key: 'v', bubbles: true });
    input.dispatchEvent(event);

    await new Promise(r => setTimeout(r, 100));
    const afterPress = container.classList.contains('theme-clean');

    document.body.removeChild(input);

    return { initialClean, afterPress, didNotToggle: initialClean === afterPress };
  });

  if (inputSafetyTest.didNotToggle) {
    console.log('   ✅ PASS - Shortcuts correctly ignored in input fields\n');
    passCount++;
  } else {
    console.log('   ❌ FAIL - Shortcuts incorrectly triggered in input field\n');
    failCount++;
  }

  console.log('═'.repeat(60));
  console.log(`SUMMARY: ${passCount} passed, ${failCount} failed out of 4 tests`);
  console.log('═'.repeat(60));

  if (failCount === 0) {
    console.log('\n✅ ALL KEYBOARD SHORTCUTS WORKING!\n');
  } else {
    console.log(`\n❌ ${failCount} test(s) failed.\n`);
  }

  await browser.close();
  process.exit(failCount === 0 ? 0 : 1);
})();