portifolio-evandrodevbr/app/cases/[slug]/page.paths.test.tsx

import { render, screen } from "@testing-library/react";
import { notFound } from "next/navigation";
import { caseStudies, getRelatedServices } from "@/lib/site-content";
import { getCaseMedia } from "../_components/case-media";
import CasePage, { generateMetadata } from "./page";

/**
 * Testes de caminhos-base de CasePage e generateMetadata (complemento de page.test.tsx).
 * Cobrem só o que o arquivo principal não exercita: slug desconhecido, mídia só no celular,
 * demonstração sem captura, resultado vazio e case sem serviço relacionado.
 */

// usePathname: o HoverPrefetchLink (trilha, cartões) lê o caminho para saber se está na home
jest.mock("next/navigation", () => ({
  notFound: jest.fn(() => {
    throw new Error("NEXT_NOT_FOUND");
  }),
  usePathname: () => "/cases",
}));

jest.mock("../_components/case-media", () => {
  const actual = jest.requireActual("../_components/case-media");
  return { ...actual, getCaseMedia: jest.fn(actual.getCaseMedia) };
});

const actualGetCaseMedia = jest.requireActual<
  typeof import("../_components/case-media")
>("../_components/case-media").getCaseMedia;
const mockedGetCaseMedia = jest.mocked(getCaseMedia);

beforeEach(() => {
  jest.mocked(notFound).mockClear();
});

afterEach(() => {
  mockedGetCaseMedia.mockImplementation(actualGetCaseMedia);
});

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

async function renderCase(id: string) {
  const ui = await CasePage({ params: Promise.resolve({ slug: id }) });
  return render(ui);
}

describe("CasePage: caminhos que o teste principal não cobre", () => {
  it("path: unknown slug -> calls notFound() and renders nothing", async () => {
    await expect(
      CasePage({ params: Promise.resolve({ slug: "nao-existe" }) }),
    ).rejects.toThrow("NEXT_NOT_FOUND");
    expect(notFound).toHaveBeenCalledTimes(1);
  });

  it("path: no demo and no desktop capture, but a mobile capture -> shows only the phone", async () => {
    const caseStudy = getCase("as-servicos");
    expect(caseStudy.demoUrl).toBeNull();
    mockedGetCaseMedia.mockImplementation((id, device) =>
      device === "mobile" ? actualGetCaseMedia(id, device) : undefined,
    );

    const { container } = await renderCase(caseStudy.id);

    expect(
      screen.getByRole("heading", { level: 2, name: "Como ficou" }),
    ).toBeVisible();
    expect(
      screen.getByRole("button", {
        name: `Reproduzir o vídeo do site ${caseStudy.title} no celular`,
      }),
    ).toBeInTheDocument();
    expect(
      screen.queryByRole("button", {
        name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
      }),
    ).toBeNull();
    // sem captura do computador, o topo fica em uma coluna, sem moldura de navegador
    expect(container.querySelector(".ds-bframe")).toBeNull();
    expect(
      container.querySelector("section")?.querySelector(".grid"),
    ).toBeNull();
    expect(container.querySelector(".ds-phone")).not.toBeNull();
    expect(screen.queryByRole("link", { name: /^Abrir o site/ })).toBeNull();
  });

  it("path: demo published but no capture on disk -> keeps the block with the site button and no video", async () => {
    const caseStudy = getCase("sev-modaintima");
    expect(caseStudy.demoUrl).toBeTruthy();
    mockedGetCaseMedia.mockImplementation(() => undefined);

    const { container } = await renderCase(caseStudy.id);

    expect(
      screen.getByRole("heading", { level: 2, name: "Como ficou" }),
    ).toBeVisible();
    expect(
      screen.getByRole("link", { name: `Abrir o site ${caseStudy.title}` }),
    ).toHaveAttribute("href", caseStudy.demoUrl);
    expect(container.querySelector("video")).toBeNull();
    expect(container.querySelector(".ds-bframe")).toBeNull();
    expect(container.querySelector(".ds-phone")).toBeNull();
  });

  it("path: result is an empty list -> no result section", async () => {
    const caseStudy = getCase("lavacao-047");
    caseStudy.result = [];
    try {
      await renderCase(caseStudy.id);
      expect(screen.queryByRole("heading", { name: "Resultado" })).toBeNull();
      expect(
        screen.getByRole("heading", { level: 2, name: "Como ficou" }),
      ).toBeVisible();
    } finally {
      delete caseStudy.result;
    }
  });

  it("path: case that no service points to -> no related service links, contact stays", async () => {
    const caseStudy = getCase("nutriscan");
    expect(getRelatedServices(caseStudy.id)).toHaveLength(0);

    await renderCase(caseStudy.id);

    expect(screen.getByText(/Projeto de laboratório/)).toBeVisible();
    expect(screen.queryByRole("link", { name: /^Ver o serviço:/ })).toBeNull();
    expect(screen.queryByText("Serviços ligados a este projeto")).toBeNull();
    // o NutriScan tem "Como ficou": o botão de contato vem depois dele e de novo no fecho, com o mesmo rótulo
    const contacts = screen.getAllByRole("link", {
      name: "Falar sobre meu projeto",
    });
    expect(contacts).toHaveLength(2);
    for (const contact of contacts) expect(contact).toBeVisible();
    expect(
      screen.getByRole("link", { name: "Ver outros cases" }),
    ).toHaveAttribute("href", "/cases");
  });
});

describe("generateMetadata: caminho do slug desconhecido", () => {
  it("path: unknown slug -> only a 'not found' title, no canonical or social tags", async () => {
    const metadata = await generateMetadata({
      params: Promise.resolve({ slug: "nao-existe" }),
    });
    expect(metadata).toEqual({ title: "Case não encontrado" });
  });
});