Skip to content

Commit

Permalink
fix: Fail 'select's against disabled options.
Browse files Browse the repository at this point in the history
  • Loading branch information
stephenh committed Oct 13, 2023
1 parent 5643f44 commit 0b9fdb6
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 6 deletions.
4 changes: 3 additions & 1 deletion src/inputs/SelectField.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -139,14 +139,16 @@ describe("SelectFieldTest", () => {
/>,
);
// When opening the menu
select(r.age, "Two");
click(r.age);
const optionTwo = r.getByRole("option", { name: "Two" });
// Then the disabled option to have the correct aria attributes
expect(optionTwo).toHaveAttribute("aria-disabled", "true");
// And when clicking on that option
click(optionTwo);
// Then the `onSelect` callback is not called
expect(onSelect).not.toHaveBeenCalled();
// And using select would have failed
expect(() => select(r.age, "Two")).toThrow("Cannot select disabled option Two");
});

it("can disable options with tooltips", async () => {
Expand Down
40 changes: 35 additions & 5 deletions src/utils/rtl.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ describe("rtl", () => {
select(r.number, "2");
// Then the onSelect handler is called with the correct value
expect(onSelect).toHaveBeenCalledWith("2", { id: "2", name: "Two" });
expect(r.number).toHaveValue("Two");

// And the getSelected helper returns the correct value
expect(getSelected(r.number)).toBe("Two");
Expand All @@ -46,22 +47,51 @@ describe("rtl", () => {
it("can select options via label on SelectField", async () => {
const onSelect = jest.fn();
// Given the SelectField
function Test() {
const [value, setValue] = useState<string | undefined>();
return (
<SelectField
label="Number"
value={value}
onSelect={(value, opt) => {
setValue(value);
onSelect(value, opt);
}}
options={[
{ id: "1", name: "One" },
{ id: "2", name: "Two" },
{ id: "3", name: "Three" },
]}
/>
);
}
const r = await render(<Test />);
// When selecting an option
select(r.number, "Two");
// Then the onSelect handler is called with the correct value
expect(onSelect).toHaveBeenCalledWith("2", { id: "2", name: "Two" });
expect(r.number).toHaveValue("Two");
});

it("fails when selecting disabled options", async () => {
const onSelect = jest.fn();
// Given a SelectField
const r = await render(
<SelectField
label="Number"
value={undefined}
value={undefined as any}
onSelect={onSelect}
options={[
{ id: "1", name: "One" },
{ id: "2", name: "Two" },
{ id: "3", name: "Three" },
]}
// And the 1st option option is disabled
disabledOptions={["1"]}
/>,
);
// When selecting an option
select(r.number, "Two");
// Then the onSelect handler is called with the correct value
expect(onSelect).toHaveBeenCalledWith("2", { id: "2", name: "Two" });
// When selecting it, it fails
expect(() => select(r.number, "One")).toThrow("Cannot select disabled option One");
});

it("can selectAndWait on SelectField", async () => {
Expand Down
3 changes: 3 additions & 0 deletions src/utils/rtl.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,9 @@ function selectOption(select: HTMLElement, optionValue: string) {
if (!optionToSelect) {
throw new Error(`Could not find option with value or text content of ${optionValue}`);
}
if (optionToSelect.getAttribute("aria-disabled")) {
throw new Error(`Cannot select disabled option ${optionValue}`);
}
_click(optionToSelect);
}

Expand Down

0 comments on commit 0b9fdb6

Please sign in to comment.