cv-site/tests/archive/toggles/test-all-toggles.mjs

#!/usr/bin/env bun
/**
 * COMPREHENSIVE TOGGLE TEST
 * ==========================
 * Tests ALL toggles work without errors
 * This is our source of truth for toggle functionality
 */

import { chromium } from "playwright";

const URL = "http://localhost:1999";

async function testAllToggles() {
  console.log("🧪 COMPREHENSIVE TOGGLE TEST\n");
  console.log("=".repeat(70));

  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });

  const errors = [];
  const warnings = [];

  page.on('console', msg => {
    const text = msg.text();
    if (msg.type() === 'error') {
      errors.push(text);
      console.log(`❌ ERROR: ${text}`);
    } else if (msg.type() === 'warning') {
      warnings.push(text);
    }
  });

  page.on('pageerror', err => {
    errors.push(err.message);
    console.log(`❌ PAGE ERROR: ${err.message}`);
  });

  console.log("\n1️⃣  Loading page...");
  await page.goto(URL);
  await page.waitForTimeout(2000);

  console.log("\n2️⃣  Testing Length Toggle (Action Bar)...");
  const lengthToggle = await page.$('#lengthToggle');
  if (lengthToggle) {
    const paper = await page.$('.cv-paper');
    const beforeClass = await paper.evaluate(el => el.className);

    await lengthToggle.click();
    await page.waitForTimeout(500);

    const afterClass = await paper.evaluate(el => el.className);
    const changed = beforeClass !== afterClass;

    console.log(`   Before: ${beforeClass.includes('cv-long') ? 'long' : 'short'}`);
    console.log(`   After:  ${afterClass.includes('cv-long') ? 'long' : 'short'}`);
    console.log(`   ${changed ? '✅ Works' : '❌ Broken'}`);
  } else {
    console.log(`   ❌ Toggle not found`);
  }

  console.log("\n3️⃣  Testing Icon/Logo Toggle (Action Bar)...");
  const iconToggle = await page.$('#iconToggle');
  if (iconToggle) {
    const paper = await page.$('.cv-paper');
    const beforeClass = await paper.evaluate(el => el.className);

    await iconToggle.click();
    await page.waitForTimeout(500);

    const afterClass = await paper.evaluate(el => el.className);
    const changed = beforeClass !== afterClass;

    console.log(`   Before: ${beforeClass.includes('show-logos') ? 'icons shown' : 'icons hidden'}`);
    console.log(`   After:  ${afterClass.includes('show-logos') ? 'icons shown' : 'icons hidden'}`);
    console.log(`   ${changed ? '✅ Works' : '❌ Broken'}`);
  } else {
    console.log(`   ❌ Toggle not found`);
  }

  console.log("\n4️⃣  Testing Theme Toggle (Action Bar)...");
  const themeToggle = await page.$('#themeToggle');
  if (themeToggle) {
    const body = await page.$('body');
    const beforeClass = await body.evaluate(el => el.className);

    await themeToggle.click();
    await page.waitForTimeout(500);

    const afterClass = await body.evaluate(el => el.className);
    const changed = beforeClass !== afterClass;

    console.log(`   Before: ${beforeClass.includes('theme-clean') ? 'clean' : 'default'}`);
    console.log(`   After:  ${afterClass.includes('theme-clean') ? 'clean' : 'default'}`);
    console.log(`   ${changed ? '✅ Works' : '❌ Broken'}`);
  } else {
    console.log(`   ❌ Toggle not found`);
  }

  console.log("\n5️⃣  Testing Hamburger Menu...");
  const hamburger = await page.$('.hamburger-btn');
  if (hamburger) {
    await hamburger.click();
    await page.waitForTimeout(500);

    const menu = await page.$('.navigation-menu');
    const isOpen = await menu.evaluate(el => el.classList.contains('menu-open'));
    console.log(`   ${isOpen ? '✅ Menu opened' : '❌ Menu failed to open'}`);

    if (isOpen) {
      console.log("\n6️⃣  Testing Length Toggle (Menu)...");
      const menuLengthToggle = await page.$('#lengthToggleMenu');
      if (menuLengthToggle) {
        const paper = await page.$('.cv-paper');
        const beforeClass = await paper.evaluate(el => el.className);

        await menuLengthToggle.click();
        await page.waitForTimeout(500);

        const afterClass = await paper.evaluate(el => el.className);
        const changed = beforeClass !== afterClass;

        console.log(`   ${changed ? '✅ Works' : '❌ Broken'}`);
      }

      console.log("\n7️⃣  Testing Icon Toggle (Menu)...");
      const menuIconToggle = await page.$('#iconToggleMenu');
      if (menuIconToggle) {
        const paper = await page.$('.cv-paper');
        const beforeClass = await paper.evaluate(el => el.className);

        await menuIconToggle.click();
        await page.waitForTimeout(500);

        const afterClass = await paper.evaluate(el => el.className);
        const changed = beforeClass !== afterClass;

        console.log(`   ${changed ? '✅ Works' : '❌ Broken'}`);
      }

      console.log("\n8️⃣  Testing Theme Toggle (Menu)...");
      const menuThemeToggle = await page.$('#themeToggleMenu');
      if (menuThemeToggle) {
        const body = await page.$('body');
        const beforeClass = await body.evaluate(el => el.className);

        await menuThemeToggle.click();
        await page.waitForTimeout(500);

        const afterClass = await body.evaluate(el => el.className);
        const changed = beforeClass !== afterClass;

        console.log(`   ${changed ? '✅ Works' : '❌ Broken'}`);
      }
    }
  }

  console.log("\n" + "=".repeat(70));
  console.log("📊 ERROR SUMMARY\n");

  if (errors.length === 0) {
    console.log("✅ NO ERRORS - All toggles work perfectly!");
  } else {
    console.log(`❌ ${errors.length} ERRORS FOUND:\n`);
    errors.forEach((err, i) => {
      console.log(`${i + 1}. ${err}`);
    });
  }

  console.log("=".repeat(70) + "\n");

  console.log("Browser will stay open for manual inspection.");
  console.log("Press Ctrl+C when done.\n");

  await new Promise(() => {}); // Keep browser open
}

await testAllToggles();