E2E Tests

import { defineConfig, devices } from '@playwright/test'
import dotenv from 'dotenv'
import path from 'path'

// Load test environment variables (quietly)
dotenv.config({
  path: path.resolve(process.cwd(), '.env.test'),
  debug: false, // Suppress dotenv debug output that clutters CI logs
})

export default defineConfig({
  testDir: './e2e',
  // PHASE 2: Parallel execution re-enabled with robust safeguards
  // - User IDs synchronized between auth system and seed data
  // - Clerk API calls guarded by shouldUseClerk()
  // - Fail-fast logic prevents user creation in test mode
  fullyParallel: true,
  // MONOREPO: Global setup is at repository root, not within boilerplate app
  globalSetup: require.resolve('../../playwright/global-setup.ts'),
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  // PHASE 3: Single worker in CI for maximum stability and predictable execution
  // Reduces resource contention and ensures consistent test timing
  workers: (() => {
    const ciWorkers = process.env.CI ? 1 : undefined
    if (process.env.CI) {
      console.log('[Playwright Config] CI mode detected')
      console.log('[Playwright Config] Workers: 1 (optimized for stability)')
      console.log(
        '[Playwright Config] Test timeout: 90s (increased for slow dashboard prefetch)'
      )
    }
    return ciWorkers
  })(),
  reporter: process.env.CI ? [['html'], ['github']] : 'html',
  // PHASE 4: Unified timeouts for CI and local (environment parity)
  // Dashboard prefetch takes 7-9s + page render time = 9-10s total
  // Generous timeouts prevent false failures on slow routes
  // Both CI and local now use same values for consistent behavior
  timeout: 90 * 1000, // 90s global timeout (was: 30s local, 90s CI)
  expect: {
    timeout: 20 * 1000, // 20s for assertions (was: 10s local, 20s CI)
  },
  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    // CRITICAL: Navigation timeout must exceed dashboard prefetch (7-9s) + render time
    // Local dev server adds compilation overhead (~2s), requiring 30s total
    // CI production server is faster but uses same timeout for consistency
    navigationTimeout: 30 * 1000, // 30s navigation (was: 10s local, 30s CI)
    actionTimeout: 15 * 1000, // 15s for actions (was: 5s local, 15s CI)
    // Disable animations for faster tests
    video: 'retain-on-failure',
    launchOptions: {
      args: ['--disable-blink-features=AutomationControlled'],
    },
  },
  projects: [
    // OPTIMIZATION: Primary browser for CI
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    // OPTIMIZATION: Other browsers only for main branch or local development
    ...(process.env.FULL_TEST_SUITE === 'true' || !process.env.CI
      ? [
          {
            name: 'firefox',
            use: { ...devices['Desktop Firefox'] },
          },
          {
            name: 'webkit',
            use: { ...devices['Desktop Safari'] },
          },
          // Mobile Testing - only when explicitly needed
          {
            name: 'mobile-chrome',
            use: { ...devices['Pixel 5'] },
          },
          {
            name: 'mobile-safari',
            use: { ...devices['iPhone 12'] },
          },
        ]
      : []),
  ],
  webServer: {
    // Use dedicated script to ensure clean test environment
    command: './scripts/start-test-server.sh',
    url: 'http://localhost:3000',
    reuseExistingServer: false, // Always start fresh for tests
    timeout: 2 * 60 * 1000, // 2 minutes to start
    stdout: 'pipe',
    stderr: 'pipe',
  },
})

apps/boilerplate/e2e/
  smoke/                          # Fast critical-path tests
    auth.smoke.spec.ts            # Login, register, logout
    ai-chat.smoke.spec.ts         # AI chat basic flow
    ai-support.smoke.spec.ts      # Support bot interaction
    billing.smoke.spec.ts         # Billing page loads
    dashboard.smoke.spec.ts       # Dashboard rendering
    pricing-checkout.smoke.spec.ts # Pricing page and checkout
    public.smoke.spec.ts          # Public pages (home, about)
    showcase.smoke.spec.ts        # Feature showcase
  demo/
    demo-flow.spec.ts             # Demo mode end-to-end flow
  examples/
    test-data-usage.spec.ts       # Example patterns for new tests
  helpers/
    auth.helper.ts                # Login/register/logout utilities
    test-config.ts                # Selectors, timeouts, env detection
  ai-chat.spec.ts                 # Full AI chat test suite
  ai-support.spec.ts              # Full AI support test suite
  auth-flow.spec.ts               # Complete authentication flows
  credit-display.spec.ts          # Credit UI and display logic
  security.spec.ts                # Security feature validation
  subscription-checkout.spec.ts   # Full subscription + checkout flow
  smoke-tests.spec.ts             # Legacy smoke tests

