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