perf(EMI-1685): re-enable slow test (#14944)

* un-skip test * extend timeout even longer * fillAddressFormField enhancements
artsy · Dec 5, 2024 · 3e72914 · 3e72914
1 parent 3e89dc1
commit 3e72914
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 36 deletions.
diff --git a/src/Apps/Order/Routes/Shipping/Components/__tests__/SavedAddresses.jest.tsx b/src/Apps/Order/Routes/Shipping/Components/__tests__/SavedAddresses.jest.tsx
@@ -25,7 +25,8 @@ jest.mock("Utils/Hooks/useMatchMedia", () => ({
   __internal__useMatchMedia: () => ({}),
 }))
 
-jest.setTimeout(10000)
+// Long-running tests when we `fillAddressFormFields()`
+jest.setTimeout(15000)
 
 let testProps: SavedAddressesProps
 let mockShippingContext: ShippingContextProps
@@ -220,9 +221,8 @@ describe("Saved Addresses", () => {
       })
     })
 
-    // Test takes too long to run
-    // eslint-disable-next-line jest/no-disabled-tests
-    it.skip("calls the parent formik context onSubmit when the user saves a new address", async () => {
+    // Previously disabled due to timeouts
+    it("calls the parent formik context onSubmit when the user saves a new address", async () => {
       renderWithRelay({
         Me: () => ({
           addressConnection: basicAddressList,
@@ -240,26 +240,29 @@ describe("Saved Addresses", () => {
         phoneNumber: "555-555-5555",
       }
       const addAddressButton = screen.getByText("Add a new address")
-      await userEvent.click(addAddressButton)
+      userEvent.click(addAddressButton)
 
       screen.getByText("Add address")
 
       await fillAddressFormFields(validAddress)
 
-      await flushPromiseQueue()
-
       mockExecuteUserAddressAction.mockResolvedValueOnce({
         data: { ...validAddress },
       })
 
-      await userEvent.click(screen.getByText("Save"))
+      await waitFor(
+        () => {
+          userEvent.click(screen.getByText("Save"))
+        },
+        // Bottleneck waiting for form updates
+        { timeout: 4000 }
+      )
 
       await waitFor(() =>
         expect(testProps.onSelect).toHaveBeenCalledWith(
           expect.objectContaining(validAddress)
         )
       )
-
       expect(testProps.onSelect).toHaveBeenCalledTimes(1)
     })
   })

diff --git a/src/Components/Address/__tests__/utils.ts b/src/Components/Address/__tests__/utils.ts
@@ -1,6 +1,8 @@
 import { screen, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { Address } from "Components/Address/utils"
+import { flushPromiseQueue } from "DevTools/flushPromiseQueue"
+import { act } from "react"
 
 export const ADDRESS_FORM_INPUTS: Record<
   keyof Address,
@@ -68,38 +70,40 @@ export const fillAddressFormFields = async (
   const wrapper = screen.getByTestId(wrapperTestId)
   const { country, phoneNumber, ...defaultTextInputs } = address
 
-  const promises: Promise<void>[] = []
+  // Country input can trigger ui updates
   if (country) {
-    promises.push(
-      new Promise<void>(async resolve => {
-        const countrySelect = within(wrapper).getByLabelText(
-          ADDRESS_FORM_INPUTS.country.label
-        )
-
-        userEvent.selectOptions(countrySelect, [country])
+    await act(async () => {
+      const countrySelect = within(wrapper).getByLabelText(
+        ADDRESS_FORM_INPUTS.country.label
+      )
 
-        resolve()
-      })
-    )
+      userEvent.selectOptions(countrySelect, [country])
+      await flushPromiseQueue()
+    })
   }
 
-  Object.entries(defaultTextInputs).forEach(([key, value]) => {
-    const input = within(wrapper).getByLabelText(ADDRESS_FORM_INPUTS[key].label)
-    if (clearInputs) {
-      userEvent.clear(input)
-    }
-    userEvent.paste(input, value)
-  })
+  Object.entries(defaultTextInputs).length > 0 &&
+    act(() => {
+      Object.entries(defaultTextInputs).forEach(([key, value]) => {
+        const input = within(wrapper).getByLabelText(
+          ADDRESS_FORM_INPUTS[key].label
+        )
+        if (clearInputs) {
+          userEvent.clear(input)
+        }
+        userEvent.paste(input, value)
+      })
+    })
 
   if (phoneNumber) {
-    const phoneNumberInput = within(wrapper).getByLabelText(
-      ADDRESS_FORM_INPUTS.phoneNumber.label
-    )
-    if (clearInputs) {
-      userEvent.clear(phoneNumberInput)
-    }
-    userEvent.paste(phoneNumberInput, phoneNumber)
+    act(() => {
+      const phoneNumberInput = within(wrapper).getByLabelText(
+        ADDRESS_FORM_INPUTS.phoneNumber.label
+      )
+      if (clearInputs) {
+        userEvent.clear(phoneNumberInput)
+      }
+      userEvent.paste(phoneNumberInput, phoneNumber)
+    })
   }
-
-  await Promise.all(promises)
 }