juanatsap
579 lines
20 KiB
JavaScript
Executable File
579 lines
20 KiB
JavaScript
Executable File
#!/usr/bin/env node
|
||
/**
|
||
* COMPREHENSIVE VERIFICATION TEST SUITE
|
||
* Tests both HTMX indicators and shortcuts button visibility fixes
|
||
*/
|
||
|
||
import { chromium } from 'playwright';
|
||
|
||
const BASE_URL = 'http://localhost:1999';
|
||
const RESULTS = {
|
||
passed: [],
|
||
failed: [],
|
||
warnings: []
|
||
};
|
||
|
||
function log(status, message) {
|
||
const timestamp = new Date().toLocaleTimeString();
|
||
const icons = { pass: '✅', fail: '❌', warn: '⚠️', info: 'ℹ️' };
|
||
console.log(`[${timestamp}] ${icons[status] || icons.info} ${message}`);
|
||
|
||
if (status === 'pass') RESULTS.passed.push(message);
|
||
if (status === 'fail') RESULTS.failed.push(message);
|
||
if (status === 'warn') RESULTS.warnings.push(message);
|
||
}
|
||
|
||
function measureTime(start) {
|
||
return `${Date.now() - start}ms`;
|
||
}
|
||
|
||
async function sleep(ms) {
|
||
return new Promise(resolve => setTimeout(resolve, ms));
|
||
}
|
||
|
||
async function test1_HTMXLoadingIndicators(page) {
|
||
log('info', '═══════════════════════════════════════════════════════');
|
||
log('info', 'TEST 1: HTMX Loading Indicators (Feature 003)');
|
||
log('info', '═══════════════════════════════════════════════════════');
|
||
|
||
try {
|
||
// Navigate to page
|
||
await page.goto(BASE_URL);
|
||
await page.waitForLoadState('networkidle');
|
||
log('pass', 'Page loaded successfully');
|
||
|
||
// Test 1.1: Verify indicator elements exist
|
||
log('info', 'Test 1.1: Checking indicator elements exist...');
|
||
const enIndicator = page.locator('#lang-indicator-en');
|
||
const esIndicator = page.locator('#lang-indicator-es');
|
||
|
||
await enIndicator.waitFor({ state: 'attached', timeout: 5000 });
|
||
await esIndicator.waitFor({ state: 'attached', timeout: 5000 });
|
||
log('pass', 'Both language indicators found in DOM');
|
||
|
||
// Test 1.2: Verify initial opacity is 0 (hidden)
|
||
log('info', 'Test 1.2: Checking initial indicator opacity...');
|
||
const enInitialOpacity = await enIndicator.evaluate(el =>
|
||
window.getComputedStyle(el).opacity
|
||
);
|
||
const esInitialOpacity = await esIndicator.evaluate(el =>
|
||
window.getComputedStyle(el).opacity
|
||
);
|
||
|
||
if (enInitialOpacity === '0' && esInitialOpacity === '0') {
|
||
log('pass', `Indicators hidden initially (opacity: ${enInitialOpacity})`);
|
||
} else {
|
||
log('fail', `Indicators should be hidden (EN: ${enInitialOpacity}, ES: ${esInitialOpacity})`);
|
||
}
|
||
|
||
// Test 1.3: Click EN button and verify indicator appears
|
||
log('info', 'Test 1.3: Testing EN button loading indicator...');
|
||
|
||
// Get the ES button (since we're on EN by default)
|
||
const esButton = page.locator('button.selector-btn[data-short="ES"]');
|
||
await esButton.waitFor({ state: 'visible' });
|
||
|
||
// Set up monitoring for opacity changes
|
||
const opacityPromise = page.evaluate(() => {
|
||
return new Promise(resolve => {
|
||
const indicator = document.querySelector('#lang-indicator-es');
|
||
let maxOpacity = 0;
|
||
let opacityChanges = [];
|
||
|
||
const observer = new MutationObserver(() => {
|
||
const currentOpacity = parseFloat(window.getComputedStyle(indicator).opacity);
|
||
opacityChanges.push(currentOpacity);
|
||
maxOpacity = Math.max(maxOpacity, currentOpacity);
|
||
});
|
||
|
||
observer.observe(indicator.parentElement, {
|
||
attributes: true,
|
||
attributeFilter: ['class'],
|
||
subtree: true
|
||
});
|
||
|
||
// Check opacity every 10ms for 2 seconds
|
||
let checks = 0;
|
||
const interval = setInterval(() => {
|
||
const currentOpacity = parseFloat(window.getComputedStyle(indicator).opacity);
|
||
opacityChanges.push(currentOpacity);
|
||
maxOpacity = Math.max(maxOpacity, currentOpacity);
|
||
checks++;
|
||
|
||
if (checks > 200) { // 2 seconds
|
||
clearInterval(interval);
|
||
observer.disconnect();
|
||
resolve({ maxOpacity, opacityChanges: opacityChanges.filter(o => o > 0) });
|
||
}
|
||
}, 10);
|
||
});
|
||
});
|
||
|
||
// Click the button
|
||
const clickTime = Date.now();
|
||
await esButton.click();
|
||
|
||
// Wait for the opacity monitoring to complete
|
||
const opacityData = await opacityPromise;
|
||
const responseTime = measureTime(clickTime);
|
||
|
||
log('info', `Request completed in ${responseTime}`);
|
||
log('info', `Max indicator opacity: ${opacityData.maxOpacity}`);
|
||
log('info', `Opacity changes detected: ${opacityData.opacityChanges.length}`);
|
||
|
||
if (opacityData.maxOpacity >= 0.9) {
|
||
log('pass', `Indicator became visible (max opacity: ${opacityData.maxOpacity})`);
|
||
} else if (opacityData.maxOpacity > 0) {
|
||
log('warn', `Indicator partially visible but not fully (max: ${opacityData.maxOpacity})`);
|
||
} else {
|
||
log('warn', 'Indicator not visible on fast request (expected on localhost - will verify with throttled test)');
|
||
}
|
||
|
||
// Test 1.4: Verify indicator faded out after request
|
||
await sleep(500);
|
||
const finalOpacity = await esIndicator.evaluate(el =>
|
||
window.getComputedStyle(el).opacity
|
||
);
|
||
|
||
if (finalOpacity === '0') {
|
||
log('pass', `Indicator hidden after request (opacity: ${finalOpacity})`);
|
||
} else {
|
||
log('warn', `Indicator may not have faded out (opacity: ${finalOpacity})`);
|
||
}
|
||
|
||
// Test 1.5: Take screenshot during loading
|
||
log('info', 'Test 1.5: Capturing screenshot during loading...');
|
||
|
||
// Click back to EN to trigger another loading state
|
||
await sleep(500);
|
||
const enButton = page.locator('button.selector-btn[data-short="EN"]');
|
||
|
||
// Start click and immediately capture
|
||
const screenshotPromise = page.screenshot({
|
||
path: '/Users/txeo/Git/yo/cv/test-screenshots/htmx-indicator-loading.png',
|
||
fullPage: false
|
||
});
|
||
|
||
await enButton.click();
|
||
await screenshotPromise;
|
||
|
||
log('pass', 'Screenshot captured: test-screenshots/htmx-indicator-loading.png');
|
||
|
||
// Test 1.6: Network throttling test
|
||
log('info', 'Test 1.6: Testing with slow 3G network...');
|
||
|
||
// Slow 3G preset - only delay the specific endpoint
|
||
let requestIntercepted = false;
|
||
await page.route('**/switch-language**', async route => {
|
||
if (!requestIntercepted) {
|
||
requestIntercepted = true;
|
||
await sleep(800); // Simulate 800ms delay
|
||
}
|
||
await route.continue();
|
||
});
|
||
|
||
await sleep(500);
|
||
const slowClickTime = Date.now();
|
||
|
||
// Click and monitor
|
||
const slowOpacityPromise = page.evaluate(() => {
|
||
return new Promise(resolve => {
|
||
const indicator = document.querySelector('#lang-indicator-en');
|
||
let maxOpacity = 0;
|
||
const interval = setInterval(() => {
|
||
const opacity = parseFloat(window.getComputedStyle(indicator).opacity);
|
||
maxOpacity = Math.max(maxOpacity, opacity);
|
||
}, 10);
|
||
|
||
setTimeout(() => {
|
||
clearInterval(interval);
|
||
resolve(maxOpacity);
|
||
}, 1000);
|
||
});
|
||
});
|
||
|
||
await enButton.click();
|
||
const slowOpacity = await slowOpacityPromise;
|
||
|
||
await page.waitForLoadState('networkidle');
|
||
const slowResponseTime = measureTime(slowClickTime);
|
||
|
||
log('info', `Slow request completed in ${slowResponseTime}`);
|
||
log('info', `Mid-request opacity: ${slowOpacity}`);
|
||
|
||
if (slowOpacity >= 0.9) {
|
||
log('pass', `Indicator visible during slow request (opacity: ${slowOpacity})`);
|
||
} else {
|
||
log('fail', `Indicator not visible during slow request (opacity: ${slowOpacity})`);
|
||
}
|
||
|
||
// Unroute to restore normal speed
|
||
await page.unroute('**/switch-language**');
|
||
|
||
} catch (error) {
|
||
log('fail', `Test 1 error: ${error.message}`);
|
||
console.error(error);
|
||
}
|
||
}
|
||
|
||
async function test2_ShortcutsButtonVisibility(page) {
|
||
log('info', '═══════════════════════════════════════════════════════');
|
||
log('info', 'TEST 2: Shortcuts Button Visibility (Feature 001)');
|
||
log('info', '═══════════════════════════════════════════════════════');
|
||
|
||
try {
|
||
// Ensure we're on the page
|
||
await page.goto(BASE_URL);
|
||
await page.waitForLoadState('networkidle');
|
||
|
||
// Test 2.1: Verify button exists and is visible
|
||
log('info', 'Test 2.1: Checking shortcuts button exists...');
|
||
const shortcutsBtn = page.locator('.shortcuts-btn');
|
||
|
||
await shortcutsBtn.waitFor({ state: 'visible', timeout: 5000 });
|
||
log('pass', 'Shortcuts button found and visible');
|
||
|
||
// Test 2.2: Measure initial opacity
|
||
log('info', 'Test 2.2: Measuring button opacity...');
|
||
const opacity = await shortcutsBtn.evaluate(el =>
|
||
window.getComputedStyle(el).opacity
|
||
);
|
||
|
||
const opacityNum = parseFloat(opacity);
|
||
log('info', `Button opacity: ${opacity}`);
|
||
|
||
if (opacityNum === 0.6) {
|
||
log('pass', `Button opacity is exactly 0.6 as expected`);
|
||
} else if (opacityNum >= 0.5 && opacityNum <= 0.7) {
|
||
log('warn', `Button opacity close to target (${opacity} vs 0.6)`);
|
||
} else {
|
||
log('fail', `Button opacity incorrect (${opacity}, expected 0.6)`);
|
||
}
|
||
|
||
// Test 2.3: Verify button is actually visible to users
|
||
log('info', 'Test 2.3: Verifying visual discoverability...');
|
||
const boundingBox = await shortcutsBtn.boundingBox();
|
||
|
||
if (boundingBox) {
|
||
log('pass', `Button has dimensions: ${boundingBox.width}x${boundingBox.height}px`);
|
||
log('info', `Position: (${boundingBox.x}, ${boundingBox.y})`);
|
||
} else {
|
||
log('fail', 'Button has no bounding box (may not be rendered)');
|
||
}
|
||
|
||
// Test 2.4: Test hover state
|
||
log('info', 'Test 2.4: Testing hover state...');
|
||
await shortcutsBtn.hover();
|
||
await sleep(500); // Wait for transition
|
||
|
||
const hoverOpacity = await shortcutsBtn.evaluate(el =>
|
||
window.getComputedStyle(el).opacity
|
||
);
|
||
|
||
if (parseFloat(hoverOpacity) === 1.0) {
|
||
log('pass', `Hover opacity is 1.0 (full visibility)`);
|
||
} else {
|
||
log('warn', `Hover opacity: ${hoverOpacity} (expected 1.0)`);
|
||
}
|
||
|
||
// Test 2.5: Take screenshot
|
||
log('info', 'Test 2.5: Capturing button screenshot...');
|
||
await page.screenshot({
|
||
path: '/Users/txeo/Git/yo/cv/test-screenshots/shortcuts-button-visible.png',
|
||
fullPage: false
|
||
});
|
||
log('pass', 'Screenshot captured: test-screenshots/shortcuts-button-visible.png');
|
||
|
||
// Test 2.6: Verify functionality
|
||
log('info', 'Test 2.6: Testing button functionality...');
|
||
await shortcutsBtn.click();
|
||
await sleep(300);
|
||
|
||
// Check if modal opened
|
||
const modal = page.locator('.shortcuts-modal, [id*="shortcut"], [class*="modal"]');
|
||
const modalVisible = await modal.isVisible().catch(() => false);
|
||
|
||
if (modalVisible) {
|
||
log('pass', 'Shortcuts modal opened successfully');
|
||
|
||
// Test ESC to close
|
||
await page.keyboard.press('Escape');
|
||
await sleep(300);
|
||
|
||
const modalClosed = await modal.isVisible().catch(() => false);
|
||
if (!modalClosed) {
|
||
log('pass', 'Modal closes with ESC key');
|
||
} else {
|
||
log('warn', 'Modal may not close with ESC');
|
||
}
|
||
} else {
|
||
log('fail', 'Modal did not open on button click');
|
||
}
|
||
|
||
// Test 2.7: Check info button consistency
|
||
log('info', 'Test 2.7: Verifying info button has same opacity...');
|
||
const infoBtn = page.locator('.info-button');
|
||
const infoBtnExists = await infoBtn.count();
|
||
|
||
if (infoBtnExists > 0) {
|
||
const infoOpacity = await infoBtn.evaluate(el =>
|
||
window.getComputedStyle(el).opacity
|
||
);
|
||
|
||
if (parseFloat(infoOpacity) === 0.6) {
|
||
log('pass', `Info button also has opacity 0.6 (consistency maintained)`);
|
||
} else {
|
||
log('warn', `Info button opacity: ${infoOpacity} (expected 0.6)`);
|
||
}
|
||
} else {
|
||
log('info', 'Info button not found (may not be on this page)');
|
||
}
|
||
|
||
} catch (error) {
|
||
log('fail', `Test 2 error: ${error.message}`);
|
||
console.error(error);
|
||
}
|
||
}
|
||
|
||
async function test3_RegressionTests(page) {
|
||
log('info', '═══════════════════════════════════════════════════════');
|
||
log('info', 'TEST 3: Regression Testing (Ensure Nothing Broke)');
|
||
log('info', '═══════════════════════════════════════════════════════');
|
||
|
||
try {
|
||
await page.goto(BASE_URL);
|
||
await page.waitForLoadState('networkidle');
|
||
|
||
// Test 3.1: Skeleton loader still works
|
||
log('info', 'Test 3.1: Verifying skeleton loader animation...');
|
||
|
||
const skeletonExists = await page.locator('#skeleton-loader').count();
|
||
if (skeletonExists > 0) {
|
||
log('pass', 'Skeleton loader element found');
|
||
|
||
// Trigger language switch
|
||
const esButton = page.locator('button.selector-btn[data-short="ES"]');
|
||
|
||
const skeletonActivated = await page.evaluate(() => {
|
||
return new Promise(resolve => {
|
||
const skeleton = document.querySelector('#skeleton-loader');
|
||
const observer = new MutationObserver((mutations) => {
|
||
for (const mutation of mutations) {
|
||
if (mutation.target.classList.contains('active')) {
|
||
observer.disconnect();
|
||
resolve(true);
|
||
}
|
||
}
|
||
});
|
||
|
||
observer.observe(skeleton, { attributes: true, attributeFilter: ['class'] });
|
||
|
||
setTimeout(() => {
|
||
observer.disconnect();
|
||
resolve(false);
|
||
}, 2000);
|
||
});
|
||
});
|
||
|
||
await esButton.click();
|
||
await page.waitForLoadState('networkidle');
|
||
|
||
if (skeletonActivated) {
|
||
log('pass', 'Skeleton loader activated during language switch');
|
||
} else {
|
||
log('warn', 'Skeleton loader may not be activating');
|
||
}
|
||
} else {
|
||
log('info', 'Skeleton loader not found (may not be used)');
|
||
}
|
||
|
||
// Test 3.2: No console errors
|
||
log('info', 'Test 3.2: Checking for console errors...');
|
||
const errors = [];
|
||
page.on('console', msg => {
|
||
if (msg.type() === 'error') {
|
||
errors.push(msg.text());
|
||
}
|
||
});
|
||
|
||
await page.reload();
|
||
await sleep(1000);
|
||
|
||
if (errors.length === 0) {
|
||
log('pass', 'No console errors detected');
|
||
} else {
|
||
log('fail', `Console errors found: ${errors.join(', ')}`);
|
||
}
|
||
|
||
// Test 3.3: No layout shifts
|
||
log('info', 'Test 3.3: Measuring Cumulative Layout Shift...');
|
||
|
||
const cls = await page.evaluate(() => {
|
||
return new Promise(resolve => {
|
||
let clsValue = 0;
|
||
|
||
try {
|
||
const observer = new PerformanceObserver((list) => {
|
||
for (const entry of list.getEntries()) {
|
||
if (!entry.hadRecentInput) {
|
||
clsValue += entry.value;
|
||
}
|
||
}
|
||
});
|
||
|
||
observer.observe({ type: 'layout-shift', buffered: true });
|
||
|
||
setTimeout(() => {
|
||
observer.disconnect();
|
||
resolve(clsValue);
|
||
}, 2000);
|
||
} catch (e) {
|
||
resolve(0);
|
||
}
|
||
});
|
||
});
|
||
|
||
log('info', `CLS Score: ${cls.toFixed(3)}`);
|
||
|
||
if (cls < 0.1) {
|
||
log('pass', 'Excellent CLS score (< 0.1)');
|
||
} else if (cls < 0.25) {
|
||
log('warn', `CLS needs improvement (${cls.toFixed(3)})`);
|
||
} else {
|
||
log('fail', `Poor CLS score (${cls.toFixed(3)})`);
|
||
}
|
||
|
||
// Test 3.4: Page load performance
|
||
log('info', 'Test 3.4: Measuring page load performance...');
|
||
|
||
const perfMetrics = await page.evaluate(() => {
|
||
const perf = performance.getEntriesByType('navigation')[0];
|
||
return {
|
||
loadTime: perf.loadEventEnd - perf.fetchStart,
|
||
domContentLoaded: perf.domContentLoadedEventEnd - perf.fetchStart,
|
||
firstPaint: performance.getEntriesByType('paint')[0]?.startTime || 0
|
||
};
|
||
});
|
||
|
||
log('info', `Load time: ${perfMetrics.loadTime.toFixed(0)}ms`);
|
||
log('info', `DOMContentLoaded: ${perfMetrics.domContentLoaded.toFixed(0)}ms`);
|
||
log('info', `First Paint: ${perfMetrics.firstPaint.toFixed(0)}ms`);
|
||
|
||
if (perfMetrics.loadTime < 3000) {
|
||
log('pass', 'Page loads in under 3 seconds');
|
||
} else {
|
||
log('warn', `Page load time: ${perfMetrics.loadTime.toFixed(0)}ms`);
|
||
}
|
||
|
||
} catch (error) {
|
||
log('fail', `Test 3 error: ${error.message}`);
|
||
console.error(error);
|
||
}
|
||
}
|
||
|
||
async function generateReport() {
|
||
log('info', '═══════════════════════════════════════════════════════');
|
||
log('info', 'FINAL TEST REPORT');
|
||
log('info', '═══════════════════════════════════════════════════════');
|
||
|
||
console.log('\n📊 SUMMARY:');
|
||
console.log(` ✅ Passed: ${RESULTS.passed.length}`);
|
||
console.log(` ❌ Failed: ${RESULTS.failed.length}`);
|
||
console.log(` ⚠️ Warnings: ${RESULTS.warnings.length}`);
|
||
|
||
if (RESULTS.failed.length > 0) {
|
||
console.log('\n❌ FAILURES:');
|
||
RESULTS.failed.forEach((msg, i) => console.log(` ${i + 1}. ${msg}`));
|
||
}
|
||
|
||
if (RESULTS.warnings.length > 0) {
|
||
console.log('\n⚠️ WARNINGS:');
|
||
RESULTS.warnings.forEach((msg, i) => console.log(` ${i + 1}. ${msg}`));
|
||
}
|
||
|
||
console.log('\n📈 FEATURE GRADES:');
|
||
|
||
// Feature 003: HTMX Indicators
|
||
const indicatorTests = RESULTS.passed.filter(m =>
|
||
m.includes('indicator') || m.includes('Indicator')
|
||
).length;
|
||
const indicatorFails = RESULTS.failed.filter(m =>
|
||
m.includes('indicator') || m.includes('Indicator')
|
||
).length;
|
||
|
||
let feature003Grade = 'F';
|
||
if (indicatorFails === 0 && indicatorTests >= 5) feature003Grade = 'A';
|
||
else if (indicatorFails === 0 && indicatorTests >= 3) feature003Grade = 'B';
|
||
else if (indicatorFails <= 1) feature003Grade = 'C';
|
||
else if (indicatorFails <= 2) feature003Grade = 'D';
|
||
|
||
console.log(` Feature 003 (HTMX Indicators): ${feature003Grade} (${indicatorTests} tests passed, ${indicatorFails} failed)`);
|
||
|
||
// Feature 001: Shortcuts Button
|
||
const buttonTests = RESULTS.passed.filter(m =>
|
||
m.includes('Button') || m.includes('button') || m.includes('opacity')
|
||
).length;
|
||
const buttonFails = RESULTS.failed.filter(m =>
|
||
m.includes('Button') || m.includes('button') || m.includes('opacity')
|
||
).length;
|
||
|
||
let feature001Grade = 'A-';
|
||
if (buttonFails === 0 && buttonTests >= 6) feature001Grade = 'A';
|
||
else if (buttonFails === 0 && buttonTests >= 4) feature001Grade = 'A-';
|
||
else if (buttonFails <= 1) feature001Grade = 'B+';
|
||
else if (buttonFails <= 2) feature001Grade = 'B';
|
||
|
||
console.log(` Feature 001 (Shortcuts Button): ${feature001Grade} (${buttonTests} tests passed, ${buttonFails} failed)`);
|
||
|
||
console.log('\n📸 SCREENSHOTS:');
|
||
console.log(' - test-screenshots/htmx-indicator-loading.png');
|
||
console.log(' - test-screenshots/shortcuts-button-visible.png');
|
||
|
||
const overallSuccess = RESULTS.failed.length === 0;
|
||
console.log(`\n${overallSuccess ? '✅ ALL TESTS PASSED' : '❌ SOME TESTS FAILED'}\n`);
|
||
|
||
return overallSuccess;
|
||
}
|
||
|
||
async function main() {
|
||
console.log('🧪 COMPREHENSIVE VERIFICATION TEST SUITE');
|
||
console.log('Testing HTMX Indicators + Shortcuts Button Fixes\n');
|
||
|
||
// Create screenshots directory
|
||
const { mkdir } = await import('fs/promises');
|
||
await mkdir('/Users/txeo/Git/yo/cv/test-screenshots', { recursive: true });
|
||
|
||
const browser = await chromium.launch({
|
||
headless: true,
|
||
args: ['--disable-dev-shm-usage']
|
||
});
|
||
|
||
const context = await browser.newContext({
|
||
viewport: { width: 1920, height: 1080 },
|
||
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36'
|
||
});
|
||
|
||
const page = await context.newPage();
|
||
|
||
try {
|
||
// Run all test suites
|
||
await test1_HTMXLoadingIndicators(page);
|
||
await test2_ShortcutsButtonVisibility(page);
|
||
await test3_RegressionTests(page);
|
||
|
||
// Generate report
|
||
const success = await generateReport();
|
||
|
||
await browser.close();
|
||
|
||
process.exit(success ? 0 : 1);
|
||
|
||
} catch (error) {
|
||
console.error('Fatal error:', error);
|
||
await browser.close();
|
||
process.exit(1);
|
||
}
|
||
}
|
||
|
||
main();
|