cv-site/tests/mjs/32-all-tooltips-final-test.mjs

#!/usr/bin/env bun
import { chromium } from 'playwright';

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

  console.log('========================================');
  console.log('  COMPREHENSIVE TOOLTIP TEST');
  console.log('  Testing ALL buttons on desktop & mobile');
  console.log('========================================\n');

  // ========== DESKTOP TEST ==========
  console.log('📱 DESKTOP TEST (1920x1080)');
  console.log('─────────────────────────────\n');

  const desktopPage = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
  await desktopPage.goto('http://localhost:1999/');
  await desktopPage.waitForLoadState('networkidle');
  await desktopPage.waitForTimeout(1000);

  const desktopButtons = [
    { id: 'download-button', name: 'Download PDF', expectedPosition: 'right' },
    { id: 'print-friendly-button', name: 'Print Friendly', expectedPosition: 'right' },
    { id: 'zoom-toggle-button', name: 'Zoom Toggle', expectedPosition: 'right' },
    { id: 'shortcuts-button', name: 'Keyboard Shortcuts', expectedPosition: 'right' },
    { id: 'color-theme-switcher', name: 'Theme Switcher', expectedPosition: 'right' },
    { id: 'info-button', name: 'Info Button', expectedPosition: 'right' },
    { id: 'back-to-top', name: 'Back to Top', expectedPosition: 'left' }
  ];

  for (const btn of desktopButtons) {
    const button = desktopPage.locator(`#${btn.id}`);
    const exists = await button.count() > 0;

    if (!exists) {
      console.log(`❌ ${btn.name}: NOT FOUND in DOM`);
      continue;
    }

    const isVisible = await button.isVisible();
    console.log(`${isVisible ? '✅' : '❌'} ${btn.name}: ${isVisible ? 'Visible' : 'Not visible'}`);

    if (isVisible) {
      // Test tooltip
      await button.hover();
      await desktopPage.waitForTimeout(300);

      const tooltip = await desktopPage.evaluate((id) => {
        const btn = document.getElementById(id);
        if (!btn) return null;

        const computed = window.getComputedStyle(btn, '::before');
        return {
          opacity: computed.opacity,
          visibility: computed.visibility,
          content: computed.content,
          position: computed.position
        };
      }, btn.id);

      if (tooltip && parseFloat(tooltip.opacity) > 0.5) {
        console.log(`   💬 Tooltip: VISIBLE (opacity: ${tooltip.opacity})`);
      } else {
        console.log(`   ⚠️  Tooltip: NOT visible or low opacity`);
      }
    }
  }

  await desktopPage.screenshot({
    path: '/Users/txeo/Git/yo/cv/tests/mjs/screenshots/all-tooltips-desktop.png',
    fullPage: false
  });
  console.log('\n📸 Desktop screenshot saved\n');

  await desktopPage.close();

  // ========== MOBILE TEST ==========
  console.log('📱 MOBILE TEST (375x667 - iPhone SE)');
  console.log('─────────────────────────────\n');

  const mobilePage = await browser.newPage({ viewport: { width: 375, height: 667 } });
  await mobilePage.goto('http://localhost:1999/');
  await mobilePage.waitForLoadState('networkidle');
  await mobilePage.waitForTimeout(1000);

  const mobileButtons = [
    { id: 'download-button', name: 'Download PDF' },
    { id: 'print-friendly-button', name: 'Print Friendly' },
    { id: 'shortcuts-button', name: 'Keyboard Shortcuts' },
    { id: 'color-theme-switcher', name: 'Theme Switcher' },
    { id: 'info-button', name: 'Info Button' }
  ];

  console.log('Checking button visibility and positions on mobile...\n');

  for (const btn of mobileButtons) {
    const button = mobilePage.locator(`#${btn.id}`);
    const exists = await button.count() > 0;

    if (!exists) {
      console.log(`❌ ${btn.name}: NOT FOUND`);
      continue;
    }

    const isVisible = await button.isVisible();
    const box = isVisible ? await button.boundingBox() : null;

    if (isVisible && box) {
      // Check if button is in bottom dock (y > 500 for iPhone SE height 667)
      const inBottomDock = box.y > 500;
      console.log(`${isVisible ? '✅' : '❌'} ${btn.name}: Visible at y=${Math.round(box.y)} ${inBottomDock ? '(bottom dock)' : ''}`);

      // Tooltips are hidden on mobile touch devices, so we don't test them
    } else {
      console.log(`❌ ${btn.name}: Not visible or no bounding box`);
    }
  }

  await mobilePage.screenshot({
    path: '/Users/txeo/Git/yo/cv/tests/mjs/screenshots/all-tooltips-mobile.png',
    fullPage: true
  });
  console.log('\n📸 Mobile screenshot saved\n');

  await mobilePage.close();

  // ========== SUMMARY ==========
  console.log('========================================');
  console.log('  TEST COMPLETE');
  console.log('========================================');
  console.log('\n✅ All tests completed successfully!');
  console.log('📸 Screenshots saved to tests/mjs/screenshots/\n');

  await browser.close();
})();