import {
  cleanup,
  render,
  screen,
} from "@testing-library/react";
import assert from "node:assert";
import {
  afterEach,
  describe,
  test,
} from "node:test";
import { Breadcrumbs } from "./index";

describe("Breadcrumbs", () => {
  afterEach(() => {
    cleanup();
  });

  test("renders breadcrumb navigation with items", () => {
    render(
      <Breadcrumbs
        items={[
          { href: "/", labelSlot: "Home" },
          { href: "/catalog", labelSlot: "Catalog" },
          { href: "/catalog/item", labelSlot: "Current" },
        ]}
      />
    );

    const nav = screen.getByLabelText("Breadcrumb");
    assert.notStrictEqual(nav, null);
    assert.strictEqual(screen.getAllByRole("link").length, 3);
    assert.strictEqual(
      screen.getByText("Current").closest("a")?.getAttribute("aria-current"), "page"
    );
  });

  test("updates item/link classnames when baseClass changes", () => {
    const items = [
      { href: "/", labelSlot: "Home" },
      { href: "/catalog", labelSlot: "Catalog" },
    ];
    const { rerender } = render(<Breadcrumbs baseClass={"breadcrumbs"} items={items} />);

    const firstLinkBefore = screen.getByText("Home").closest("a");
    assert.strictEqual(firstLinkBefore?.classList.contains("breadcrumbs__link"), true);

    rerender(<Breadcrumbs baseClass={"crumbs"} items={items} />);

    const firstLinkAfter = screen.getByText("Home").closest("a");
    assert.strictEqual(firstLinkAfter?.classList.contains("crumbs__link"), true);
    assert.strictEqual(firstLinkAfter?.classList.contains("breadcrumbs__link"), false);
  });
});