cv-site/tests/mjs/25-inline-icons-comprehensive.test.mjs

#!/usr/bin/env bun
/**
 * Test: Comprehensive inline icon sizing across all sections
 *
 * Verifies:
 * 1. Inline icons in responsibilities are small (not 60px)
 * 2. Inline icons in course descriptions are small
 * 3. Inline icons in project descriptions are small
 * 4. Main section/company icons remain properly sized (60-80px)
 */

import { chromium } from 'playwright';

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

async function testInlineIcons() {
  console.log('\n🔍 Comprehensive Inline Icons 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 });

    // Test 1: Check inline icons in responsibilities
    console.log('📱 Test 1: Inline icons in responsibilities');

    const respIconSizes = await page.evaluate(() => {
      const results = [];

      // Find all iconify icons within responsibility divs
      const icons = document.querySelectorAll('.responsibilities li div iconify-icon');

      icons.forEach((icon, index) => {
        const styles = window.getComputedStyle(icon);
        const width = parseFloat(styles.width);
        const height = parseFloat(styles.height);

        results.push({
          index,
          width,
          height,
          isSmall: width < 30 && height < 30, // Should be ~16-20px
        });
      });

      return results;
    });

    if (respIconSizes.length === 0) {
      console.log('   ⚠️  No inline icons found in responsibilities');
    } else {
      console.log(`   Found ${respIconSizes.length} inline icons in responsibilities`);

      const allSmall = respIconSizes.every(icon => icon.isSmall);

      respIconSizes.forEach(icon => {
        const status = icon.isSmall ? '✅' : '❌';
        console.log(`   ${status} Icon ${icon.index}: ${icon.width.toFixed(1)}px × ${icon.height.toFixed(1)}px`);
      });

      if (!allSmall) {
        console.log('   ❌ Some inline icons in responsibilities are too large!');
        await browser.close();
        process.exit(1);
      }
    }

    // Test 2: Check inline icons in course sections
    console.log('\n📱 Test 2: Inline icons in courses');

    const courseIconSizes = await page.evaluate(() => {
      const results = [];

      // Find inline icons in course descriptions and responsibilities
      const icons = document.querySelectorAll('.course-item .responsibilities li iconify-icon, .course-desc iconify-icon');

      icons.forEach((icon, index) => {
        const styles = window.getComputedStyle(icon);
        const width = parseFloat(styles.width);
        const height = parseFloat(styles.height);

        results.push({
          index,
          width,
          height,
          isSmall: width < 30 && height < 30,
        });
      });

      return results;
    });

    if (courseIconSizes.length === 0) {
      console.log('   ⚠️  No inline icons found in courses');
    } else {
      console.log(`   Found ${courseIconSizes.length} inline icons in courses`);

      const allSmall = courseIconSizes.every(icon => icon.isSmall);

      courseIconSizes.forEach(icon => {
        const status = icon.isSmall ? '✅' : '❌';
        console.log(`   ${status} Icon ${icon.index}: ${icon.width.toFixed(1)}px × ${icon.height.toFixed(1)}px`);
      });

      if (!allSmall) {
        console.log('   ❌ Some inline icons in courses are too large!');
        await browser.close();
        process.exit(1);
      }
    }

    // Test 3: Check inline icons in project sections
    console.log('\n📱 Test 3: Inline icons in projects');

    const projectIconSizes = await page.evaluate(() => {
      const results = [];

      // Find inline icons in project descriptions
      const icons = document.querySelectorAll('.project-desc iconify-icon, .project-technologies iconify-icon');

      icons.forEach((icon, index) => {
        const styles = window.getComputedStyle(icon);
        const width = parseFloat(styles.width);
        const height = parseFloat(styles.height);

        results.push({
          index,
          width,
          height,
          isSmall: width < 30 && height < 30,
        });
      });

      return results;
    });

    if (projectIconSizes.length === 0) {
      console.log('   ⚠️  No inline icons found in projects');
    } else {
      console.log(`   Found ${projectIconSizes.length} inline icons in projects`);

      const allSmall = projectIconSizes.every(icon => icon.isSmall);

      projectIconSizes.forEach(icon => {
        const status = icon.isSmall ? '✅' : '❌';
        console.log(`   ${status} Icon ${icon.index}: ${icon.width.toFixed(1)}px × ${icon.height.toFixed(1)}px`);
      });

      if (!allSmall) {
        console.log('   ❌ Some inline icons in projects are too large!');
        await browser.close();
        process.exit(1);
      }
    }

    // Test 4: Verify main icons are still properly sized
    console.log('\n📱 Test 4: Main section/company icons (should remain large)');

    const mainIconSizes = await page.evaluate(() => {
      const results = [];

      // Check main company/course/project icons
      const companyIcons = document.querySelectorAll('.company-logo img, .course-icon img, .project-icon img');

      companyIcons.forEach((icon, index) => {
        const styles = window.getComputedStyle(icon);
        const width = parseFloat(styles.width);
        const height = parseFloat(styles.height);

        results.push({
          type: icon.closest('.company-logo') ? 'company' :
                icon.closest('.course-icon') ? 'course' : 'project',
          width,
          height,
          isProperSize: width >= 40 && height >= 40, // Should be 80px desktop, 40px mobile
        });
      });

      return results.slice(0, 3); // Just check first 3
    });

    if (mainIconSizes.length > 0) {
      console.log(`   Found ${mainIconSizes.length} main icons`);

      mainIconSizes.forEach((icon, index) => {
        const status = icon.isProperSize ? '✅' : '⚠️';
        console.log(`   ${status} ${icon.type} icon: ${icon.width.toFixed(1)}px × ${icon.height.toFixed(1)}px`);
      });
    }

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

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

testInlineIcons();