← back to Dear Bubbe Nextjs

archived/tests/test-expandable-chat.js

155 lines

#!/usr/bin/env node

const puppeteer = require('puppeteer');

async function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function testExpandableChat() {
  const browser = await puppeteer.launch({
    headless: 'new',
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });

  try {
    console.log('🚀 Starting Expandable Chat Test...\n');
    
    const page = await browser.newPage();
    
    // Set viewport to mobile size first
    await page.setViewport({ width: 375, height: 667 });
    
    console.log('📱 Testing Mobile View...');
    await page.goto('http://localhost:3011', { waitUntil: 'networkidle2' });
    
    // Check for FAB button
    const fabButton = await page.$('.expandable-chat-fab');
    if (fabButton) {
      console.log('✅ FAB button found');
      
      // Click FAB to open chat
      await page.click('.expandable-chat-fab');
      await sleep(1000);
      
      // Check if mode selector is visible
      const modeSelector = await page.$('.expandable-mode-selector');
      if (modeSelector) {
        console.log('✅ Mode selector displayed');
        
        // Test Talk Mode
        console.log('\n🎤 Testing Talk Mode...');
        const talkBtn = await page.$('.mode-option-btn.talk');
        if (talkBtn) {
          await talkBtn.click();
          await sleep(500);
          
          const voiceSection = await page.$('.expandable-voice-section');
          const textSection = await page.$('.expandable-text-section');
          
          if (voiceSection && !textSection) {
            console.log('✅ Talk mode: Voice only interface active');
          } else {
            console.log('❌ Talk mode: Interface not configured correctly');
          }
        }
        
        // Switch back to mode selector
        const modeSwitchBtn = await page.$('.mode-switch-btn');
        if (modeSwitchBtn) {
          await modeSwitchBtn.click();
          await sleep(500);
        }
        
        // Test Text Mode
        console.log('\n⌨️ Testing Text Mode...');
        const textBtn = await page.$('.mode-option-btn.text');
        if (textBtn) {
          await textBtn.click();
          await sleep(500);
          
          const voiceSection = await page.$('.expandable-voice-section');
          const textSection = await page.$('.expandable-text-section');
          
          if (textSection && !voiceSection) {
            console.log('✅ Text mode: Text only interface active');
          } else {
            console.log('❌ Text mode: Interface not configured correctly');
          }
        }
        
        // Switch back to mode selector
        if (modeSwitchBtn) {
          await modeSwitchBtn.click();
          await sleep(500);
        }
        
        // Test Both Mode
        console.log('\n💬 Testing Both Mode...');
        const bothBtn = await page.$('.mode-option-btn.both');
        if (bothBtn) {
          await bothBtn.click();
          await sleep(500);
          
          const voiceSection = await page.$('.expandable-voice-section');
          const textSection = await page.$('.expandable-text-section');
          
          if (voiceSection && textSection) {
            console.log('✅ Both mode: Voice and text interface active');
          } else {
            console.log('❌ Both mode: Interface not configured correctly');
          }
        }
        
        // Close chat
        const closeBtn = await page.$('.header-close-btn');
        if (closeBtn) {
          await closeBtn.click();
          await sleep(500);
          console.log('✅ Chat closed successfully');
        }
        
      } else {
        console.log('❌ Mode selector not found');
      }
    } else {
      console.log('❌ FAB button not found');
    }
    
    // Test Desktop View
    console.log('\n💻 Testing Desktop View...');
    await page.setViewport({ width: 1280, height: 800 });
    await page.reload({ waitUntil: 'networkidle2' });
    
    const desktopFab = await page.$('.expandable-chat-fab');
    if (desktopFab) {
      console.log('✅ Desktop FAB button found');
      
      // Click FAB to open chat
      await page.click('.expandable-chat-fab');
      await sleep(1000);
      
      // Check for backdrop
      const backdrop = await page.$('.expandable-chat-backdrop');
      if (backdrop) {
        console.log('✅ Desktop backdrop displayed');
      }
      
      // Check for desktop container
      const desktopContainer = await page.$('.expandable-chat-container.desktop');
      if (desktopContainer) {
        console.log('✅ Desktop modal container active');
      }
    }
    
    console.log('\n✨ Expandable Chat Test Complete!\n');
    
  } catch (error) {
    console.error('❌ Test failed:', error.message);
  } finally {
    await browser.close();
  }
}

// Run test
testExpandableChat().catch(console.error);