2026-03-29 07:39:35 +07:00

58 lines
2.1 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");
});
it("sets aria-valuenow=0 when value is zero", () => {
render(() => <Progress value={0} />);
expect(screen.getByRole("progressbar").getAttribute("aria-valuenow")).toBe("0");
expect(screen.getByRole("progressbar").getAttribute("data-state")).toBe("complete");
});
});