cv-site/tests/mjs/24-course-inline-icons.test.mjs

#!/usr/bin/env bun
/**
 * Test: Course inline icon styling
 *
 * Verifies:
 * 1. Inline icons within course descriptions have proper sizing
 * 2. Icons have vertical alignment
 * 3. Icons have proper spacing
 * 4. Icon colors are preserved
 */

import { chromium } from 'playwright';

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

async function testCourseInlineIcons() {
  console.log('\n📚 Course 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: Find inline icons within course sections
    console.log('📱 Test 1: Inline icon styling');

    const iconStyles = await page.evaluate(() => {
      // Try to find inline icons in responsibilities lists first
      let icon = document.querySelector('.course-item .responsibilities li iconify-icon');
      let parent = null;
      let location = 'responsibilities';

      // If not found in responsibilities, try course-desc
      if (!icon) {
        icon = document.querySelector('.course-desc iconify-icon');
        parent = document.querySelector('.course-desc');
        location = 'course-desc';
      } else {
        parent = icon.closest('li');
      }

      if (!icon) return { error: 'No inline icon found in course section' };
      if (!parent) return { error: 'No parent element found' };

      const styles = window.getComputedStyle(icon);
      return {
        location,
        fontSize: styles.fontSize,
        verticalAlign: styles.verticalAlign,
        marginLeft: styles.marginLeft,
        marginRight: styles.marginRight,
        color: styles.color,
        // Get parent font size for comparison
        parentFontSize: window.getComputedStyle(parent).fontSize,
      };
    });

    if (iconStyles.error) {
      console.log(`   ⚠️  ${iconStyles.error}`);
      console.log('   (This is OK if there are no inline icons in course sections)');
      await browser.close();
      return;
    }

    console.log(`   Found icon in: ${iconStyles.location}`);
    console.log(`   Icon font-size: ${iconStyles.fontSize}`);
    console.log(`   Parent font-size: ${iconStyles.parentFontSize}`);
    console.log(`   Vertical align: ${iconStyles.verticalAlign}`);
    console.log(`   Margin left: ${iconStyles.marginLeft}`);
    console.log(`   Margin right: ${iconStyles.marginRight}`);

    // Verify font-size is 1.2em (approximately 1.2x parent size)
    const iconSize = parseFloat(iconStyles.fontSize);
    const parentSize = parseFloat(iconStyles.parentFontSize);
    const ratio = iconSize / parentSize;

    if (Math.abs(ratio - 1.2) < 0.1) {
      console.log('   ✅ Icon size is 1.2em (1.2x parent size)');
    } else {
      console.log(`   ⚠️  Icon size ratio is ${ratio.toFixed(2)}x (expected ~1.2x)`);
    }

    // Verify vertical alignment
    if (iconStyles.verticalAlign === 'middle') {
      console.log('   ✅ Vertical alignment is middle');
    } else {
      console.log(`   ⚠️  Vertical alignment is ${iconStyles.verticalAlign} (expected middle)`);
    }

    // Verify margins
    const marginLeft = parseFloat(iconStyles.marginLeft);
    const marginRight = parseFloat(iconStyles.marginRight);

    if (marginLeft > 0 && marginRight > 0) {
      console.log('   ✅ Icons have proper spacing (margins on both sides)');
    } else {
      console.log(`   ⚠️  Margins: left=${marginLeft}px, right=${marginRight}px`);
    }

    console.log('\n✅ Course inline icon test completed!\n');
    await browser.close();

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

testCourseInlineIcons();