8f075f1792
Skeleton, Breadcrumbs, Link, Button, Image, Meter, NumberField Floating components: Tooltip (hover/focus), Popover (click, with focus trap and dismiss), HoverCard (hover with safe area). Simple components: Alert (role=alert), Badge (role=status), Skeleton (loading placeholder with data attributes). Navigation: Breadcrumbs (nav>ol>li with separators), Link (accessible anchor with disabled), Button (with disabled click suppression). Data/Form: Image (Img+Fallback with loading status), Meter (like Progress for known ranges), NumberField (spinbutton with inc/dec). 302 tests across 46 files, typecheck clean, build produces 176 files.
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { render, screen } from "@solidjs/testing-library";
|
|
import { describe, expect, it } from "vitest";
|
|
import { Breadcrumbs } from "../../../src/components/breadcrumbs/index";
|
|
|
|
describe("Breadcrumbs", () => {
|
|
it("has role=navigation", () => {
|
|
render(() => (
|
|
<Breadcrumbs>
|
|
<Breadcrumbs.Item>
|
|
<Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
|
|
</Breadcrumbs.Item>
|
|
<Breadcrumbs.Separator>/</Breadcrumbs.Separator>
|
|
<Breadcrumbs.Item>Current</Breadcrumbs.Item>
|
|
</Breadcrumbs>
|
|
));
|
|
expect(screen.getByRole("navigation")).toBeTruthy();
|
|
});
|
|
it("has aria-label", () => {
|
|
render(() => (
|
|
<Breadcrumbs>
|
|
<Breadcrumbs.Item>Home</Breadcrumbs.Item>
|
|
</Breadcrumbs>
|
|
));
|
|
expect(screen.getByRole("navigation").getAttribute("aria-label")).toBe("Breadcrumbs");
|
|
});
|
|
it("renders as ol > li", () => {
|
|
render(() => (
|
|
<Breadcrumbs>
|
|
<Breadcrumbs.Item>Home</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item>Page</Breadcrumbs.Item>
|
|
</Breadcrumbs>
|
|
));
|
|
expect(screen.getByRole("navigation").querySelector("ol")).toBeTruthy();
|
|
expect(screen.getByRole("navigation").querySelectorAll("li")).toHaveLength(2);
|
|
});
|
|
it("link renders as anchor", () => {
|
|
render(() => (
|
|
<Breadcrumbs>
|
|
<Breadcrumbs.Item>
|
|
<Breadcrumbs.Link href="/home">Home</Breadcrumbs.Link>
|
|
</Breadcrumbs.Item>
|
|
</Breadcrumbs>
|
|
));
|
|
expect(screen.getByRole("link")).toBeTruthy();
|
|
expect(screen.getByRole("link").getAttribute("href")).toBe("/home");
|
|
});
|
|
it("current item has aria-current=page", () => {
|
|
render(() => (
|
|
<Breadcrumbs>
|
|
<Breadcrumbs.Item>
|
|
<Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
|
|
</Breadcrumbs.Item>
|
|
<Breadcrumbs.Item current>Current</Breadcrumbs.Item>
|
|
</Breadcrumbs>
|
|
));
|
|
const items = screen.getByRole("navigation").querySelectorAll("li");
|
|
expect(items[1].getAttribute("aria-current")).toBe("page");
|
|
});
|
|
});
|