portifolio-evandrodevbr/app/components/Hero.paths.test.tsx

import { fireEvent, render, screen } from "@testing-library/react";
import Hero from "./Hero";

/**
 * Testes de caminhos-base de Hero (complemento de Hero.test.tsx): statItems() (sem stats, sem anos, zero anos, com anos),
 * links sociais (externo x mailto, com rastreio), faixa de clientes e endereço do trabalho em destaque.
 */

jest.mock("./cinematic/HeroField", () => ({
  __esModule: true,
  default: () => <div data-testid="hero-field" />,
}));

beforeEach(() => {
  jest.replaceProperty(process.env, "NODE_ENV", "production");
  localStorage.setItem("evandro.analytics-consent.v1", "granted");
  window.gtag = jest.fn();
});

afterEach(() => {
  jest.restoreAllMocks();
  localStorage.clear();
  delete window.gtag;
});

describe("Hero: números de experiência (statItems)", () => {
  it.each([
    ["no stats at all", undefined],
    ["stats without years", {}],
    ["zero years", { years: 0 }],
  ])("path: %s -> no figures block", (_label, stats) => {
    const { container } = render(<Hero stats={stats} />);

    expect(container.querySelector("dl")).toBeNull();
    expect(screen.queryByText("anos de experiência")).toBeNull();
  });

  it("path: years given -> one figure with the number and its label", () => {
    const { container } = render(<Hero stats={{ years: 7 }} />);

    const items = container.querySelectorAll("dl > div");
    expect(items).toHaveLength(1);
    expect(items[0].querySelector("dd")).toHaveTextContent("7");
    expect(items[0].querySelector("dt")).toHaveTextContent(
      "anos de experiência",
    );
  });
});

describe("Hero: links sociais", () => {
  it("path: LinkedIn (http link) -> new tab with noopener and a social_click", () => {
    render(<Hero />);
    const link = screen.getByRole("link", { name: "LinkedIn" });

    expect(link).toHaveAttribute("target", "_blank");
    expect(link).toHaveAttribute("rel", "noopener noreferrer");
    fireEvent.click(link, { button: 0 });

    expect(window.gtag).toHaveBeenCalledWith(
      "event",
      "social_click",
      expect.objectContaining({ network: "linkedin" }),
    );
  });

  it("path: e-mail (mailto link) -> same tab, no rel, and an email_click from the hero", () => {
    render(<Hero />);
    const link = screen.getByRole("link", { name: "Email" });

    expect(link).not.toHaveAttribute("target");
    expect(link).not.toHaveAttribute("rel");
    link.addEventListener("click", (event) => event.preventDefault());
    fireEvent.click(link, { button: 0 });

    expect(window.gtag).toHaveBeenCalledWith(
      "event",
      "email_click",
      expect.objectContaining({ placement: "hero" }),
    );
  });
});

describe("Hero: faixa de clientes e trabalho em destaque", () => {
  it("path: clients given -> the strip links each client to its case", () => {
    render(<Hero clients={[{ id: "lavacao-047", name: "Lavação 047" }]} />);

    expect(screen.getByText("Já entregue para:")).toBeInTheDocument();
    expect(screen.getByRole("link", { name: "Lavação 047" })).toHaveAttribute(
      "href",
      "/cases/lavacao-047",
    );
  });

  it("path: no clients -> no strip", () => {
    render(<Hero />);

    expect(screen.queryByText("Já entregue para:")).toBeNull();
  });

  it("path: workUrl given -> the browser bar of the featured work shows it", () => {
    render(<Hero workUrl={{ text: "lavacao.example.com", secure: true }} />);

    expect(screen.getByTestId("hero-work")).toHaveTextContent(
      "lavacao.example.com",
    );
  });

  it("path: workUrl omitted -> the browser bar shows no address", () => {
    render(<Hero />);

    expect(screen.getByTestId("hero-work")).not.toHaveTextContent(".com");
  });

  it("path: the main button carries the id that hides the floating WhatsApp", () => {
    render(<Hero />);

    expect(
      screen.getByRole("link", { name: /Conversar sobre meu projeto/ }),
    ).toHaveAttribute("id", "hero-contact-cta");
  });
});