chore: improve test targets and documentation
- Add test-local target for running all tests from project root - Add -short flag to test-unit for CI-safe execution - Expand tests/README.md with Go backend test documentation - Rename css-bundling test to follow numbered convention (81-)
This commit is contained in:
juanatsap
@@ -0,0 +1,205 @@
|
||||
/**
|
||||
* CSS Bundling Test
|
||||
*
|
||||
* Tests for Lightning CSS bundling in production vs development mode.
|
||||
* Verifies correct CSS loading based on GO_ENV environment variable.
|
||||
*/
|
||||
|
||||
import { chromium } from 'playwright';
|
||||
|
||||
const BASE_URL = process.env.BASE_URL || 'http://localhost:1999';
|
||||
|
||||
console.log('\n============================================================');
|
||||
console.log('CSS BUNDLING TEST');
|
||||
console.log('============================================================\n');
|
||||
|
||||
const browser = await chromium.launch({ headless: true });
|
||||
const context = await browser.newContext();
|
||||
const page = await context.newPage();
|
||||
|
||||
let passed = 0;
|
||||
let failed = 0;
|
||||
const results = [];
|
||||
|
||||
function logResult(name, success, details = '') {
|
||||
const status = success ? '✅ PASS' : '❌ FAIL';
|
||||
console.log(`${status} - ${name}${details ? ': ' + details : ''}`);
|
||||
results.push({ name, success, details });
|
||||
if (success) passed++;
|
||||
else failed++;
|
||||
}
|
||||
|
||||
try {
|
||||
// Test 1: Check CSS files are loading (development mode)
|
||||
console.log('1️⃣ Testing CSS Loading...\n');
|
||||
|
||||
await page.goto(BASE_URL, { waitUntil: 'networkidle' });
|
||||
|
||||
// Get all CSS links
|
||||
const cssLinks = await page.evaluate(() => {
|
||||
return Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
|
||||
.map(link => link.href);
|
||||
});
|
||||
|
||||
console.log(' CSS Links found:');
|
||||
cssLinks.forEach(link => console.log(` - ${link}`));
|
||||
console.log('');
|
||||
|
||||
// Check if using bundled or modular CSS
|
||||
const hasBundledCSS = cssLinks.some(href => href.includes('/dist/bundle'));
|
||||
const hasModularCSS = cssLinks.some(href => href.includes('/css/main.css'));
|
||||
const hasPrintCSS = cssLinks.some(href => href.includes('/css/print.css'));
|
||||
|
||||
logResult(
|
||||
'CSS Loading Strategy',
|
||||
hasBundledCSS || hasModularCSS,
|
||||
hasBundledCSS ? 'Production bundle' : 'Development modular'
|
||||
);
|
||||
|
||||
logResult(
|
||||
'Print CSS Separate',
|
||||
hasPrintCSS,
|
||||
hasPrintCSS ? 'Loaded separately with media="print"' : 'Missing!'
|
||||
);
|
||||
|
||||
// Test 2: Verify print.css has media="print" attribute
|
||||
console.log('\n2️⃣ Testing Print CSS Media Attribute...\n');
|
||||
|
||||
const printLinkMedia = await page.evaluate(() => {
|
||||
const printLink = document.querySelector('link[href*="print.css"]');
|
||||
return printLink ? printLink.media : null;
|
||||
});
|
||||
|
||||
logResult(
|
||||
'Print CSS media="print"',
|
||||
printLinkMedia === 'print',
|
||||
printLinkMedia ? `media="${printLinkMedia}"` : 'No media attribute'
|
||||
);
|
||||
|
||||
// Test 3: Verify CSS is rendering correctly (basic visual check)
|
||||
console.log('\n3️⃣ Testing CSS Rendering...\n');
|
||||
|
||||
const bodyStyles = await page.evaluate(() => {
|
||||
const body = document.body;
|
||||
const computed = window.getComputedStyle(body);
|
||||
return {
|
||||
fontFamily: computed.fontFamily,
|
||||
color: computed.color,
|
||||
backgroundColor: window.getComputedStyle(document.documentElement).getPropertyValue('--page-bg')
|
||||
};
|
||||
});
|
||||
|
||||
const hasQuicksandFont = bodyStyles.fontFamily.toLowerCase().includes('quicksand');
|
||||
logResult(
|
||||
'Font Family Applied',
|
||||
hasQuicksandFont || bodyStyles.fontFamily.includes('system-ui'),
|
||||
bodyStyles.fontFamily.substring(0, 50) + '...'
|
||||
);
|
||||
|
||||
const hasThemeColor = bodyStyles.backgroundColor && bodyStyles.backgroundColor !== '';
|
||||
logResult(
|
||||
'CSS Variables Working',
|
||||
hasThemeColor,
|
||||
`--page-bg: ${bodyStyles.backgroundColor || 'not set'}`
|
||||
);
|
||||
|
||||
// Test 4: Verify no CSS 404 errors
|
||||
console.log('\n4️⃣ Testing CSS Resources Load Successfully...\n');
|
||||
|
||||
const cssResponses = [];
|
||||
page.on('response', response => {
|
||||
if (response.url().includes('.css')) {
|
||||
cssResponses.push({
|
||||
url: response.url(),
|
||||
status: response.status()
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Reload to capture all CSS requests
|
||||
await page.reload({ waitUntil: 'networkidle' });
|
||||
|
||||
const all200 = cssResponses.every(r => r.status === 200);
|
||||
const css404s = cssResponses.filter(r => r.status === 404);
|
||||
|
||||
logResult(
|
||||
'All CSS Resources Load (200)',
|
||||
all200,
|
||||
css404s.length > 0 ? `404s: ${css404s.map(r => r.url).join(', ')}` : `${cssResponses.length} CSS files OK`
|
||||
);
|
||||
|
||||
// Test 5: Check CSS size (if bundled)
|
||||
console.log('\n5️⃣ Testing CSS Size...\n');
|
||||
|
||||
let totalCSSSize = 0;
|
||||
for (const cssLink of cssLinks) {
|
||||
try {
|
||||
const response = await page.evaluate(async (url) => {
|
||||
const res = await fetch(url);
|
||||
const text = await res.text();
|
||||
return text.length;
|
||||
}, cssLink);
|
||||
totalCSSSize += response;
|
||||
} catch (e) {
|
||||
// External CSS (like Google Fonts) won't be fetchable
|
||||
}
|
||||
}
|
||||
|
||||
const sizeKB = (totalCSSSize / 1024).toFixed(1);
|
||||
const sizeOK = totalCSSSize > 0 && totalCSSSize < 500 * 1024; // Under 500KB is reasonable
|
||||
|
||||
logResult(
|
||||
'CSS Size Reasonable',
|
||||
sizeOK,
|
||||
`${sizeKB} KB total (local CSS)`
|
||||
);
|
||||
|
||||
// Test 6: Verify ITCSS layers (check for specific class names)
|
||||
console.log('\n6️⃣ Testing CSS Architecture (ITCSS Layers)...\n');
|
||||
|
||||
const cssClasses = await page.evaluate(() => {
|
||||
const classes = {
|
||||
foundation: document.querySelector('[class*="cv-"]') !== null,
|
||||
layout: document.querySelector('.cv-container') !== null,
|
||||
components: document.querySelector('.cv-header') !== null ||
|
||||
document.querySelector('.cv-paper') !== null,
|
||||
interactive: document.querySelector('.modal') !== null ||
|
||||
document.querySelector('.toggle-switch') !== null,
|
||||
responsive: window.matchMedia('(max-width: 768px)').matches !== undefined
|
||||
};
|
||||
return classes;
|
||||
});
|
||||
|
||||
const layersPresent = Object.values(cssClasses).filter(v => v).length;
|
||||
logResult(
|
||||
'ITCSS Layers Present',
|
||||
layersPresent >= 3,
|
||||
`${layersPresent}/5 layers detected`
|
||||
);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Test error:', error.message);
|
||||
logResult('Test Execution', false, error.message);
|
||||
} finally {
|
||||
await browser.close();
|
||||
}
|
||||
|
||||
// Summary
|
||||
console.log('\n============================================================');
|
||||
console.log('TEST SUMMARY');
|
||||
console.log('============================================================\n');
|
||||
|
||||
results.forEach(r => {
|
||||
const icon = r.success ? '✅' : '❌';
|
||||
console.log(` ${icon} ${r.name}`);
|
||||
});
|
||||
|
||||
console.log(`\n Total: ${passed}/${passed + failed} tests passed\n`);
|
||||
|
||||
if (failed > 0) {
|
||||
console.log('❌ SOME TESTS FAILED\n');
|
||||
process.exit(1);
|
||||
} else {
|
||||
console.log('✅ ALL TESTS PASSED\n');
|
||||
process.exit(0);
|
||||
}
|
||||
Reference in New Issue
Block a user