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

import { render, screen } from "@testing-library/react";
import {
  compactHero,
  heroWithMediaGrid,
} from "@/app/cases/_components/hero-styles";
import {
  caseStudies,
  getServicePage,
  type ServicePageContent,
} from "@/lib/site-content";
import { ServiceHero } from "./ServiceHero";
import type { ServiceHeroData } from "./service-page";

/**
 * Testes de caminhos-base de ServiceHero (CC 7, contado à mão: as seis escolhas do JSX):
 *   hasHeroSide (classe do topo: compacto ou não), hasHeroSide ou heroLoop (grade de duas colunas), hasCaseCards (botão
 *   "Ver projetos parecidos"), diagram (esquema ou o resto), heroLoop sem coluna ao lado (peça em loop ou capa) e
 *   heroCase (a frase da capa).
 * Os filhos que desenham a coluna ao lado (esquema, peça e capa) são trocados por dublês que mostram o que receberam.
 */

jest.mock("./ServiceDiagram", () => ({
  ServiceDiagram: ({ kind }: { kind: string }) => (
    <div data-testid="diagram">{kind}</div>
  ),
}));
jest.mock("@/app/components/PagePiece", () => ({
  PagePiece: ({ loop }: { loop: string }) => (
    <div data-testid="piece">{loop}</div>
  ),
}));
jest.mock("./ServiceHeroCover", () => ({
  ServiceHeroCover: (props: {
    caseStudy?: { id: string };
    device?: string;
    relevance?: string;
  }) => (
    <div
      data-testid="cover"
      data-case={props.caseStudy?.id ?? ""}
      data-device={props.device ?? ""}
      data-relevance={props.relevance ?? ""}
      data-has-relevance={String(props.relevance !== undefined)}
    />
  ),
}));

function service(slug = "criacao-de-sites"): ServicePageContent {
  const found = getServicePage(slug);
  if (!found) throw new Error(`Missing service ${slug}`);
  return found;
}

function caseStudy(id: string) {
  const found = caseStudies.find((item) => item.id === id);
  if (!found) throw new Error(`Missing case ${id}`);
  return found;
}

const noSide: ServiceHeroData = {
  heroCase: undefined,
  heroDevice: "desktop",
  diagram: undefined,
  hasHeroSide: false,
  hasCaseCards: false,
};

const shell = (container: HTMLElement) =>
  container.querySelector(".ds-section-shell") as HTMLElement;
const section = (container: HTMLElement) =>
  container.querySelector("section") as HTMLElement;
const projectsLink = () =>
  screen.queryByRole("link", { name: "Ver projetos parecidos" });

