`test-mobile.js`

253 lines
/**
 * Mobile Testing Script for Dear Bubbe
 * Tests the interface on mobile viewport with Puppeteer
 */

const puppeteer = require('puppeteer');

const TEST_URL = 'http://45.61.58.125:7124';

async function testMobile() {
  console.log('🥯 Starting Dear Bubbe Mobile Test\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 (390x844)');
    await page.setViewport({
      width: 390,
      height: 844,
      deviceScaleFactor: 3,
      isMobile: true,
      hasTouch: true,
    });

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

    // 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 for purple/dark colors in styles
    const hasPurple = await page.evaluate(() => {
      const elements = document.querySelectorAll('*');
      let foundPurple = false;

      for (let el of elements) {
        const styles = window.getComputedStyle(el);
        const bg = styles.backgroundColor;
        const color = styles.color;

        // Check for dark/purple backgrounds
        if (bg.includes('5, 5, 9') || bg.includes('5, 5, 12') ||
            bg.includes('24, 24, 38') || bg.includes('17, 17, 26')) {
          foundPurple = true;
          break;
        }
      }

      return foundPurple;
    });

    if (!hasPurple) {
      console.log('   ✅ No purple/dark theme colors detected');
    } else {
      console.log('   ❌ WARNING: Purple/dark colors still present!');
    }

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

    // Test 2: iPhone SE (small screen)
    console.log('📱 Test 2: iPhone SE (375x667)');
    await page.setViewport({
      width: 375,
      height: 667,
      deviceScaleFactor: 2,
      isMobile: true,
      hasTouch: true,
    });

    await page.reload({ waitUntil: 'networkidle0' });

    // Check if content fits
    const contentOverflow = await page.evaluate(() => {
      return document.body.scrollWidth > window.innerWidth;
    });

    if (!contentOverflow) {
      console.log('   ✅ No horizontal overflow (fits screen)');
    } else {
      console.log('   ❌ WARNING: Content overflows horizontally!');
    }

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

    // Test 3: iPad Mini
    console.log('📱 Test 3: iPad Mini (768x1024)');
    await page.setViewport({
      width: 768,
      height: 1024,
      deviceScaleFactor: 2,
      isMobile: true,
      hasTouch: true,
    });

    await page.reload({ waitUntil: 'networkidle0' });

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

    // Test 4: Interaction tests
    console.log('🎯 Test 4: User Interactions');
    await page.setViewport({
      width: 390,
      height: 844,
      deviceScaleFactor: 3,
      isMobile: true,
      hasTouch: true,
    });

    await page.reload({ waitUntil: 'networkidle0' });

    // Test input focus
    await page.tap('#chat-input');
    await page.type('#chat-input', 'Test message from Puppeteer');
    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-meshugana-mode.png',
      fullPage: true
    });
    console.log('   ✓ Screenshot saved: screenshot-meshugana-mode.png\n');

    // Test 5: Theme verification
    console.log('🎨 Test 5: 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');
    }

    // Final summary
    console.log('═══════════════════════════════════════');
    console.log('✅ MOBILE TESTING COMPLETE');
    console.log('═══════════════════════════════════════');
    console.log(`📊 Test URL: ${TEST_URL}`);
    console.log('📸 Screenshots saved in /root/Projects/dear-bubbe/');
    console.log('   - screenshot-iphone14.png');
    console.log('   - screenshot-iphonese.png');
    console.log('   - screenshot-ipad.png');
    console.log('   - screenshot-meshugana-mode.png');
    console.log('═══════════════════════════════════════\n');

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

testMobile().catch(console.error);