`test-bubbe-domain.js`

188 lines
/**
 * Mobile Testing Script for bubbe.ai Domain
 * Tests the live domain on mobile viewport with Puppeteer
 */

const puppeteer = require('puppeteer');

const TEST_URL = 'https://www.bubbe.ai';

async function testMobileDomain() {
  console.log('🥯 Testing bubbe.ai Domain on Mobile\n');

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

  try {
    const page = await browser.newPage();

    // Test 1: iPhone 14 Pro viewport
    console.log('📱 Test 1: iPhone 14 Pro on bubbe.ai');
    await page.setViewport({
      width: 390,
      height: 844,
      deviceScaleFactor: 3,
      isMobile: true,
      hasTouch: true,
    });

    await page.goto(TEST_URL, { waitUntil: 'networkidle0', timeout: 30000 });

    // Check if page loaded
    const title = await page.title();
    console.log(`   ✓ Page title: ${title}`);

    // Check background color (should be white, not purple)
    const bgColor = await page.evaluate(() => {
      return window.getComputedStyle(document.querySelector('.chat-app')).backgroundColor;
    });
    console.log(`   ✓ Background color: ${bgColor}`);

    if (bgColor.includes('255, 255, 255') || bgColor === 'rgb(255, 255, 255)') {
      console.log('   ✅ White background confirmed (no purple!)');
    } else {
      console.log('   ❌ WARNING: Background is not white!');
    }

    // Check input font size (should be 16px to prevent iOS zoom)
    const inputFontSize = await page.evaluate(() => {
      const textarea = document.querySelector('#chat-input');
      return window.getComputedStyle(textarea).fontSize;
    });
    console.log(`   ✓ Input font-size: ${inputFontSize}`);

    if (inputFontSize === '16px') {
      console.log('   ✅ 16px font-size confirmed (prevents iOS auto-zoom)');
    } else {
      console.log('   ❌ WARNING: Font-size is not 16px!');
    }

    // Check SSL/HTTPS
    const url = page.url();
    if (url.startsWith('https://')) {
      console.log('   ✅ HTTPS/SSL working correctly');
    } else {
      console.log('   ❌ WARNING: Not using HTTPS!');
    }

    // Take screenshot
    await page.screenshot({
      path: '/root/Projects/dear-bubbe/screenshot-bubbe-ai-mobile.png',
      fullPage: true
    });
    console.log('   ✓ Screenshot saved: screenshot-bubbe-ai-mobile.png\n');

    // Test 2: User Interactions
    console.log('🎯 Test 2: User Interactions on bubbe.ai');

    // Test input focus
    await page.tap('#chat-input');
    await page.type('#chat-input', 'Testing bubbe.ai domain');
    console.log('   ✓ Input field works (typing successful)');

    // Test mode button
    await page.tap('#mode-btn');
    await new Promise(resolve => setTimeout(resolve, 500));

    const modeVisible = await page.evaluate(() => {
      const selector = document.querySelector('#mode-selector');
      return selector.style.display !== 'none';
    });

    if (modeVisible) {
      console.log('   ✅ Mode selector opens correctly');
    } else {
      console.log('   ❌ WARNING: Mode selector not opening!');
    }

    // Test switching to Meshugana mode
    await page.tap('[data-mode="meshugana"]');
    await new Promise(resolve => setTimeout(resolve, 500));

    const currentMode = await page.evaluate(() => {
      return document.querySelector('.mode-badge').textContent;
    });

    console.log(`   ✓ Current mode: ${currentMode}`);

    if (currentMode.includes('Meshugana')) {
      console.log('   ✅ Mode switching works!');
    }

    await page.screenshot({
      path: '/root/Projects/dear-bubbe/screenshot-bubbe-ai-meshugana.png',
      fullPage: true
    });
    console.log('   ✓ Screenshot saved: screenshot-bubbe-ai-meshugana.png\n');

    // Test 3: Theme verification
    console.log('🎨 Test 3: Theme Color Verification');

    const themeColors = await page.evaluate(() => {
      const app = document.querySelector('.chat-app');
      const header = document.querySelector('.chat-header');
      const input = document.querySelector('.input-wrapper');
      const bubble = document.querySelector('.msg-assistant .msg-bubble');

      return {
        appBg: window.getComputedStyle(app).backgroundColor,
        headerBg: window.getComputedStyle(header).backgroundColor,
        inputBg: window.getComputedStyle(input).backgroundColor,
        bubbleBg: bubble ? window.getComputedStyle(bubble).backgroundColor : 'N/A',
      };
    });

    console.log('   Theme Colors:');
    console.log(`   - App background: ${themeColors.appBg}`);
    console.log(`   - Header background: ${themeColors.headerBg}`);
    console.log(`   - Input background: ${themeColors.inputBg}`);
    console.log(`   - Message bubble: ${themeColors.bubbleBg}`);

    // Verify all are light colors (not dark)
    const allLight = Object.values(themeColors).every(color => {
      if (color === 'N/A') return true;
      const rgb = color.match(/\d+/g);
      if (!rgb) return true;
      const avg = (parseInt(rgb[0]) + parseInt(rgb[1]) + parseInt(rgb[2])) / 3;
      return avg > 200; // Average RGB > 200 means light color
    });

    if (allLight) {
      console.log('   ✅ All backgrounds are light/white (no dark theme)\n');
    } else {
      console.log('   ❌ WARNING: Some backgrounds are still dark!\n');
    }

    // Test 4: Performance check
    console.log('⚡ Test 4: Performance Metrics');

    const metrics = await page.metrics();
    console.log(`   ✓ DOM nodes: ${metrics.Nodes}`);
    console.log(`   ✓ JS event listeners: ${metrics.JSEventListeners}`);
    console.log(`   ✓ Layout count: ${metrics.LayoutCount}`);

    // Final summary
    console.log('\n═══════════════════════════════════════');
    console.log('✅ BUBBE.AI DOMAIN TESTING COMPLETE');
    console.log('═══════════════════════════════════════');
    console.log(`📊 Test URL: ${TEST_URL}`);
    console.log('🌐 Domain: bubbe.ai (via Cloudflare)');
    console.log('🔒 SSL: Active');
    console.log('🎨 Theme: Clean White (Simple)');
    console.log('📱 Mobile: Optimized for iOS');
    console.log('📸 Screenshots:');
    console.log('   - screenshot-bubbe-ai-mobile.png');
    console.log('   - screenshot-bubbe-ai-meshugana.png');
    console.log('═══════════════════════════════════════\n');

  } catch (error) {
    console.error('❌ Test failed:', error.message);
  } finally {
    await browser.close();
  }
}

testMobileDomain().catch(console.error);