cv-site/tests/mjs/35-ipad-sidebar-visibility.test.mjs

#!/usr/bin/env bun
/**
 * IPAD SIDEBAR VISIBILITY TEST
 * ============================
 * Tests that sidebar content is visible on iPad/tablet (no hover support)
 * Bug: Sidebar content was hidden on 901-1280px screens, requiring hover to show
 * Fix: Added (hover: hover) media query condition
 */

import { chromium } from 'playwright';

const URL = "http://localhost:1999";

// iPad viewport sizes
const VIEWPORTS = {
  ipadPortrait: { width: 768, height: 1024 },
  ipadLandscape: { width: 1024, height: 768 },
  ipadProPortrait: { width: 1024, height: 1366 },
  ipadProLandscape: { width: 1366, height: 1024 },
};

async function testIPadSidebarVisibility() {
  console.log('📱 IPAD SIDEBAR VISIBILITY TEST\n');
  console.log('='.repeat(70));

  const browser = await chromium.launch({ headless: true });
  const testResults = [];

  for (const [name, viewport] of Object.entries(VIEWPORTS)) {
    console.log(`\n📐 Testing ${name} (${viewport.width}x${viewport.height})...`);

    // Create context WITHOUT hover support (simulates touch device)
    const context = await browser.newContext({
      viewport,
      hasTouch: true,  // Simulate touch device
    });

    const page = await context.newPage();
    await page.goto(URL);
    await page.waitForTimeout(1500);

    // Check if sidebar content is visible
    const sidebarTest = await page.evaluate(() => {
      const sidebarContents = document.querySelectorAll('.sidebar-content');
      const results = [];

      sidebarContents.forEach((content, index) => {
        const style = window.getComputedStyle(content);
        const isVisible = style.opacity !== '0' &&
                         style.maxHeight !== '0px' &&
                         style.display !== 'none' &&
                         style.visibility !== 'hidden';
        const height = content.offsetHeight;

        results.push({
          index,
          isVisible,
          opacity: style.opacity,
          maxHeight: style.maxHeight,
          height,
          display: style.display
        });
      });

      return {
        totalSidebarContents: sidebarContents.length,
        visibleCount: results.filter(r => r.isVisible).length,
        details: results
      };
    });

    const passed = sidebarTest.visibleCount === sidebarTest.totalSidebarContents;

    console.log(`   Total sidebar sections: ${sidebarTest.totalSidebarContents}`);
    console.log(`   Visible sections: ${sidebarTest.visibleCount}`);
    console.log(`   ${passed ? '✅ PASS' : '❌ FAIL'} - Sidebar content ${passed ? 'is' : 'NOT'} visible`);

    if (!passed) {
      console.log('   Hidden sections:');
      sidebarTest.details.filter(d => !d.isVisible).forEach(d => {
        console.log(`     - Section ${d.index}: opacity=${d.opacity}, maxHeight=${d.maxHeight}`);
      });
    }

    testResults.push({ name, passed, ...sidebarTest });
    await context.close();
  }

  // Summary
  console.log("\n" + "=".repeat(70));
  console.log("📊 TEST SUMMARY\n");

  const passedCount = testResults.filter(r => r.passed).length;
  const totalCount = testResults.length;

  testResults.forEach(result => {
    console.log(`   ${result.passed ? '✅' : '❌'} ${result.name}`);
  });

  console.log(`\n   Total: ${passedCount}/${totalCount} tests passed`);
  console.log("=".repeat(70) + "\n");

  await browser.close();

  if (passedCount === totalCount) {
    console.log("🎉 IPAD SIDEBAR VISIBILITY VALIDATED!");
    process.exit(0);
  } else {
    console.log("⚠️  SOME TESTS FAILED - Sidebar content hidden on touch devices");
    process.exit(1);
  }
}

await testIPadSidebarVisibility();