cv-site/test-toggle-sync.mjs

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

(async () => {
  console.log('🔄 TOGGLE SYNCHRONIZATION TEST\n');
  console.log('Testing that action bar and menu toggles stay in sync\n');

  const browser = await chromium.launch({
    headless: false,
    args: ['--disable-http-cache', '--disable-cache']
  });

  const context = await browser.newContext({
    ignoreHTTPSErrors: true,
    bypassCSP: true
  });

  const page = await context.newPage();

  // Track errors
  const errors = [];
  page.on('console', msg => {
    if (msg.type() === 'error') {
      errors.push(msg.text());
      console.log('  [ERROR]', msg.text());
    }
  });

  page.on('pageerror', err => {
    errors.push(err.message);
    console.log('  [PAGE ERROR]', err.message);
  });

  const url = `http://localhost:1999/?lang=en&_=${Date.now()}`;
  console.log(`📄 Loading: ${url}\n`);

  await page.goto(url, { waitUntil: 'networkidle' });
  await page.waitForTimeout(2000);

  console.log('═'.repeat(70));
  console.log('TOGGLE SYNCHRONIZATION TEST RESULTS');
  console.log('═'.repeat(70) + '\n');

  let passCount = 0;
  let failCount = 0;

  // TEST 1: Length Toggle Sync (Desktop -> Menu)
  console.log('1. CV LENGTH TOGGLE SYNC (Desktop → Menu)');
  const lengthDesktopToMenu = await page.evaluate(() => {
    const desktopToggle = document.querySelector('#lengthToggle');
    const menuToggle = document.querySelector('#lengthToggleMenu');

    // Get initial state
    const initialDesktop = desktopToggle.checked;
    const initialMenu = menuToggle.checked;

    // Click desktop toggle
    desktopToggle.checked = !initialDesktop;
    desktopToggle.dispatchEvent(new Event('change', { bubbles: true }));

    // Check if menu synced
    const menuAfterClick = menuToggle.checked;
    const synced = menuAfterClick === desktopToggle.checked;

    // Restore initial state
    desktopToggle.checked = initialDesktop;
    desktopToggle.dispatchEvent(new Event('change', { bubbles: true }));

    return {
      initialDesktop,
      initialMenu,
      menuAfterClick,
      synced,
      expected: !initialDesktop,
      actual: menuAfterClick
    };
  });

  if (lengthDesktopToMenu.synced) {
    console.log('   ✅ PASS - Menu toggle synced with desktop toggle');
    console.log(`      Desktop changed to: ${!lengthDesktopToMenu.initialDesktop}`);
    console.log(`      Menu updated to: ${lengthDesktopToMenu.menuAfterClick}\n`);
    passCount++;
  } else {
    console.log('   ❌ FAIL - Menu toggle NOT synced');
    console.log(`      Expected: ${lengthDesktopToMenu.expected}`);
    console.log(`      Got: ${lengthDesktopToMenu.actual}\n`);
    failCount++;
  }

  // TEST 2: Length Toggle Sync (Menu -> Desktop)
  console.log('2. CV LENGTH TOGGLE SYNC (Menu → Desktop)');
  const lengthMenuToDesktop = await page.evaluate(() => {
    const desktopToggle = document.querySelector('#lengthToggle');
    const menuToggle = document.querySelector('#lengthToggleMenu');

    // Get initial state
    const initialDesktop = desktopToggle.checked;
    const initialMenu = menuToggle.checked;

    // Click menu toggle
    menuToggle.checked = !initialMenu;
    menuToggle.dispatchEvent(new Event('change', { bubbles: true }));

    // Check if desktop synced
    const desktopAfterClick = desktopToggle.checked;
    const synced = desktopAfterClick === menuToggle.checked;

    // Restore initial state
    menuToggle.checked = initialMenu;
    menuToggle.dispatchEvent(new Event('change', { bubbles: true }));

    return {
      initialDesktop,
      initialMenu,
      desktopAfterClick,
      synced,
      expected: !initialMenu,
      actual: desktopAfterClick
    };
  });

  if (lengthMenuToDesktop.synced) {
    console.log('   ✅ PASS - Desktop toggle synced with menu toggle');
    console.log(`      Menu changed to: ${!lengthMenuToDesktop.initialMenu}`);
    console.log(`      Desktop updated to: ${lengthMenuToDesktop.desktopAfterClick}\n`);
    passCount++;
  } else {
    console.log('   ❌ FAIL - Desktop toggle NOT synced');
    console.log(`      Expected: ${lengthMenuToDesktop.expected}`);
    console.log(`      Got: ${lengthMenuToDesktop.actual}\n`);
    failCount++;
  }

  // TEST 3: Icons Toggle Sync (Desktop -> Menu)
  console.log('3. ICONS TOGGLE SYNC (Desktop → Menu)');
  const iconsDesktopToMenu = await page.evaluate(() => {
    const desktopToggle = document.querySelector('#iconToggle');
    const menuToggle = document.querySelector('#iconToggleMenu');

    const initialDesktop = desktopToggle.checked;

    desktopToggle.checked = !initialDesktop;
    desktopToggle.dispatchEvent(new Event('change', { bubbles: true }));

    const menuAfterClick = menuToggle.checked;
    const synced = menuAfterClick === desktopToggle.checked;

    desktopToggle.checked = initialDesktop;
    desktopToggle.dispatchEvent(new Event('change', { bubbles: true }));

    return { synced, expected: !initialDesktop, actual: menuAfterClick };
  });

  if (iconsDesktopToMenu.synced) {
    console.log('   ✅ PASS - Icons sync works (Desktop → Menu)\n');
    passCount++;
  } else {
    console.log(`   ❌ FAIL - Expected: ${iconsDesktopToMenu.expected}, Got: ${iconsDesktopToMenu.actual}\n`);
    failCount++;
  }

  // TEST 4: Icons Toggle Sync (Menu -> Desktop)
  console.log('4. ICONS TOGGLE SYNC (Menu → Desktop)');
  const iconsMenuToDesktop = await page.evaluate(() => {
    const desktopToggle = document.querySelector('#iconToggle');
    const menuToggle = document.querySelector('#iconToggleMenu');

    const initialMenu = menuToggle.checked;

    menuToggle.checked = !initialMenu;
    menuToggle.dispatchEvent(new Event('change', { bubbles: true }));

    const desktopAfterClick = desktopToggle.checked;
    const synced = desktopAfterClick === menuToggle.checked;

    menuToggle.checked = initialMenu;
    menuToggle.dispatchEvent(new Event('change', { bubbles: true }));

    return { synced, expected: !initialMenu, actual: desktopAfterClick };
  });

  if (iconsMenuToDesktop.synced) {
    console.log('   ✅ PASS - Icons sync works (Menu → Desktop)\n');
    passCount++;
  } else {
    console.log(`   ❌ FAIL - Expected: ${iconsMenuToDesktop.expected}, Got: ${iconsMenuToDesktop.actual}\n`);
    failCount++;
  }

  // TEST 5: Theme Toggle Sync (Desktop -> Menu)
  console.log('5. THEME TOGGLE SYNC (Desktop → Menu)');
  const themeDesktopToMenu = await page.evaluate(() => {
    const desktopToggle = document.querySelector('#themeToggle');
    const menuToggle = document.querySelector('#themeToggleMenu');

    const initialDesktop = desktopToggle.checked;

    desktopToggle.checked = !initialDesktop;
    desktopToggle.dispatchEvent(new Event('change', { bubbles: true }));

    const menuAfterClick = menuToggle.checked;
    const synced = menuAfterClick === desktopToggle.checked;

    desktopToggle.checked = initialDesktop;
    desktopToggle.dispatchEvent(new Event('change', { bubbles: true }));

    return { synced, expected: !initialDesktop, actual: menuAfterClick };
  });

  if (themeDesktopToMenu.synced) {
    console.log('   ✅ PASS - Theme sync works (Desktop → Menu)\n');
    passCount++;
  } else {
    console.log(`   ❌ FAIL - Expected: ${themeDesktopToMenu.expected}, Got: ${themeDesktopToMenu.actual}\n`);
    failCount++;
  }

  // TEST 6: Theme Toggle Sync (Menu -> Desktop)
  console.log('6. THEME TOGGLE SYNC (Menu → Desktop)');
  const themeMenuToDesktop = await page.evaluate(() => {
    const desktopToggle = document.querySelector('#themeToggle');
    const menuToggle = document.querySelector('#themeToggleMenu');

    const initialMenu = menuToggle.checked;

    menuToggle.checked = !initialMenu;
    menuToggle.dispatchEvent(new Event('change', { bubbles: true }));

    const desktopAfterClick = desktopToggle.checked;
    const synced = desktopAfterClick === menuToggle.checked;

    menuToggle.checked = initialMenu;
    menuToggle.dispatchEvent(new Event('change', { bubbles: true }));

    return { synced, expected: !initialMenu, actual: desktopAfterClick };
  });

  if (themeMenuToDesktop.synced) {
    console.log('   ✅ PASS - Theme sync works (Menu → Desktop)\n');
    passCount++;
  } else {
    console.log(`   ❌ FAIL - Expected: ${themeMenuToDesktop.expected}, Got: ${themeMenuToDesktop.actual}\n`);
    failCount++;
  }

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

  if (failCount === 0) {
    console.log('\n✅ ALL TOGGLE SYNCHRONIZATION TESTS PASSED!\n');
    console.log('Desktop toggles and menu toggles are fully synchronized.\n');
  } else {
    console.log(`\n❌ ${failCount} synchronization test(s) failed.\n`);
  }

  if (errors.length > 0) {
    console.log('Console Errors Detected:');
    errors.forEach(e => console.log('  -', e));
    console.log();
  }

  console.log('💡 Browser window left open for manual verification');
  console.log('   Try clicking toggles in action bar and menu to verify sync');
  console.log('   Press Ctrl+C to exit\n');

  await new Promise(() => {});
})();