From 3fdfacf2fe01c89294595cfc6e228f36a027fed9 Mon Sep 17 00:00:00 2001 From: juanatsap Date: Mon, 24 Nov 2025 20:49:37 +0000 Subject: [PATCH] test: Add landscape layout and button opacity test suites Added comprehensive test coverage for mobile fixes: 1. test 50: Landscape Layout Diagnostic (50-landscape-layout-check.mjs) Purpose: Verify single-column layout in landscape orientation Tests: - Grid template columns detection - Sidebar and main content widths - 2-column vs 1-column layout verification Viewport: 844x390 (iPhone 14 Pro landscape) Expected: Single column (1fr) grid layout 2. test 51: Mobile Button Opacity Test (51-mobile-button-opacity-test.mjs) Purpose: Verify all mobile buttons have full opacity (no transparency) Tests: - Background color alpha channel (should be 1.0) - CSS opacity property (should be 1.0) - Checks all 6 buttons: download, print, shortcuts, info, back-to-top, theme Viewport: 375x667 (iPhone SE portrait) Expected: All buttons at full opacity with blur bar backdrop Test Organization: - Numbered sequence: 48-52 (continuing from existing tests) - Test 48: Mobile landscape and blur bar - Test 49: Mobile light theme default - Test 50: Landscape layout verification (NEW) - Test 51: Button opacity verification (NEW) - Test 52: Device detection and shortcuts visibility All tests are executable with proper shebang (#!/usr/bin/env node) Run with: node tests/mjs/[test-number]-[test-name].mjs --- tests/mjs/50-landscape-layout-check.mjs | 73 +++++++++++++++++++++ tests/mjs/51-mobile-button-opacity-test.mjs | 64 ++++++++++++++++++ 2 files changed, 137 insertions(+) create mode 100755 tests/mjs/50-landscape-layout-check.mjs create mode 100755 tests/mjs/51-mobile-button-opacity-test.mjs diff --git a/tests/mjs/50-landscape-layout-check.mjs b/tests/mjs/50-landscape-layout-check.mjs new file mode 100755 index 0000000..a84d45d --- /dev/null +++ b/tests/mjs/50-landscape-layout-check.mjs @@ -0,0 +1,73 @@ +#!/usr/bin/env node + +import { chromium } from 'playwright'; + +const LANDSCAPE = { width: 844, height: 390 }; // iPhone 14 Pro landscape + +(async () => { + const browser = await chromium.launch({ headless: true }); + const context = await browser.newContext({ viewport: LANDSCAPE }); + const page = await context.newPage(); + + console.log('๐Ÿ“ฑ Checking iPhone Landscape Layout\n'); + + await page.goto('http://localhost:1999/?lang=en&view=extended'); + await page.waitForLoadState('networkidle'); + + // Check key layout elements + const pageContent = await page.locator('.page-content').first(); + const sidebar = await page.locator('.cv-sidebar').first(); + const cvMain = await page.locator('.cv-main').first(); + + const pageContentStyles = await pageContent.evaluate(el => { + const computed = window.getComputedStyle(el); + return { + display: computed.display, + gridTemplateColumns: computed.gridTemplateColumns + }; + }); + + const sidebarStyles = await sidebar.evaluate(el => { + const computed = window.getComputedStyle(el); + return { + display: computed.display, + width: computed.width + }; + }); + + const mainStyles = await cvMain.evaluate(el => { + const computed = window.getComputedStyle(el); + return { + display: computed.display, + width: computed.width + }; + }); + + console.log('๐Ÿ“Š Layout Analysis:\n'); + console.log('Page Content:'); + console.log(` โ€ข Display: ${pageContentStyles.display}`); + console.log(` โ€ข Grid Template Columns: ${pageContentStyles.gridTemplateColumns}`); + console.log(` โ€ข Expected: Should be single column (1fr) on mobile\n`); + + console.log('Sidebar:'); + console.log(` โ€ข Display: ${sidebarStyles.display}`); + console.log(` โ€ข Width: ${sidebarStyles.width}\n`); + + console.log('Main Content:'); + console.log(` โ€ข Display: ${mainStyles.display}`); + console.log(` โ€ข Width: ${mainStyles.width}\n`); + + // Check if it's a 2-column layout (wrong) or 1-column (correct) + const isTwoColumn = pageContentStyles.gridTemplateColumns && + pageContentStyles.gridTemplateColumns.includes('minmax'); + + console.log(`Layout Type: ${isTwoColumn ? 'โŒ TWO COLUMNS (WRONG)' : 'โœ… SINGLE COLUMN (CORRECT)'}\n`); + + await page.screenshot({ + path: 'tests/screenshots/landscape-layout-detailed.png', + fullPage: true + }); + console.log('๐Ÿ“ธ Screenshot: tests/screenshots/landscape-layout-detailed.png\n'); + + await browser.close(); +})(); diff --git a/tests/mjs/51-mobile-button-opacity-test.mjs b/tests/mjs/51-mobile-button-opacity-test.mjs new file mode 100755 index 0000000..1ea77b6 --- /dev/null +++ b/tests/mjs/51-mobile-button-opacity-test.mjs @@ -0,0 +1,64 @@ +#!/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, + ignoreHTTPSErrors: true + }); + const page = await context.newPage(); + + console.log('๐Ÿงช Testing Mobile Button Opacity (Should be Full - No Transparency)\n'); + + await page.goto('http://localhost:1999/?lang=en&view=extended'); + await page.waitForLoadState('networkidle'); + + // Check button opacities and backgrounds + const buttons = { + download: await page.locator('.download-btn'), + print: await page.locator('.print-friendly-btn'), + shortcuts: await page.locator('.shortcuts-btn'), + info: await page.locator('.info-button'), + backToTop: await page.locator('.back-to-top'), + theme: await page.locator('.color-theme-switcher') + }; + + console.log('๐Ÿ“Š Button Opacity Check:\n'); + + for (const [name, button] of Object.entries(buttons)) { + const styles = await button.evaluate(el => { + const computed = window.getComputedStyle(el); + const bg = computed.backgroundColor; + + // Extract rgba values + const match = bg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/); + const alpha = match && match[4] ? parseFloat(match[4]) : 1.0; + + return { + background: bg, + opacity: computed.opacity, + alpha: alpha + }; + }); + + const isFullOpacity = styles.alpha === 1.0 && parseFloat(styles.opacity) === 1.0; + + console.log(`${name}:`); + console.log(` โ€ข Background: ${styles.background}`); + console.log(` โ€ข Opacity: ${styles.opacity}`); + console.log(` โ€ข Alpha: ${styles.alpha}`); + console.log(` โ€ข Full opacity: ${isFullOpacity ? 'โœ…' : 'โŒ'}\n`); + } + + await page.screenshot({ + path: 'tests/screenshots/mobile-buttons-full-opacity.png', + fullPage: true + }); + console.log('๐Ÿ“ธ Screenshot: tests/screenshots/mobile-buttons-full-opacity.png\n'); + + await browser.close(); +})();