cv-site/tests/mjs/52-mobile-device-detection-test.mjs

#!/usr/bin/env node

import { chromium } from 'playwright';

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

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

    console.log('🧪 Testing Mobile Device Detection and Button Visibility\n');

    // TEST 1: Simulate mobile device (iPhone)
    console.log('📱 TEST 1: iPhone User Agent (Real Mobile Device)\n');
    const mobileContext = await browser.newContext({
        viewport: MOBILE_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 mobilePage = await mobileContext.newPage();

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

    const mobileDeviceClass = await mobilePage.evaluate(() => {
        return {
            hasClass: document.documentElement.classList.contains('is-mobile-device'),
            allClasses: document.documentElement.className
        };
    });

    const shortcutsVisible = await mobilePage.locator('.shortcuts-btn').isVisible().catch(() => false);

    console.log('Device Detection:');
    console.log(`  • has 'is-mobile-device' class: ${mobileDeviceClass.hasClass ? '✅' : '❌'}`);
    console.log(`  • All classes: ${mobileDeviceClass.allClasses}`);
    console.log(`\nShortcuts Button:`);
    console.log(`  • Visible: ${shortcutsVisible ? '❌ WRONG' : '✅ HIDDEN (correct)'}`);

    await mobileContext.close();

    // TEST 2: Desktop browser in mobile view
    console.log('\n🖥️  TEST 2: Desktop User Agent in Mobile View\n');
    const desktopContext = await browser.newContext({
        viewport: MOBILE_VIEWPORT,
        userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
        hasTouch: false
    });
    const desktopPage = await desktopContext.newPage();

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

    const desktopDeviceClass = await desktopPage.evaluate(() => {
        return {
            hasClass: document.documentElement.classList.contains('is-desktop'),
            allClasses: document.documentElement.className
        };
    });

    const shortcutsVisibleDesktop = await desktopPage.locator('.shortcuts-btn').isVisible().catch(() => false);

    console.log('Device Detection:');
    console.log(`  • has 'is-desktop' class: ${desktopDeviceClass.hasClass ? '✅' : '❌'}`);
    console.log(`  • All classes: ${desktopDeviceClass.allClasses}`);
    console.log(`\nShortcuts Button:`);
    console.log(`  • Visible: ${shortcutsVisibleDesktop ? '✅ VISIBLE (correct for testing)' : '❌ HIDDEN'}`);

    await desktopContext.close();

    const allPassed = mobileDeviceClass.hasClass && !shortcutsVisible &&
                      desktopDeviceClass.hasClass && shortcutsVisibleDesktop;

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

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