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

/**
 * A trilha de navegação só pré-carrega a rota de um item quando a pessoa chega nele (mouse, teclado ou toque):
 * o `prefetch` não aparece no HTML, então o Link é trocado por um que o expõe em `data-prefetch`.
 */

jest.mock("next/link", () => ({
  __esModule: true,
  default: ({
    children,
    prefetch,
    ...props
  }: { children?: React.ReactNode; prefetch?: boolean | null } & Record<
    string,
    unknown
  >) => (
    <a data-prefetch={String(prefetch)} {...props}>
      {children}
    </a>
  ),
}));

const items = [
  { label: "Início", href: "/" },
  { label: "Cases", href: "/cases" },
];

describe("Breadcrumb: pré-carregamento", () => {
  it("path: opening the page -> no link pre-fetches", () => {
    render(<Breadcrumb items={items} />);

    for (const link of screen.getAllByRole("link")) {
      expect(link).toHaveAttribute("data-prefetch", "false");
    }
  });

  it.each([
    ["mouse", fireEvent.mouseEnter],
    ["keyboard focus", fireEvent.focus],
    ["touch", fireEvent.touchStart],
  ])("path: %s reaching one link -> only that link pre-fetches", (_, event) => {
    render(<Breadcrumb items={items} />);

    const [home, cases] = screen.getAllByRole("link");
    event(cases);

    expect(cases).toHaveAttribute("data-prefetch", "null");
    expect(home).toHaveAttribute("data-prefetch", "false");
  });
});