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

const routes = [
  { path: "/", heading: /Выбирай место/, action: ".spot-card" },
  { path: "/spots/vyunok-6331x6332", heading: /^Точка /, action: "[data-plan-save]" },
  { path: "/waterbodies/vyunok", heading: /Вьюнок/, action: ".catalog-results" },
  { path: "/plan", heading: /Мой план/, action: "[data-plan-share]" },
  { path: "/tackle", heading: /Снасти и приманки/, action: "[aria-label=\"Фильтры каталога снастей\"]" },
] as const;

test("key routes keep their first answer and action visible on mobile", async ({ page }) => {
  await page.setViewportSize({ width: 390, height: 844 });
  for (const route of routes) {
    await page.goto(route.path);
    await expect(page.locator("main h1")).toHaveText(route.heading);
    await expect(page.locator(route.action).first()).toBeVisible();
    const state = await page.evaluate(() => ({
      clientWidth: document.documentElement.clientWidth,
      scrollWidth: document.documentElement.scrollWidth,
      main: Boolean(document.querySelector("main")),
    }));
    expect(state.main, `${route.path} has no main landmark`).toBe(true);
    expect(state.scrollWidth, `${route.path} overflows at 390px`).toBeLessThanOrEqual(state.clientWidth);
  }
});