cv-site/tests/mjs/54-landscape-mode-test.mjs

#!/usr/bin/env node

import { chromium } from 'playwright';

const LANDSCAPE_VIEWPORT = { width: 667, height: 375 }; // iPhone SE landscape

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

    console.log('🧪 Testing Landscape Mode Layout\n');

    // TEST 1: Android Landscape
    console.log('📱 TEST 1: Android Landscape (Pixel 5)\n');
    const androidContext = await browser.newContext({
        viewport: LANDSCAPE_VIEWPORT,
        userAgent: 'Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.91 Mobile Safari/537.36',
        hasTouch: true
    });
    const androidPage = await androidContext.newPage();

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

    const androidLayout = await androidPage.evaluate(() => {
        const page1 = document.querySelector('.page-1 .page-content');
        const sidebar = document.querySelector('.cv-sidebar-left');
        const hamburger = document.querySelector('.hamburger-btn'); // Correct class name
        const photo = document.querySelector('.cv-photo');
        const buttons = document.querySelector('.download-btn');

        const gridCols = window.getComputedStyle(page1).gridTemplateColumns;
        // Single column if it's just one value (e.g., "667px" not "300px 667px")
        const singleColumn = !gridCols.includes(' ');

        return {
            gridColumns: gridCols,
            singleColumn: singleColumn,
            hamburgerVisible: hamburger ? window.getComputedStyle(hamburger).display !== 'none' : false,
            photoMaxWidth: photo ? window.getComputedStyle(photo).maxWidth : 'N/A',
            photoVisible: photo ? window.getComputedStyle(photo).display !== 'none' : false,
            buttonWidth: buttons ? window.getComputedStyle(buttons).width : 'N/A',
            hasHorizontalScroll: document.body.scrollWidth > window.innerWidth
        };
    });

    console.log('Android Landscape Layout:');
    console.log(`  • Grid columns: ${androidLayout.gridColumns}`);
    console.log(`  • Single column: ${androidLayout.singleColumn ? '✅' : '❌'}`);
    console.log(`  • Hamburger menu visible: ${androidLayout.hamburgerVisible ? '✅' : '❌'}`);
    console.log(`  • Photo max-width: ${androidLayout.photoMaxWidth}`);
    console.log(`  • Photo visible: ${androidLayout.photoVisible ? '✅' : '❌'}`);
    console.log(`  • Button width: ${androidLayout.buttonWidth}`);
    console.log(`  • Has horizontal scroll: ${androidLayout.hasHorizontalScroll ? '❌ FAIL' : '✅'}\n`);

    await androidPage.screenshot({
        path: 'tests/screenshots/landscape-android.png',
        fullPage: true
    });

    await androidContext.close();

    // TEST 2: iPhone Landscape
    console.log('📱 TEST 2: iPhone Landscape (iPhone 12)\n');
    const iphoneContext = await browser.newContext({
        viewport: { width: 844, height: 390 }, // iPhone 12 landscape
        userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1',
        hasTouch: true
    });
    const iphonePage = await iphoneContext.newPage();

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

    const iphoneLayout = await iphonePage.evaluate(() => {
        const page1 = document.querySelector('.page-1 .page-content');
        const photo = document.querySelector('.cv-photo');
        const buttons = document.querySelector('.download-btn');

        const gridCols = window.getComputedStyle(page1).gridTemplateColumns;
        // Single column if it's just one value (e.g., "844px" not "300px 844px")
        const singleColumn = !gridCols.includes(' ');

        return {
            gridColumns: gridCols,
            singleColumn: singleColumn,
            photoMaxWidth: photo ? window.getComputedStyle(photo).maxWidth : 'N/A',
            photoVisible: photo ? window.getComputedStyle(photo).display !== 'none' : false,
            buttonWidth: buttons ? window.getComputedStyle(buttons).width : 'N/A',
            hasHorizontalScroll: document.body.scrollWidth > window.innerWidth
        };
    });

    console.log('iPhone Landscape Layout:');
    console.log(`  • Grid columns: ${iphoneLayout.gridColumns}`);
    console.log(`  • Single column: ${iphoneLayout.singleColumn ? '✅' : '❌'}`);
    console.log(`  • Photo max-width: ${iphoneLayout.photoMaxWidth}`);
    console.log(`  • Photo visible: ${iphoneLayout.photoVisible ? '✅' : '❌'}`);
    console.log(`  • Button width: ${iphoneLayout.buttonWidth}`);
    console.log(`  • Has horizontal scroll: ${iphoneLayout.hasHorizontalScroll ? '❌ FAIL' : '✅'}\n`);

    await iphonePage.screenshot({
        path: 'tests/screenshots/landscape-iphone.png',
        fullPage: true
    });

    await iphoneContext.close();

    const allPassed = androidLayout.singleColumn && !androidLayout.hasHorizontalScroll &&
                      androidLayout.hamburgerVisible && androidLayout.photoVisible &&
                      iphoneLayout.singleColumn && !iphoneLayout.hasHorizontalScroll &&
                      iphoneLayout.photoVisible;

    console.log(`${allPassed ? '✅' : '❌'} Tests ${allPassed ? 'PASSED' : 'FAILED'}\n`);

    await browser.close();
    process.exit(allPassed ? 0 : 1);
})();