215 lines
9.3 KiB
JavaScript
215 lines
9.3 KiB
JavaScript
|
#!/usr/bin/env bun
|
||
|
|
/**
|
||
|
|
* ICON TOGGLE DEBUG TEST
|
||
|
|
* =======================
|
||
|
|
* Specifically tests icon toggle functionality
|
||
|
|
* to verify icons hide when toggle is OFF
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { chromium } from "playwright";
|
||
|
|
|
||
|
|
const URL = "http://localhost:1999";
|
||
|
|
|
||
|
|
async function testIconToggle() {
|
||
|
|
console.log("🧪 ICON TOGGLE DEBUG TEST\n");
|
||
|
|
console.log("=".repeat(70));
|
||
|
|
|
||
|
|
const browser = await chromium.launch({ headless: false });
|
||
|
|
const page = await browser.newPage({ viewport: { width: 1400, height: 1080 } });
|
||
|
|
|
||
|
|
await page.goto(URL);
|
||
|
|
await page.waitForTimeout(2000);
|
||
|
|
|
||
|
|
console.log("\n1️⃣ Initial State:");
|
||
|
|
const initial = await page.evaluate(() => {
|
||
|
|
const paper = document.querySelector('.cv-paper');
|
||
|
|
const logo = document.querySelector('.company-logo');
|
||
|
|
const logoStyle = logo ? window.getComputedStyle(logo) : null;
|
||
|
|
|
||
|
|
return {
|
||
|
|
paperClasses: paper?.className,
|
||
|
|
hasShowIcons: paper?.classList.contains('show-icons'),
|
||
|
|
logoExists: !!logo,
|
||
|
|
logoDisplay: logoStyle?.display,
|
||
|
|
logoOpacity: logoStyle?.opacity,
|
||
|
|
logoWidth: logoStyle?.width,
|
||
|
|
localStorage: localStorage.getItem('cv-icons')
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log(` Paper classes: ${initial.paperClasses}`);
|
||
|
|
console.log(` Has show-icons class: ${initial.hasShowIcons}`);
|
||
|
|
console.log(` Logo exists: ${initial.logoExists}`);
|
||
|
|
console.log(` Logo display: ${initial.logoDisplay}`);
|
||
|
|
console.log(` Logo opacity: ${initial.logoOpacity}`);
|
||
|
|
console.log(` Logo width: ${initial.logoWidth}`);
|
||
|
|
console.log(` LocalStorage: ${initial.localStorage}`);
|
||
|
|
|
||
|
|
console.log("\n2️⃣ Clicking icon toggle to turn icons OFF...");
|
||
|
|
|
||
|
|
// Click the LABEL (not the input) to trigger the toggle
|
||
|
|
await page.click('label:has(#iconToggle)');
|
||
|
|
await page.waitForTimeout(500);
|
||
|
|
|
||
|
|
const afterOff = await page.evaluate(() => {
|
||
|
|
const paper = document.querySelector('.cv-paper');
|
||
|
|
const toggle = document.querySelector('#iconToggle');
|
||
|
|
|
||
|
|
// Check ALL icon types
|
||
|
|
const companyLogo = document.querySelector('.company-logo');
|
||
|
|
const awardLogo = document.querySelector('.award-logo');
|
||
|
|
const sectionIcon = document.querySelector('.section-icon');
|
||
|
|
const projectIcon = document.querySelector('.project-icon');
|
||
|
|
const defaultProjectIcon = document.querySelector('.default-project-icon');
|
||
|
|
const courseIcon = document.querySelector('.course-icon');
|
||
|
|
const defaultCourseIcon = document.querySelector('.default-course-icon');
|
||
|
|
|
||
|
|
const logoStyle = companyLogo ? window.getComputedStyle(companyLogo) : null;
|
||
|
|
const awardStyle = awardLogo ? window.getComputedStyle(awardLogo) : null;
|
||
|
|
const sectionStyle = sectionIcon ? window.getComputedStyle(sectionIcon) : null;
|
||
|
|
const projectStyle = projectIcon ? window.getComputedStyle(projectIcon) : null;
|
||
|
|
const defaultProjectStyle = defaultProjectIcon ? window.getComputedStyle(defaultProjectIcon) : null;
|
||
|
|
const courseStyle = courseIcon ? window.getComputedStyle(courseIcon) : null;
|
||
|
|
const defaultCourseStyle = defaultCourseIcon ? window.getComputedStyle(defaultCourseIcon) : null;
|
||
|
|
|
||
|
|
return {
|
||
|
|
paperClasses: paper?.className,
|
||
|
|
hasShowIcons: paper?.classList.contains('show-icons'),
|
||
|
|
toggleChecked: toggle?.checked,
|
||
|
|
|
||
|
|
// Company logo
|
||
|
|
logoOpacity: logoStyle?.opacity,
|
||
|
|
logoWidth: logoStyle?.width,
|
||
|
|
|
||
|
|
// Award logo
|
||
|
|
awardOpacity: awardStyle?.opacity,
|
||
|
|
awardWidth: awardStyle?.width,
|
||
|
|
|
||
|
|
// Section icons
|
||
|
|
sectionOpacity: sectionStyle?.opacity,
|
||
|
|
sectionWidth: sectionStyle?.width,
|
||
|
|
|
||
|
|
// Project icons
|
||
|
|
projectOpacity: projectStyle?.opacity,
|
||
|
|
projectWidth: projectStyle?.width,
|
||
|
|
|
||
|
|
// Default project icons
|
||
|
|
defaultProjectOpacity: defaultProjectStyle?.opacity,
|
||
|
|
defaultProjectWidth: defaultProjectStyle?.width,
|
||
|
|
|
||
|
|
// Course icons
|
||
|
|
courseOpacity: courseStyle?.opacity,
|
||
|
|
courseWidth: courseStyle?.width,
|
||
|
|
|
||
|
|
// Default course icons
|
||
|
|
defaultCourseOpacity: defaultCourseStyle?.opacity,
|
||
|
|
defaultCourseWidth: defaultCourseStyle?.width,
|
||
|
|
|
||
|
|
localStorage: localStorage.getItem('cv-icons')
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log(` Paper classes: ${afterOff.paperClasses}`);
|
||
|
|
console.log(` Has show-icons class: ${afterOff.hasShowIcons}`);
|
||
|
|
console.log(` Toggle checked: ${afterOff.toggleChecked}`);
|
||
|
|
console.log(`\n COMPANY LOGO: opacity=${afterOff.logoOpacity}, width=${afterOff.logoWidth}`);
|
||
|
|
console.log(` AWARD LOGO: opacity=${afterOff.awardOpacity}, width=${afterOff.awardWidth}`);
|
||
|
|
console.log(` SECTION ICONS: opacity=${afterOff.sectionOpacity}, width=${afterOff.sectionWidth}`);
|
||
|
|
console.log(` PROJECT ICONS: opacity=${afterOff.projectOpacity}, width=${afterOff.projectWidth}`);
|
||
|
|
console.log(` DEFAULT PROJECT ICONS: opacity=${afterOff.defaultProjectOpacity}, width=${afterOff.defaultProjectWidth}`);
|
||
|
|
console.log(` COURSE ICONS: opacity=${afterOff.courseOpacity}, width=${afterOff.courseWidth}`);
|
||
|
|
console.log(` DEFAULT COURSE ICONS: opacity=${afterOff.defaultCourseOpacity}, width=${afterOff.defaultCourseWidth}`);
|
||
|
|
console.log(`\n LocalStorage: ${afterOff.localStorage}`);
|
||
|
|
|
||
|
|
// Helper to check if icon is hidden (opacity 0 or undefined if not present)
|
||
|
|
const isHidden = (opacity) => opacity === '0' || opacity === undefined;
|
||
|
|
const isVisible = (opacity) => opacity === '1' || opacity === undefined;
|
||
|
|
|
||
|
|
const allIconsHidden = !afterOff.hasShowIcons &&
|
||
|
|
isHidden(afterOff.logoOpacity) &&
|
||
|
|
isHidden(afterOff.awardOpacity) &&
|
||
|
|
isHidden(afterOff.sectionOpacity) &&
|
||
|
|
isHidden(afterOff.projectOpacity) &&
|
||
|
|
isHidden(afterOff.defaultProjectOpacity) &&
|
||
|
|
isHidden(afterOff.courseOpacity) &&
|
||
|
|
isHidden(afterOff.defaultCourseOpacity);
|
||
|
|
|
||
|
|
console.log(`\n ${allIconsHidden ? '✅ ALL icons correctly hidden' : '❌ Some icons still visible!'}`);
|
||
|
|
|
||
|
|
console.log("\n3️⃣ Clicking toggle again to turn icons ON...");
|
||
|
|
await page.click('label:has(#iconToggle)');
|
||
|
|
await page.waitForTimeout(500);
|
||
|
|
|
||
|
|
const afterOn = await page.evaluate(() => {
|
||
|
|
const paper = document.querySelector('.cv-paper');
|
||
|
|
|
||
|
|
const companyLogo = document.querySelector('.company-logo');
|
||
|
|
const awardLogo = document.querySelector('.award-logo');
|
||
|
|
const sectionIcon = document.querySelector('.section-icon');
|
||
|
|
const projectIcon = document.querySelector('.project-icon');
|
||
|
|
const defaultProjectIcon = document.querySelector('.default-project-icon');
|
||
|
|
const courseIcon = document.querySelector('.course-icon');
|
||
|
|
const defaultCourseIcon = document.querySelector('.default-course-icon');
|
||
|
|
|
||
|
|
const logoStyle = companyLogo ? window.getComputedStyle(companyLogo) : null;
|
||
|
|
const awardStyle = awardLogo ? window.getComputedStyle(awardLogo) : null;
|
||
|
|
const sectionStyle = sectionIcon ? window.getComputedStyle(sectionIcon) : null;
|
||
|
|
const projectStyle = projectIcon ? window.getComputedStyle(projectIcon) : null;
|
||
|
|
const defaultProjectStyle = defaultProjectIcon ? window.getComputedStyle(defaultProjectIcon) : null;
|
||
|
|
const courseStyle = courseIcon ? window.getComputedStyle(courseIcon) : null;
|
||
|
|
const defaultCourseStyle = defaultCourseIcon ? window.getComputedStyle(defaultCourseIcon) : null;
|
||
|
|
|
||
|
|
return {
|
||
|
|
paperClasses: paper?.className,
|
||
|
|
hasShowIcons: paper?.classList.contains('show-icons'),
|
||
|
|
|
||
|
|
logoOpacity: logoStyle?.opacity,
|
||
|
|
awardOpacity: awardStyle?.opacity,
|
||
|
|
sectionOpacity: sectionStyle?.opacity,
|
||
|
|
projectOpacity: projectStyle?.opacity,
|
||
|
|
defaultProjectOpacity: defaultProjectStyle?.opacity,
|
||
|
|
courseOpacity: courseStyle?.opacity,
|
||
|
|
defaultCourseOpacity: defaultCourseStyle?.opacity
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log(` Paper classes: ${afterOn.paperClasses}`);
|
||
|
|
console.log(` Has show-icons class: ${afterOn.hasShowIcons}`);
|
||
|
|
console.log(`\n COMPANY LOGO: ${afterOn.logoOpacity}`);
|
||
|
|
console.log(` AWARD LOGO: ${afterOn.awardOpacity}`);
|
||
|
|
console.log(` SECTION ICONS: ${afterOn.sectionOpacity}`);
|
||
|
|
console.log(` PROJECT ICONS: ${afterOn.projectOpacity}`);
|
||
|
|
console.log(` DEFAULT PROJECT ICONS: ${afterOn.defaultProjectOpacity}`);
|
||
|
|
console.log(` COURSE ICONS: ${afterOn.courseOpacity}`);
|
||
|
|
console.log(` DEFAULT COURSE ICONS: ${afterOn.defaultCourseOpacity}`);
|
||
|
|
|
||
|
|
const allIconsVisible = afterOn.hasShowIcons &&
|
||
|
|
isVisible(afterOn.logoOpacity) &&
|
||
|
|
isVisible(afterOn.awardOpacity) &&
|
||
|
|
isVisible(afterOn.sectionOpacity) &&
|
||
|
|
isVisible(afterOn.projectOpacity) &&
|
||
|
|
isVisible(afterOn.defaultProjectOpacity) &&
|
||
|
|
isVisible(afterOn.courseOpacity) &&
|
||
|
|
isVisible(afterOn.defaultCourseOpacity);
|
||
|
|
|
||
|
|
console.log(`\n ${allIconsVisible ? '✅ ALL icons correctly visible' : '❌ Some icons not showing!'}`);
|
||
|
|
|
||
|
|
console.log("\n" + "=".repeat(70));
|
||
|
|
|
||
|
|
if (allIconsHidden && allIconsVisible) {
|
||
|
|
console.log("\n✅ ICON TOGGLE WORKS CORRECTLY FOR ALL ICON TYPES!");
|
||
|
|
} else {
|
||
|
|
console.log("\n❌ ICON TOGGLE HAS ISSUES!");
|
||
|
|
console.log("Debug: Check if CSS rules cover all icon types");
|
||
|
|
}
|
||
|
|
|
||
|
|
await page.screenshot({ path: 'tests/screenshots/icon-toggle-debug.png' });
|
||
|
|
console.log("\n📸 Screenshot saved to tests/screenshots/icon-toggle-debug.png");
|
||
|
|
|
||
|
|
console.log("\nBrowser will stay open for 30 seconds for inspection...");
|
||
|
|
await page.waitForTimeout(30000);
|
||
|
|
await browser.close();
|
||
|
|
}
|
||
|
|
|
||
|
|
await testIconToggle();
|