// playwright/global-setup.ts
export default async function globalSetup() {
  // Set test environment
  process.env.NODE_ENV = 'test'
  process.env.NEXT_PUBLIC_CLERK_ENABLED = 'false'

  // Start MSW server for API mocking
  const { server } = await import('./msw-setup')
  server.listen({ onUnhandledRequest: 'warn' })

  // Return teardown function
  return () => server.close()
}

/**
 * Test Configuration Utilities
 * Provides environment-specific test configuration
 */

import { isTestEnvironment } from '@/lib/test-utils'

/**
 * Determines if we're running in CI environment with Clerk bypass
 * Uses the centralized test-utils for consistency
 */
export function isClerkBypassed(): boolean {
  return isTestEnvironment()
}

/**
 * Skip test helper for Clerk-specific tests
 */
export function skipIfClerkBypassed(testTitle: string) {
  return isClerkBypassed()
    ? `${testTitle} (SKIPPED: Clerk bypassed in CI)`
    : testTitle
}

/**
 * Test environment configuration
 */
export const testConfig = {
  // Longer timeouts for CI environment
  waitTimeout: process.env.CI ? 15000 : 10000,
  expectTimeout: process.env.CI ? 20000 : 15000,

  // Environment flags
  isCI: Boolean(process.env.CI),
  isTestEnv: process.env.NODE_ENV === 'test',
  clerkBypassed: isClerkBypassed(),

  // Test selectors
  selectors: {
    signInButton:
      '[data-testid="signin-button"], nav a[href="/login"], nav button:has-text("Sign in")',
    getStartedButton:
      '[data-testid="get-started-button"], nav a[href="/register"], nav button:has-text("Get started")',
    mobileMenuButton:
      '[data-testid="mobile-menu-button"], button:has(.lucide-menu), button:has(svg)',
    mobileSignInButton:
      '[data-testid="mobile-signin-button"], a[href="/login"]',
    mobileGetStartedButton:
      '[data-testid="mobile-get-started-button"], a[href="/register"]',
  },
}

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

test('homepage loads and shows hero section', async ({ page }) => {
  await page.goto('/')

  await expect(page.locator('h1')).toBeVisible()
  await expect(page.locator('[data-testid="hero-section"]')).toBeVisible()
})

import { test, expect } from '@playwright/test'
import { testConfig } from './helpers/test-config'

test('mobile menu opens and closes', async ({ page }) => {
  // Set mobile viewport
  await page.setViewportSize({ width: 375, height: 667 })
  await page.goto('/')

  // Open mobile menu
  const menuButton = page.locator(testConfig.selectors.mobileMenuButton)
  await menuButton.click()

  // Verify menu items are visible
  await expect(
    page.locator(testConfig.selectors.mobileSignInButton)
  ).toBeVisible()

  // Close by clicking outside
  await page.locator('body').click()
  await expect(
    page.locator(testConfig.selectors.mobileSignInButton)
  ).not.toBeVisible()
})

test('shows error state when API fails', async ({ page }) => {
  // Intercept dashboard API and return error
  await page.route('/api/dashboard', (route) => {
    route.fulfill({
      status: 500,
      contentType: 'application/json',
      body: JSON.stringify({ error: 'Internal Server Error' }),
    })
  })

  await page.goto('/dashboard')

  await expect(page.getByText(/something went wrong/i)).toBeVisible()
})

test('pricing page meets accessibility requirements', async ({ page }) => {
  await page.goto('/pricing')

  // Check all images have alt text
  const images = page.locator('img')
  for (const image of await images.all()) {
    await expect(image).toHaveAttribute('alt')
  }

  // Check heading hierarchy
  const h1Count = await page.locator('h1').count()
  expect(h1Count).toBe(1)
})

pnpm test:e2e:debug

pnpm test:e2e:ui