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

/**
 * Testes de caminhos-base de Breadcrumb: a barra de separação vem depois de cada item menos do último (a quebra de linha
 * no celular nunca deixa uma linha começando por "/"), e só o último é a página atual (inclusive quando é o único).
 */

describe("Breadcrumb", () => {
  it("path: several items -> a separator after every item but the last, so a wrapped line starts with a name", () => {
    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']"),
    ).toHaveTextContent("/");
    expect(
      entries[1].querySelector("span[aria-hidden='true']"),
    ).toHaveTextContent("/");
    expect(entries[2].querySelector("span[aria-hidden='true']")).toBeNull();
    // o nome vem antes da barra em todos os itens, e nenhum item abre por "/"
    for (const entry of entries) {
      expect(entry.firstElementChild?.tagName).toBe("A");
      expect(entry.textContent?.trimStart().startsWith("/")).toBe(false);
    }
    expect(entries[0].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();
  });
});