75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import { render, screen } from "@testing-library/react";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbCurrent,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbSeparator
|
|
} from "./breadcrumb";
|
|
|
|
describe("Breadcrumb", () => {
|
|
it("renders semantic navigation, list, items, and current page state", () => {
|
|
render(
|
|
<Breadcrumb aria-label="Release path">
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink href="/releases">Releases</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbCurrent>Q2 Launch</BreadcrumbCurrent>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
);
|
|
|
|
expect(screen.getByRole("navigation", { name: "Release path" })).toHaveAttribute(
|
|
"data-slot",
|
|
"root"
|
|
);
|
|
expect(screen.getByRole("list")).toHaveAttribute("data-slot", "list");
|
|
expect(screen.getByRole("link", { name: "Releases" })).toHaveAttribute("data-slot", "link");
|
|
expect(screen.getByText("Q2 Launch")).toHaveAttribute("aria-current", "page");
|
|
expect(screen.getByText("Q2 Launch")).toHaveAttribute("data-current", "");
|
|
});
|
|
|
|
it("supports custom separators", () => {
|
|
render(
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink href="/runs">Runs</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator>/</BreadcrumbSeparator>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbCurrent>run-42</BreadcrumbCurrent>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
);
|
|
|
|
expect(screen.getByText("/")).toHaveAttribute("data-slot", "separator");
|
|
expect(screen.getByText("/")).toHaveAttribute("aria-hidden", "true");
|
|
});
|
|
|
|
it("supports asChild composition for custom links", () => {
|
|
render(
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink asChild>
|
|
<button type="button">Open run</button>
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
);
|
|
|
|
const button = screen.getByRole("button", { name: "Open run" });
|
|
expect(button).toHaveAttribute("data-slot", "link");
|
|
});
|
|
});
|