import { expect, test } from "@playwright/test";
import { CONTACT_HEADING, clientProjectNames, DESKTOP } from "./helpers";

/** (e) Com JavaScript desligado, a home mostra o texto do contato e o nome dos clientes. */

test.use({ viewport: DESKTOP, javaScriptEnabled: false });

test("sem JavaScript a home mostra o contato e os nomes dos 4 clientes", async ({
  page,
}) => {
  const clients = clientProjectNames();
  expect(clients, "clientes em public/portfolio-data.json").toHaveLength(4);

  const response = await page.goto("/", { waitUntil: "load" });
  expect(response?.status()).toBe(200);

  await expect(
    page.getByRole("heading", { level: 2, name: CONTACT_HEADING }),
  ).toBeVisible();
  for (const name of clients) {
    await expect(
      page.getByText(name, { exact: false }).first(),
      `cliente "${name}"`,
    ).toBeVisible();
  }
  // o texto está no HTML entregue, não só na tela: vale também para quem lê sem renderizar
  const html = await (await page.request.get("/")).text();
  expect(html).toContain(CONTACT_HEADING);
  for (const name of clients) expect(html).toContain(name);
});