cv-site/tests/mjs/48-mobile-landscape-and-blur-test.mjs

#!/usr/bin/env node

import { chromium } from 'playwright';

const PORTRAIT = { width: 375, height: 667 }; // iPhone SE portrait
const LANDSCAPE = { width: 667, height: 375 }; // iPhone SE landscape

(async () => {
    const browser = await chromium.launch({ headless: true });

    console.log('🧪 Testing Mobile Portrait & Landscape Views\n');

    // TEST 1: Portrait with Blur Bar
    console.log('📱 TEST 1: Portrait Mode with iOS Blur Bar\n');
    const portraitContext = await browser.newContext({ viewport: PORTRAIT });
    const portraitPage = await portraitContext.newPage();

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

    // Check for blur backdrop
    const blurBackdrop = await portraitPage.locator('.fixed-buttons-backdrop');
    const backdropExists = await blurBackdrop.count() > 0;

    console.log(`📊 Blur Backdrop:`);
    console.log(`  • Element exists: ${backdropExists ? '✅' : '❌'}`);

    if (backdropExists) {
        const backdropStyles = await blurBackdrop.evaluate(el => {
            const computed = window.getComputedStyle(el);
            return {
                position: computed.position,
                bottom: computed.bottom,
                height: computed.height,
                backdropFilter: computed.backdropFilter,
                background: computed.background,
                borderTop: computed.borderTop,
                zIndex: computed.zIndex
            };
        });

        console.log(`  • Position: ${backdropStyles.position}`);
        console.log(`  • Bottom: ${backdropStyles.bottom}`);
        console.log(`  • Height: ${backdropStyles.height}`);
        console.log(`  • Backdrop filter: ${backdropStyles.backdropFilter}`);
        console.log(`  • Border top: ${backdropStyles.borderTop}`);
        console.log(`  • Z-index: ${backdropStyles.zIndex}`);

        const hasBlur = backdropStyles.backdropFilter.includes('blur');
        const isFixed = backdropStyles.position === 'fixed';
        const atBottom = backdropStyles.bottom === '0px';

        console.log(`\n✅ Blur Bar Check:`);
        console.log(`  • Fixed position: ${isFixed ? '✅' : '❌'}`);
        console.log(`  • At bottom: ${atBottom ? '✅' : '❌'}`);
        console.log(`  • Has blur effect: ${hasBlur ? '✅' : '❌'}`);
    }

    await portraitPage.screenshot({
        path: 'tests/screenshots/mobile-portrait-blur-bar.png',
        fullPage: true
    });
    console.log('\n📸 Screenshot: tests/screenshots/mobile-portrait-blur-bar.png');

    await portraitContext.close();

    // TEST 2: Landscape Orientation
    console.log('\n📱 TEST 2: Landscape Mode\n');
    const landscapeContext = await browser.newContext({ viewport: LANDSCAPE });
    const landscapePage = await landscapeContext.newPage();

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

    // Check landscape-specific styles
    const cvName = await landscapePage.locator('.cv-name');
    const cvPhoto = await landscapePage.locator('.cv-photo');
    const actionBar = await landscapePage.locator('.action-bar');

    const nameStyles = await cvName.evaluate(el => {
        const computed = window.getComputedStyle(el);
        return {
            fontSize: computed.fontSize,
            marginBottom: computed.marginBottom
        };
    });

    const photoStyles = await cvPhoto.evaluate(el => {
        const computed = window.getComputedStyle(el);
        return {
            display: computed.display,
            width: computed.width,
            maxWidth: computed.maxWidth
        };
    });

    const actionBarPadding = await actionBar.evaluate(el => {
        return window.getComputedStyle(el).padding;
    });

    console.log(`📊 Landscape Optimizations:`);
    console.log(`  • Name font size: ${nameStyles.fontSize} (should be ~1.2rem)`);
    console.log(`  • Photo visible: ${photoStyles.display !== 'none' ? '✅ YES' : '❌ NO'}`);
    console.log(`  • Photo width: ${photoStyles.width} (max: ${photoStyles.maxWidth})`);
    console.log(`  • Action bar compact: ${actionBarPadding}`);

    const isOptimized = photoStyles.display !== 'none' &&
                        parseFloat(photoStyles.maxWidth) <= 80 &&
                        parseFloat(nameStyles.fontSize) < 20;

    console.log(`\n${isOptimized ? '✅' : '❌'} Landscape mode ${isOptimized ? 'IS' : 'is NOT'} optimized`);

    await landscapePage.screenshot({
        path: 'tests/screenshots/mobile-landscape-optimized.png',
        fullPage: true
    });
    console.log('\n📸 Screenshot: tests/screenshots/mobile-landscape-optimized.png');

    await landscapeContext.close();

    console.log('\n✅ All tests completed!\n');
    await browser.close();

})();