cv-site/tests/mjs/47-compact-accordion-visual.mjs

#!/usr/bin/env node

import { chromium } from 'playwright';

const MOBILE_VIEWPORT = { width: 375, height: 667 };

(async () => {
    const browser = await chromium.launch({ headless: true });
    const context = await browser.newContext({ viewport: MOBILE_VIEWPORT });
    const page = await context.newPage();

    try {
        console.log('🎨 Compact Accordion Visual Test\n');

        await page.goto('http://localhost:1999/?lang=en&view=extended');
        await page.waitForLoadState('networkidle');

        // Get accordion header metrics
        const header = await page.locator('.sidebar-accordion-header').first();
        const headerBox = await header.boundingBox();

        const headerStyles = await header.evaluate(el => {
            const computed = window.getComputedStyle(el);
            return {
                padding: computed.padding,
                fontSize: computed.fontSize,
                borderBottom: computed.borderBottom,
                marginBottom: computed.marginBottom
            };
        });

        // Get sidebar metrics
        const sidebar = await page.locator('.cv-sidebar').first();
        const sidebarStyles = await sidebar.evaluate(el => {
            const computed = window.getComputedStyle(el);
            return {
                padding: computed.padding
            };
        });

        console.log('📏 Compact Spacing Metrics:\n');
        console.log('Sidebar:');
        console.log(`  • Padding: ${sidebarStyles.padding}`);
        console.log(`  • Expected: 0 (should be minimal)\n`);

        console.log('Accordion Header:');
        console.log(`  • Padding: ${headerStyles.padding}`);
        console.log(`  • Font size: ${headerStyles.fontSize}`);
        console.log(`  • Border bottom: ${headerStyles.borderBottom}`);
        console.log(`  • Margin bottom: ${headerStyles.marginBottom}`);
        console.log(`  • Height: ${headerBox.height.toFixed(2)}px\n`);

        // Check if compact
        const sidebarPadding = parseInt(sidebarStyles.padding);
        const headerPadding = parseInt(headerStyles.padding.split(' ')[0]);
        const headerHeight = headerBox.height;

        const isCompact = sidebarPadding === 0 && headerPadding <= 10 && headerHeight < 45;

        console.log('✅ Compact Check:');
        console.log(`  • Sidebar no padding: ${sidebarPadding === 0 ? '✅' : '❌'}`);
        console.log(`  • Header minimal padding: ${headerPadding <= 10 ? '✅' : '❌'} (${headerPadding}px)`);
        console.log(`  • Header compact height: ${headerHeight < 45 ? '✅' : '❌'} (${headerHeight.toFixed(0)}px)`);

        console.log(`\n${isCompact ? '✅' : '❌'} Accordion is ${isCompact ? 'COMPACT' : 'NOT COMPACT'}\n`);

        // Take screenshot
        await page.screenshot({
            path: 'tests/screenshots/accordion-compact.png',
            fullPage: true
        });
        console.log('📸 Screenshot saved to tests/screenshots/accordion-compact.png\n');

    } catch (error) {
        console.error('❌ Test failed:', error.message);
        process.exit(1);
    } finally {
        await browser.close();
    }
})();