21a7991562
- Headless progress bar component with support for determinate and indeterminate states - Exposes aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext for accessibility - Supports custom value label via getValueLabel function - All tests passing (8/8), full suite passing (88/88), types check, biome compliant
52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import { render, screen } from "@solidjs/testing-library";
|
|
import { describe, expect, it } from "vitest";
|
|
import { Progress } from "../../../src/components/progress/index";
|
|
|
|
describe("Progress", () => {
|
|
it("renders with role=progressbar", () => {
|
|
render(() => <Progress value={50} />);
|
|
expect(screen.getByRole("progressbar")).toBeTruthy();
|
|
});
|
|
|
|
it("sets aria-valuenow", () => {
|
|
render(() => <Progress value={50} />);
|
|
expect(screen.getByRole("progressbar").getAttribute("aria-valuenow")).toBe("50");
|
|
});
|
|
|
|
it("sets aria-valuemin=0 and aria-valuemax=100 by default", () => {
|
|
render(() => <Progress value={50} />);
|
|
const pb = screen.getByRole("progressbar");
|
|
expect(pb.getAttribute("aria-valuemin")).toBe("0");
|
|
expect(pb.getAttribute("aria-valuemax")).toBe("100");
|
|
});
|
|
|
|
it("uses custom max", () => {
|
|
render(() => <Progress value={5} max={10} />);
|
|
expect(screen.getByRole("progressbar").getAttribute("aria-valuemax")).toBe("10");
|
|
});
|
|
|
|
it("is indeterminate when value is null", () => {
|
|
render(() => <Progress value={null} />);
|
|
const pb = screen.getByRole("progressbar");
|
|
expect(pb.getAttribute("aria-valuenow")).toBeNull();
|
|
expect(pb.getAttribute("data-state")).toBe("indeterminate");
|
|
});
|
|
|
|
it("shows percentage as aria-valuetext by default", () => {
|
|
render(() => <Progress value={50} />);
|
|
expect(screen.getByRole("progressbar").getAttribute("aria-valuetext")).toBe("50%");
|
|
});
|
|
|
|
it("uses custom getValueLabel", () => {
|
|
render(() => (
|
|
<Progress value={1} max={10} getValueLabel={(v, m) => `${v} of ${m}`} />
|
|
));
|
|
expect(screen.getByRole("progressbar").getAttribute("aria-valuetext")).toBe("1 of 10");
|
|
});
|
|
|
|
it("data-state=complete when value provided", () => {
|
|
render(() => <Progress value={75} />);
|
|
expect(screen.getByRole("progressbar").getAttribute("data-state")).toBe("complete");
|
|
});
|
|
});
|