cv-site/tests/mjs/23-dark-theme-borders.test.mjs

#!/usr/bin/env bun
/**
 * Test: Dark theme icon borders and LIV Golf logo inversion
 *
 * Verifies:
 * 1. Icon borders are less visible (darker) in dark theme
 * 2. Item separators are more subtle in dark theme
 * 3. LIV Golf logo is inverted in dark theme for visibility
 */

import { chromium } from 'playwright';

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

async function testDarkThemeBorders() {
  console.log('\n🎨 Dark Theme Borders & Logo 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 click theme switcher
    const clickTheme = async () => {
      await page.click('.color-theme-switcher');
      await page.waitForTimeout(300);
    };

    // Test 1: Light theme - visible borders
    console.log('📱 Test 1: Light theme borders');
    await clickTheme(); // auto -> light

    const lightBorders = await page.evaluate(() => {
      // Find an icon with border
      const icon = document.querySelector('.responsibilities li img') ||
                   document.querySelector('.course-icon img') ||
                   document.querySelector('.project-icon img');

      if (!icon) return { error: 'No icon found' };

      const styles = window.getComputedStyle(icon);
      return {
        borderColor: styles.borderColor,
        borderWidth: styles.borderWidth,
      };
    });

    console.log(`   Border color: ${lightBorders.borderColor}`);

    // Check it's a light color (rgb values > 200)
    const lightRgb = lightBorders.borderColor.match(/\d+/g);
    if (lightRgb && lightRgb.every(v => parseInt(v) > 200)) {
      console.log('   ✅ Light visible borders in light theme');
    } else {
      console.log('   ⚠️  Border color seems dark in light theme');
    }

    // Test 2: Dark theme - darker borders
    console.log('\n📱 Test 2: Dark theme borders');
    await clickTheme(); // light -> dark

    const darkBorders = await page.evaluate(() => {
      const icon = document.querySelector('.responsibilities li img') ||
                   document.querySelector('.course-icon img') ||
                   document.querySelector('.project-icon img');

      if (!icon) return { error: 'No icon found' };

      const styles = window.getComputedStyle(icon);
      return {
        borderColor: styles.borderColor,
      };
    });

    console.log(`   Border color: ${darkBorders.borderColor}`);

    // Check for expected #5e5e5e = rgb(94, 94, 94)
    const isExpectedGray = darkBorders.borderColor.includes('rgb(94, 94, 94)') ||
                           darkBorders.borderColor.includes('#5e5e5e');

    if (isExpectedGray) {
      console.log('   ✅ Borders are medium gray (#5e5e5e) in dark theme');
    } else {
      console.log('   ❌ Border color unexpected!');
      console.log(`   Expected: rgb(94, 94, 94) or #5e5e5e, Got: ${darkBorders.borderColor}`);
      await browser.close();
      process.exit(1);
    }

    // Test 3: LIV Golf logo inversion
    console.log('\n📱 Test 3: LIV Golf logo filter');

    const darkLogoFilter = await page.evaluate(() => {
      const livgolfImg = document.querySelector('img[src*="livgolf"]');
      if (!livgolfImg) return { exists: false };

      const styles = window.getComputedStyle(livgolfImg);
      return {
        exists: true,
        filter: styles.filter,
      };
    });

    if (!darkLogoFilter.exists) {
      console.log('   ⚠️  LIV Golf logo not found (may not be in CV data)');
    } else {
      console.log(`   Dark theme filter: ${darkLogoFilter.filter}`);
      if (darkLogoFilter.filter.includes('invert')) {
        console.log('   ✅ LIV Golf logo inverted in dark theme');
      } else {
        console.log('   ❌ LIV Golf logo NOT inverted in dark theme!');
        await browser.close();
        process.exit(1);
      }

      // Test 4: Light theme - no inversion
      console.log('\n📱 Test 4: LIV Golf logo in light theme');
      await clickTheme(); // dark -> auto
      await clickTheme(); // auto -> light

      const lightLogoFilter = await page.evaluate(() => {
        const livgolfImg = document.querySelector('img[src*="livgolf"]');
        if (!livgolfImg) return { exists: false };

        const styles = window.getComputedStyle(livgolfImg);
        return {
          exists: true,
          filter: styles.filter,
        };
      });

      console.log(`   Light theme filter: ${lightLogoFilter.filter}`);
      if (lightLogoFilter.filter === 'none' || !lightLogoFilter.filter.includes('invert')) {
        console.log('   ✅ LIV Golf logo normal (not inverted) in light theme');
      } else {
        console.log('   ❌ LIV Golf logo incorrectly inverted in light theme!');
        await browser.close();
        process.exit(1);
      }
    }

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

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

testDarkThemeBorders();