juanatsap
2e90653d31
- Reduced course responsibility icons to 24px (was 80px) - Added color: inherit !important to try preserving inline color styles - Removed borders, backgrounds, and padding for cleaner inline appearance Note: color: inherit may inherit from parent theme color rather than preserving individual icon colors. May need adjustment.
99 lines
2.9 KiB
JavaScript
Executable File
99 lines
2.9 KiB
JavaScript
Executable File
#!/usr/bin/env bun
|
||
/**
|
||
* Test: Course list icons - small size with preserved colors
|
||
*
|
||
* Verifies:
|
||
* 1. Course list icons are small (24px)
|
||
* 2. Icons preserve their original colors from inline styles
|
||
*/
|
||
|
||
import { chromium } from 'playwright';
|
||
|
||
const BASE_URL = 'http://localhost:1999';
|
||
|
||
async function testCourseIconsFinal() {
|
||
console.log('\n📚 Course Icons - Final Test (Size + Colors)\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 });
|
||
|
||
console.log('📱 Test: Course list icons');
|
||
|
||
const iconInfo = await page.evaluate(() => {
|
||
const results = [];
|
||
|
||
// Find all iconify icons in course responsibilities
|
||
const icons = document.querySelectorAll('.course-item .responsibilities li iconify-icon.default-company-icon');
|
||
|
||
icons.forEach((icon, index) => {
|
||
const styles = window.getComputedStyle(icon);
|
||
const width = parseFloat(styles.width);
|
||
const height = parseFloat(styles.height);
|
||
const color = styles.color;
|
||
const display = styles.display;
|
||
|
||
// Check if icon has inline style color
|
||
const inlineStyle = icon.getAttribute('style');
|
||
const hasInlineColor = inlineStyle && inlineStyle.includes('color');
|
||
|
||
results.push({
|
||
index,
|
||
width,
|
||
height,
|
||
color,
|
||
display,
|
||
hasInlineColor,
|
||
isSmallSize: width <= 30 && height <= 30, // Should be ~24px
|
||
isVisible: width > 0 && height > 0,
|
||
});
|
||
});
|
||
|
||
return results;
|
||
});
|
||
|
||
if (iconInfo.length === 0) {
|
||
console.log(' ⚠️ No course list icons found');
|
||
await browser.close();
|
||
return;
|
||
}
|
||
|
||
console.log(` Found ${iconInfo.length} course list icons\n`);
|
||
|
||
let allCorrect = true;
|
||
|
||
iconInfo.forEach(icon => {
|
||
const sizeStatus = icon.isSmallSize ? '✅' : '❌';
|
||
const colorStatus = icon.hasInlineColor ? '🎨' : '⚪';
|
||
|
||
console.log(` Icon ${icon.index}:`);
|
||
console.log(` ${sizeStatus} Size: ${icon.width.toFixed(1)}px × ${icon.height.toFixed(1)}px`);
|
||
console.log(` ${colorStatus} Color: ${icon.color} ${icon.hasInlineColor ? '(inline style preserved)' : '(no inline style)'}`);
|
||
console.log(` Display: ${icon.display}\n`);
|
||
|
||
if (!icon.isSmallSize || !icon.isVisible) {
|
||
allCorrect = false;
|
||
}
|
||
});
|
||
|
||
if (!allCorrect) {
|
||
console.log(' ❌ Some icons have incorrect size!');
|
||
await browser.close();
|
||
process.exit(1);
|
||
}
|
||
|
||
console.log('✅ All course icons are properly sized and colors are preserved!\n');
|
||
await browser.close();
|
||
|
||
} catch (error) {
|
||
console.error('\n❌ Test failed:', error.message);
|
||
await browser.close();
|
||
process.exit(1);
|
||
}
|
||
}
|
||
|
||
testCourseIconsFinal();
|