99 lines
2.9 KiB
JavaScript
99 lines
2.9 KiB
JavaScript
|
#!/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();
|