feat(ui): add navigation and picker primitives

2026-03-22 23:38:31 +08:00
parent a8c1d3f256
commit 4d67f4ad76
22 changed files with 2805 additions and 0 deletions
@@ -0,0 +1,74 @@
+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");
+  });
+});