cv-site/tests/mjs/21-view-switcher-test.mjs

#!/usr/bin/env bun
/**
 * VIEW SWITCHER TEST
 * Test the clean/complete view toggle
 */

import { chromium } from "playwright";

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

async function testViewSwitcher() {
  console.log("🧪 VIEW SWITCHER TEST\n");

  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage({ viewport: { width: 1400, height: 1080 } });
  await page.goto(URL);
  await page.waitForTimeout(2000);

  console.log("1️⃣  Initial state:");
  const initial = await page.evaluate(() => {
    const container = document.querySelector('.cv-container');
    const toggle = document.querySelector('#viewToggle');
    return {
      containerClass: container?.className,
      toggleChecked: toggle?.checked,
      isClean: container?.classList.contains('theme-clean'),
    };
  });
  console.log(`   Container class: ${initial.containerClass}`);
  console.log(`   Toggle checked: ${initial.toggleChecked}`);
  console.log(`   Is clean theme: ${initial.isClean}`);

  console.log("\n2️⃣  Clicking view toggle...");
  try {
    // Try clicking the label
    await page.click('label[for="viewToggle"]', { timeout: 5000 });
    await page.waitForTimeout(500);

    const afterClick = await page.evaluate(() => {
      const container = document.querySelector('.cv-container');
      const toggle = document.querySelector('#viewToggle');
      return {
        containerClass: container?.className,
        toggleChecked: toggle?.checked,
        isClean: container?.classList.contains('theme-clean'),
      };
    });

    console.log(`   Container class: ${afterClick.containerClass}`);
    console.log(`   Toggle checked: ${afterClick.toggleChecked}`);
    console.log(`   Is clean theme: ${afterClick.isClean}`);

    if (afterClick.isClean !== initial.isClean) {
      console.log(`\n   ✅ View switcher working!`);
    } else {
      console.log(`\n   ❌ View switcher NOT working - theme didn't change`);
    }
  } catch (error) {
    console.log(`   ❌ Error: ${error.message}`);
  }

  await page.screenshot({ path: 'tests/screenshots/view-switcher.png' });
  console.log(`\n📸 Screenshot: tests/screenshots/view-switcher.png`);

  console.log("\nBrowser will close in 10 seconds...");
  await page.waitForTimeout(10000);
  await browser.close();
}

await testViewSwitcher();