Mocking API Responses

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

test('mock user profile API', async ({ page }) => {
  await page.route('**/api/profile', async (route) => {
    await route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({
        id: 'user-001',
        name: 'Priya Sharma',
        email: 'priya@test.com',
        plan: 'premium',
        xp: 4500,
      }),
    });
  });

  await page.goto('/profile');

  await expect(page.getByText('Priya Sharma')).toBeVisible();
  await expect(page.getByText('Premium')).toBeVisible();
});

test('mock 401 -- session expired', async ({ page }) => {
  await page.route('**/api/profile', async (route) => {
    await route.fulfill({
      status: 401,
      contentType: 'application/json',
      body: JSON.stringify({ error: 'Token expired' }),
    });
  });

  await page.goto('/profile');

  // App should redirect to login or show expiry message
  await expect(page.getByText(/session expired|please login/i)).toBeVisible();
});

test('mock 403 -- access denied', async ({ page }) => {
  await page.route('**/api/admin/users', async (route) => {
    await route.fulfill({
      status: 403,
      contentType: 'application/json',
      body: JSON.stringify({ error: 'Insufficient permissions' }),
    });
  });

  await page.goto('/admin/users');
  await expect(page.getByText(/access denied|forbidden/i)).toBeVisible();
});

test('mock response with custom headers', async ({ page }) => {
  await page.route('**/api/products', async (route) => {
    await route.fulfill({
      status: 200,
      headers: {
        'Content-Type': 'application/json',
        'X-Total-Count': '150',
        'X-Page': '1',
        'X-Per-Page': '10',
        'Cache-Control': 'no-cache',
      },
      body: JSON.stringify({
        products: [{ id: 1, name: 'Widget' }],
        total: 150,
      }),
    });
  });

  await page.goto('/shopping');
  // Now you can test pagination UI that reads X-Total-Count header
});

test('show loading spinner while API is slow', async ({ page }) => {
  await page.route('**/api/products', async (route) => {
    // Wait 3 seconds before responding
    await new Promise((resolve) => setTimeout(resolve, 3000));
    await route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify([]),
    });
  });

  await page.goto('/shopping');

  // Spinner should be visible during the delay
  await expect(page.getByTestId('loading-spinner')).toBeVisible();

  // After 3 seconds, spinner should disappear
  await expect(page.getByTestId('loading-spinner')).toBeHidden({ timeout: 5000 });
});