cv-site/tests/mjs/18-theme-and-mobile-test.mjs

#!/usr/bin/env bun
/**
 * THEME SWITCHER & MOBILE CSS TEST
 * Test theme switching and mobile responsive CSS
 */

import { chromium } from "playwright";

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

async function testThemeAndMobile() {
  console.log("🧪 THEME & MOBILE TEST\n");
  console.log("=".repeat(70));

  const browser = await chromium.launch({ headless: false });

  // Test 1: Desktop theme switcher
  console.log("\n1️⃣  Testing Theme Switcher (Desktop):\n");
  const desktopPage = await browser.newPage({ viewport: { width: 1400, height: 1080 } });
  await desktopPage.goto(URL);
  await desktopPage.waitForTimeout(2000);

  const initialTheme = await desktopPage.evaluate(() => {
    return {
      htmlAttr: document.documentElement.getAttribute('data-color-theme'),
      bodyClass: document.body.className,
      localStorage: localStorage.getItem('color-theme-mode')
    };
  });

  console.log(`   Initial theme:`);
  console.log(`     HTML attr: ${initialTheme.htmlAttr}`);
  console.log(`     Body class: ${initialTheme.bodyClass}`);
  console.log(`     LocalStorage: ${initialTheme.localStorage}`);

  // Try to click theme toggle
  console.log(`\n   Clicking theme toggle...`);
  try {
    await desktopPage.click('#themeToggle', { timeout: 5000 });
    await desktopPage.waitForTimeout(500);

    const afterToggle = await desktopPage.evaluate(() => {
      return {
        htmlAttr: document.documentElement.getAttribute('data-color-theme'),
        toggleChecked: document.querySelector('#themeToggle')?.checked,
        localStorage: localStorage.getItem('color-theme-mode')
      };
    });

    console.log(`   After toggle:`);
    console.log(`     HTML attr: ${afterToggle.htmlAttr}`);
    console.log(`     Toggle checked: ${afterToggle.toggleChecked}`);
    console.log(`     LocalStorage: ${afterToggle.localStorage}`);

    if (afterToggle.htmlAttr !== initialTheme.htmlAttr) {
      console.log(`\n   ✅ Theme switcher working!`);
    } else {
      console.log(`\n   ❌ Theme switcher NOT working!`);
    }
  } catch (error) {
    console.log(`   ❌ Theme toggle button not found or not clickable!`);
    console.log(`   Error: ${error.message}`);
  }

  await desktopPage.close();

  // Test 2: Mobile CSS for complete theme
  console.log("\n2️⃣  Testing Mobile CSS (Complete Theme):\n");
  const mobilePage = await browser.newPage({ viewport: { width: 375, height: 667 } });
  await mobilePage.goto(URL);
  await mobilePage.waitForTimeout(2000);

  // Switch to complete/long CV
  console.log(`   Switching to complete CV...`);
  try {
    // Open hamburger menu on mobile
    await mobilePage.click('.hamburger-button', { timeout: 5000 });
    await mobilePage.waitForTimeout(500);

    // Click length toggle in menu
    await mobilePage.click('#lengthToggleMenu', { timeout: 5000 });
    await mobilePage.waitForTimeout(500);

    const mobileStyles = await mobilePage.evaluate(() => {
      const paper = document.querySelector('.cv-paper');
      const actionBar = document.querySelector('.action-bar');
      const hamburger = document.querySelector('.hamburger-button');
      const viewControls = document.querySelector('.view-controls-center');

      const paperStyle = paper ? window.getComputedStyle(paper) : null;
      const actionBarStyle = actionBar ? window.getComputedStyle(actionBar) : null;
      const hamburgerStyle = hamburger ? window.getComputedStyle(hamburger) : null;
      const viewControlsStyle = viewControls ? window.getComputedStyle(viewControls) : null;

      return {
        paperClass: paper?.className,
        paperMaxWidth: paperStyle?.maxWidth,
        paperPadding: paperStyle?.padding,
        actionBarDisplay: actionBarStyle?.display,
        hamburgerDisplay: hamburgerStyle?.display,
        viewControlsDisplay: viewControlsStyle?.display
      };
    });

    console.log(`   Mobile styles:`);
    console.log(`     Paper class: ${mobileStyles.paperClass}`);
    console.log(`     Paper max-width: ${mobileStyles.paperMaxWidth}`);
    console.log(`     Paper padding: ${mobileStyles.paperPadding}`);
    console.log(`     Action bar display: ${mobileStyles.actionBarDisplay}`);
    console.log(`     Hamburger display: ${mobileStyles.hamburgerDisplay}`);
    console.log(`     View controls display: ${mobileStyles.viewControlsDisplay}`);

    if (mobileStyles.paperMaxWidth === 'none' || mobileStyles.paperMaxWidth === '100%') {
      console.log(`\n   ⚠️  Mobile CSS might not be applied properly`);
    } else {
      console.log(`\n   ✅ Mobile CSS appears to be applied`);
    }

  } catch (error) {
    console.log(`   ❌ Error testing mobile: ${error.message}`);
  }

  await mobilePage.screenshot({ path: 'tests/screenshots/mobile-complete-theme.png' });
  console.log(`\n📸 Mobile screenshot: tests/screenshots/mobile-complete-theme.png`);

  console.log("\n" + "=".repeat(70));
  console.log("\nBrowser will stay open for 30 seconds...");
  await mobilePage.waitForTimeout(30000);
  await browser.close();
}

await testThemeAndMobile();