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.
89 lines
2.6 KiB
JavaScript
Executable File
89 lines
2.6 KiB
JavaScript
Executable File
#!/usr/bin/env bun
|
||
/**
|
||
* Test: Course list icons visibility and sizing
|
||
*
|
||
* Verifies:
|
||
* 1. Course list icons (in responsibilities) are visible and properly sized (60px)
|
||
* 2. They are not shrunk to tiny sizes
|
||
*/
|
||
|
||
import { chromium } from 'playwright';
|
||
|
||
const BASE_URL = 'http://localhost:1999';
|
||
|
||
async function testCourseListIcons() {
|
||
console.log('\n📚 Course List Icons Visibility 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 });
|
||
|
||
console.log('📱 Test: Course list icons (should be 60px and visible)');
|
||
|
||
const iconInfo = await page.evaluate(() => {
|
||
const results = [];
|
||
|
||
// Find all iconify icons in course responsibilities that have default-company-icon class
|
||
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 display = styles.display;
|
||
const opacity = styles.opacity;
|
||
|
||
results.push({
|
||
index,
|
||
width,
|
||
height,
|
||
display,
|
||
opacity,
|
||
isVisible: width >= 50 && height >= 50 && opacity > 0 && display !== 'none',
|
||
});
|
||
});
|
||
|
||
return results;
|
||
});
|
||
|
||
if (iconInfo.length === 0) {
|
||
console.log(' ⚠️ No course list icons found with default-company-icon class');
|
||
console.log(' (This might be OK if course data structure is different)');
|
||
await browser.close();
|
||
return;
|
||
}
|
||
|
||
console.log(` Found ${iconInfo.length} course list icons`);
|
||
|
||
let allVisible = true;
|
||
|
||
iconInfo.forEach(icon => {
|
||
const status = icon.isVisible ? '✅' : '❌';
|
||
console.log(` ${status} Icon ${icon.index}: ${icon.width.toFixed(1)}px × ${icon.height.toFixed(1)}px (opacity: ${icon.opacity}, display: ${icon.display})`);
|
||
|
||
if (!icon.isVisible) {
|
||
allVisible = false;
|
||
}
|
||
});
|
||
|
||
if (!allVisible) {
|
||
console.log('\n ❌ Some course list icons are not visible!');
|
||
await browser.close();
|
||
process.exit(1);
|
||
}
|
||
|
||
console.log('\n✅ All course list icons are visible and properly sized!\n');
|
||
await browser.close();
|
||
|
||
} catch (error) {
|
||
console.error('\n❌ Test failed:', error.message);
|
||
await browser.close();
|
||
process.exit(1);
|
||
}
|
||
}
|
||
|
||
testCourseListIcons();
|