From c72883621d978b64e5385bed5306c96d301f7c94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Fri, 15 Mar 2024 12:01:56 +0000 Subject: [PATCH] wip: Try to use waitFor() --- .../src/@planx/components/Pay/Editor.test.tsx | 88 +++++++++---------- 1 file changed, 42 insertions(+), 46 deletions(-) diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor.test.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor.test.tsx index 9c518da794..3444b0159d 100644 --- a/editor.planx.uk/src/@planx/components/Pay/Editor.test.tsx +++ b/editor.planx.uk/src/@planx/components/Pay/Editor.test.tsx @@ -1,10 +1,9 @@ import { User } from "@opensystemslab/planx-core/types"; -import { fireEvent, waitFor } from "@testing-library/react"; +import { act, fireEvent, waitFor } from "@testing-library/react"; import { FullStore, vanillaStore } from "pages/FlowEditor/lib/store"; import React from "react"; import { DndProvider } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; -import { act } from "react-dom/test-utils"; import { axe, setup } from "testUtils"; import PayComponent from "./Editor"; @@ -45,6 +44,7 @@ describe("Pay component - Editor Modal", () => { let initialState: FullStore; beforeAll(() => (initialState = getState())); + beforeEach(() => setState({ user: mockUser, flowName: "test flow" })); afterEach(() => act(() => setState(initialState))); it("renders the section", () => { @@ -89,20 +89,20 @@ describe("Pay component - Editor Modal", () => { }, }; - const { user, getAllByLabelText, getByText } = setup( + const { user, findAllByLabelText, getByText } = setup( , ); - const keyInputs = getAllByLabelText("Key"); - const valueInputs = getAllByLabelText("Value"); + const keyInputs = await findAllByLabelText("Key"); + const valueInputs = await findAllByLabelText("Value"); expect(keyInputs[2]).toHaveDisplayValue("isInviteToPay"); expect(valueInputs[2]).toHaveDisplayValue("false"); - await user.click( - getByText("Allow applicants to invite someone else to pay"), + await waitFor(() => + user.click(getByText("Allow applicants to invite someone else to pay")), ); expect(valueInputs[2]).toHaveValue("true"); @@ -131,34 +131,37 @@ describe("Pay component - Editor Modal", () => { }); it("allows new values to be added", async () => { - act(() => setState({ user: mockUser, flowName: "test flow" })); - const handleSubmit = jest.fn(); - const { getAllByPlaceholderText, getAllByLabelText, user, getByRole } = - setup( - - - , - ); + const { + findAllByLabelText, + findAllByPlaceholderText, + getAllByLabelText, + user, + getByRole, + } = setup( + + + , + ); // Three default rows displayed - expect(getAllByLabelText("Delete")).toHaveLength(3); + expect(await findAllByLabelText("Delete")).toHaveLength(3); - await user.click(getByRole("button", { name: "add new" })); + await waitFor(() => user.click(getByRole("button", { name: "add new" }))); // New row added expect(getAllByLabelText("Delete")).toHaveLength(4); - const keyInput = getAllByPlaceholderText("key")[3]; - const valueInput = getAllByPlaceholderText("value")[3]; + const keyInput = (await findAllByPlaceholderText("key"))[3]; + const valueInput = (await findAllByPlaceholderText("value"))[3]; - await user.type(keyInput, "myNewKey"); - await user.type(valueInput, "myNewValue"); + await waitFor(() => user.type(keyInput, "myNewKey")); + await waitFor(() => user.type(valueInput, "myNewValue")); // Required to trigger submission outside the context of FormModal component fireEvent.submit(getByRole("form")); @@ -167,7 +170,6 @@ describe("Pay component - Editor Modal", () => { }); it("allows new values to be deleted", async () => { - act(() => setState({ user: mockUser, flowName: "test flow" })); const mockNode = { data: { fn: "fee", @@ -182,20 +184,20 @@ describe("Pay component - Editor Modal", () => { const handleSubmit = jest.fn(); - const { getAllByLabelText, user, getByRole } = setup( + const { findAllByLabelText, getAllByLabelText, user, getByRole } = setup( , ); // Use delete buttons as proxy for rows - const deleteButtons = getAllByLabelText("Delete"); + const deleteButtons = await findAllByLabelText("Delete"); expect(deleteButtons).toHaveLength(4); const finalDeleteButton = deleteButtons[3]; expect(finalDeleteButton).toBeDefined(); - await user.click(finalDeleteButton); - expect(getAllByLabelText("Delete")).toHaveLength(3); + await waitFor(() => user.click(finalDeleteButton)); + await waitFor(() => expect(getAllByLabelText("Delete")).toHaveLength(3)); // Required to trigger submission outside the context of FormModal component fireEvent.submit(getByRole("form")); @@ -210,8 +212,6 @@ describe("Pay component - Editor Modal", () => { }); it("displays field-level errors", async () => { - act(() => setState({ user: mockUser, flowName: "test flow" })); - const handleSubmit = jest.fn(); const { getByText, user, getByRole } = setup( @@ -220,8 +220,8 @@ describe("Pay component - Editor Modal", () => { , ); - await user.click(getByRole("button", { name: "add new" })); - fireEvent.submit(getByRole("form")); + await waitFor(() => user.click(getByRole("button", { name: "add new" }))); + act(() => fireEvent.submit(getByRole("form"))); expect(handleSubmit).not.toHaveBeenCalled(); @@ -233,27 +233,25 @@ describe("Pay component - Editor Modal", () => { }, 10000); it("displays array-level errors", async () => { - act(() => setState({ user: mockUser, flowName: "test flow" })); - const handleSubmit = jest.fn(); - const { getByText, user, getByRole, getAllByPlaceholderText } = setup( + const { findByText, findAllByPlaceholderText, user, getByRole } = setup( , ); // Add first duplicate key - await user.click(getByRole("button", { name: "add new" })); - const keyInput4 = getAllByPlaceholderText("key")[3]; - const valueInput4 = getAllByPlaceholderText("value")[3]; + await waitFor(() => user.click(getByRole("button", { name: "add new" }))); + const keyInput4 = (await findAllByPlaceholderText("key"))[3]; + const valueInput4 = (await findAllByPlaceholderText("value"))[3]; await user.type(keyInput4, "duplicatedKey"); await user.type(valueInput4, "myNewValue"); // Add second duplicate key - await user.click(getByRole("button", { name: "add new" })); - const keyInput5 = getAllByPlaceholderText("key")[4]; - const valueInput5 = getAllByPlaceholderText("value")[4]; + await waitFor(() => user.click(getByRole("button", { name: "add new" }))); + const keyInput5 = (await findAllByPlaceholderText("key"))[4]; + const valueInput5 = (await findAllByPlaceholderText("value"))[4]; await user.type(keyInput5, "duplicatedKey"); await user.type(valueInput5, "myNewValue"); @@ -263,9 +261,7 @@ describe("Pay component - Editor Modal", () => { // Test that validation schema is wired up to UI // model.test.ts tests validation schema behaviour in-depth - await waitFor(() => - expect(getByText("Keys must be unique")).toBeVisible(), - ); + expect(await findByText("Keys must be unique")).toBeVisible(); }, 10000); it("only disables the first instance of a required filed", async () => {