cv-site/tests/mjs/22-theme-consistency.test.mjs

#!/usr/bin/env bun
/**
 * Test: Theme consistency - sidebar should have only 2 colors
 *
 * Verifies that switching between explicit themes (light/dark) and auto
 * produces the same visual result. Auto should mirror the system preference.
 */

import { chromium } from 'playwright';

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

async function testThemeConsistency() {
  console.log('\n🎨 Theme Consistency Test\n');

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

  try {
    await page.goto(BASE_URL, { waitUntil: 'networkidle' });
    await page.waitForSelector('.cv-container', { timeout: 5000 });

    // Helper to get sidebar color
    const getSidebarColor = async () => {
      return await page.evaluate(() => {
        const sidebar = document.querySelector('.cv-sidebar');
        if (!sidebar) return null;
        return window.getComputedStyle(sidebar).backgroundColor;
      });
    };

    // Helper to click theme switcher
    const clickTheme = async () => {
      await page.click('.color-theme-switcher');
      await page.waitForTimeout(300);
    };

    // Test 1: System DARK - compare explicit dark vs auto
    console.log('📱 Test 1: System preference = DARK');
    await page.emulateMedia({ colorScheme: 'dark' });

    // Start from light, go to dark
    await clickTheme(); // auto -> light
    await clickTheme(); // light -> dark
    const explicitDarkColor = await getSidebarColor();
    console.log(`   Explicit dark: ${explicitDarkColor}`);

    // Go to auto (should match dark since system is dark)
    await clickTheme(); // dark -> auto
    const autoDarkColor = await getSidebarColor();
    console.log(`   Auto (dark):   ${autoDarkColor}`);

    if (explicitDarkColor === autoDarkColor) {
      console.log('   ✅ Colors match in dark mode');
    } else {
      console.log('   ❌ Colors differ in dark mode!');
      await browser.close();
      process.exit(1);
    }

    // Test 2: System LIGHT - compare explicit light vs auto
    console.log('\n📱 Test 2: System preference = LIGHT');
    await page.emulateMedia({ colorScheme: 'light' });

    // Go to explicit light
    await clickTheme(); // auto -> light
    const explicitLightColor = await getSidebarColor();
    console.log(`   Explicit light: ${explicitLightColor}`);

    // Go back to auto (should match light since system is light)
    await clickTheme(); // light -> dark
    await clickTheme(); // dark -> auto
    const autoLightColor = await getSidebarColor();
    console.log(`   Auto (light):   ${autoLightColor}`);

    if (explicitLightColor === autoLightColor) {
      console.log('   ✅ Colors match in light mode');
    } else {
      console.log('   ❌ Colors differ in light mode!');
      await browser.close();
      process.exit(1);
    }

    // Test 3: Verify there are only 2 distinct colors
    const uniqueColors = new Set([explicitDarkColor, autoDarkColor, explicitLightColor, autoLightColor]);
    console.log(`\n🎨 Total unique colors: ${uniqueColors.size}`);
    console.log(`   Colors: ${Array.from(uniqueColors).join(', ')}`);

    if (uniqueColors.size === 2) {
      console.log('   ✅ Only 2 visual states (light and dark)');
    } else {
      console.log('   ❌ More than 2 visual states detected!');
      await browser.close();
      process.exit(1);
    }

    console.log('\n✅ All theme consistency tests passed!\n');
    await browser.close();

  } catch (error) {
    console.error('\n❌ Test failed:', error.message);
    await browser.close();
    process.exit(1);
  }
}

testThemeConsistency();