70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
import { render, screen } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
|
|
import { RadioGroup, RadioGroupItem } from "./radio-group";
|
|
|
|
describe("RadioGroup", () => {
|
|
it("renders orientation and default value state", () => {
|
|
render(
|
|
<RadioGroup aria-label="Review lane" defaultValue="design" orientation="horizontal">
|
|
<RadioGroupItem aria-label="Editorial" value="editorial" />
|
|
<RadioGroupItem aria-label="Design" value="design" />
|
|
</RadioGroup>
|
|
);
|
|
|
|
const group = screen.getByRole("radiogroup", { name: "Review lane" });
|
|
const design = screen.getByRole("radio", { name: "Design" });
|
|
const designIcon = design.querySelector('[data-slot="icon"]');
|
|
|
|
expect(group).toHaveAttribute("data-slot", "root");
|
|
expect(group).toHaveAttribute("data-orientation", "horizontal");
|
|
expect(design).toBeChecked();
|
|
expect(design).toHaveAttribute("data-slot", "control");
|
|
expect(design).toHaveAttribute("data-state", "checked");
|
|
expect(designIcon).toHaveAttribute("data-state", "checked");
|
|
});
|
|
|
|
it("supports value change callbacks when a new option is selected", async () => {
|
|
const user = userEvent.setup();
|
|
const onValueChange = vi.fn();
|
|
|
|
render(
|
|
<RadioGroup aria-label="Priority" defaultValue="low" onValueChange={onValueChange}>
|
|
<RadioGroupItem aria-label="Low" value="low" />
|
|
<RadioGroupItem aria-label="Medium" value="medium" />
|
|
<RadioGroupItem aria-label="High" value="high" />
|
|
</RadioGroup>
|
|
);
|
|
|
|
const medium = screen.getByRole("radio", { name: "Medium" });
|
|
const mediumIcon = medium.querySelector('[data-slot="icon"]');
|
|
|
|
await user.click(medium);
|
|
|
|
expect(medium).toBeChecked();
|
|
expect(mediumIcon).toHaveAttribute("data-state", "checked");
|
|
expect(onValueChange).toHaveBeenLastCalledWith("medium");
|
|
});
|
|
|
|
it("exposes disabled and invalid item state", async () => {
|
|
const user = userEvent.setup();
|
|
|
|
render(
|
|
<RadioGroup aria-label="Status">
|
|
<RadioGroupItem aria-label="Ready" value="ready" />
|
|
<RadioGroupItem aria-label="Blocked" disabled invalid value="blocked" />
|
|
</RadioGroup>
|
|
);
|
|
|
|
const blocked = screen.getByRole("radio", { name: "Blocked" });
|
|
|
|
expect(blocked).toBeDisabled();
|
|
expect(blocked).toHaveAttribute("aria-invalid", "true");
|
|
expect(blocked).toHaveAttribute("data-disabled", "");
|
|
|
|
await user.click(blocked);
|
|
expect(blocked).not.toBeChecked();
|
|
});
|
|
});
|