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

describe("Breadcrumb", () => {
  const items = [
    { label: "Início", href: "/" },
    { label: "Cases", href: "/cases" },
    { label: "SEV Moda Íntima", href: "/cases/sev-modaintima" },
  ];

  it("marks only the last item as the current page", () => {
    render(<Breadcrumb items={items} />);

    const links = within(
      screen.getByRole("navigation", { name: "Trilha de navegação" }),
    ).getAllByRole("link");
    expect(links.map((link) => link.getAttribute("aria-current"))).toEqual([
      null,
      null,
      "page",
    ]);
  });

  it("keeps the text at 15 px or more, as the body text of the inner pages", () => {
    const { container } = render(<Breadcrumb items={items} />);

    const list = container.querySelector("ol");
    expect(list).toHaveClass("text-[15px]");
    expect(list?.className).not.toMatch(/text-(xs|sm)\b|text-\[1[0-4]px\]/);
  });
});