jest-wait_for.js

describe('On submit form', () => {
  it('the popover is rendered', async () => {
    const store = createStore()

    const { container, getByText, getByTestId } = render(
      <ReduxProvider store={store}>
        <CheckCoverageContainer />
      </ReduxProvider>
    )

    const inputAddress = container.querySelector('input[name^="address"]')
    const inputNumber = container.querySelector('input[name="number"]')
    const inputPhone = container.querySelector('input[name="phone"]')
    const submitButton = getByTestId('submit')

    expect((inputNumber).disabled).toBeTruthy()

    fireEvent.change(inputAddress, {
      target: {
        value: MOCKS.fullAddress,
      },
    })

    await waitFor(() => {
      expect((inputAddress).value).toBe(
        MOCKS.fullAddress,
      )
    })

    // Simulate google maps selected autocomplete option
    act(() => fireEventPlace(MOCKS.mockPlace))

    await waitFor(() => {
      expect((inputNumber).disabled).toBeFalsy()
    })

    fireEvent.input(inputNumber, {
      target: {
        value: MOCKS.streetNumber,
      },
    })

    fireEvent.change(inputPhone, {
      target: {
        value: MOCKS.phone,
      },
    })

    fireEvent.click(submitButton)

    await waitFor(() => {
      expect(checkCoverage).toHaveBeenCalledTimes(1)
      expect(checkCoverage).toHaveBeenCalledWith(MOCKS.checkCoveragePayload)
    })

    // setTimeout fastforward
    act(() => jest.runOnlyPendingTimers())

    // Check popover is present
    await waitFor(() => {
      expect(getByTestId('coverage-popover')).toBeInTheDocument()
    })

    // Check modal is present
    await waitFor(() => {
      expect(getByText('Congratz')).toBeInTheDocument()
    })
  })
})