cv-site/tests/mjs/14-pdf-modal.test.mjs

#!/usr/bin/env bun
/**
 * PDF DOWNLOAD MODAL TEST
 * =======================
 * Tests PDF download modal with interactive thumbnail selection
 * - Modal structure and three thumbnail cards
 * - Click-to-select interaction (radio button behavior)
 * - Visual selection feedback (border, shadow, checkmark)
 * - Download button enable/disable logic
 * - Keyboard navigation (Tab, Enter, Space)
 * - ESC key closes modal
 * - Accessibility (ARIA attributes, screen reader)
 * - Responsive layout (mobile/tablet/desktop)
 * - Multilingual support (EN/ES)
 */

import { chromium } from 'playwright';

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

async function testPDFModal() {
  console.log('📄 PDF DOWNLOAD MODAL TEST\n');
  console.log('='.repeat(70));

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

  const errors = [];
  const testResults = [];

  page.on('console', msg => {
    if (msg.type() === 'error') {
      errors.push(msg.text());
      console.log(`❌ ERROR: ${msg.text()}`);
    }
  });

  console.log("\n1️⃣  Loading page...");
  await page.goto(URL);
  await page.waitForTimeout(2000);

  // ========================================================================
  // TEST 1: PDF Modal exists and structure
  // ========================================================================
  console.log("\n2️⃣  Testing PDF Modal Structure...");

  const modalStructure = await page.evaluate(() => {
    const modal = document.querySelector('#pdf-modal');
    if (!modal) return { found: false };

    const optionsGrid = modal.querySelector('.pdf-options-grid');
    const cards = modal.querySelectorAll('.pdf-option-card');
    const downloadBtn = modal.querySelector('.pdf-download-btn');

    return {
      found: true,
      hasGrid: !!optionsGrid,
      cardCount: cards.length,
      hasDownloadBtn: !!downloadBtn,
      cardFormats: Array.from(cards).map(card => card.getAttribute('data-cv-format'))
    };
  });

  if (modalStructure.found) {
    console.log(`   ✅ PDF modal found`);
    console.log(`   Options grid: ${modalStructure.hasGrid ? '✅' : '❌'}`);
    console.log(`   Cards found: ${modalStructure.cardCount} (expected: 3)`);
    console.log(`   Card formats: ${modalStructure.cardFormats.join(', ')}`);
    console.log(`   Download button: ${modalStructure.hasDownloadBtn ? '✅' : '❌'}`);

    const structureValid = modalStructure.hasGrid &&
                           modalStructure.cardCount === 3 &&
                           modalStructure.hasDownloadBtn;
    console.log(`   ${structureValid ? '✅ PASS' : '❌ FAIL'} - Modal structure valid`);
    testResults.push({ test: 'Modal Structure', passed: structureValid });
  } else {
    console.log(`   ❌ FAIL - PDF modal not found`);
    testResults.push({ test: 'Modal Structure', passed: false });
  }

  // ========================================================================
  // TEST 2: Open PDF Modal
  // ========================================================================
  console.log("\n3️⃣  Testing Modal Opening...");

  // Find and click PDF button/trigger
  const pdfTriggers = [
    '[data-modal-trigger="pdf"]',
    '.pdf-btn',
    '#pdf-btn',
    '.download-pdf',
    'button[onclick*="pdf-modal"]'
  ];

  let modalOpened = false;
  for (const selector of pdfTriggers) {
    const trigger = await page.$(selector);
    if (trigger) {
      console.log(`   Found trigger: ${selector}`);
      await trigger.click();
      await page.waitForTimeout(500);

      const isOpen = await page.evaluate(() => {
        const modal = document.querySelector('#pdf-modal');
        return modal && modal.hasAttribute('open');
      });

      if (isOpen) {
        modalOpened = true;
        console.log(`   ✅ Modal opened successfully`);
        break;
      }
    }
  }

  if (!modalOpened) {
    console.log(`   ⚠️  Could not find PDF modal trigger - trying direct open`);
    await page.evaluate(() => {
      const modal = document.querySelector('#pdf-modal');
      if (modal) modal.showModal();
    });
    await page.waitForTimeout(300);
    modalOpened = await page.evaluate(() => {
      const modal = document.querySelector('#pdf-modal');
      return modal && modal.hasAttribute('open');
    });
  }

  console.log(`   ${modalOpened ? '✅ PASS' : '❌ FAIL'} - Modal opens`);
  testResults.push({ test: 'Modal Opens', passed: modalOpened });

  if (!modalOpened) {
    console.log("\n⚠️  Cannot continue tests - modal not open");
    await summarizeAndExit(testResults, errors, page);
    return;
  }

  // Take screenshot of initial state
  await page.screenshot({ path: 'tests/screenshots/pdf-modal-initial.png', fullPage: false });
  console.log(`   📸 Screenshot saved: tests/screenshots/pdf-modal-initial.png`);

  // ========================================================================
  // TEST 3: Three thumbnail cards visible
  // ========================================================================
  console.log("\n4️⃣  Testing Thumbnail Cards...");

  const thumbnails = await page.evaluate(() => {
    const cards = document.querySelectorAll('#pdf-modal .pdf-option-card');
    return Array.from(cards).map(card => {
      const format = card.getAttribute('data-cv-format');
      const thumbnail = card.querySelector('.pdf-thumbnail');
      const info = card.querySelector('.pdf-option-info h3');
      const badge = card.querySelector('.pdf-option-badge');
      const skeletonBlocks = card.querySelectorAll('.skeleton-block');

      return {
        format,
        hasThumbnail: !!thumbnail,
        hasInfo: !!info,
        infoText: info?.textContent || '',
        hasBadge: !!badge,
        skeletonCount: skeletonBlocks.length
      };
    });
  });

  thumbnails.forEach((thumb, i) => {
    console.log(`   Card ${i + 1} (${thumb.format}):`);
    console.log(`     - Thumbnail: ${thumb.hasThumbnail ? '✅' : '❌'}`);
    console.log(`     - Info: ${thumb.hasInfo ? '✅' : '❌'} (${thumb.infoText})`);
    console.log(`     - Badge: ${thumb.hasBadge ? '✅' : '❌'}`);
    console.log(`     - Skeleton blocks: ${thumb.skeletonCount}`);
  });

  const thumbnailsValid = thumbnails.length === 3 &&
                          thumbnails.every(t => t.hasThumbnail && t.hasInfo && t.hasBadge);
  console.log(`   ${thumbnailsValid ? '✅ PASS' : '❌ FAIL'} - All thumbnails present and structured`);
  testResults.push({ test: 'Thumbnail Cards', passed: thumbnailsValid });

  // ========================================================================
  // TEST 4: Download button initially disabled
  // ========================================================================
  console.log("\n5️⃣  Testing Download Button Initial State...");

  const btnInitialState = await page.evaluate(() => {
    const btn = document.querySelector('#pdf-modal .pdf-download-btn');
    return {
      found: !!btn,
      disabled: btn?.disabled || false,
      text: btn?.textContent.trim() || ''
    };
  });

  console.log(`   Button found: ${btnInitialState.found ? '✅' : '❌'}`);
  console.log(`   Initially disabled: ${btnInitialState.disabled ? '✅' : '❌'}`);
  console.log(`   Button text: "${btnInitialState.text}"`);

  const btnStateValid = btnInitialState.found && btnInitialState.disabled;
  console.log(`   ${btnStateValid ? '✅ PASS' : '❌ FAIL'} - Download button initially disabled`);
  testResults.push({ test: 'Button Initially Disabled', passed: btnStateValid });

  // ========================================================================
  // TEST 5: Click to select Short CV card
  // ========================================================================
  console.log("\n6️⃣  Testing Card Selection (Short CV)...");

  await page.click('#pdf-modal .pdf-option-card[data-cv-format="short"]');
  await page.waitForTimeout(400);

  const shortSelected = await page.evaluate(() => {
    const card = document.querySelector('#pdf-modal .pdf-option-card[data-cv-format="short"]');
    const badge = card?.querySelector('.pdf-option-badge');
    const btn = document.querySelector('#pdf-modal .pdf-download-btn');

    return {
      hasSelectedClass: card?.classList.contains('selected') || false,
      ariaChecked: card?.getAttribute('aria-checked') === 'true',
      badgeVisible: badge && window.getComputedStyle(badge).opacity !== '0',
      buttonEnabled: btn && !btn.disabled
    };
  });

  console.log(`   Selected class: ${shortSelected.hasSelectedClass ? '✅' : '❌'}`);
  console.log(`   ARIA checked: ${shortSelected.ariaChecked ? '✅' : '❌'}`);
  console.log(`   Badge visible: ${shortSelected.badgeVisible ? '✅' : '❌'}`);
  console.log(`   Button enabled: ${shortSelected.buttonEnabled ? '✅' : '❌'}`);

  const selectionValid = shortSelected.hasSelectedClass &&
                         shortSelected.ariaChecked &&
                         shortSelected.badgeVisible &&
                         shortSelected.buttonEnabled;
  console.log(`   ${selectionValid ? '✅ PASS' : '❌ FAIL'} - Short CV selection works`);
  testResults.push({ test: 'Short CV Selection', passed: selectionValid });

  // Take screenshot of selected state
  await page.screenshot({ path: 'tests/screenshots/pdf-modal-short-selected.png', fullPage: false });
  console.log(`   📸 Screenshot saved: tests/screenshots/pdf-modal-short-selected.png`);

  // ========================================================================
  // TEST 6: Switch selection to Long CV (radio behavior)
  // ========================================================================
  console.log("\n7️⃣  Testing Selection Switch (Long CV)...");

  await page.click('#pdf-modal .pdf-option-card[data-cv-format="long"]');
  await page.waitForTimeout(400);

  const selectionSwitch = await page.evaluate(() => {
    const shortCard = document.querySelector('#pdf-modal .pdf-option-card[data-cv-format="short"]');
    const longCard = document.querySelector('#pdf-modal .pdf-option-card[data-cv-format="long"]');

    return {
      shortDeselected: !shortCard?.classList.contains('selected'),
      shortAriaUnchecked: shortCard?.getAttribute('aria-checked') === 'false',
      longSelected: longCard?.classList.contains('selected') || false,
      longAriaChecked: longCard?.getAttribute('aria-checked') === 'true',
      onlyOneSelected: document.querySelectorAll('#pdf-modal .pdf-option-card.selected').length === 1
    };
  });

  console.log(`   Short CV deselected: ${selectionSwitch.shortDeselected ? '✅' : '❌'}`);
  console.log(`   Short ARIA unchecked: ${selectionSwitch.shortAriaUnchecked ? '✅' : '❌'}`);
  console.log(`   Long CV selected: ${selectionSwitch.longSelected ? '✅' : '❌'}`);
  console.log(`   Long ARIA checked: ${selectionSwitch.longAriaChecked ? '✅' : '❌'}`);
  console.log(`   Only one selected: ${selectionSwitch.onlyOneSelected ? '✅' : '❌'}`);

  const switchValid = selectionSwitch.shortDeselected &&
                      selectionSwitch.longSelected &&
                      selectionSwitch.onlyOneSelected;
  console.log(`   ${switchValid ? '✅ PASS' : '❌ FAIL'} - Radio button behavior works`);
  testResults.push({ test: 'Selection Switch', passed: switchValid });

  // Take screenshot
  await page.screenshot({ path: 'tests/screenshots/pdf-modal-long-selected.png', fullPage: false });
  console.log(`   📸 Screenshot saved: tests/screenshots/pdf-modal-long-selected.png`);

  // ========================================================================
  // TEST 7: Keyboard navigation
  // ========================================================================
  console.log("\n8️⃣  Testing Keyboard Navigation...");

  // Tab to first card and press Enter
  await page.keyboard.press('Tab');
  await page.waitForTimeout(200);
  await page.keyboard.press('Enter');
  await page.waitForTimeout(400);

  const keyboardSelect = await page.evaluate(() => {
    const selected = document.querySelector('#pdf-modal .pdf-option-card.selected');
    return {
      hasSelection: !!selected,
      format: selected?.getAttribute('data-cv-format') || 'none'
    };
  });

  console.log(`   Keyboard selection: ${keyboardSelect.hasSelection ? '✅' : '❌'}`);
  console.log(`   Selected format: ${keyboardSelect.format}`);

  const keyboardValid = keyboardSelect.hasSelection;
  console.log(`   ${keyboardValid ? '✅ PASS' : '❌ FAIL'} - Keyboard navigation works`);
  testResults.push({ test: 'Keyboard Navigation', passed: keyboardValid });

  // ========================================================================
  // TEST 8: Download button click (stub)
  // ========================================================================
  console.log("\n9️⃣  Testing Download Button Click...");

  // Setup alert handler
  page.on('dialog', async dialog => {
    console.log(`   📢 Alert shown: "${dialog.message()}"`);
    await dialog.accept();
  });

  // Click download button
  const downloadBtn = await page.$('#pdf-modal .pdf-download-btn');
  if (downloadBtn && !(await downloadBtn.isDisabled())) {
    await downloadBtn.click();
    await page.waitForTimeout(500);

    console.log(`   ✅ PASS - Download button clickable and triggers alert`);
    testResults.push({ test: 'Download Button Click', passed: true });
  } else {
    console.log(`   ❌ FAIL - Download button not clickable`);
    testResults.push({ test: 'Download Button Click', passed: false });
  }

  // ========================================================================
  // TEST 9: ESC key closes modal
  // ========================================================================
  console.log("\n🔟 Testing ESC Key Closes Modal...");

  await page.keyboard.press('Escape');
  await page.waitForTimeout(300);

  const modalClosed = await page.evaluate(() => {
    const modal = document.querySelector('#pdf-modal');
    return !modal?.hasAttribute('open');
  });

  console.log(`   Modal closed: ${modalClosed ? '✅' : '❌'}`);
  console.log(`   ${modalClosed ? '✅ PASS' : '❌ FAIL'} - ESC key closes modal`);
  testResults.push({ test: 'ESC Closes Modal', passed: modalClosed });

  // Reopen for accessibility tests
  if (modalClosed) {
    await page.evaluate(() => {
      const modal = document.querySelector('#pdf-modal');
      if (modal) modal.showModal();
    });
    await page.waitForTimeout(300);
  }

  // ========================================================================
  // TEST 10: Accessibility attributes
  // ========================================================================
  console.log("\n1️⃣1️⃣  Testing Accessibility...");

  const a11y = await page.evaluate(() => {
    const modal = document.querySelector('#pdf-modal');
    const cards = document.querySelectorAll('#pdf-modal .pdf-option-card');
    const announcement = document.querySelector('#pdf-selection-announcement');

    const cardA11y = Array.from(cards).map(card => ({
      format: card.getAttribute('data-cv-format'),
      hasRole: card.getAttribute('role') === 'radio',
      hasAriaLabel: card.hasAttribute('aria-label'),
      hasAriaChecked: card.hasAttribute('aria-checked'),
      hasTabindex: card.hasAttribute('tabindex')
    }));

    return {
      modalIsDialog: modal?.tagName === 'DIALOG',
      hasAnnouncement: !!announcement,
      announcementLive: announcement?.getAttribute('aria-live') === 'polite',
      cardA11y,
      allCardsAccessible: cardA11y.every(c => c.hasRole && c.hasAriaLabel && c.hasAriaChecked && c.hasTabindex)
    };
  });

  console.log(`   Modal is dialog: ${a11y.modalIsDialog ? '✅' : '❌'}`);
  console.log(`   Has announcement area: ${a11y.hasAnnouncement ? '✅' : '❌'}`);
  console.log(`   Announcement is live: ${a11y.announcementLive ? '✅' : '❌'}`);
  console.log(`   Card accessibility:`);
  a11y.cardA11y.forEach(card => {
    const score = [card.hasRole, card.hasAriaLabel, card.hasAriaChecked, card.hasTabindex].filter(Boolean).length;
    console.log(`     - ${card.format}: ${score}/4 (role:${card.hasRole?'✅':'❌'} label:${card.hasAriaLabel?'✅':'❌'} checked:${card.hasAriaChecked?'✅':'❌'} tabindex:${card.hasTabindex?'✅':'❌'})`);
  });

  const a11yValid = a11y.modalIsDialog && a11y.hasAnnouncement && a11y.allCardsAccessible;
  console.log(`   ${a11yValid ? '✅ PASS' : '❌ FAIL'} - Accessibility complete`);
  testResults.push({ test: 'Accessibility', passed: a11yValid });

  // ========================================================================
  // TEST 11: Responsive layout
  // ========================================================================
  console.log("\n1️⃣2️⃣  Testing Responsive Layout...");

  const viewports = [
    { name: 'Mobile', width: 375, height: 667 },
    { name: 'Tablet', width: 768, height: 1024 },
    { name: 'Desktop', width: 1920, height: 1080 }
  ];

  for (const vp of viewports) {
    await page.setViewportSize({ width: vp.width, height: vp.height });
    await page.waitForTimeout(300);

    const layout = await page.evaluate(() => {
      const grid = document.querySelector('#pdf-modal .pdf-options-grid');
      if (!grid) return null;

      const style = window.getComputedStyle(grid);
      const gridCols = style.gridTemplateColumns;
      const display = style.display;

      return {
        display,
        gridCols,
        columnCount: gridCols ? gridCols.split(' ').length : 0
      };
    });

    if (layout) {
      console.log(`   ${vp.name} (${vp.width}px): ${layout.display} - ${layout.columnCount} columns`);
    }
  }

  // Reset to desktop
  await page.setViewportSize({ width: 1920, height: 1080 });
  await page.waitForTimeout(300);

  console.log(`   ✅ PASS - Responsive layout adapts`);
  testResults.push({ test: 'Responsive Layout', passed: true });

  // ========================================================================
  // TEST 12: Multilingual support (if available)
  // ========================================================================
  console.log("\n1️⃣3️⃣  Testing Multilingual Support...");

  const multilingual = await page.evaluate(() => {
    const modal = document.querySelector('#pdf-modal');
    const title = modal?.querySelector('h2')?.textContent || '';
    const subtitle = modal?.querySelector('.pdf-modal-subtitle')?.textContent || '';
    const button = modal?.querySelector('.pdf-download-btn')?.textContent.trim() || '';

    return {
      hasTitle: title.length > 0,
      hasSubtitle: subtitle.length > 0,
      hasButtonText: button.length > 0,
      currentLang: title.includes('Download') ? 'EN' : (title.includes('Descargar') ? 'ES' : 'Unknown')
    };
  });

  console.log(`   Current language: ${multilingual.currentLang}`);
  console.log(`   Has title: ${multilingual.hasTitle ? '✅' : '❌'}`);
  console.log(`   Has subtitle: ${multilingual.hasSubtitle ? '✅' : '❌'}`);
  console.log(`   Has button text: ${multilingual.hasButtonText ? '✅' : '❌'}`);

  const multilingualValid = multilingual.hasTitle && multilingual.hasSubtitle && multilingual.hasButtonText;
  console.log(`   ${multilingualValid ? '✅ PASS' : '❌ FAIL'} - Multilingual support present`);
  testResults.push({ test: 'Multilingual Support', passed: multilingualValid });

  // ========================================================================
  // FINAL SUMMARY
  // ========================================================================
  await summarizeAndExit(testResults, errors, page);
}

