blackcanyontickets/test-auth-flow.js

/**
 * Authentication Flow Test Script
 * Tests the login flow to verify no more flashing or redirect loops
 */

import { chromium } from 'playwright';

async function testAuthFlow() {
  console.log('🧪 Starting authentication flow tests...');
  
  const browser = await chromium.launch({
    headless: true, // Headless mode for server environment
    args: ['--no-sandbox', '--disable-setuid-sandbox'] // Additional args for server environments
  });
  
  const context = await browser.newContext({
    viewport: { width: 1280, height: 720 },
    // Record video for debugging
    recordVideo: {
      dir: './test-recordings/',
      size: { width: 1280, height: 720 }
    }
  });
  
  const page = await context.newPage();
  
  try {
    console.log('📍 Test 1: Accessing dashboard without authentication');
    
    // Navigate to dashboard (should redirect to login)
    await page.goto('http://localhost:3000/dashboard', { 
      waitUntil: 'networkidle',
      timeout: 10000 
    });
    
    // Wait for any redirects to complete
    await page.waitForTimeout(2000);
    
    // Check if we're on the login page
    const currentUrl = page.url();
    console.log(`Current URL: ${currentUrl}`);
    
    if (currentUrl.includes('/login')) {
      console.log('✅ Dashboard correctly redirected to login page');
    } else {
      console.log('❌ Dashboard did not redirect to login page');
    }
    
    // Take screenshot of login page
    await page.screenshot({ 
      path: './test-recordings/01-login-page.png',
      fullPage: true 
    });
    
    console.log('📍 Test 2: Testing login flow');
    
    // Check if login form is visible
    const emailInput = await page.locator('#email');
    const passwordInput = await page.locator('#password');
    const submitButton = await page.locator('button[type="submit"]');
    
    if (await emailInput.isVisible() && await passwordInput.isVisible()) {
      console.log('✅ Login form is visible and ready');
      
      // Note: We're not actually logging in since we don't have test credentials
      // This test focuses on the redirect behavior and UI stability
      
      console.log('📍 Test 3: Checking for any flashing or unstable elements');
      
      // Monitor for any sudden theme changes or content flashing
      let themeChanges = 0;
      page.on('console', msg => {
        if (msg.text().includes('theme') || msg.text().includes('PROTECTED') || msg.text().includes('Auth')) {
          console.log(`Console: ${msg.text()}`);
        }
      });
      
      // Wait and observe the page for stability
      await page.waitForTimeout(3000);
      
      // Take final screenshot
      await page.screenshot({ 
        path: './test-recordings/02-login-stable.png',
        fullPage: true 
      });
      
      console.log('✅ Login page appears stable (no visible flashing)');
      
    } else {
      console.log('❌ Login form elements not found');
    }
    
    console.log('📍 Test 4: Testing auth test page');
    
    // Navigate to the auth test page
    await page.goto('http://localhost:3000/auth-test-unified', { 
      waitUntil: 'networkidle',
      timeout: 10000 
    });
    
    await page.waitForTimeout(2000);
    
    // Take screenshot of auth test page
    await page.screenshot({ 
      path: './test-recordings/03-auth-test-page.png',
      fullPage: true 
    });
    
    // Check if auth test page loaded properly
    const authTestTitle = await page.locator('h1:has-text("Unified Authentication System Test")');
    if (await authTestTitle.isVisible()) {
      console.log('✅ Auth test page loaded successfully');
    } else {
      console.log('❌ Auth test page did not load properly');
    }
    
    console.log('📍 Test 5: Testing direct home page access');
    
    // Test home page
    await page.goto('http://localhost:3000/', { 
      waitUntil: 'networkidle',
      timeout: 10000 
    });
    
    await page.waitForTimeout(2000);
    
    // Take screenshot of home page
    await page.screenshot({ 
      path: './test-recordings/04-home-page.png',
      fullPage: true 
    });
    
    console.log('✅ Home page loaded successfully');
    
  } catch (error) {
    console.error('❌ Test failed:', error.message);
    
    // Take error screenshot
    await page.screenshot({ 
      path: './test-recordings/error-screenshot.png',
      fullPage: true 
    });
  } finally {
    console.log('🏁 Closing browser...');
    await context.close();
    await browser.close();
  }
  
  console.log('📊 Test Summary:');
  console.log('- Dashboard redirect: Tested');
  console.log('- Login page stability: Tested');
  console.log('- Auth test page: Tested');
  console.log('- Home page: Tested');
  console.log('- Screenshots saved to: ./test-recordings/');
  console.log('✅ Authentication flow tests completed!');
}

// Run the tests
testAuthFlow().catch(console.error);