Add tests to make sure event handlers aren't called when a component …

…is disabled
Khan · Jun 11, 2024 · 39c5f11 · 39c5f11
1 parent a1957bc
commit 39c5f11
Show file tree

Hide file tree

Showing 2 changed files with 181 additions and 1 deletion.
diff --git a/packages/wonder-blocks-dropdown/src/components/__tests__/dropdown-core.test.tsx b/packages/wonder-blocks-dropdown/src/components/__tests__/dropdown-core.test.tsx
@@ -772,4 +772,79 @@ describe("DropdownCore", () => {
             expect(container).toHaveTextContent("3 items");
         });
     });
+
+    describe("onOpenChanged", () => {
+        it("Should be triggered when down key is pressed and menu is closed", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <DropdownCore
+                    initialFocusedIndex={undefined}
+                    onSearchTextChanged={jest.fn()}
+                    // mock the items (3 options)
+                    items={items}
+                    role="listbox"
+                    open={false}
+                    // mock the opener elements
+                    opener={<button />}
+                    onOpenChanged={onOpenMock}
+                />,
+            );
+            // Act
+            // Press the button
+            const button = await screen.findByRole("button");
+            // NOTE: we need to use fireEvent here because await userEvent doesn't
+            // support keyUp/Down events and we use these handlers to override
+            // the default behavior of the button.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                keyCode: 40,
+            });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyUp(button, {
+                keyCode: 40,
+            });
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(1);
+            expect(onOpenMock).toHaveBeenCalledWith(true);
+        });
+        it("Should not be triggered when the dropdown is disabled and the down key is pressed and menu is closed", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <DropdownCore
+                    initialFocusedIndex={undefined}
+                    onSearchTextChanged={jest.fn()}
+                    // mock the items (3 options)
+                    items={items}
+                    role="listbox"
+                    open={false}
+                    // mock the opener elements
+                    opener={<button />}
+                    onOpenChanged={onOpenMock}
+                    disabled={true}
+                />,
+            );
+            // Act
+            // Press the button
+            const button = await screen.findByRole("button");
+            // NOTE: we need to use fireEvent here because await userEvent doesn't
+            // support keyUp/Down events and we use these handlers to override
+            // the default behavior of the button.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                keyCode: 40,
+            });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyUp(button, {
+                keyCode: 40,
+            });
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(0);
+        });
+    });
 });
diff --git a/packages/wonder-blocks-dropdown/src/components/__tests__/select-opener.test.tsx b/packages/wonder-blocks-dropdown/src/components/__tests__/select-opener.test.tsx
@@ -5,7 +5,7 @@ import {userEvent} from "@testing-library/user-event";
 import SelectOpener from "../select-opener";
 
 describe("SelectOpener", () => {
-    describe("onClick", () => {
+    describe("onOpenChanged", () => {
         const children = "text";
         it("should trigger using the mouse", async () => {
             // Arrange
@@ -111,5 +111,110 @@ describe("SelectOpener", () => {
             // Assert
             expect(onOpenMock).toHaveBeenCalledTimes(1);
         });
+
+        it("should not trigger using the mouse if it is disabled", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <SelectOpener
+                    onOpenChanged={onOpenMock}
+                    disabled={true}
+                    error={false}
+                    isPlaceholder={false}
+                    light={false}
+                    open={false}
+                >
+                    {children}
+                </SelectOpener>,
+            );
+
+            // Act
+            // Press the button.
+            await userEvent.click(await screen.findByRole("button"));
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(0);
+        });
+
+        it("should not trigger by pressing {Space} if it is disabled", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <SelectOpener
+                    onOpenChanged={onOpenMock}
+                    disabled={true}
+                    error={false}
+                    isPlaceholder={false}
+                    light={false}
+                    open={false}
+                >
+                    {children}
+                </SelectOpener>,
+            );
+
+            // Act
+            // Press the button.
+            const button = await screen.findByRole("button");
+            // NOTE: we need to use fireEvent here because await userEvent doesn't
+            // support keyUp/Down events and we use these handlers to override
+            // the default behavior of the button.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                key: " ",
+            });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyUp(button, {
+                key: " ",
+            });
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(0);
+        });
+
+        it("should not trigger by pressing {Enter} if it is disabled", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <SelectOpener
+                    onOpenChanged={onOpenMock}
+                    disabled={true}
+                    error={false}
+                    isPlaceholder={false}
+                    light={false}
+                    open={false}
+                >
+                    {children}
+                </SelectOpener>,
+            );
+
+            // Act
+            // Press the button.
+            const button = await screen.findByRole("button");
+            // NOTE: we need to use fireEvent here because await userEvent doesn't
+            // support keyUp/Down events and we use these handlers to override
+            // the default behavior of the button.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                key: "Enter",
+            });
+            // NOTE: We need to trigger multiple events to simulate the browser
+            // behavior of pressing Enter on a button. By default, browsers will
+            // trigger a click event on keyDown, but we need to trigger it on
+            // keyUp.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                key: "Enter",
+            });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyUp(button, {
+                key: "Enter",
+            });
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(0);
+        });
     });
 });