portifolio-evandrodevbr/app/servicos/_components/ServiceOfferCards.paths.test.tsx

import { render, screen, within } from "@testing-library/react";
import { setNavigation } from "@/__mocks__/next/navigation";
import { caseStudies, type ServiceOffer } from "@/lib/site-content";
import { ServiceOfferCards } from "./ServiceOfferCards";

/**
 * Testes de caminhos-base de ServiceOfferCards / OfferCard (CC 4): id de case que existe | que não existe (ignorado);
 * com cases | sem cases (a lista de links some); com observação | sem observação.
 */

beforeEach(() => {
  setNavigation({ pathname: "/servicos" });
});

function offer(overrides: Partial<ServiceOffer["proof"]>): ServiceOffer {
  return {
    id: "site",
    name: "Oferta de teste",
    whatsappSubject: "uma oferta de teste",
    summary: "Resumo.",
    href: "/servicos/criacao-de-sites",
    deliverables: ["Um", "Dois", "Três"],
    firstStep: "Primeira conversa. Depois, escopo e proposta por escrito.",
    proof: { label: "Veja funcionando", caseIds: [], ...overrides },
  };
}

const card = () => screen.getByRole("article");

describe("ServiceOfferCards", () => {
  it("path: cases that exist and a note -> a link per case in the order given, then the note", () => {
    render(
      <ServiceOfferCards
        offers={[
          offer({ caseIds: ["sev-modaintima", "lavacao-047"], note: "Nota." }),
        ]}
      />,
    );

    const links = within(card()).getAllByRole("link", { name: /^Ver case / });
    expect(links.map((link) => link.getAttribute("href"))).toEqual([
      "/cases/sev-modaintima",
      "/cases/lavacao-047",
    ]);
    expect(within(card()).getByText("Nota.")).toBeVisible();
  });

  it("path: an id with no case behind it -> skipped, the real cases around it stay", () => {
    render(
      <ServiceOfferCards
        offers={[
          offer({ caseIds: ["nao-existe", "lavacao-047", "tambem-nao"] }),
        ]}
      />,
    );

    const links = within(card()).getAllByRole("link", { name: /^Ver case / });
    expect(links.map((link) => link.getAttribute("href"))).toEqual([
      "/cases/lavacao-047",
    ]);
  });

  it("path: only ids with no case -> no list of cases at all, the label and the service link stay", () => {
    render(<ServiceOfferCards offers={[offer({ caseIds: ["nao-existe"] })]} />);

    expect(
      within(card()).queryAllByRole("link", { name: /^Ver case / }),
    ).toEqual([]);
    expect(within(card()).queryAllByRole("listitem")).toHaveLength(3);
    expect(within(card()).getByText("Veja funcionando")).toBeVisible();
    expect(
      within(card()).getByRole("link", { name: /Ver o serviço|Ver serviço/ }),
    ).toHaveAttribute("href", "/servicos/criacao-de-sites");
  });

  it("path: no cases and a note (the review offer) -> only the note under the label", () => {
    render(
      <ServiceOfferCards
        offers={[
          offer({
            caseIds: [],
            label: "Veja como funciona",
            note: "A página mostra o que você recebe.",
          }),
        ]}
      />,
    );

    expect(within(card()).getByText("Veja como funciona")).toBeVisible();
    expect(
      within(card()).getByText("A página mostra o que você recebe."),
    ).toBeVisible();
    expect(
      within(card()).queryAllByRole("link", { name: /^Ver case / }),
    ).toEqual([]);
  });

  it("path: cases and no note -> no empty paragraph for the note", () => {
    const { container } = render(
      <ServiceOfferCards offers={[offer({ caseIds: ["lavacao-047"] })]} />,
    );

    expect(container.querySelectorAll("article p")).toHaveLength(2);
  });

  it("path: every real case id of the real offers resolves to a case (no silently dropped proof)", () => {
    const { serviceOffers } =
      jest.requireActual<typeof import("@/lib/site-content")>(
        "@/lib/site-content",
      );
    const known = new Set(caseStudies.map(({ id }) => id));

    for (const { proof } of serviceOffers)
      for (const id of proof.caseIds) expect(known.has(id)).toBe(true);
  });

  it.each([
    // cinco ofertas (as de hoje): 3 + 2, os dois da última linha dividem a linha
    [5, ["2", "2", "2", "3", "3"]],
    // quatro: 3 + 1, o que sobra ocupa a linha inteira
    [4, ["2", "2", "2", "6"]],
    // três: uma linha cheia
    [3, ["2", "2", "2"]],
  ])(
    "path: %i offers -> no empty cell on the last row of the 6-column grid",
    (count, spans) => {
      const ids: ServiceOffer["id"][] = [
        "site",
        "sistema",
        "whatsapp",
        "revisao",
        "fiscal",
      ];
      const offers = ids
        .slice(0, count)
        .map((id): ServiceOffer => ({ ...offer({}), id }));
      const { container } = render(<ServiceOfferCards offers={offers} />);

      expect(container.firstElementChild).toHaveClass("lg:grid-cols-6");
      expect(
        Array.from(container.querySelectorAll("article")).map(
          (card) => card.className.match(/lg:col-span-(\d)/)?.[1],
        ),
      ).toEqual(spans);
    },
  );
});