From 64c115e2cd7aad14d2dad5b8704b53de28cae65e Mon Sep 17 00:00:00 2001 From: Bob Zhao Date: Tue, 29 Aug 2023 12:22:48 -0400 Subject: [PATCH] add tests --- .../FacilityInformation.test.tsx | 2 +- .../FacilitySelectFilter.test.tsx | 56 ++++--- .../ManageFacility/ManageFacility.test.tsx | 151 ++++++++++++------ 3 files changed, 139 insertions(+), 70 deletions(-) diff --git a/frontend/src/app/supportAdmin/ManageFacility/FacilityInformation.test.tsx b/frontend/src/app/supportAdmin/ManageFacility/FacilityInformation.test.tsx index eac4e6ff164..684bb637041 100644 --- a/frontend/src/app/supportAdmin/ManageFacility/FacilityInformation.test.tsx +++ b/frontend/src/app/supportAdmin/ManageFacility/FacilityInformation.test.tsx @@ -6,8 +6,8 @@ import { initialState, ManageFacilityState } from "./ManageFacility"; describe("Facility Information", () => { const handleFacilityDelete = jest.fn(); const mockManageFacilityState: ManageFacilityState = { - orgId: "123", facilityId: "123", + orgId: "456", facility: { city: "New York", state: "NY", diff --git a/frontend/src/app/supportAdmin/ManageFacility/FacilitySelectFilter.test.tsx b/frontend/src/app/supportAdmin/ManageFacility/FacilitySelectFilter.test.tsx index 1fb1529eb91..8ccd8bde505 100644 --- a/frontend/src/app/supportAdmin/ManageFacility/FacilitySelectFilter.test.tsx +++ b/frontend/src/app/supportAdmin/ManageFacility/FacilitySelectFilter.test.tsx @@ -1,5 +1,13 @@ -import { fireEvent, render, screen, waitFor } from "@testing-library/react"; +import { + fireEvent, + 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 { Option } from "../../commonComponents/Dropdown"; @@ -22,36 +30,45 @@ describe("FacilitySelectFilter", () => { orgOptions: Option[], facilityOptions: Option[], manageFacilityState: ManageFacilityState - ) => + ) => { + const orgRef = React.createRef(); + const facilityRef = React.createRef(); render( ); + }; it("disables controls when loading data", () => { renderWithMocks([], [], initialState); - expect( - screen.getByRole("combobox", { name: /organization/i }) - ).toBeDisabled(); - expect(screen.getByRole("combobox", { name: /facility/i })).toBeDisabled(); + const orgSelectionDiv = screen.getByText("Organization"); + const orgDropdown = within(orgSelectionDiv).getByRole("combobox"); + + const facilitySelectionDiv = screen.getByText("Testing facility"); + const facilityDropdown = within(facilitySelectionDiv).getByRole("combobox"); + + expect(facilityDropdown).toBeDisabled(); + expect(orgDropdown).toBeDisabled(); }); it("calls handleClearFilter upon clicking clear filters button", async () => { renderWithMocks(mockOrganizationOptions, mockFacilityOptions, { - orgId: "123", - facilityId: "", + facilityId: undefined, facility: undefined, + orgId: "123", }); const clearFiltersBtn = screen.getByRole("button", { name: /clear facility selection filters/i, @@ -63,38 +80,39 @@ describe("FacilitySelectFilter", () => { it("calls event handlers when organization is selected", async () => { renderWithMocks(mockOrganizationOptions, mockFacilityOptions, initialState); - const orgDropdown = screen.getByRole("combobox", { name: /organization/i }); + + const orgSelectionDiv = screen.getByText("Organization"); + const orgDropdown = within(orgSelectionDiv).getByRole("combobox"); + fireEvent.change(orgDropdown, { target: { value: "123" } }); await waitFor(() => expect(handleSelectOrg).toHaveBeenCalled()); }); it("calls event handlers when facility is selected", async () => { renderWithMocks(mockOrganizationOptions, mockFacilityOptions, { - orgId: "123", facilityId: "", facility: undefined, + orgId: "", }); - const facilityDropdown = screen.getByRole("combobox", { - name: /facility/i, - }); + + const facilitySelectionDiv = screen.getByText("Testing facility"); + const facilityDropdown = within(facilitySelectionDiv).getByRole("combobox"); + fireEvent.change(facilityDropdown, { target: { value: "123" } }); await waitFor(() => expect(handleSelectFacility).toHaveBeenCalled()); }); it("calls event handlers when search button is clicked", async () => { renderWithMocks(mockOrganizationOptions, mockFacilityOptions, { - orgId: "123", facilityId: "123", facility: undefined, + orgId: undefined, }); - const facilityDropdown = screen.getByRole("combobox", { - name: /facility/i, - }); - fireEvent.change(facilityDropdown, { target: { value: "123" } }); const searchBtn = screen.getByRole("button", { name: /search/i, }); + expect(searchBtn).toBeEnabled(); fireEvent.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 702bd2a94e1..7dca72140f4 100644 --- a/frontend/src/app/supportAdmin/ManageFacility/ManageFacility.test.tsx +++ b/frontend/src/app/supportAdmin/ManageFacility/ManageFacility.test.tsx @@ -1,6 +1,7 @@ -import { fireEvent, render, screen, waitFor } from "@testing-library/react"; +import { act, render, screen, waitFor, within } from "@testing-library/react"; import { MemoryRouter } from "react-router-dom"; import { MockedProvider, MockedResponse } from "@apollo/client/testing"; +import userEvent from "@testing-library/user-event"; import { DeleteFacilityDocument, @@ -34,9 +35,9 @@ describe("ManageFacility", () => { const clearFiltersBtn = getClearFilterBtn(); expect(clearFiltersBtn).toBeDisabled(); - const orgDropdown = screen.getByRole("combobox", { name: /organization/i }); + const orgSelectionDiv = screen.getByText("Organization"); + const orgDropdown = within(orgSelectionDiv).getByRole("combobox"); await waitFor(() => expect(orgDropdown).toBeEnabled()); - fireEvent.change(orgDropdown, { target: { value: "" } }); // picks -Select- option expect(clearFiltersBtn).toBeDisabled(); expect(screen.getByText(/No facility selected/)).toBeInTheDocument(); @@ -46,38 +47,50 @@ describe("ManageFacility", () => { const clearFiltersBtn = getClearFilterBtn(); expect(clearFiltersBtn).toBeDisabled(); - const orgDropdown = screen.getByRole("combobox", { name: /organization/i }); - await waitFor(() => expect(orgDropdown).toBeEnabled()); - fireEvent.change(orgDropdown, { - target: { value: "604f2e80-b4b7-4fff-806a-2a77973aa08f" }, - }); // picks Dis Organization + const orgSelectionDiv = screen.getByText("Organization"); + const orgComboBoxInput = within(orgSelectionDiv).getByRole("combobox"); + const orgComboBoxList = within(orgSelectionDiv).getByTestId( + "combo-box-option-list" + ); - const facilityDropdown = screen.getByRole("combobox", { - name: /facility/i, + await waitFor(() => expect(orgComboBoxInput).toBeEnabled()); + await act(async () => { + await userEvent.type(orgComboBoxInput, "dis"); + await userEvent.click( + within(orgComboBoxList).getByText("Dis Organization") + ); }); - await waitFor(() => expect(facilityDropdown).toBeEnabled()); + expect(orgComboBoxInput).toHaveValue("Dis Organization"); expect(clearFiltersBtn).toBeEnabled(); - fireEvent.change(facilityDropdown, { target: { value: "" } }); // picks -Select- - await waitFor(() => expect(clearFiltersBtn).toBeEnabled()); - expect(screen.getByText(/No facility selected/)).toBeInTheDocument(); + await screen.findByText(/No facility selected/); }); it("resets the controls after clicking clear filters", async () => { const clearFiltersBtn = getClearFilterBtn(); expect(clearFiltersBtn).toBeDisabled(); - const orgDropdown = screen.getByRole("combobox", { name: /organization/i }); - await waitFor(() => expect(orgDropdown).toBeEnabled()); - fireEvent.change(orgDropdown, { - target: { value: "604f2e80-b4b7-4fff-806a-2a77973aa08f" }, - }); // picks Dis Organization + const orgSelectionDiv = screen.getByText("Organization"); + const orgComboBoxInput = within(orgSelectionDiv).getByRole("combobox"); + const orgComboBoxList = within(orgSelectionDiv).getByTestId( + "combo-box-option-list" + ); + await waitFor(() => expect(orgComboBoxInput).toBeEnabled()); + + await act(async () => { + await userEvent.type(orgComboBoxInput, "dis"); + await userEvent.click( + within(orgComboBoxList).getByText("Dis Organization") + ); + }); await waitFor(() => expect(clearFiltersBtn).toBeEnabled()); - fireEvent.click(clearFiltersBtn); + await act(async () => { + await userEvent.click(clearFiltersBtn); + }); await waitFor(() => expect(clearFiltersBtn).toBeDisabled()); - expect(orgDropdown).toHaveValue(""); + expect(orgComboBoxInput).toHaveValue(""); expect(screen.getByText(/No facility selected/)).toBeInTheDocument(); }); @@ -85,38 +98,59 @@ describe("ManageFacility", () => { const clearFiltersBtn = getClearFilterBtn(); expect(clearFiltersBtn).toBeDisabled(); - const orgDropdown = screen.getByRole("combobox", { name: /organization/i }); - await waitFor(() => expect(orgDropdown).toBeEnabled()); - fireEvent.change(orgDropdown, { - target: { value: "604f2e80-b4b7-4fff-806a-2a77973aa08f" }, - }); // picks Dis Organization + const orgSelectionDiv = screen.getByText("Organization"); + const orgComboBoxInput = within(orgSelectionDiv).getByRole("combobox"); + const orgComboBoxList = within(orgSelectionDiv).getByTestId( + "combo-box-option-list" + ); - const facilityDropdown = screen.getByRole("combobox", { - name: /facility/i, + const facilitySelectionDiv = screen.getByText("Testing facility"); + const facilityComboBoxInput = + within(facilitySelectionDiv).getByRole("combobox"); + const facilityComboBoxList = within(facilitySelectionDiv).getByTestId( + "combo-box-option-list" + ); + + await waitFor(() => expect(orgComboBoxInput).toBeEnabled()); + await act(async () => { + await userEvent.type(orgComboBoxInput, "dis"); + await userEvent.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"); + await userEvent.click( + within(facilityComboBoxList).getByText("Testing Site") + ); }); - await waitFor(() => expect(facilityDropdown).toBeEnabled()); - expect(clearFiltersBtn).toBeEnabled(); - fireEvent.change(facilityDropdown, { - target: { value: "1919865a-92eb-4c46-b73b-471b02b131b7" }, - }); // picks testing site const searchBtn = screen.getByRole("button", { name: /search/i, }); - fireEvent.click(searchBtn); + await act(async () => { + await userEvent.click(searchBtn); + }); await screen.findByRole("heading", { name: /Testing Site/i }); const deleteFacilityBtn = screen.getByRole("button", { name: /delete facility testing site/i, }); - fireEvent.click(deleteFacilityBtn); + await act(async () => { + await userEvent.click(deleteFacilityBtn); + }); await screen.findByRole("heading", { name: /delete testing site/i }); const yesDeleteBtn = screen.getByRole("button", { name: /yes, delete facility/i, }); - fireEvent.click(yesDeleteBtn); + await act(async () => { + await userEvent.click(yesDeleteBtn); + }); await waitFor(() => expect( @@ -126,8 +160,8 @@ describe("ManageFacility", () => { // Facility testing site successfully deleted // page resets - await waitFor(() => expect(orgDropdown).toHaveValue("")); - expect(facilityDropdown).toHaveValue(""); + await waitFor(() => expect(orgComboBoxInput).toHaveValue("")); + expect(facilityComboBoxInput).toHaveValue(""); expect(clearFiltersBtn).toBeDisabled(); }); @@ -135,25 +169,42 @@ describe("ManageFacility", () => { const clearFiltersBtn = getClearFilterBtn(); expect(clearFiltersBtn).toBeDisabled(); - const orgDropdown = screen.getByRole("combobox", { name: /organization/i }); - await waitFor(() => expect(orgDropdown).toBeEnabled()); - fireEvent.change(orgDropdown, { - target: { value: "09cdf298-39b3-41b0-92f7-092c2bfe065e" }, - }); // picks Dis Organization + const orgSelectionDiv = screen.getByText("Organization"); + const orgComboBoxInput = within(orgSelectionDiv).getByRole("combobox"); + const orgComboBoxList = within(orgSelectionDiv).getByTestId( + "combo-box-option-list" + ); - const facilityDropdown = screen.getByRole("combobox", { - name: /facility/i, + await waitFor(() => expect(orgComboBoxInput).toBeEnabled()); + await act(async () => { + await userEvent.type(orgComboBoxInput, "dat"); + await userEvent.click( + within(orgComboBoxList).getByText("Dat Organization") + ); }); - await waitFor(() => expect(facilityDropdown).toBeEnabled()); + + const facilitySelectionDiv = screen.getByText("Testing facility"); + const facilityComboBoxInput = + within(facilitySelectionDiv).getByRole("combobox"); + const facilityComboBoxList = within(facilitySelectionDiv).getByTestId( + "combo-box-option-list" + ); + + await waitFor(() => expect(facilityComboBoxInput).toBeEnabled()); expect(clearFiltersBtn).toBeEnabled(); - fireEvent.change(facilityDropdown, { - target: { value: "1919865a-92eb-4c46-b73b-471b02b131b8" }, - }); // picks testing site + await act(async () => { + await userEvent.type(facilityComboBoxInput, "incom"); + await userEvent.click( + within(facilityComboBoxList).getByText("Incomplete Site") + ); + }); const searchBtn = screen.getByRole("button", { name: /search/i, }); - fireEvent.click(searchBtn); + await act(async () => { + await userEvent.click(searchBtn); + }); await screen.findByRole("heading", { name: /Incomplete Site/i }); });