cv-site/tests/mjs/15-icon-toggle-debug.test.mjs

#!/usr/bin/env bun
/**
 * ICON TOGGLE DEBUG TEST
 * =======================
 * Specifically tests icon toggle functionality
 * to verify icons hide when toggle is OFF
 */

import { chromium } from "playwright";

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

async function testIconToggle() {
  console.log("🧪 ICON TOGGLE DEBUG TEST\n");
  console.log("=".repeat(70));

  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("\n1️⃣  Initial State:");
  const initial = await page.evaluate(() => {
    const paper = document.querySelector('.cv-paper');
    const logo = document.querySelector('.company-logo');
    const logoStyle = logo ? window.getComputedStyle(logo) : null;

    return {
      paperClasses: paper?.className,
      hasShowIcons: paper?.classList.contains('show-icons'),
      logoExists: !!logo,
      logoDisplay: logoStyle?.display,
      logoOpacity: logoStyle?.opacity,
      logoWidth: logoStyle?.width,
      localStorage: localStorage.getItem('cv-icons')
    };
  });

  console.log(`   Paper classes: ${initial.paperClasses}`);
  console.log(`   Has show-icons class: ${initial.hasShowIcons}`);
  console.log(`   Logo exists: ${initial.logoExists}`);
  console.log(`   Logo display: ${initial.logoDisplay}`);
  console.log(`   Logo opacity: ${initial.logoOpacity}`);
  console.log(`   Logo width: ${initial.logoWidth}`);
  console.log(`   LocalStorage: ${initial.localStorage}`);

  console.log("\n2️⃣  Clicking icon toggle to turn icons OFF...");

  // Click the LABEL (not the input) to trigger the toggle
  await page.click('label:has(#iconToggle)');
  await page.waitForTimeout(500);

  const afterOff = await page.evaluate(() => {
    const paper = document.querySelector('.cv-paper');
    const toggle = document.querySelector('#iconToggle');

    // Check ALL icon types
    const companyLogo = document.querySelector('.company-logo');
    const awardLogo = document.querySelector('.award-logo');
    const sectionIcon = document.querySelector('.section-icon');
    const projectIcon = document.querySelector('.project-icon');
    const defaultProjectIcon = document.querySelector('.default-project-icon');
    const courseIcon = document.querySelector('.course-icon');
    const defaultCourseIcon = document.querySelector('.default-course-icon');

    const logoStyle = companyLogo ? window.getComputedStyle(companyLogo) : null;
    const awardStyle = awardLogo ? window.getComputedStyle(awardLogo) : null;
    const sectionStyle = sectionIcon ? window.getComputedStyle(sectionIcon) : null;
    const projectStyle = projectIcon ? window.getComputedStyle(projectIcon) : null;
    const defaultProjectStyle = defaultProjectIcon ? window.getComputedStyle(defaultProjectIcon) : null;
    const courseStyle = courseIcon ? window.getComputedStyle(courseIcon) : null;
    const defaultCourseStyle = defaultCourseIcon ? window.getComputedStyle(defaultCourseIcon) : null;

    return {
      paperClasses: paper?.className,
      hasShowIcons: paper?.classList.contains('show-icons'),
      toggleChecked: toggle?.checked,

      // Company logo
      logoOpacity: logoStyle?.opacity,
      logoWidth: logoStyle?.width,

      // Award logo
      awardOpacity: awardStyle?.opacity,
      awardWidth: awardStyle?.width,

      // Section icons
      sectionOpacity: sectionStyle?.opacity,
      sectionWidth: sectionStyle?.width,

      // Project icons
      projectOpacity: projectStyle?.opacity,
      projectWidth: projectStyle?.width,

      // Default project icons
      defaultProjectOpacity: defaultProjectStyle?.opacity,
      defaultProjectWidth: defaultProjectStyle?.width,

      // Course icons
      courseOpacity: courseStyle?.opacity,
      courseWidth: courseStyle?.width,

      // Default course icons
      defaultCourseOpacity: defaultCourseStyle?.opacity,
      defaultCourseWidth: defaultCourseStyle?.width,

      localStorage: localStorage.getItem('cv-icons')
    };
  });

  console.log(`   Paper classes: ${afterOff.paperClasses}`);
  console.log(`   Has show-icons class: ${afterOff.hasShowIcons}`);
  console.log(`   Toggle checked: ${afterOff.toggleChecked}`);
  console.log(`\n   COMPANY LOGO: opacity=${afterOff.logoOpacity}, width=${afterOff.logoWidth}`);
  console.log(`   AWARD LOGO: opacity=${afterOff.awardOpacity}, width=${afterOff.awardWidth}`);
  console.log(`   SECTION ICONS: opacity=${afterOff.sectionOpacity}, width=${afterOff.sectionWidth}`);
  console.log(`   PROJECT ICONS: opacity=${afterOff.projectOpacity}, width=${afterOff.projectWidth}`);
  console.log(`   DEFAULT PROJECT ICONS: opacity=${afterOff.defaultProjectOpacity}, width=${afterOff.defaultProjectWidth}`);
  console.log(`   COURSE ICONS: opacity=${afterOff.courseOpacity}, width=${afterOff.courseWidth}`);
  console.log(`   DEFAULT COURSE ICONS: opacity=${afterOff.defaultCourseOpacity}, width=${afterOff.defaultCourseWidth}`);
  console.log(`\n   LocalStorage: ${afterOff.localStorage}`);

  // Helper to check if icon is hidden (opacity 0 or undefined if not present)
  const isHidden = (opacity) => opacity === '0' || opacity === undefined;
  const isVisible = (opacity) => opacity === '1' || opacity === undefined;

  const allIconsHidden = !afterOff.hasShowIcons &&
                         isHidden(afterOff.logoOpacity) &&
                         isHidden(afterOff.awardOpacity) &&
                         isHidden(afterOff.sectionOpacity) &&
                         isHidden(afterOff.projectOpacity) &&
                         isHidden(afterOff.defaultProjectOpacity) &&
                         isHidden(afterOff.courseOpacity) &&
                         isHidden(afterOff.defaultCourseOpacity);

  console.log(`\n   ${allIconsHidden ? '✅ ALL icons correctly hidden' : '❌ Some icons still visible!'}`);

  console.log("\n3️⃣  Clicking toggle again to turn icons ON...");
  await page.click('label:has(#iconToggle)');
  await page.waitForTimeout(500);

  const afterOn = await page.evaluate(() => {
    const paper = document.querySelector('.cv-paper');

    const companyLogo = document.querySelector('.company-logo');
    const awardLogo = document.querySelector('.award-logo');
    const sectionIcon = document.querySelector('.section-icon');
    const projectIcon = document.querySelector('.project-icon');
    const defaultProjectIcon = document.querySelector('.default-project-icon');
    const courseIcon = document.querySelector('.course-icon');
    const defaultCourseIcon = document.querySelector('.default-course-icon');

    const logoStyle = companyLogo ? window.getComputedStyle(companyLogo) : null;
    const awardStyle = awardLogo ? window.getComputedStyle(awardLogo) : null;
    const sectionStyle = sectionIcon ? window.getComputedStyle(sectionIcon) : null;
    const projectStyle = projectIcon ? window.getComputedStyle(projectIcon) : null;
    const defaultProjectStyle = defaultProjectIcon ? window.getComputedStyle(defaultProjectIcon) : null;
    const courseStyle = courseIcon ? window.getComputedStyle(courseIcon) : null;
    const defaultCourseStyle = defaultCourseIcon ? window.getComputedStyle(defaultCourseIcon) : null;

    return {
      paperClasses: paper?.className,
      hasShowIcons: paper?.classList.contains('show-icons'),

      logoOpacity: logoStyle?.opacity,
      awardOpacity: awardStyle?.opacity,
      sectionOpacity: sectionStyle?.opacity,
      projectOpacity: projectStyle?.opacity,
      defaultProjectOpacity: defaultProjectStyle?.opacity,
      courseOpacity: courseStyle?.opacity,
      defaultCourseOpacity: defaultCourseStyle?.opacity
    };
  });

  console.log(`   Paper classes: ${afterOn.paperClasses}`);
  console.log(`   Has show-icons class: ${afterOn.hasShowIcons}`);
  console.log(`\n   COMPANY LOGO: ${afterOn.logoOpacity}`);
  console.log(`   AWARD LOGO: ${afterOn.awardOpacity}`);
  console.log(`   SECTION ICONS: ${afterOn.sectionOpacity}`);
  console.log(`   PROJECT ICONS: ${afterOn.projectOpacity}`);
  console.log(`   DEFAULT PROJECT ICONS: ${afterOn.defaultProjectOpacity}`);
  console.log(`   COURSE ICONS: ${afterOn.courseOpacity}`);
  console.log(`   DEFAULT COURSE ICONS: ${afterOn.defaultCourseOpacity}`);

  const allIconsVisible = afterOn.hasShowIcons &&
                          isVisible(afterOn.logoOpacity) &&
                          isVisible(afterOn.awardOpacity) &&
                          isVisible(afterOn.sectionOpacity) &&
                          isVisible(afterOn.projectOpacity) &&
                          isVisible(afterOn.defaultProjectOpacity) &&
                          isVisible(afterOn.courseOpacity) &&
                          isVisible(afterOn.defaultCourseOpacity);

  console.log(`\n   ${allIconsVisible ? '✅ ALL icons correctly visible' : '❌ Some icons not showing!'}`);

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

  if (allIconsHidden && allIconsVisible) {
    console.log("\n✅ ICON TOGGLE WORKS CORRECTLY FOR ALL ICON TYPES!");
  } else {
    console.log("\n❌ ICON TOGGLE HAS ISSUES!");
    console.log("Debug: Check if CSS rules cover all icon types");
  }

  await page.screenshot({ path: 'tests/screenshots/icon-toggle-debug.png' });
  console.log("\n📸 Screenshot saved to tests/screenshots/icon-toggle-debug.png");

  console.log("\nBrowser will stay open for 30 seconds for inspection...");
  await page.waitForTimeout(30000);
  await browser.close();
}

await testIconToggle();