cv-site/tests/mjs/5-language.test.mjs

#!/usr/bin/env bun
/**
 * LANGUAGE SWITCHING TEST
 * ========================
 * Tests English/Spanish language toggle
 * - Verifies language toggle button works
 * - Checks URL parameter persistence (?lang=es)
 * - Validates content switching
 * - Tests localStorage persistence
 */

import { chromium } from 'playwright';

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

async function testLanguage() {
  console.log('🌍 LANGUAGE SWITCHING 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 (English default)...");
  await page.goto(URL);
  await page.waitForTimeout(2000);

  // ========================================================================
  // TEST 1: Language toggle button exists
  // ========================================================================
  console.log("\n2️⃣  Testing Language Toggle Elements...");
  const elements = await page.evaluate(() => {
    const langToggle = document.querySelector('#langToggle, .lang-toggle, [data-lang-toggle]');
    const langButtons = document.querySelectorAll('[data-lang], [hx-get*="lang="]');

    return {
      hasToggle: !!langToggle,
      toggleId: langToggle?.id || 'N/A',
      buttonCount: langButtons.length
    };
  });

  console.log(`   Language toggle found: ${elements.hasToggle ? '✅' : '❌'}`);
  console.log(`   Toggle ID: ${elements.toggleId}`);
  console.log(`   Language buttons: ${elements.buttonCount}`);
  console.log(`   ${elements.hasToggle || elements.buttonCount > 0 ? '✅ PASS' : '❌ FAIL'} - Language controls exist`);
  testResults.push({ test: 'Language Controls Exist', passed: elements.hasToggle || elements.buttonCount > 0 });

  // ========================================================================
  // TEST 2: Default language is English
  // ========================================================================
  console.log("\n3️⃣  Testing Default Language...");
  const defaultLang = await page.evaluate(() => {
    const html = document.documentElement;
    const lang = html.getAttribute('lang') || 'en';
    const bodyText = document.body.innerText.toLowerCase();

    // Check for English indicators
    const hasEnglish = bodyText.includes('experience') ||
                       bodyText.includes('education') ||
                       bodyText.includes('skills');

    return {
      htmlLang: lang,
      seemsEnglish: hasEnglish
    };
  });

  console.log(`   HTML lang attribute: ${defaultLang.htmlLang}`);
  console.log(`   Contains English content: ${defaultLang.seemsEnglish ? '✅' : '❌'}`);
  console.log(`   ${defaultLang.htmlLang === 'en' || defaultLang.seemsEnglish ? '✅ PASS' : '⚠️  INFO'} - Default is English`);
  testResults.push({ test: 'Default Language', passed: true }); // Info only

  // ========================================================================
  // TEST 3: Switch to Spanish via URL parameter
  // ========================================================================
  console.log("\n4️⃣  Testing Spanish via URL Parameter...");
  await page.goto(`${URL}?lang=es`);
  await page.waitForTimeout(2000);

  const spanishTest = await page.evaluate(() => {
    const html = document.documentElement;
    const lang = html.getAttribute('lang');
    const bodyText = document.body.innerText.toLowerCase();

    // Check for Spanish indicators
    const hasSpanish = bodyText.includes('experiencia') ||
                       bodyText.includes('educación') ||
                       bodyText.includes('educacion') ||
                       bodyText.includes('habilidades');

    return {
      htmlLang: lang,
      seemsSpanish: hasSpanish,
      urlLang: window.location.search
    };
  });

  console.log(`   URL: ${spanishTest.urlLang}`);
  console.log(`   HTML lang attribute: ${spanishTest.htmlLang}`);
  console.log(`   Contains Spanish content: ${spanishTest.seemsSpanish ? '✅' : '❌'}`);
  console.log(`   ${spanishTest.htmlLang === 'es' || spanishTest.seemsSpanish ? '✅ PASS' : '❌ FAIL'} - Spanish loads correctly`);
  testResults.push({ test: 'Spanish URL Parameter', passed: spanishTest.htmlLang === 'es' || spanishTest.seemsSpanish });

  // ========================================================================
  // TEST 4: Language toggle button (if exists)
  // ========================================================================
  console.log("\n5️⃣  Testing Language Toggle Button...");

  // Go back to English
  await page.goto(URL);
  await page.waitForTimeout(1000);

  const toggleButton = await page.$('#langToggle, .lang-toggle, [data-lang-toggle]');

  if (toggleButton) {
    const beforeLang = await page.evaluate(() => document.documentElement.getAttribute('lang'));

    await toggleButton.click();
    await page.waitForTimeout(2000);

    const afterLang = await page.evaluate(() => document.documentElement.getAttribute('lang'));
    const urlChanged = await page.evaluate(() => window.location.search);

    const toggleWorked = beforeLang !== afterLang;

    console.log(`   Before: ${beforeLang}`);
    console.log(`   After: ${afterLang}`);
    console.log(`   URL: ${urlChanged}`);
    console.log(`   ${toggleWorked ? '✅ PASS' : '❌ FAIL'} - Toggle button works`);
    testResults.push({ test: 'Language Toggle Button', passed: toggleWorked });
  } else {
    console.log(`   ⚠️  SKIP - No toggle button found (URL parameter only)`);
    testResults.push({ test: 'Language Toggle Button', passed: true }); // Skip
  }

  // ========================================================================
  // TEST 5: localStorage persistence
  // ========================================================================
  console.log("\n6️⃣  Testing Language Persistence...");

  // Set Spanish
  await page.goto(`${URL}?lang=es`);
  await page.waitForTimeout(1000);

  const storedLang = await page.evaluate(() => {
    return {
      localStorage: localStorage.getItem('cv-lang') || localStorage.getItem('lang'),
      cookie: document.cookie.includes('lang=')
    };
  });

  console.log(`   localStorage: ${storedLang.localStorage || 'Not used'}`);
  console.log(`   Cookie: ${storedLang.cookie ? 'Present' : 'Not used'}`);
  console.log(`   ${storedLang.localStorage || storedLang.cookie ? '✅ PASS' : '⚠️  INFO'} - Persistence mechanism`);
  testResults.push({ test: 'Language Persistence', passed: true }); // Info only

  // ========================================================================
  // FINAL SUMMARY
  // ========================================================================
  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("🎉 LANGUAGE SWITCHING 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 testLanguage();