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(() => ); expect(screen.getByRole("progressbar")).toBeTruthy(); }); it("sets aria-valuenow", () => { render(() => ); expect(screen.getByRole("progressbar").getAttribute("aria-valuenow")).toBe("50"); }); it("sets aria-valuemin=0 and aria-valuemax=100 by default", () => { render(() => ); const pb = screen.getByRole("progressbar"); expect(pb.getAttribute("aria-valuemin")).toBe("0"); expect(pb.getAttribute("aria-valuemax")).toBe("100"); }); it("uses custom max", () => { render(() => ); expect(screen.getByRole("progressbar").getAttribute("aria-valuemax")).toBe("10"); }); it("is indeterminate when value is null", () => { render(() => ); 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(() => ); expect(screen.getByRole("progressbar").getAttribute("aria-valuetext")).toBe("50%"); }); it("uses custom getValueLabel", () => { render(() => ( `${v} of ${m}`} /> )); expect(screen.getByRole("progressbar").getAttribute("aria-valuetext")).toBe("1 of 10"); }); it("data-state=complete when value provided", () => { render(() => ); expect(screen.getByRole("progressbar").getAttribute("data-state")).toBe("complete"); }); it("sets aria-valuenow=0 when value is zero", () => { render(() => ); expect(screen.getByRole("progressbar").getAttribute("aria-valuenow")).toBe("0"); expect(screen.getByRole("progressbar").getAttribute("data-state")).toBe("complete"); }); });