describe("ServiceHero", () => {
  it("path: no cover, no diagram and no card -> one low column, no 'Ver projetos parecidos', and an empty slot where the cover would be", () => {
    const { container } = render(
      <ServiceHero service={service()} hero={noSide} />,
    );

    for (const token of compactHero.split(/\s+/).filter(Boolean))
      expect(section(container)).toHaveClass(token);
    for (const token of heroWithMediaGrid.split(/\s+/).filter(Boolean))
      expect(shell(container)).not.toHaveClass(token);
    expect(projectsLink()).toBeNull();
    expect(screen.queryByTestId("diagram")).toBeNull();
    // sem esquema, quem ocupa a coluna é a capa, que por conta própria não desenha nada sem case
    expect(screen.getByTestId("cover")).toHaveAttribute("data-case", "");
    expect(screen.getByTestId("cover")).toHaveAttribute(
      "data-has-relevance",
      "false",
    );
  });

  it("path: a side column -> the compact class goes away and the two-column grid comes in", () => {
    const { container } = render(
      <ServiceHero
        service={service("tauri-rust")}
        hero={{ ...noSide, diagram: "desktop", hasHeroSide: true }}
      />,
    );

    for (const token of compactHero.split(/\s+/).filter(Boolean))
      expect(section(container)).not.toHaveClass(token);
    for (const token of heroWithMediaGrid.split(/\s+/).filter(Boolean))
      expect(shell(container)).toHaveClass(token);
  });

  it("path: cards below -> 'Ver projetos parecidos' points at the related cases", () => {
    render(
      <ServiceHero
        service={service()}
        hero={{ ...noSide, hasCaseCards: true }}
      />,
    );

    expect(projectsLink()).toHaveAttribute("href", "#casos-relacionados");
  });

  it("path: a diagram -> the diagram fills the side column and the cover is not mounted", () => {
    render(
      <ServiceHero
        service={service("integracao-hardware-software-iot")}
        hero={{ ...noSide, diagram: "iot", hasHeroSide: true }}
      />,
    );

    expect(screen.getByTestId("diagram")).toHaveTextContent("iot");
    expect(screen.queryByTestId("cover")).toBeNull();
  });

  it("path: a loop and no side column -> the low strip stays, the grid comes in and the loop piece takes the side column", () => {
    const { container } = render(
      <ServiceHero
        service={service("atendimento-whatsapp-ia")}
        hero={noSide}
      />,
    );

    for (const token of compactHero.split(/\s+/).filter(Boolean))
      expect(section(container)).toHaveClass(token);
    for (const token of heroWithMediaGrid.split(/\s+/).filter(Boolean))
      expect(shell(container)).toHaveClass(token);
    expect(screen.getByTestId("piece")).toHaveTextContent("whatsapp");
    expect(screen.queryByTestId("cover")).toBeNull();
    // sem rótulo sobre o título: a trilha já diz o nome do serviço
    expect(section(container).querySelector(".ds-eyebrow")).toBeNull();
  });

  it("path: a loop and a side column -> the side column wins and the loop is not mounted", () => {
    render(
      <ServiceHero
        service={service("nota-fiscal-reforma-tributaria")}
        hero={{ ...noSide, diagram: "desktop", hasHeroSide: true }}
      />,
    );

    expect(screen.getByTestId("diagram")).toBeInTheDocument();
    expect(screen.queryByTestId("piece")).toBeNull();
  });

  it("path: a cover case -> the cover gets the case, the device and the service's sentence about that case", () => {
    const lavacao = service();
    render(
      <ServiceHero
        service={lavacao}
        hero={{
          ...noSide,
          heroCase: caseStudy("lavacao-047"),
          hasHeroSide: true,
        }}
      />,
    );

    const cover = screen.getByTestId("cover");
    expect(cover).toHaveAttribute("data-case", "lavacao-047");
    expect(cover).toHaveAttribute("data-device", "desktop");
    expect(cover).toHaveAttribute(
      "data-relevance",
      lavacao.caseRelevance["lavacao-047"],
    );
    expect(screen.queryByTestId("diagram")).toBeNull();
  });

  it("path: a cover case the service has no sentence for -> the cover gets no sentence (it falls back on its own)", () => {
    // o serviço de esquema não tem frase para a SEV
    const withoutSentence = service("tauri-rust");
    expect(withoutSentence.caseRelevance["sev-modaintima"]).toBeUndefined();

    render(
      <ServiceHero
        service={withoutSentence}
        hero={{
          ...noSide,
          heroCase: caseStudy("sev-modaintima"),
          heroDevice: "mobile",
          hasHeroSide: true,
        }}
      />,
    );

    const cover = screen.getByTestId("cover");
    expect(cover).toHaveAttribute("data-case", "sev-modaintima");
    expect(cover).toHaveAttribute("data-device", "mobile");
    expect(cover).toHaveAttribute("data-has-relevance", "false");
  });

  it("path: the contact button speaks of the service by its whatsappSubject, in lower case, with the hero placement", () => {
    const sistemas = service("engenharia-de-software");
    render(<ServiceHero service={sistemas} hero={noSide} />);

    const button = screen.getByRole("link", {
      name: /chamar no whatsapp/i,
    });
    const message = new URL(button.getAttribute("href") ?? "").searchParams.get(
      "text",
    );
    expect(message).toContain(
      `Quero conversar sobre ${sistemas.whatsappSubject}.`,
    );
    expect(sistemas.whatsappSubject).toMatch(/^[a-zà-ú]/);
  });
});