40e57715f9
Implements headless ToggleGroup with single/multiple selection modes, context-based item coordination, aria-pressed, and data-state attributes.
75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
import { fireEvent, render, screen } from "@solidjs/testing-library";
|
|
import { describe, expect, it } from "vitest";
|
|
import { ToggleGroup } from "../../../src/components/toggle-group/index";
|
|
|
|
describe("ToggleGroup single", () => {
|
|
it("no item pressed by default", () => {
|
|
render(() => (
|
|
<ToggleGroup type="single">
|
|
<ToggleGroup.Item value="a">A</ToggleGroup.Item>
|
|
</ToggleGroup>
|
|
));
|
|
expect(screen.getByRole("button").getAttribute("aria-pressed")).toBe("false");
|
|
});
|
|
|
|
it("pressing an item selects it", () => {
|
|
render(() => (
|
|
<ToggleGroup type="single">
|
|
<ToggleGroup.Item value="a">A</ToggleGroup.Item>
|
|
<ToggleGroup.Item value="b">B</ToggleGroup.Item>
|
|
</ToggleGroup>
|
|
));
|
|
fireEvent.click(screen.getAllByRole("button")[0]);
|
|
expect(screen.getAllByRole("button")[0].getAttribute("aria-pressed")).toBe("true");
|
|
expect(screen.getAllByRole("button")[1].getAttribute("aria-pressed")).toBe("false");
|
|
});
|
|
|
|
it("pressing another item in single mode deselects first", () => {
|
|
render(() => (
|
|
<ToggleGroup type="single" defaultValue="a">
|
|
<ToggleGroup.Item value="a">A</ToggleGroup.Item>
|
|
<ToggleGroup.Item value="b">B</ToggleGroup.Item>
|
|
</ToggleGroup>
|
|
));
|
|
fireEvent.click(screen.getAllByRole("button")[1]);
|
|
expect(screen.getAllByRole("button")[0].getAttribute("aria-pressed")).toBe("false");
|
|
expect(screen.getAllByRole("button")[1].getAttribute("aria-pressed")).toBe("true");
|
|
});
|
|
|
|
it("data-state reflects pressed state", () => {
|
|
render(() => (
|
|
<ToggleGroup type="single">
|
|
<ToggleGroup.Item value="a">A</ToggleGroup.Item>
|
|
</ToggleGroup>
|
|
));
|
|
expect(screen.getByRole("button").getAttribute("data-state")).toBe("off");
|
|
fireEvent.click(screen.getByRole("button"));
|
|
expect(screen.getByRole("button").getAttribute("data-state")).toBe("on");
|
|
});
|
|
});
|
|
|
|
describe("ToggleGroup multiple", () => {
|
|
it("pressing items toggles them independently", () => {
|
|
render(() => (
|
|
<ToggleGroup type="multiple">
|
|
<ToggleGroup.Item value="a">A</ToggleGroup.Item>
|
|
<ToggleGroup.Item value="b">B</ToggleGroup.Item>
|
|
</ToggleGroup>
|
|
));
|
|
fireEvent.click(screen.getAllByRole("button")[0]);
|
|
fireEvent.click(screen.getAllByRole("button")[1]);
|
|
expect(screen.getAllByRole("button")[0].getAttribute("aria-pressed")).toBe("true");
|
|
expect(screen.getAllByRole("button")[1].getAttribute("aria-pressed")).toBe("true");
|
|
});
|
|
|
|
it("pressing a pressed item in multiple mode unpresses it", () => {
|
|
render(() => (
|
|
<ToggleGroup type="multiple" defaultValue={["a"]}>
|
|
<ToggleGroup.Item value="a">A</ToggleGroup.Item>
|
|
</ToggleGroup>
|
|
));
|
|
fireEvent.click(screen.getByRole("button"));
|
|
expect(screen.getByRole("button").getAttribute("aria-pressed")).toBe("false");
|
|
});
|
|
});
|