diff --git a/src/Apps/Order/Routes/Shipping/Components/__tests__/SavedAddresses.jest.tsx b/src/Apps/Order/Routes/Shipping/Components/__tests__/SavedAddresses.jest.tsx index 334347be171..d8b9722ba1c 100644 --- 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 index 32af910dc44..5e73c5bd56b 100644 --- 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[] = [] + // Country input can trigger ui updates if (country) { - promises.push( - new Promise(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) }