54 lines
2.1 KiB
TypeScript
54 lines
2.1 KiB
TypeScript
import { fireEvent, render, screen } from "@solidjs/testing-library";
|
|
import { describe, expect, it } from "vitest";
|
|
import { Checkbox } from "../../../src/components/checkbox/index";
|
|
|
|
describe("Checkbox", () => {
|
|
it("renders with role=checkbox", () => {
|
|
render(() => <Checkbox />);
|
|
expect(screen.getByRole("checkbox")).toBeTruthy();
|
|
});
|
|
|
|
it("is unchecked by default", () => {
|
|
render(() => <Checkbox />);
|
|
expect(screen.getByRole("checkbox").getAttribute("aria-checked")).toBe("false");
|
|
expect(screen.getByRole("checkbox").getAttribute("data-state")).toBe("unchecked");
|
|
});
|
|
|
|
it("checks on click", () => {
|
|
render(() => <Checkbox />);
|
|
fireEvent.click(screen.getByRole("checkbox"));
|
|
expect(screen.getByRole("checkbox").getAttribute("aria-checked")).toBe("true");
|
|
expect(screen.getByRole("checkbox").getAttribute("data-state")).toBe("checked");
|
|
});
|
|
|
|
it("unchecks when clicked again", () => {
|
|
render(() => <Checkbox defaultChecked />);
|
|
fireEvent.click(screen.getByRole("checkbox"));
|
|
expect(screen.getByRole("checkbox").getAttribute("aria-checked")).toBe("false");
|
|
});
|
|
|
|
it("supports indeterminate default state", () => {
|
|
render(() => <Checkbox defaultChecked="indeterminate" />);
|
|
expect(screen.getByRole("checkbox").getAttribute("aria-checked")).toBe("mixed");
|
|
expect(screen.getByRole("checkbox").getAttribute("data-state")).toBe("indeterminate");
|
|
});
|
|
|
|
it("indeterminate -> checked on click", () => {
|
|
render(() => <Checkbox defaultChecked="indeterminate" />);
|
|
fireEvent.click(screen.getByRole("checkbox"));
|
|
expect(screen.getByRole("checkbox").getAttribute("aria-checked")).toBe("true");
|
|
});
|
|
|
|
it("does not toggle when disabled", () => {
|
|
render(() => <Checkbox disabled />);
|
|
fireEvent.click(screen.getByRole("checkbox"));
|
|
expect(screen.getByRole("checkbox").getAttribute("aria-checked")).toBe("false");
|
|
});
|
|
|
|
it("controlled: stays at given value", () => {
|
|
render(() => <Checkbox checked={false} onCheckedChange={() => {}} />);
|
|
fireEvent.click(screen.getByRole("checkbox"));
|
|
expect(screen.getByRole("checkbox").getAttribute("aria-checked")).toBe("false");
|
|
});
|
|
});
|