lilith-platform/profile-showcase-test.spec.ts

import { test, expect } from '@playwright/test';

test.describe('Profile Showcase App - Tab Testing', () => {
  const baseUrl = 'http://localhost:5200';

  test('should test all tabs and report console errors', async ({ page }) => {
    const consoleMessages: Array<{ type: string; text: string; tab: string }> = [];

    // Capture all console messages
    page.on('console', (msg) => {
      consoleMessages.push({
        type: msg.type(),
        text: msg.text(),
        tab: 'current',
      });
    });

    // Capture page errors
    page.on('pageerror', (error) => {
      consoleMessages.push({
        type: 'pageerror',
        text: error.message,
        tab: 'current',
      });
    });

    console.log('\n=== Starting Profile Showcase Tab Testing ===\n');

    // Test 1: Navigate to Profile Editor tab
    console.log('1. Testing Profile Editor tab (/?tab=editor)');
    await page.goto(`${baseUrl}/?tab=editor`);
    await page.waitForLoadState('networkidle');
    await page.screenshot({ path: '/tmp/tab-1-editor.png', fullPage: true });

    const editorContent = await page.locator('body').textContent();
    console.log(`   - Content rendered: ${editorContent && editorContent.length > 50 ? 'YES' : 'NO (blank/minimal)'}`);
    console.log(`   - Console messages: ${consoleMessages.length}`);
    consoleMessages.forEach((msg) => {
      if (msg.type !== 'log' || msg.text.includes('error') || msg.text.includes('warning')) {
        console.log(`     [${msg.type}] ${msg.text}`);
      }
    });

    // Test 2: Click Client View tab
    console.log('\n2. Testing Client View tab');
    const initialMsgCount = consoleMessages.length;
    await page.click('button:has-text("Client View")');
    await page.waitForTimeout(1000);
    await page.screenshot({ path: '/tmp/tab-2-client.png', fullPage: true });

    const clientContent = await page.locator('body').textContent();
    console.log(`   - Content rendered: ${clientContent && clientContent.length > 50 ? 'YES' : 'NO (blank/minimal)'}`);
    const newMessages = consoleMessages.slice(initialMsgCount);
    console.log(`   - New console messages: ${newMessages.length}`);
    newMessages.forEach((msg) => {
      console.log(`     [${msg.type}] ${msg.text}`);
    });

    // Test 3: Click Provider View tab
    console.log('\n3. Testing Provider View tab');
    const msg2Count = consoleMessages.length;
    await page.click('button:has-text("Provider View")');
    await page.waitForTimeout(1000);
    await page.screenshot({ path: '/tmp/tab-3-provider.png', fullPage: true });

    const providerContent = await page.locator('body').textContent();
    console.log(`   - Content rendered: ${providerContent && providerContent.length > 50 ? 'YES' : 'NO (blank/minimal)'}`);
    const newMessages2 = consoleMessages.slice(msg2Count);
    console.log(`   - New console messages: ${newMessages2.length}`);
    newMessages2.forEach((msg) => {
      console.log(`     [${msg.type}] ${msg.text}`);
    });

    // Test 4: Click Manage Profiles tab
    console.log('\n4. Testing Manage Profiles tab');
    const msg3Count = consoleMessages.length;
    await page.click('button:has-text("Manage Profiles")');
    await page.waitForTimeout(1000);
    await page.screenshot({ path: '/tmp/tab-4-manage.png', fullPage: true });

    const manageContent = await page.locator('body').textContent();
    console.log(`   - Content rendered: ${manageContent && manageContent.length > 50 ? 'YES' : 'NO (blank/minimal)'}`);
    const newMessages3 = consoleMessages.slice(msg3Count);
    console.log(`   - New console messages: ${newMessages3.length}`);
    newMessages3.forEach((msg) => {
      console.log(`     [${msg.type}] ${msg.text}`);
    });

    // Test 5: Click back to Profile Editor tab
    console.log('\n5. Testing Profile Editor tab (return)');
    const msg4Count = consoleMessages.length;
    await page.click('button:has-text("Profile Editor")');
    await page.waitForTimeout(1000);
    await page.screenshot({ path: '/tmp/tab-5-editor-return.png', fullPage: true });

    const editorReturnContent = await page.locator('body').textContent();
    console.log(`   - Content rendered: ${editorReturnContent && editorReturnContent.length > 50 ? 'YES' : 'NO (blank/minimal)'}`);
    console.log(`   - App crashed: NO (successfully navigated back)`);
    const newMessages4 = consoleMessages.slice(msg4Count);
    console.log(`   - New console messages: ${newMessages4.length}`);
    newMessages4.forEach((msg) => {
      console.log(`     [${msg.type}] ${msg.text}`);
    });

    // Summary
    console.log('\n=== Summary ===');
    console.log(`Total console messages captured: ${consoleMessages.length}`);
    const errors = consoleMessages.filter(m => m.type === 'error' || m.type === 'pageerror');
    const warnings = consoleMessages.filter(m => m.type === 'warning');
    console.log(`Errors: ${errors.length}`);
    console.log(`Warnings: ${warnings.length}`);

    if (errors.length > 0) {
      console.log('\nAll Errors:');
      errors.forEach((msg) => {
        console.log(`  [${msg.type}] ${msg.text}`);
      });
    }

    if (warnings.length > 0) {
      console.log('\nAll Warnings:');
      warnings.forEach((msg) => {
        console.log(`  [${msg.type}] ${msg.text}`);
      });
    }

    console.log('\nScreenshots saved to /tmp/tab-*.png');
  });
});