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

/**
 * Testes de caminhos-base de Breadcrumb: o primeiro item não tem separador,
 * os seguintes têm, e só o último é a página atual (inclusive quando é o único).
 */

describe("Breadcrumb", () => {
  it("path: several items -> a separator before every item but the first", () => {
    const { container } = render(
      <Breadcrumb
        items={[
          { label: "Início", href: "/" },
          { label: "Cases", href: "/cases" },
          { label: "SEV Moda Íntima", href: "/cases/sev-modaintima" },
        ]}
      />,
    );

    const entries = Array.from(container.querySelectorAll("li"));
    expect(entries).toHaveLength(3);
    expect(entries[0].querySelector("span[aria-hidden='true']")).toBeNull();
    expect(
      entries[1].querySelector("span[aria-hidden='true']"),
    ).toHaveTextContent("/");
    expect(
      entries[2].querySelector("span[aria-hidden='true']"),
    ).toHaveTextContent("/");
    expect(entries[0].className).toBe("");
    expect(entries[1].className).toContain("flex");
  });

  it("path: a single item -> no separator, and it is the current page", () => {
    const { container } = render(
      <Breadcrumb items={[{ label: "Início", href: "/" }]} />,
    );

    expect(container.querySelector("span[aria-hidden='true']")).toBeNull();
    expect(screen.getByRole("link", { name: "Início" })).toHaveAttribute(
      "aria-current",
      "page",
    );
  });

  it("path: no items -> an empty list inside the navigation", () => {
    render(<Breadcrumb items={[]} />);

    const nav = screen.getByRole("navigation");
    expect(nav.querySelectorAll("li")).toHaveLength(0);
    expect(screen.queryByRole("link")).toBeNull();
  });
});