blackcanyontickets/reactrebuild0825/tests/checkout-basic.spec.ts

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

test.describe('Basic Checkout Flow', () => {
  test.beforeEach(async ({ page }) => {
    // Navigate to dashboard (authenticated route)
    await page.goto('/dashboard');
    
    // Wait for page to load
    await page.waitForSelector('text=Dashboard', { timeout: 10000 });
  });

  test('should display cart button in header', async ({ page }) => {
    // Look for cart button (might be hidden if no items)
    const cartButton = page.locator('button').filter({ hasText: /cart/i }).first();
    
    // Cart button should exist in the header area
    if (await cartButton.count() > 0) {
      await expect(cartButton).toBeVisible();
    } else {
      // If cart button is implemented differently, check for shopping cart icon
      const cartIcon = page.locator('[data-testid*="cart"], .shopping-cart, [aria-label*="cart"]');
      await expect(cartIcon.first()).toBeVisible();
    }
  });

  test('should open cart drawer when cart button is clicked', async ({ page }) => {
    // Click cart button (try different selectors)
    const cartButton = page.locator('button').filter({ hasText: /cart/i }).first();
    
    if (await cartButton.count() > 0) {
      await cartButton.click();
      
      // Look for cart drawer/modal
      const cartDrawer = page.locator('[role="dialog"], .cart-drawer, [data-testid="cart"]');
      await expect(cartDrawer.first()).toBeVisible({ timeout: 5000 });
      
      // Should show cart title
      await expect(page.locator('text=Cart, text=Shopping Cart')).toBeVisible();
    }
  });

  test('should display empty cart message when cart is empty', async ({ page }) => {
    // Open cart
    const cartButton = page.locator('button').filter({ hasText: /cart/i }).first();
    
    if (await cartButton.count() > 0) {
      await cartButton.click();
      
      // Should show empty cart message
      await expect(page.locator('text=empty, text=no items')).toBeVisible({ timeout: 5000 });
    }
  });

  test('should have accessible checkout wizard elements', async ({ page }) => {
    // Look for any checkout-related elements
    const checkoutElements = page.locator('[data-testid*="checkout"], [aria-label*="checkout"], button:has-text("Checkout")');
    
    if (await checkoutElements.count() > 0) {
      const firstElement = checkoutElements.first();
      
      // Check for accessibility attributes
      const hasAriaLabel = await firstElement.getAttribute('aria-label');
      const hasRole = await firstElement.getAttribute('role');
      const hasAriaDescribedBy = await firstElement.getAttribute('aria-describedby');
      
      // At least one accessibility attribute should be present
      expect(hasAriaLabel || hasRole || hasAriaDescribedBy).toBeTruthy();
    }
  });

  test('should handle checkout success page', async ({ page }) => {
    // Navigate to success page directly
    await page.goto('/checkout/success?session_id=test_session_123');
    
    // Should show success message
    await expect(page.locator('text=Successful, text=confirmed, text=complete')).toBeVisible({ timeout: 10000 });
    
    // Should have return to dashboard link
    const dashboardLink = page.locator('a:has-text("Dashboard"), button:has-text("Dashboard")');
    await expect(dashboardLink.first()).toBeVisible();
  });

  test('should handle checkout cancel page', async ({ page }) => {
    // Navigate to cancel page
    await page.goto('/checkout/cancel');
    
    // Should show cancellation message
    await expect(page.locator('text=Cancel, text=cancelled')).toBeVisible({ timeout: 10000 });
    
    // Should have navigation options
    const navigationOptions = page.locator('a, button').filter({ hasText: /dashboard|events|back/i });
    await expect(navigationOptions.first()).toBeVisible();
  });

  test('should display receipt components on success page', async ({ page }) => {
    await page.goto('/checkout/success?session_id=test_session_123');
    
    // Look for receipt-related elements
    const receiptElements = page.locator('[data-testid*="receipt"], button:has-text("Receipt"), text=Order Details');
    
    if (await receiptElements.count() > 0) {
      await expect(receiptElements.first()).toBeVisible();
    }
    
    // Check for download/email options
    const actionButtons = page.locator('button').filter({ hasText: /download|email|pdf|receipt/i });
    
    if (await actionButtons.count() > 0) {
      await expect(actionButtons.first()).toBeVisible();
    }
  });

  test('should be responsive on mobile viewport', async ({ page }) => {
    // Set mobile viewport
    await page.setViewportSize({ width: 375, height: 667 });
    
    // Cart button should still be visible and accessible
    const cartButton = page.locator('button').filter({ hasText: /cart/i }).first();
    
    if (await cartButton.count() > 0) {
      await cartButton.click();
      
      // Cart drawer should adapt to mobile
      const cartDrawer = page.locator('[role="dialog"]').first();
      if (await cartDrawer.count() > 0) {
        const boundingBox = await cartDrawer.boundingBox();
        expect(boundingBox?.width).toBeGreaterThan(300); // Should take most of screen width
      }
    }
  });

  test('should have proper keyboard navigation', async ({ page }) => {
    // Test tab navigation
    await page.keyboard.press('Tab');
    
    // Should focus on first focusable element
    const focusedElement = page.locator(':focus');
    await expect(focusedElement).toBeVisible();
    
    // Test escape key on modals
    const cartButton = page.locator('button').filter({ hasText: /cart/i }).first();
    
    if (await cartButton.count() > 0) {
      await cartButton.click();
      
      // Press escape to close
      await page.keyboard.press('Escape');
      
      // Modal should close (or remain open - either behavior is valid)
    }
  });

  test('should handle theme switching during checkout', async ({ page }) => {
    // Look for theme toggle
    const themeToggle = page.locator('button[aria-label*="theme"], button:has-text("Dark"), button:has-text("Light")');
    
    if (await themeToggle.count() > 0) {
      await themeToggle.first().click();
      
      // Page should remain functional after theme switch
      await expect(page.locator('text=Dashboard')).toBeVisible();
    }
  });
});