cv-site/tests/mjs/59-landscape-photo-and-backdrop-test.mjs

#!/usr/bin/env node

import { chromium } from 'playwright';

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

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

    console.log('🧪 Testing Landscape Mode: Photo Layout & Button Backdrop\n');

    // TEST 1: iPhone SE Landscape
    console.log('📱 TEST 1: iPhone SE Landscape (667×375)\n');
    const seContext = await browser.newContext({
        viewport: LANDSCAPE_VIEWPORT,
        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 sePage = await seContext.newPage();

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

    const seLayout = await sePage.evaluate(() => {
        const headerLeft = document.querySelector('.cv-header-left');
        const photo = document.querySelector('.cv-photo');
        const backdrop = document.querySelector('.fixed-buttons-backdrop');
        const cvName = document.querySelector('.cv-name');

        const headerGrid = headerLeft ? window.getComputedStyle(headerLeft).gridTemplateColumns : 'N/A';
        const twoColumns = headerGrid.includes(' '); // Has space = multiple columns

        const photoRect = photo ? photo.getBoundingClientRect() : null;
        const nameRect = cvName ? cvName.getBoundingClientRect() : null;

        // Photo should be on the right side (higher x position than name)
        const photoOnRight = photoRect && nameRect && photoRect.left > nameRect.left;

        return {
            viewport: `${window.innerWidth}×${window.innerHeight}`,
            headerGrid: headerGrid,
            twoColumns: twoColumns,
            photoWidth: photoRect ? Math.round(photoRect.width) : 0,
            photoLeft: photoRect ? Math.round(photoRect.left) : 0,
            nameLeft: nameRect ? Math.round(nameRect.left) : 0,
            photoOnRight: photoOnRight,
            nameAlign: cvName ? window.getComputedStyle(cvName).textAlign : 'N/A',
            backdropVisible: backdrop ? window.getComputedStyle(backdrop).display !== 'none' : false,
            backdropHeight: backdrop ? window.getComputedStyle(backdrop).height : 'N/A',
            hasHorizontalScroll: document.body.scrollWidth > window.innerWidth
        };
    });

    console.log('iPhone SE Landscape Layout:');
    console.log(`  • Viewport: ${seLayout.viewport}`);
    console.log(`  • Header grid: ${seLayout.headerGrid}`);
    console.log(`  • Two-column layout: ${seLayout.twoColumns ? '✅' : '❌'}`);
    console.log(`  • Photo width: ${seLayout.photoWidth}px`);
    console.log(`  • Photo on right side: ${seLayout.photoOnRight ? '✅' : '❌'} (Photo: ${seLayout.photoLeft}px, Name: ${seLayout.nameLeft}px)`);
    console.log(`  • Name alignment: ${seLayout.nameAlign}`);
    console.log(`  • Button backdrop visible: ${seLayout.backdropVisible ? '✅' : '❌'}`);
    console.log(`  • Backdrop height: ${seLayout.backdropHeight}`);
    console.log(`  • Has horizontal scroll: ${seLayout.hasHorizontalScroll ? '❌ FAIL' : '✅'}\n`);

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

    await seContext.close();

    // TEST 2: iPhone 12 Landscape
    console.log('📱 TEST 2: iPhone 12 Landscape (844×390)\n');
    const iphone12Context = await browser.newContext({
        viewport: 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 iphone12Page = await iphone12Context.newPage();

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

    const iphone12Layout = await iphone12Page.evaluate(() => {
        const headerLeft = document.querySelector('.cv-header-left');
        const photo = document.querySelector('.cv-photo');
        const backdrop = document.querySelector('.fixed-buttons-backdrop');
        const cvName = document.querySelector('.cv-name');

        const headerGrid = headerLeft ? window.getComputedStyle(headerLeft).gridTemplateColumns : 'N/A';
        const twoColumns = headerGrid.includes(' ');

        const photoRect = photo ? photo.getBoundingClientRect() : null;
        const nameRect = cvName ? cvName.getBoundingClientRect() : null;
        const photoOnRight = photoRect && nameRect && photoRect.left > nameRect.left;

        return {
            viewport: `${window.innerWidth}×${window.innerHeight}`,
            headerGrid: headerGrid,
            twoColumns: twoColumns,
            photoWidth: photoRect ? Math.round(photoRect.width) : 0,
            photoLeft: photoRect ? Math.round(photoRect.left) : 0,
            nameLeft: nameRect ? Math.round(nameRect.left) : 0,
            photoOnRight: photoOnRight,
            nameAlign: cvName ? window.getComputedStyle(cvName).textAlign : 'N/A',
            backdropVisible: backdrop ? window.getComputedStyle(backdrop).display !== 'none' : false,
            backdropHeight: backdrop ? window.getComputedStyle(backdrop).height : 'N/A',
            hasHorizontalScroll: document.body.scrollWidth > window.innerWidth
        };
    });

    console.log('iPhone 12 Landscape Layout:');
    console.log(`  • Viewport: ${iphone12Layout.viewport}`);
    console.log(`  • Header grid: ${iphone12Layout.headerGrid}`);
    console.log(`  • Two-column layout: ${iphone12Layout.twoColumns ? '✅' : '❌'}`);
    console.log(`  • Photo width: ${iphone12Layout.photoWidth}px`);
    console.log(`  • Photo on right side: ${iphone12Layout.photoOnRight ? '✅' : '❌'} (Photo: ${iphone12Layout.photoLeft}px, Name: ${iphone12Layout.nameLeft}px)`);
    console.log(`  • Name alignment: ${iphone12Layout.nameAlign}`);
    console.log(`  • Button backdrop visible: ${iphone12Layout.backdropVisible ? '✅' : '❌'}`);
    console.log(`  • Backdrop height: ${iphone12Layout.backdropHeight}`);
    console.log(`  • Has horizontal scroll: ${iphone12Layout.hasHorizontalScroll ? '❌ FAIL' : '✅'}\n`);

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

    await iphone12Context.close();

    const allPassed = seLayout.twoColumns && seLayout.photoOnRight && seLayout.backdropVisible && !seLayout.hasHorizontalScroll &&
                      iphone12Layout.twoColumns && iphone12Layout.photoOnRight && iphone12Layout.backdropVisible && !iphone12Layout.hasHorizontalScroll;

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

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