cv-site/tests/test-zoom-toggle.mjs

import { chromium } from '@playwright/test';

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 }
  });
  const page = await context.newPage();

  console.log('🧪 Testing Zoom Toggle Button Implementation...\n');

  // Navigate to the page
  await page.goto('http://localhost:1999');
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(1000);

  console.log('✅ Page loaded');

  // Test 1: Check for blinking - zoom control should be hidden from start
  console.log('\n📋 Test 1: No blinking on load (zoom should start hidden)');

  const zoomControl = page.locator('#zoom-control');
  const isHidden = await zoomControl.evaluate(el => el.classList.contains('zoom-hidden'));

  if (isHidden) {
    console.log('✅ PASS: Zoom control starts hidden (no blinking)');
  } else {
    console.log('❌ FAIL: Zoom control is visible on load (will blink)');
  }

  // Test 2: Verify toggle button exists and is positioned correctly
  console.log('\n📋 Test 2: Toggle button exists and positioned');

  const toggleBtn = page.locator('#zoom-toggle-button');
  await toggleBtn.waitFor({ state: 'visible', timeout: 5000 });

  const toggleBox = await toggleBtn.boundingBox();
  console.log(`✅ Toggle button found at position: left=${toggleBox.x}px, top=${toggleBox.y}px`);

  // Test 3: Check initial state (should be dimmed)
  console.log('\n📋 Test 3: Toggle button initial state (should be dimmed)');

  const hasActiveClass = await toggleBtn.evaluate(el => el.classList.contains('zoom-active'));
  const opacity = await toggleBtn.evaluate(el => window.getComputedStyle(el).opacity);

  if (!hasActiveClass && parseFloat(opacity) === 0.5) {
    console.log('✅ PASS: Toggle button is dimmed (opacity 0.5, no zoom-active class)');
  } else {
    console.log(`❌ FAIL: Toggle button state incorrect (zoom-active: ${hasActiveClass}, opacity: ${opacity})`);
  }

  // Test 4: Click toggle button to show zoom
  console.log('\n📋 Test 4: Click toggle button to show zoom');

  await toggleBtn.click();
  await page.waitForTimeout(500);

  const zoomVisible = await zoomControl.evaluate(el => !el.classList.contains('zoom-hidden'));
  const toggleActive = await toggleBtn.evaluate(el => el.classList.contains('zoom-active'));
  const newOpacity = await toggleBtn.evaluate(el => window.getComputedStyle(el).opacity);

  if (zoomVisible && toggleActive && parseFloat(newOpacity) === 1) {
    console.log('✅ PASS: Zoom control shown, toggle button active (opacity 1, blue background)');
  } else {
    console.log(`❌ FAIL: Zoom toggle failed (visible: ${zoomVisible}, active: ${toggleActive}, opacity: ${newOpacity})`);
  }

  // Test 5: Click toggle button again to hide zoom
  console.log('\n📋 Test 5: Click toggle button to hide zoom');

  await toggleBtn.click();
  await page.waitForTimeout(500);

  const zoomHidden = await zoomControl.evaluate(el => el.classList.contains('zoom-hidden'));
  const toggleInactive = await toggleBtn.evaluate(el => !el.classList.contains('zoom-active'));
  const dimOpacity = await toggleBtn.evaluate(el => window.getComputedStyle(el).opacity);

  if (zoomHidden && toggleInactive && parseFloat(dimOpacity) === 0.5) {
    console.log('✅ PASS: Zoom control hidden, toggle button dimmed again');
  } else {
    console.log(`❌ FAIL: Zoom toggle hide failed (hidden: ${zoomHidden}, inactive: ${toggleInactive}, opacity: ${dimOpacity})`);
  }

  // Test 6: Verify localStorage persistence
  console.log('\n📋 Test 6: Verify localStorage persistence');

  const storageValue = await page.evaluate(() => localStorage.getItem('cv-zoom-visible'));
  console.log(`   localStorage cv-zoom-visible: "${storageValue}"`);

  if (storageValue === 'false') {
    console.log('✅ PASS: localStorage correctly set to "false"');
  } else {
    console.log(`❌ FAIL: localStorage incorrect (expected "false", got "${storageValue}")`);
  }

  // Test 7: Refresh page and verify zoom stays hidden
  console.log('\n📋 Test 7: Refresh page and verify no blinking + stays hidden');

  await page.reload();
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(500); // Wait a bit to catch any blinking

  const stillHidden = await zoomControl.evaluate(el => el.classList.contains('zoom-hidden'));
  const toggleStillDimmed = await toggleBtn.evaluate(el => !el.classList.contains('zoom-active'));

  if (stillHidden && toggleStillDimmed) {
    console.log('✅ PASS: After refresh, zoom stays hidden and toggle stays dimmed');
  } else {
    console.log(`❌ FAIL: After refresh, state incorrect (hidden: ${stillHidden}, dimmed: ${toggleStillDimmed})`);
  }

  // Test 8: Show zoom again and refresh to test persistence
  console.log('\n📋 Test 8: Show zoom, refresh, verify it stays visible');

  await toggleBtn.click();
  await page.waitForTimeout(500);

  await page.reload();
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(500);

  const staysVisible = await zoomControl.evaluate(el => !el.classList.contains('zoom-hidden'));
  const toggleStaysActive = await toggleBtn.evaluate(el => el.classList.contains('zoom-active'));

  if (staysVisible && toggleStaysActive) {
    console.log('✅ PASS: After refresh, zoom stays visible and toggle stays active');
  } else {
    console.log(`❌ FAIL: Persistence failed (visible: ${staysVisible}, active: ${toggleStaysActive})`);
  }

  // Test 9: Test X button still works
  console.log('\n📋 Test 9: Test X button close functionality');

  const closeBtn = page.locator('#zoom-close');
  await closeBtn.click();
  await page.waitForTimeout(500);

  const closedByX = await zoomControl.evaluate(el => el.classList.contains('zoom-hidden'));
  const toggleDimmedAgain = await toggleBtn.evaluate(el => !el.classList.contains('zoom-active'));

  if (closedByX && toggleDimmedAgain) {
    console.log('✅ PASS: X button closes zoom and syncs toggle button state');
  } else {
    console.log(`❌ FAIL: X button failed (hidden: ${closedByX}, toggle dimmed: ${toggleDimmedAgain})`);
  }

  // Test 10: Verify button positioning relative to shortcuts button
  console.log('\n📋 Test 10: Verify button positioning');

  const shortcutsBtn = page.locator('#shortcuts-button');
  const shortcutsBox = await shortcutsBtn.boundingBox();

  console.log(`   Shortcuts button: bottom=${1080 - shortcutsBox.y}px (should be ~6rem = ~96px)`);
  console.log(`   Toggle button: bottom=${1080 - toggleBox.y}px (should be ~10rem = ~160px)`);

  const verticalGap = (1080 - toggleBox.y - toggleBox.height) - (1080 - shortcutsBox.y);
  console.log(`   Vertical gap between buttons: ${Math.abs(verticalGap)}px`);

  if (Math.abs(verticalGap) > 50) {
    console.log('✅ PASS: Toggle button is clearly above shortcuts button');
  } else {
    console.log('⚠️  WARNING: Buttons might be too close together');
  }

  console.log('\n🎯 All tests completed! Browser will stay open for 10 seconds for visual inspection...\n');

  await page.waitForTimeout(10000);

  await browser.close();
  console.log('✅ Test suite finished');
})();