CA/frontend/e2e/responsive.spec.ts

/**
 * Phase-4 responsive acceptance: every analysis page must be usable at 375px
 * (the narrowest mobile viewport in D4) with NO horizontal scroll.
 *
 * Auth + backend mocking mirror e2e/user-flows.spec.ts (seedAuthAndMockApi):
 * seed localStorage['cbpoa_token'] so the login gate is skipped, then mock all
 * /api/** calls so the suite runs hermetically without a live :8000 backend.
 */
import { test, expect, Page } from '@playwright/test';
import { TESTIDS } from '../src/utils/testids';

// Each analysis route paired with its page-* mount testid.
const ANALYSIS_PAGES: Array<{ route: string; testid: string }> = [
  { route: '/analysis/trend', testid: TESTIDS.pageTrend },
  { route: '/analysis/district', testid: TESTIDS.pageDistrict },
  { route: '/analysis/insights', testid: TESTIDS.pageInsights },
  { route: '/analysis/reports', testid: TESTIDS.pageReports },
  { route: '/analysis/demographics', testid: TESTIDS.pageDemographics },
  { route: '/analysis/disease', testid: TESTIDS.pageDisease },
  { route: '/analysis/environment', testid: TESTIDS.pageEnvironment },
];

/** Seed auth token and mock all /api/** calls before each page load. */
async function seedAuthAndMockApi(page: Page) {
  await page.addInitScript(() => {
    localStorage.setItem('cbpoa_token', 'e2e-test-token');
  });

  // Mock backend responses so the suite is hermetic — no live :8000 required.
  // Each response must match the TypeScript interface shape; returning {} causes
  // pages to throw when accessing expected array properties.
  await page.route('/api/**', (route) => {
    const url = route.request().url();

    if (url.includes('/alerts')) {
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ alerts: [], total: 0 }),
      });
      return;
    }

    if (url.includes('/history/aggregated')) {
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ aggregations: [], total_records: 0 }),
      });
      return;
    }

    if (url.includes('/grids')) {
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ type: 'FeatureCollection', features: [] }),
      });
      return;
    }

    if (url.includes('/cases/demographics')) {
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          age_distribution: [],
          gender_split: { male: { outpatient: 0, inpatient: 0 }, female: { outpatient: 0, inpatient: 0 } },
          age_diagnosis_matrix: [],
        }),
      });
      return;
    }

    if (url.includes('/cases/diagnosis-distribution') || url.includes('/cases/disease-seasonality')) {
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify([]),
      });
      return;
    }

    if (url.includes('/cases/districts') || url.includes('/districts')) {
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify([]),
      });
      return;
    }

    if (url.includes('/cases/trend') || url.includes('/cases')) {
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ data: [], total: 0 }),
      });
      return;
    }

    // Default fallback — return a safe empty object.
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ data: [], items: [], total: 0 }),
    });
  });
}

test.describe('Responsive — analysis pages @375px', () => {
  test.use({ viewport: { width: 375, height: 812 } });

  test.beforeEach(async ({ page }) => {
    await seedAuthAndMockApi(page);
  });

  for (const { route, testid } of ANALYSIS_PAGES) {
    test(`${route} mounts and has no horizontal scroll at 375px`, async ({ page }) => {
      await page.goto(route);

      // Page must mount.
      await expect(page.locator(`[data-testid="${testid}"]`)).toBeVisible();

      // No horizontal overflow: scrollWidth must not exceed clientWidth (+1px slack
      // for sub-pixel rounding).
      const noHorizontalScroll = await page.evaluate(
        () =>
          document.documentElement.scrollWidth <=
          document.documentElement.clientWidth + 1
      );
      expect(noHorizontalScroll, `${route} overflows horizontally at 375px`).toBe(true);
    });
  }
});