CookieBridge/web/tests/e2e/06-responsive.spec.ts

import { test, expect, devices } from "@playwright/test";
import { loginViaAPI } from "./helpers/auth.js";
import { mockDashboard, mockCookies, mockDevices, mockSettings } from "./helpers/mock-api.js";

/**
 * Responsive layout tests
 *
 * These run on the default desktop viewport; the Playwright projects
 * in playwright.config.ts also exercise mobile-chrome, mobile-safari,
 * and tablet viewports automatically.
 *
 * This file adds explicit viewport-override tests for key layout expectations.
 */

const PAGES = [
  { path: "/dashboard", name: "Dashboard" },
  { path: "/cookies", name: "Cookies" },
  { path: "/devices", name: "Devices" },
  { path: "/settings", name: "Settings" },
];

for (const { path, name } of PAGES) {
  test.describe(`Responsive — ${name}`, () => {
    test.beforeEach(async ({ page, request }) => {
      await loginViaAPI(page, request);
      await mockDashboard(page);
      await mockCookies(page);
      await mockDevices(page);
      await mockSettings(page);
    });

    test("renders without horizontal scroll on mobile (375px)", async ({ page }) => {
      await page.setViewportSize({ width: 375, height: 812 });
      await page.goto(path);
      await page.waitForLoadState("networkidle");

      const scrollWidth = await page.evaluate(() => document.body.scrollWidth);
      const clientWidth = await page.evaluate(() => document.body.clientWidth);
      expect(scrollWidth).toBeLessThanOrEqual(clientWidth + 1); // 1px tolerance
    });

    test("renders without horizontal scroll on tablet (768px)", async ({ page }) => {
      await page.setViewportSize({ width: 768, height: 1024 });
      await page.goto(path);
      await page.waitForLoadState("networkidle");

      const scrollWidth = await page.evaluate(() => document.body.scrollWidth);
      const clientWidth = await page.evaluate(() => document.body.clientWidth);
      expect(scrollWidth).toBeLessThanOrEqual(clientWidth + 1);
    });

    test("navigation is reachable on mobile", async ({ page }) => {
      await page.setViewportSize({ width: 375, height: 812 });
      await page.goto(path);

      // On mobile there's typically a hamburger menu or bottom nav
      const nav = page
        .getByRole("navigation")
        .or(page.getByRole("button", { name: /menu|nav/i }));
      await expect(nav.first()).toBeVisible();
    });
  });
}