async function summarizeAndExit(testResults, errors, page) {
  console.log("\n" + "=".repeat(70));
  console.log("📊 TEST SUMMARY\n");

  const totalTests = testResults.length;
  const passedTests = testResults.filter(r => r.passed).length;
  const failedTests = totalTests - passedTests;

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

  console.log(`\n   Total: ${passedTests}/${totalTests} tests passed`);

  if (errors.length === 0) {
    console.log("\n✅ NO CONSOLE ERRORS");
  } else {
    console.log(`\n⚠️  ${errors.length} CONSOLE ERRORS`);
  }

  console.log("=".repeat(70) + "\n");

  if (failedTests === 0) {
    console.log("🎉 PDF MODAL FULLY VALIDATED!");
    console.log("   - Three interactive thumbnails working");
    console.log("   - Selection logic correct (radio behavior)");
    console.log("   - Download button state management correct");
    console.log("   - Keyboard navigation functional");
    console.log("   - Accessibility complete");
    console.log("   - Responsive design validated");
  } else {
    console.log("⚠️  SOME TESTS FAILED - See details above");
  }

  console.log("\nBrowser will stay open for manual inspection.");
  console.log("Press Ctrl+C when done.\n");

  await new Promise(() => {}); // Keep browser open
}

await testPDFModal();