From 20c967768e3c8b642d6ae7b8e7ee65e0ebd0cb29 Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Thu, 31 Aug 2023 10:00:41 -0400 Subject: [PATCH] use recommended userEvent setup pattern --- .../FacilitySelectFilter.test.tsx | 22 ++++----- .../ManageFacility/ManageFacility.test.tsx | 46 ++++++++----------- 2 files changed, 28 insertions(+), 40 deletions(-) diff --git a/frontend/src/app/supportAdmin/ManageFacility/FacilitySelectFilter.test.tsx b/frontend/src/app/supportAdmin/ManageFacility/FacilitySelectFilter.test.tsx index e896565e36..1621f7b27a 100644 --- a/frontend/src/app/supportAdmin/ManageFacility/FacilitySelectFilter.test.tsx +++ b/frontend/src/app/supportAdmin/ManageFacility/FacilitySelectFilter.test.tsx @@ -1,13 +1,8 @@ -import { - fireEvent, - render, - screen, - waitFor, - within, -} from "@testing-library/react"; +import { act, render, screen, waitFor, within } from "@testing-library/react"; import { MemoryRouter } from "react-router-dom"; import React from "react"; import { ComboBoxRef } from "@trussworks/react-uswds"; +import userEvent from "@testing-library/user-event"; import { Option } from "../../commonComponents/Dropdown"; @@ -69,6 +64,7 @@ describe("FacilitySelectFilter", () => { ); }; + const user = userEvent.setup(); it("disables controls when loading data", () => { renderWithMocks([], [], initialState); @@ -90,16 +86,16 @@ describe("FacilitySelectFilter", () => { name: /clear facility selection filters/i, }); expect(clearFiltersBtn).toBeEnabled(); - fireEvent.click(clearFiltersBtn); + await act(() => user.click(clearFiltersBtn)); await waitFor(() => expect(handleClearFilter).toHaveBeenCalled()); }); it("calls event handlers when organization is selected", async () => { renderWithMocks(mockOrganizationOptions, mockFacilityOptions, initialState); - const [orgDropdown] = getOrgComboBoxElements(); + const [, orgDropdown] = getOrgComboBoxElements(); - fireEvent.change(orgDropdown, { target: { value: "123" } }); + await act(() => user.selectOptions(orgDropdown, ["organization-123"])); await waitFor(() => expect(handleSelectOrg).toHaveBeenCalled()); }); @@ -110,8 +106,8 @@ describe("FacilitySelectFilter", () => { facility: undefined, }); - const [facilityDropdown] = getFacilityComboBoxElements(); - fireEvent.change(facilityDropdown, { target: { value: "123" } }); + const [, facilityDropdown] = getFacilityComboBoxElements(); + await act(() => user.selectOptions(facilityDropdown, ["facility-123"])); await waitFor(() => expect(handleSelectFacility).toHaveBeenCalled()); }); @@ -126,7 +122,7 @@ describe("FacilitySelectFilter", () => { name: /search/i, }); expect(searchBtn).toBeEnabled(); - fireEvent.click(searchBtn); + await act(() => user.click(searchBtn)); await waitFor(() => expect(handleSearch).toHaveBeenCalled()); }); diff --git a/frontend/src/app/supportAdmin/ManageFacility/ManageFacility.test.tsx b/frontend/src/app/supportAdmin/ManageFacility/ManageFacility.test.tsx index 51567786fe..65cd92baeb 100644 --- a/frontend/src/app/supportAdmin/ManageFacility/ManageFacility.test.tsx +++ b/frontend/src/app/supportAdmin/ManageFacility/ManageFacility.test.tsx @@ -31,6 +31,8 @@ describe("ManageFacility", () => { name: /clear facility selection filters/i, }); + const user = userEvent.setup(); + beforeEach(() => { renderWithMocks(); }); @@ -53,12 +55,10 @@ describe("ManageFacility", () => { const [orgComboBoxInput, orgComboBoxList] = getOrgComboBoxElements(); await waitFor(() => expect(orgComboBoxInput).toBeEnabled()); - await act(async () => await userEvent.type(orgComboBoxInput, "dis")); + await act(async () => await user.type(orgComboBoxInput, "dis")); await act( async () => - await userEvent.click( - within(orgComboBoxList).getByText("Dis Organization") - ) + await user.click(within(orgComboBoxList).getByText("Dis Organization")) ); expect(orgComboBoxInput).toHaveValue("Dis Organization"); expect(clearFiltersBtn).toBeEnabled(); @@ -73,16 +73,14 @@ describe("ManageFacility", () => { const [orgComboBoxInput, orgComboBoxList] = getOrgComboBoxElements(); await waitFor(() => expect(orgComboBoxInput).toBeEnabled()); - await act(async () => await userEvent.type(orgComboBoxInput, "dis")); + await act(async () => await user.type(orgComboBoxInput, "dis")); await act( async () => - await userEvent.click( - within(orgComboBoxList).getByText("Dis Organization") - ) + await user.click(within(orgComboBoxList).getByText("Dis Organization")) ); await waitFor(() => expect(clearFiltersBtn).toBeEnabled()); - await act(async () => await userEvent.click(clearFiltersBtn)); + await act(async () => await user.click(clearFiltersBtn)); await waitFor(() => expect(clearFiltersBtn).toBeDisabled()); expect(orgComboBoxInput).toHaveValue(""); @@ -98,43 +96,39 @@ describe("ManageFacility", () => { getFacilityComboBoxElements(); await waitFor(() => expect(orgComboBoxInput).toBeEnabled()); - await act(async () => await userEvent.type(orgComboBoxInput, "dis")); + await act(async () => await user.type(orgComboBoxInput, "dis")); await act( async () => - await userEvent.click( - within(orgComboBoxList).getByText("Dis Organization") - ) + await user.click(within(orgComboBoxList).getByText("Dis Organization")) ); await waitFor(() => expect(facilityComboBoxInput).toBeEnabled()); await waitFor(() => expect(clearFiltersBtn).toBeEnabled()); await act( - async () => await userEvent.type(facilityComboBoxInput, "testing site") + async () => await user.type(facilityComboBoxInput, "testing site") ); await act( async () => - await userEvent.click( - within(facilityComboBoxList).getByText("Testing Site") - ) + await user.click(within(facilityComboBoxList).getByText("Testing Site")) ); const searchBtn = screen.getByRole("button", { name: /search/i, }); - await act(async () => await userEvent.click(searchBtn)); + await act(async () => await user.click(searchBtn)); await screen.findByRole("heading", { name: /Testing Site/i }); const deleteFacilityBtn = screen.getByRole("button", { name: /delete facility testing site/i, }); - await act(async () => await userEvent.click(deleteFacilityBtn)); + await act(async () => await user.click(deleteFacilityBtn)); await screen.findByRole("heading", { name: /delete testing site/i }); const yesDeleteBtn = screen.getByRole("button", { name: /yes, delete facility/i, }); - await act(async () => await userEvent.click(yesDeleteBtn)); + await act(async () => await user.click(yesDeleteBtn)); await waitFor(() => expect( @@ -158,20 +152,18 @@ describe("ManageFacility", () => { getFacilityComboBoxElements(); await waitFor(() => expect(orgComboBoxInput).toBeEnabled()); - await act(async () => await userEvent.type(orgComboBoxInput, "dat")); + await act(async () => await user.type(orgComboBoxInput, "dat")); await act( async () => - await userEvent.click( - within(orgComboBoxList).getByText("Dat Organization") - ) + await user.click(within(orgComboBoxList).getByText("Dat Organization")) ); await waitFor(() => expect(facilityComboBoxInput).toBeEnabled()); expect(clearFiltersBtn).toBeEnabled(); - await act(async () => await userEvent.type(facilityComboBoxInput, "incom")); + await act(async () => await user.type(facilityComboBoxInput, "incom")); await act( async () => - await userEvent.click( + await user.click( within(facilityComboBoxList).getByText("Incomplete Site") ) ); @@ -179,7 +171,7 @@ describe("ManageFacility", () => { const searchBtn = screen.getByRole("button", { name: /search/i, }); - await act(async () => await userEvent.click(searchBtn)); + await act(async () => await user.click(searchBtn)); await screen.findByRole("heading", { name: /Incomplete Site/i }); });