diff --git a/src/inputs/SelectField.test.tsx b/src/inputs/SelectField.test.tsx index b2bcf8c4c..aec8e9700 100644 --- a/src/inputs/SelectField.test.tsx +++ b/src/inputs/SelectField.test.tsx @@ -139,7 +139,7 @@ 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"); @@ -147,6 +147,8 @@ describe("SelectFieldTest", () => { 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 () => { diff --git a/src/utils/rtl.test.tsx b/src/utils/rtl.test.tsx index eca686488..a44acdeb2 100644 --- a/src/utils/rtl.test.tsx +++ b/src/utils/rtl.test.tsx @@ -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"); @@ -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(); + return ( + { + setValue(value); + onSelect(value, opt); + }} + options={[ + { id: "1", name: "One" }, + { id: "2", name: "Two" }, + { id: "3", name: "Three" }, + ]} + /> + ); + } + const r = await render(); + // 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( , ); - // 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 () => { diff --git a/src/utils/rtl.tsx b/src/utils/rtl.tsx index ad10738c8..2fc66c8e9 100644 --- a/src/utils/rtl.tsx +++ b/src/utils/rtl.tsx @@ -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); }