cv-site/tests/mjs/83-chat-mascot.test.mjs

#!/usr/bin/env bun
/**
 * CV ASSISTANT MASCOT TEST
 * =========================
 * Tests the AI chat widget (mascot) functionality
 * - Widget visibility and toggle
 * - Help popup display and dismiss
 * - Suggested question chips
 * - Text input and form submission
 * - Chat messages rendering
 * - Session persistence
 * - Language awareness
 * - Responsive behavior
 */

import { chromium } from 'playwright';

const URL = "http://localhost:1999";
const CHAT_TIMEOUT = 15000; // Agent responses can take a few seconds

async function testChatMascot() {
  console.log('🤖 CV ASSISTANT MASCOT 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 = [];
  let passed = 0;
  let failed = 0;

  function record(name, success, detail = '') {
    testResults.push({ name, success, detail });
    if (success) {
      passed++;
      console.log(`   ✅ ${name}${detail ? ' — ' + detail : ''}`);
    } else {
      failed++;
      console.log(`   ❌ ${name}${detail ? ' — ' + detail : ''}`);
    }
  }

  page.on('console', msg => {
    if (msg.type() === 'error') {
      errors.push(msg.text());
    }
  });

  // ========================================================================
  // SETUP: Load page
  // ========================================================================
  console.log("\n📋 Loading page...");
  await page.goto(`${URL}/?lang=en`);
  await page.waitForTimeout(2000);

  // ========================================================================
  // TEST 1: Mascot button exists and is visible
  // ========================================================================
  console.log("\n1️⃣  Mascot Button Presence");

  const btnExists = await page.locator('#chat-toggle-btn').isVisible();
  record('Mascot toggle button is visible', btnExists);

  const btnIcon = await page.locator('#chat-toggle-btn .chat-icon-open').isVisible();
  record('Mascot icon (robot) is visible', btnIcon);

  const closeIconHidden = await page.locator('#chat-toggle-btn .chat-icon-close').isHidden();
  record('Close icon is hidden initially', closeIconHidden);

  // ========================================================================
  // TEST 2: Chat panel starts closed
  // ========================================================================
  console.log("\n2️⃣  Initial State");

  const panelHidden = await page.locator('#chat-panel').isHidden();
  record('Chat panel is hidden initially', panelHidden);

  // ========================================================================
  // TEST 3: Click mascot opens chat panel
  // ========================================================================
  console.log("\n3️⃣  Open Chat Panel");

  await page.click('#chat-toggle-btn');
  await page.waitForTimeout(500);

  const panelOpen = await page.locator('#chat-panel').isVisible();
  record('Chat panel opens on click', panelOpen);

  const hasMascotActive = await page.locator('#chat-toggle-btn.mascot-active').count();
  record('Button has mascot-active class', hasMascotActive > 0);

  // ========================================================================
  // TEST 4: Help card is visible on first open
  // ========================================================================
  console.log("\n4️⃣  Help Card (Onboarding)");

  const helpVisible = await page.locator('#chat-help-card.visible').isVisible();
  record('Help card is visible on first open', helpVisible);

  const helpText = await page.locator('.chat-help-text').textContent();
  record('Help text contains assistant description',
    helpText.includes('CV Assistant') || helpText.includes('Asistente'));

  const dismissBtn = await page.locator('.chat-help-dismiss').isVisible();
  record('Dismiss button is visible', dismissBtn);

  // ========================================================================
  // TEST 5: Dismiss help card
  // ========================================================================
  console.log("\n5️⃣  Dismiss Help Card");

  await page.click('.chat-help-dismiss');
  await page.waitForTimeout(300);

  const helpDismissed = await page.locator('#chat-help-card.visible').count();
  record('Help card dismissed after click', helpDismissed === 0);

  // ========================================================================
  // TEST 6: Help button re-toggles help card
  // ========================================================================
  console.log("\n6️⃣  Re-toggle Help Card");

  await page.click('.chat-help-btn');
  await page.waitForTimeout(300);

  const helpReOpened = await page.locator('#chat-help-card.visible').isVisible();
  record('Help card re-opens via ? button', helpReOpened);

  // Dismiss again for clean state
  await page.click('.chat-help-dismiss');
  await page.waitForTimeout(200);

  // ========================================================================
  // TEST 7: Initial welcome message exists
  // ========================================================================
  console.log("\n7️⃣  Welcome Message");

  const welcomeMsg = await page.locator('#chat-messages .chat-agent').first().textContent();
  record('Welcome message is present',
    welcomeMsg.includes('Ask me anything') || welcomeMsg.includes('Pregúntame'));

  // ========================================================================
  // TEST 8: Suggested question chips exist
  // ========================================================================
  console.log("\n8️⃣  Suggested Question Chips");

  const chipCount = await page.locator('.chat-chip').count();
  record('5 suggested question chips exist', chipCount === 5, `found ${chipCount}`);

  const firstChipText = await page.locator('.chat-chip').first().textContent();
  record('First chip has text', firstChipText.length > 0, firstChipText);

  // ========================================================================
  // TEST 9: Text input exists and is functional
  // ========================================================================
  console.log("\n9️⃣  Text Input");

  const inputExists = await page.locator('#chat-input').isVisible();
  record('Chat input is visible', inputExists);

  const placeholder = await page.locator('#chat-input').getAttribute('placeholder');
  record('Input has placeholder',
    placeholder.includes('Ask something') || placeholder.includes('Pregunta'));

  // ========================================================================
  // TEST 10: Send button exists
  // ========================================================================
  console.log("\n🔟 Send Button");

  const sendBtn = await page.locator('.chat-send-btn').isVisible();
  record('Send button is visible', sendBtn);

  // ========================================================================
  // TEST 11: Chip click fills input and submits
  // ========================================================================
  console.log("\n1️⃣1️⃣ Chip Click → Submit");

  const msgCountBefore = await page.locator('#chat-messages .chat-message').count();

  await page.click('.chat-chip >> text=Go projects');
  // Wait for any new message (user or error — agent may be unavailable)
  await page.waitForFunction(
    (before) => document.querySelectorAll('#chat-messages .chat-message').length > before,
    msgCountBefore,
    { timeout: CHAT_TIMEOUT }
  );

  const userMsg = await page.locator('#chat-messages .chat-user').last().textContent();
  record('User message appears after chip click',
    userMsg.includes('Go projects'), userMsg.substring(0, 50));

  // Wait for agent response
  await page.waitForSelector('#chat-messages .chat-agent:nth-child(3)', { timeout: CHAT_TIMEOUT });

  const agentMsg = await page.locator('#chat-messages .chat-agent').last().textContent();
  record('Agent response appears',
    agentMsg.length > 20, `${agentMsg.substring(0, 60)}...`);

  record('Agent mentions Go projects',
    agentMsg.toLowerCase().includes('go') || agentMsg.toLowerCase().includes('immich') || agentMsg.toLowerCase().includes('cmux'));

  // ========================================================================
  // TEST 12: Type and submit custom question
  // ========================================================================
  console.log("\n1️⃣2️⃣ Type Custom Question");

  const userMsgCountBefore = await page.locator('#chat-messages .chat-user').count();
  await page.fill('#chat-input', 'How many years of experience?');
  await page.click('.chat-send-btn');

  // Wait for a new user message to appear
  await page.waitForFunction(
    (count) => document.querySelectorAll('#chat-messages .chat-user').length > count,
    userMsgCountBefore,
    { timeout: CHAT_TIMEOUT }
  );
  const customUserMsg = await page.locator('#chat-messages .chat-user').last().textContent();
  record('Custom typed message appears',
    customUserMsg.includes('years of experience'));

  // Wait for agent response
  await page.waitForFunction(() => {
    const msgs = document.querySelectorAll('#chat-messages .chat-agent');
    return msgs.length >= 3;
  }, { timeout: CHAT_TIMEOUT });

  const customAgentMsg = await page.locator('#chat-messages .chat-agent').last().textContent();
  record('Agent responds to custom question',
    customAgentMsg.length > 10, `${customAgentMsg.substring(0, 60)}...`);

  // ========================================================================
  // TEST 13: Input clears after submit
  // ========================================================================
  console.log("\n1️⃣3️⃣ Input Clear After Submit");

  const inputValueAfter = await page.locator('#chat-input').inputValue();
  record('Input is cleared after submission', inputValueAfter === '');

  // ========================================================================
  // TEST 14: Session ID persisted
  // ========================================================================
  console.log("\n1️⃣4️⃣ Session Persistence");

  const sessionId = await page.locator('#chat-session-id').inputValue();
  record('Session ID is set after response',
    sessionId.length > 0, sessionId.substring(0, 20) + '...');

  // ========================================================================
  // TEST 15: Close and reopen panel
  // ========================================================================
  console.log("\n1️⃣5️⃣ Close and Reopen");

  await page.click('#chat-toggle-btn');
  await page.waitForTimeout(300);

  const panelClosedAgain = await page.locator('#chat-panel').isHidden();
  record('Panel closes on second toggle click', panelClosedAgain);

  await page.click('#chat-toggle-btn');
  await page.waitForTimeout(300);

  const panelReopened = await page.locator('#chat-panel').isVisible();
  record('Panel reopens on third click', panelReopened);

  // Messages should still be there
  const msgCountAfterReopen = await page.locator('#chat-messages .chat-message').count();
  record('Messages preserved after reopen', msgCountAfterReopen >= 3,
    `${msgCountAfterReopen} messages`);

  // ========================================================================
  // TEST 16: Chat header content
  // ========================================================================
  console.log("\n1️⃣6️⃣ Header Content");

  const headerText = await page.locator('.chat-header span').textContent();
  record('Header shows "CV Assistant"',
    headerText.includes('CV Assistant') || headerText.includes('Asistente'));

  const helpBtnExists = await page.locator('.chat-help-btn').isVisible();
  record('Help button (?) in header', helpBtnExists);

  // ========================================================================
  // TEST 17: Spanish language version
  // ========================================================================
  console.log("\n1️⃣7️⃣ Spanish Language");

  // Close chat first
  await page.click('#chat-toggle-btn');
  await page.waitForTimeout(200);

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

  await page.click('#chat-toggle-btn');
  await page.waitForTimeout(500);

  const esHeaderText = await page.locator('.chat-header span').textContent();
  record('Spanish header shows "Asistente del CV"',
    esHeaderText.includes('Asistente del CV'));

  const esChipText = await page.locator('.chat-chip').first().textContent();
  record('Spanish chips are in Spanish',
    esChipText.includes('Go') || esChipText.includes('Proyectos'));

  const esWelcome = await page.locator('#chat-messages .chat-agent').first().textContent();
  record('Spanish welcome message',
    esWelcome.includes('Pregúntame') || esWelcome.includes('Hola'));

  const esPlaceholder = await page.locator('#chat-input').getAttribute('placeholder');
  record('Spanish placeholder',
    esPlaceholder.includes('Pregunta'));

  // ========================================================================
  // TEST 18: Empty message handling
  // ========================================================================
  console.log("\n1️⃣8️⃣ Empty Message Handling");

  const msgCountBeforeEmpty = await page.locator('#chat-messages .chat-message').count();
  await page.fill('#chat-input', '');
  await page.click('.chat-send-btn');
  await page.waitForTimeout(1000);

  const msgCountAfterEmpty = await page.locator('#chat-messages .chat-message').count();
  // Should show error or stay the same
  record('Empty message handled gracefully', msgCountAfterEmpty >= msgCountBeforeEmpty);

  // ========================================================================
  // TEST 19: No console errors
  // ========================================================================
  console.log("\n1️⃣9️⃣ Console Errors");

  const chatErrors = errors.filter(e =>
    e.includes('chat') || e.includes('htmx') || e.includes('hyperscript'));
  record('No chat-related console errors', chatErrors.length === 0,
    chatErrors.length > 0 ? chatErrors.join(', ') : 'clean');

  // ========================================================================
  // TEST 20: Chat panel CSS positioning
  // ========================================================================
  console.log("\n2️⃣0️⃣ CSS Positioning");

  const btnPos = await page.locator('#chat-toggle-btn').boundingBox();
  const viewportWidth = 1920;
  record('Button is on the right side of screen',
    btnPos && btnPos.x > viewportWidth / 2, `x=${btnPos?.x}`);

  const panelPos = await page.locator('#chat-panel').boundingBox();
  record('Panel is on the right side',
    panelPos && (panelPos.x + panelPos.width) > viewportWidth / 2, `right edge=${panelPos ? panelPos.x + panelPos.width : 0}`);

  // ========================================================================
  // TEST 21-25: INTELLIGENCE TESTS (verify agent gives complete answers)
  // ========================================================================
  console.log("\n2️⃣1️⃣ Intelligence: Go projects (cross-section)");

  // Go back to English for intelligence tests
  await page.goto(`${URL}/?lang=en`);
  await page.waitForTimeout(2000);
  await page.click('#chat-toggle-btn');
  await page.waitForTimeout(500);
  // Dismiss help card if visible
  const helpStillVisible = await page.locator('#chat-help-card.visible').count();
  if (helpStillVisible > 0) {
    await page.click('.chat-help-dismiss');
    await page.waitForTimeout(200);
  }

  // Ask about Go — should find projects AND experience AND skills
  await page.fill('#chat-input', 'What is Juan\'s experience with Go?');
  await page.click('.chat-send-btn');
  await page.waitForFunction(
    () => {
      const agents = document.querySelectorAll('#chat-messages .chat-agent');
      return agents.length >= 2 && agents[agents.length - 1].textContent.length > 50;
    },
    { timeout: CHAT_TIMEOUT }
  );

  const goResponse = await page.locator('#chat-messages .chat-agent').last().textContent();
  const goLower = goResponse.toLowerCase();
  record('Go search finds projects',
    goLower.includes('immich') || goLower.includes('cmux'),
    goLower.includes('immich') ? 'found Immich' : 'missing Immich');
  record('Go search finds skills section',
    goLower.includes('skill') || goLower.includes('programming') || goLower.includes('proficiency'),
    'mentions skills');

  console.log("\n2️⃣2️⃣ Intelligence: Company count");

  await page.fill('#chat-input', 'How many companies has Juan worked at? List them all.');
  await page.click('.chat-send-btn');
  await page.waitForFunction(
    () => {
      const agents = document.querySelectorAll('#chat-messages .chat-agent');
      return agents.length >= 3 && agents[agents.length - 1].textContent.length > 100;
    },
    { timeout: CHAT_TIMEOUT }
  );

  const companiesResponse = await page.locator('#chat-messages .chat-agent').last().textContent();
  const compLower = companiesResponse.toLowerCase();
  record('Lists Olympic Broadcasting', compLower.includes('olympic'));
  record('Lists Insa', compLower.includes('insa'));
  record('Lists Gigya or SAP', compLower.includes('gigya') || compLower.includes('sap'));

  console.log("\n2️⃣3️⃣ Intelligence: Years of experience");

  await page.fill('#chat-input', 'How many years of experience?');
  await page.click('.chat-send-btn');
  await page.waitForFunction(
    () => {
      const agents = document.querySelectorAll('#chat-messages .chat-agent');
      return agents.length >= 4 && agents[agents.length - 1].textContent.length > 20;
    },
    { timeout: CHAT_TIMEOUT }
  );

  const yearsResponse = await page.locator('#chat-messages .chat-agent').last().textContent();
  record('Reports 21 years of experience',
    yearsResponse.includes('21'), `response: ${yearsResponse.substring(0, 80)}`);

  console.log("\n2️⃣4️⃣ Intelligence: React cross-section");

  await page.fill('#chat-input', 'Has Juan worked with React? Where?');
  await page.click('.chat-send-btn');
  await page.waitForFunction(
    () => {
      const agents = document.querySelectorAll('#chat-messages .chat-agent');
      return agents.length >= 5 && agents[agents.length - 1].textContent.length > 50;
    },
    { timeout: CHAT_TIMEOUT }
  );

  const reactResponse = await page.locator('#chat-messages .chat-agent').last().textContent();
  const reactLower = reactResponse.toLowerCase();
  record('React search finds experience entries',
    reactLower.includes('olympic') || reactLower.includes('liv') || reactLower.includes('gigya'));

  console.log("\n2️⃣5️⃣ Intelligence: Spanish response language");

  await page.fill('#chat-input', '¿Cuántas certificaciones tiene Juan?');
  await page.click('.chat-send-btn');
  await page.waitForFunction(
    () => {
      const agents = document.querySelectorAll('#chat-messages .chat-agent');
      return agents.length >= 6 && agents[agents.length - 1].textContent.length > 20;
    },
    { timeout: CHAT_TIMEOUT }
  );

  const esResponse = await page.locator('#chat-messages .chat-agent').last().textContent();
  record('Responds in Spanish when asked in Spanish',
    esResponse.includes('certificaci') || esResponse.includes('SAP') || esResponse.includes('tiene'));

  // ========================================================================
  // SUMMARY
  // ========================================================================
  console.log('\n' + '='.repeat(70));
  console.log(`\n📊 RESULTS: ${passed} passed, ${failed} failed (${testResults.length} total)\n`);

  if (failed > 0) {
    console.log('❌ FAILED TESTS:');
    testResults.filter(t => !t.success).forEach(t => {
      console.log(`   • ${t.name}${t.detail ? ' — ' + t.detail : ''}`);
    });
    console.log('');
  }

  if (errors.length > 0) {
    console.log(`⚠️  Console errors: ${errors.length}`);
    errors.forEach(e => console.log(`   • ${e}`));
  }

  await browser.close();

  console.log(failed === 0 ? '✅ ALL TESTS PASSED!' : '❌ SOME TESTS FAILED');
  process.exit(failed > 0 ? 1 : 0);
}

testChatMascot().catch(err => {
  console.error('💥 Test crashed:', err.message);
  process.exit(1);
});