From 22bbb14a8cfdc9271640e68a20d0c59cd720612b Mon Sep 17 00:00:00 2001 From: Bea Esguerra Date: Tue, 11 Jun 2024 15:44:42 -0600 Subject: [PATCH] Add tests to make sure event handlers aren't called when a component is disabled --- .../__tests__/dropdown-core.test.tsx | 76 +++++++++++++ .../__tests__/select-opener.test.tsx | 107 +++++++++++++++++- 2 files changed, 182 insertions(+), 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 index 13597bd51..3f247da6f 100644 --- 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,80 @@ describe("DropdownCore", () => { expect(container).toHaveTextContent("3 items"); }); }); + + describe("onOpenChanged", () => { + it("Should be triggered when the down key is pressed and the menu is closed", async () => { + // Arrange + const onOpenMock = jest.fn(); + + render( + } + 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 the menu is closed", async () => { + // Arrange + const onOpenMock = jest.fn(); + + render( + } + 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 index f3cad178d..8c7e461f8 100644 --- 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( + + {children} + , + ); + + // 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( + + {children} + , + ); + + // 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( + + {children} + , + ); + + // 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); + }); }); });