cv-site/tests/mjs/16-awards-visual-test.mjs

#!/usr/bin/env bun
/**
 * AWARDS VISUAL TEST
 * Check awards section layout and icons
 */

import { chromium } from "playwright";

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

async function testAwards() {
  console.log("🧪 AWARDS VISUAL 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);

  // Scroll to awards section
  await page.evaluate(() => {
    const awards = document.querySelector('#awards');
    if (awards) awards.scrollIntoView({ behavior: 'smooth', block: 'start' });
  });
  await page.waitForTimeout(1000);

  console.log("\n1️⃣  Checking Awards Section:");
  const awardsInfo = await page.evaluate(() => {
    const awardsSection = document.querySelector('#awards');
    const awardItems = document.querySelectorAll('.award-item');
    const awardLogos = document.querySelectorAll('.award-logo');

    const results = {
      sectionExists: !!awardsSection,
      itemCount: awardItems.length,
      logoCount: awardLogos.length,
      items: []
    };

    awardItems.forEach((item, i) => {
      const logo = item.querySelector('.award-logo');
      const logoImg = logo?.querySelector('img');
      const content = item.querySelector('.award-content');

      const logoStyle = logo ? window.getComputedStyle(logo) : null;
      const imgStyle = logoImg ? window.getComputedStyle(logoImg) : null;
      const itemStyle = window.getComputedStyle(item);

      results.items.push({
        index: i,
        hasLogo: !!logo,
        hasImg: !!logoImg,
        imgSrc: logoImg?.src || 'none',
        logoDisplay: logoStyle?.display,
        logoWidth: logoStyle?.width,
        logoHeight: logoStyle?.height,
        imgWidth: imgStyle?.width,
        imgHeight: imgStyle?.height,
        imgObjectFit: imgStyle?.objectFit,
        itemDisplay: itemStyle?.display,
        itemGap: itemStyle?.gap,
        contentExists: !!content
      });
    });

    return results;
  });

  console.log(`   Section exists: ${awardsInfo.sectionExists}`);
  console.log(`   Award items: ${awardsInfo.itemCount}`);
  console.log(`   Award logos: ${awardsInfo.logoCount}`);

  awardsInfo.items.forEach(item => {
    console.log(`\n   Award #${item.index + 1}:`);
    console.log(`     Has logo: ${item.hasLogo}`);
    console.log(`     Has img: ${item.hasImg}`);
    console.log(`     Img src: ${item.imgSrc}`);
    console.log(`     Logo display: ${item.logoDisplay}`);
    console.log(`     Logo size: ${item.logoWidth} × ${item.logoHeight}`);
    console.log(`     Img size: ${item.imgWidth} × ${item.imgHeight}`);
    console.log(`     Img object-fit: ${item.imgObjectFit}`);
    console.log(`     Item display: ${item.itemDisplay}`);
    console.log(`     Item gap: ${item.itemGap}`);
    console.log(`     Has content: ${item.contentExists}`);
  });

  console.log("\n2️⃣  Testing icon toggle:");

  // Turn icons OFF
  await page.click('label:has(#iconToggle)');
  await page.waitForTimeout(500);

  const afterOff = await page.evaluate(() => {
    const awardLogos = document.querySelectorAll('.award-logo');
    const results = [];

    awardLogos.forEach((logo, i) => {
      const style = window.getComputedStyle(logo);
      results.push({
        index: i,
        opacity: style.opacity,
        width: style.width,
        height: style.height
      });
    });

    return results;
  });

  console.log("   Icons OFF:");
  afterOff.forEach(logo => {
    console.log(`     Logo #${logo.index + 1}: opacity=${logo.opacity}, size=${logo.width}×${logo.height}`);
  });

  // Turn icons ON
  await page.click('label:has(#iconToggle)');
  await page.waitForTimeout(500);

  const afterOn = await page.evaluate(() => {
    const awardLogos = document.querySelectorAll('.award-logo');
    const results = [];

    awardLogos.forEach((logo, i) => {
      const style = window.getComputedStyle(logo);
      results.push({
        index: i,
        opacity: style.opacity,
        width: style.width,
        height: style.height
      });
    });

    return results;
  });

  console.log("\n   Icons ON:");
  afterOn.forEach(logo => {
    console.log(`     Logo #${logo.index + 1}: opacity=${logo.opacity}, size=${logo.width}×${logo.height}`);
  });

  await page.screenshot({ path: 'tests/screenshots/awards-visual-test.png', fullPage: false });
  console.log("\n📸 Screenshot saved to tests/screenshots/awards-visual-test.png");

  console.log("\n" + "=".repeat(70));
  console.log("\nBrowser will stay open for 60 seconds for visual inspection...");
  await page.waitForTimeout(60000);
  await browser.close();
}

await testAwards();