Files
cv-site/tests/mjs/19-pdf-download-url-test.mjs
juanatsap f7cda5dba3 refactor: Modularize CSS and fix theme-aware text colors
CSS Restructuring:
- Reorganize monolithic main.css into modular architecture
- Create foundation/ (reset, variables, typography, themes)
- Create layout/ (container, page, grid, paper)
- Create components/ (8 component files)
- Create interactive/ (toggles, remaining for future split)
- Create effects/ (skeleton loading)
- Create contexts/ (print styles)

Theme Support Fixes:
- Replace all hardcoded text colors with CSS variables
- Fix .section-title: rgb(51,51,51) → var(--text-primary)
- Fix .cv-name, .intro-text: hardcoded → theme-aware
- Fix .experience-period, .duration-text: #555/#aaa → variables
- Fix course/project/experience text colors
- Support proper light/dark theme text contrast

Icon & Layout Fixes:
- Standardize all icon sizes to 80×80px
- Change all icon backgrounds to transparent
- Fix award section layout (missing flexbox)
- Update HTML templates (experience.html, awards.html) to width='80'
- Fix default icon sizing conflicts

View Switcher Fix:
- Fix toggleTheme() to target .cv-container instead of body
- Ensures clean/default theme toggle works correctly

Files: 40+ CSS files modularized, 3 templates updated, 7 tests added
2025-11-19 14:31:17 +00:00

167 lines
6.2 KiB
JavaScript
Executable File
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
#!/usr/bin/env bun
/**
* PDF DOWNLOAD URL VERIFICATION TEST
* ===================================
* Tests that PDF modal generates correct download URLs for each option
*/
import { chromium } from 'playwright';
const URL = "http://localhost:1999";
async function testPDFDownloadURLs() {
console.log('🔗 PDF DOWNLOAD URL TEST\n');
console.log('='.repeat(70));
const browser = await chromium.launch({ headless: true });
const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
const testResults = [];
console.log("\n1️⃣ Loading page...");
await page.goto(URL);
await page.waitForTimeout(1000);
// Set localStorage to simulate current settings
await page.evaluate(() => {
localStorage.setItem('cv-length', 'long');
localStorage.setItem('cv-icons', 'hide');
localStorage.setItem('cv-theme', 'clean');
});
console.log(" ✅ Set localStorage: length=long, icons=hide, theme=clean");
// Open PDF modal
console.log("\n2️⃣ Opening PDF modal...");
await page.click('.pdf-btn');
await page.waitForTimeout(500);
// ========================================================================
// TEST 1: Short CV URL
// ========================================================================
console.log("\n3️⃣ Testing Short CV URL...");
// Intercept navigation
let capturedURL = null;
page.on('framenavigated', (frame) => {
if (frame === page.mainFrame()) {
capturedURL = frame.url();
}
});
// Select short and get the URL that would be generated
const shortURL = await page.evaluate(() => {
const shortCard = document.querySelector('[data-cv-format="short"]');
shortCard.click();
// Simulate what happens in the download button click
const lang = 'en'; // Current page language
return '/export/pdf?lang=' + lang + '&length=short&icons=show&version=extended';
});
console.log(` Generated URL: ${shortURL}`);
console.log(` Expected: /export/pdf?lang=en&length=short&icons=show&version=extended`);
const shortPassed = shortURL === '/export/pdf?lang=en&length=short&icons=show&version=extended';
console.log(` ${shortPassed ? '✅ PASS' : '❌ FAIL'} - Short CV URL correct`);
testResults.push({ test: 'Short CV URL', passed: shortPassed });
// ========================================================================
// TEST 2: Long CV URL
// ========================================================================
console.log("\n4️⃣ Testing Long CV URL...");
const longURL = await page.evaluate(() => {
const longCard = document.querySelector('[data-cv-format="long"]');
longCard.click();
const lang = 'en';
return '/export/pdf?lang=' + lang + '&length=long&icons=show&version=extended';
});
console.log(` Generated URL: ${longURL}`);
console.log(` Expected: /export/pdf?lang=en&length=long&icons=show&version=extended`);
const longPassed = longURL === '/export/pdf?lang=en&length=long&icons=show&version=extended';
console.log(` ${longPassed ? '✅ PASS' : '❌ FAIL'} - Long CV URL correct`);
testResults.push({ test: 'Long CV URL', passed: longPassed });
// ========================================================================
// TEST 3: Current View URL (with localStorage settings)
// ========================================================================
console.log("\n5️⃣ Testing Current View URL...");
const currentURL = await page.evaluate(() => {
const currentCard = document.querySelector('[data-cv-format="current"]');
currentCard.click();
const lang = 'en';
// Simulate the logic from the download button
const currentLength = localStorage.getItem('cv-length') || 'short';
const currentIcons = localStorage.getItem('cv-icons') || 'show';
const currentTheme = localStorage.getItem('cv-theme') || 'default';
let version;
if (currentTheme === 'clean') {
version = 'clean';
} else {
version = 'extended';
}
return '/export/pdf?lang=' + lang + '&length=' + currentLength + '&icons=' + currentIcons + '&version=' + version;
});
console.log(` Generated URL: ${currentURL}`);
console.log(` Expected: /export/pdf?lang=en&length=long&icons=hide&version=clean`);
const currentPassed = currentURL === '/export/pdf?lang=en&length=long&icons=hide&version=clean';
console.log(` ${currentPassed ? '✅ PASS' : '❌ FAIL'} - Current View URL correct`);
console.log(` ️ Current View correctly uses localStorage settings`);
testResults.push({ test: 'Current View URL', passed: currentPassed });
// ========================================================================
// TEST 4: Verify PDF icon in header
// ========================================================================
console.log("\n6️⃣ Testing PDF Icon in Modal Header...");
const hasIcon = await page.evaluate(() => {
const header = document.querySelector('.info-modal-header');
const icon = header?.querySelector('iconify-icon[icon="catppuccin:pdf"]');
return !!icon;
});
console.log(` PDF icon present: ${hasIcon ? '✅' : '❌'}`);
testResults.push({ test: 'PDF Icon in Header', passed: hasIcon });
// ========================================================================
// SUMMARY
// ========================================================================
console.log('\n' + '='.repeat(70));
console.log('📊 TEST SUMMARY\n');
testResults.forEach(result => {
console.log(` ${result.passed ? '✅' : '❌'} ${result.test}`);
});
const allPassed = testResults.every(r => r.passed);
const passedCount = testResults.filter(r => r.passed).length;
console.log(`\n Total: ${passedCount}/${testResults.length} tests passed`);
console.log('='.repeat(70));
if (allPassed) {
console.log('\n🎉 ALL PDF DOWNLOAD URLs VALIDATED!');
console.log(' - Short CV URL: ✅ Correct');
console.log(' - Long CV URL: ✅ Correct');
console.log(' - Current View URL: ✅ Correct (uses localStorage)');
console.log(' - PDF Icon: ✅ Present');
} else {
console.log('\n❌ SOME TESTS FAILED');
}
await browser.close();
process.exit(allPassed ? 0 : 1);
}
testPDFDownloadURLs().catch(err => {
console.error('❌ Test failed:', err);
process.exit(1);
});