@testing-library/react#waitForElement TypeScript Examples

test("renders message from backend", async () => {
  // Setup
  axios.get.mockResolvedValue({ data: "message!" });
  act(() => {
    const { getByText } = render(<CrystalBall />);
    fireEvent.click(getByText(/Get My Fortune Told/i));
  });

  // Get results
  const msgElement: any = await waitForElement(() =>
    document.getElementById("msg")
  );
  const text: string = msgElement.innerHTML.valueOf();

  // Assert
  expect(msgElement).toBeInTheDocument();
  expect(text).toContain("message!");
});

travelToOwnerSettings = async (dom) => {
  const settingsBtn = await waitForElement(() => dom.getByTestId(SETTINGS_TAB_BTN_TEST_ID))
  fireEvent.click(settingsBtn)

  // click on owners settings
  const ownersSettingsBtn = await waitForElement(() => dom.getByTestId(OWNERS_SETTINGS_TAB_TEST_ID))
  fireEvent.click(ownersSettingsBtn)

  await sleep(500)
}

fillAndSubmitSendFundsForm = async (
  SafeDom,
  sendButton,
  value,
  recipient,
) => {
  await act(async () => {
    fireEvent.click(sendButton)
  })
  // give time to re-render it
  await sleep(400)

  // Fill first send funds screen
  const recipientInput = SafeDom.getByPlaceholderText('Recipient*')
  const amountInput = SafeDom.getByPlaceholderText('Amount*')
  const reviewBtn = SafeDom.getByTestId('review-tx-btn')
  await act(async () => {
    fireEvent.change(recipientInput, { target: { value: recipient } })
    fireEvent.change(amountInput, { target: { value } })
    fireEvent.click(reviewBtn)
  })

  // Submit the tx (Review Tx screen)
  const submitBtn = await waitForElement(() => SafeDom.getByTestId('submit-tx-btn'))
  await act(async () => {
    fireEvent.click(submitBtn)
  })
  await sleep(1000)
}

test('AddressForm works', async () => {
  const mockedPageView = mocked(pageView)

  const fetchContactAddress = mocked(client, true).fetchContactAddress = jest.fn().mockResolvedValue({
    type: 'data',
    data: {
      contact: null,
      address: null,
    },
  })

  const { getByLabelText, getByTestId } = render(
    <RawAddressForm rawState='Florida'/>,
    { wrapper: UnstatedContainer }
  )

  act(() => {
    fireEvent.change(getByLabelText(/^Full Address/i), {
      target: {
        value: '100 S Biscayne Blvd, Miami, FL 33131'
      },
    })
    fireEvent.click(getByTestId('submit'), {
        bubbles: true,
        cancelable: true,
    })
  })

  await waitForElement(() => getByTestId('status-title'))

  expect(fetchContactAddress).toHaveBeenCalledTimes(1)
  expect(mockedPageView).toHaveBeenCalledTimes(1)
  expect(getByTestId('status-title')).toHaveTextContent('Great News!')
  expect(getByTestId('status-detail')).toHaveTextContent('Florida')
})

describe('DOM > Feature > Sending Funds', () => {
  let store
  let safeAddress
  let accounts
  beforeEach(async () => {
    store = aNewStore()
    // using 4th account because other accounts were used in other tests and paid gas
    safeAddress = await aMinedSafe(store, 2, 2)
    accounts = await getWeb3().eth.getAccounts()
  })

  it('Sends ETH with threshold = 2', async () => {
    // GIVEN
    const ethAmount = '5'
    await sendEtherTo(safeAddress, ethAmount)
    const balanceAfterSendingEthToSafe = await getBalanceInEtherOf(accounts[0])

    // WHEN
    const SafeDom = renderSafeView(store, safeAddress)
    await sleep(1300)

    // Open send funds modal
    const balanceRows = SafeDom.getAllByTestId(BALANCE_ROW_TEST_ID)
    expect(balanceRows[0]).toHaveTextContent(`${ethAmount} ETH`)
    const sendButton = SafeDom.getByTestId('balance-send-btn')
    fireEvent.click(sendButton)

    await fillAndSubmitSendFundsForm(SafeDom, sendButton, ethAmount, accounts[0])

    // CONFIRM TX
    fireEvent.click(SafeDom.getByTestId(TRANSACTIONS_TAB_BTN_TEST_ID))
    await sleep(200)

    useTestAccountAt(1)
    await sleep(2200)
    const txRows = SafeDom.getAllByTestId(TRANSACTION_ROW_TEST_ID)
    expect(txRows.length).toBe(1)

    fireEvent.click(txRows[0])

    //const confirmBtn = await waitForElement(() => SafeDom.getByTestId(CONFIRM_TX_BTN_TEST_ID))
    //fireEvent.click(confirmBtn)

    // Travel confirm modal
    const approveTxBtn = await waitForElement(() => SafeDom.getByTestId(APPROVE_TX_MODAL_SUBMIT_BTN_TEST_ID))
    fireEvent.click(approveTxBtn)

    await sleep(1000)

    // THEN
    const safeFunds = await getBalanceInEtherOf(safeAddress)
    expect(Number(safeFunds)).toBe(0)

    const receiverFunds = await getBalanceInEtherOf(accounts[0])
    const ESTIMATED_GASCOSTS = 0.3
    expect(Number(parseInt(receiverFunds, 10) - parseInt(balanceAfterSendingEthToSafe, 10))).toBeGreaterThan(
      parseInt(ethAmount, 10) - ESTIMATED_GASCOSTS,
    )
  })
})

toggleToken = async (dom, symbol) => {
  const btn = await waitForElement(() => dom.getByTestId(`${symbol}_${TOGGLE_TOKEN_TEST_ID}`))

  act(() => {
    fireEvent.click(btn)
  })
}

describe('autosuggest', () => {
  const setup = () => {
    render(
      <BrowserRouter>
        <Autosuggest
          name="person"
          placeholder="Find Person"
          onSuggestionSelected={handleSuggestionSelected}
          getSearchResults={mockGetSearchResults}
          getDisplayValue={item => item.display}
          getFieldValue={item => item.uuid}
        />
      </BrowserRouter>,
    );
  };

  it('should render a search box', () => {
    setup();
    expect(screen.getByRole('searchbox')).toBeInTheDocument();
    expect(screen.queryByRole('list')).toBeNull();
  });

  it('shows search results in an ul', async () => {
    setup();
    const searchbox = screen.getByRole('searchbox');
    fireEvent.change(searchbox, { target: { value: 'john' } });
    const list = await waitForElement(() => screen.getByRole('list'));
    expect(list).toBeInTheDocument();
    expect(list.children).toHaveLength(2);
  });

  it('creates li items whose inner text is gotten through getDisplayValue', async () => {
    setup();
    const searchbox = screen.getByRole('searchbox');
    fireEvent.change(searchbox, { target: { value: 'john' } });
    const list = await waitForElement(() => screen.getAllByRole('listitem'));
    expect(list[0].textContent).toBe('John Doe');
    expect(list[1].textContent).toBe('John Smith');
  });

  it('triggers onSuggestionSelected with correct values when li is clicked', async () => {
    setup();
    const searchbox = screen.getByRole('searchbox');
    fireEvent.change(searchbox, { target: { value: 'john' } });
    const listitems = await waitForElement(() => screen.getAllByRole('listitem'));
    fireEvent.click(listitems[0]);
    expect(handleSuggestionSelected).toHaveBeenNthCalledWith(1, 'person', 'randomuuid1');
  });

  it.skip('sets search box value to selected suggestion', async () => {
    setup();
    let searchbox = screen.getByRole('searchbox');
    fireEvent.change(searchbox, { target: { value: 'john' } });
    const listitems = await waitForElement(() => screen.getAllByRole('listitem'));
    fireEvent.click(listitems[0]);
    searchbox = screen.getByRole('searchbox');
    expect(searchbox.textContent).toBe('John Doe');
  });

  it('clears suggestions when a suggestion is selected', async () => {
    setup();
    let list = screen.queryByRole('list');
    expect(list).toBeNull();
    const searchbox = screen.getByRole('searchbox');
    fireEvent.change(searchbox, { target: { value: 'john' } });
    list = await waitForElement(() => screen.queryByRole('list'));
    expect(list).toBeInTheDocument();
    const listitems = screen.getAllByRole('listitem');
    fireEvent.click(listitems[0]);
    list = screen.queryByRole('list');
    expect(list).toBeNull();
  });
});

describe('DOM > Feature > Settings - Manage owners', () => {
  let store
  let safeAddress
  beforeEach(async () => {
    store = aNewStore()
    safeAddress = await aMinedSafe(store)
  })

  it("Changes owner's name", async () => {
    const NEW_OWNER_NAME = 'NEW OWNER NAME'

    const SafeDom = renderSafeView(store, safeAddress)
    await sleep(1300)

    // Travel to settings
    await travelToOwnerSettings(SafeDom)

    // open rename owner modal
    const renameOwnerBtn = await waitForElement(() => SafeDom.getByTestId(RENAME_OWNER_BTN_TEST_ID))
    fireEvent.click(renameOwnerBtn)

    // rename owner
    const ownerNameInput = SafeDom.getByTestId(RENAME_OWNER_INPUT_TEST_ID)
    const saveOwnerChangesBtn = SafeDom.getByTestId(SAVE_OWNER_CHANGES_BTN_TEST_ID)
    fireEvent.change(ownerNameInput, { target: { value: NEW_OWNER_NAME } })
    fireEvent.click(saveOwnerChangesBtn)
    await sleep(200)

    // check if the name updated
    const ownerRow = SafeDom.getByTestId(OWNERS_ROW_TEST_ID)
    expect(ownerRow).toHaveTextContent(NEW_OWNER_NAME)
  })

  it('Removes an owner', async () => {
    const twoOwnersSafeAddress = await aMinedSafe(store, 2)

    const SafeDom = renderSafeView(store, twoOwnersSafeAddress)
    await sleep(1300)

    // Travel to settings
    await travelToOwnerSettings(SafeDom)

    // check if there are 2 owners
    let ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TEST_ID)
    expect(ownerRows.length).toBe(2)
    expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account')
    expect(ownerRows[0]).toHaveTextContent('0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1')
    expect(ownerRows[1]).toHaveTextContent('Adol 2 Eth Account')
    expect(ownerRows[1]).toHaveTextContent('0xFFcf8FDEE72ac11b5c542428B35EEF5769C409f0')

    // click remove owner btn which opens the modal
    const removeOwnerBtn = SafeDom.getAllByTestId(REMOVE_OWNER_BTN_TEST_ID)[1]
    fireEvent.click(removeOwnerBtn)

    // modal navigation
    const nextBtnStep1 = SafeDom.getByTestId(REMOVE_OWNER_MODAL_NEXT_BTN_TEST_ID)
    fireEvent.click(nextBtnStep1)

    const nextBtnStep2 = SafeDom.getByTestId(REMOVE_OWNER_THRESHOLD_NEXT_BTN_TEST_ID)
    fireEvent.click(nextBtnStep2)

    const nextBtnStep3 = SafeDom.getByTestId(REMOVE_OWNER_REVIEW_BTN_TEST_ID)
    fireEvent.click(nextBtnStep3)
    await sleep(1300)

    // check if owner was removed
    await travelToOwnerSettings(SafeDom)

    ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TEST_ID)
    expect(ownerRows.length).toBe(1)
    expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account')
    expect(ownerRows[0]).toHaveTextContent('0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1')

    // Check that the transaction was registered
    await checkRegisteredTxRemoveOwner(SafeDom, '0xFFcf8FDEE72ac11b5c542428B35EEF5769C409f0')
  })

  it('Adds a new owner', async () => {
    const NEW_OWNER_NAME = 'I am a new owner'
    const NEW_OWNER_ADDRESS = '0x0E329Fa8d6fCd1BA0cDA495431F1F7ca24F442c3'

    const SafeDom = renderSafeView(store, safeAddress)
    await sleep(1300)

    // Travel to settings
    await travelToOwnerSettings(SafeDom)

    // check if there is 1 owner
    let ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TEST_ID)
    expect(ownerRows.length).toBe(1)
    expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account')
    expect(ownerRows[0]).toHaveTextContent('0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1')

    // click add owner btn
    fireEvent.click(SafeDom.getByTestId(ADD_OWNER_BTN_TEST_ID))
    await sleep(200)

    // fill and travel add owner modal
    const ownerNameInput = SafeDom.getByTestId(ADD_OWNER_NAME_INPUT_TEST_ID)
    const ownerAddressInput = SafeDom.getByTestId(ADD_OWNER_ADDRESS_INPUT_TEST_ID)
    const nextBtn = SafeDom.getByTestId(ADD_OWNER_NEXT_BTN_TEST_ID)
    fireEvent.change(ownerNameInput, { target: { value: NEW_OWNER_NAME } })
    fireEvent.change(ownerAddressInput, { target: { value: NEW_OWNER_ADDRESS } })
    fireEvent.click(nextBtn)
    await sleep(200)

    fireEvent.click(SafeDom.getByTestId(ADD_OWNER_THRESHOLD_NEXT_BTN_TEST_ID))
    await sleep(200)
    fireEvent.click(SafeDom.getByTestId(ADD_OWNER_SUBMIT_BTN_TEST_ID))
    await sleep(1500)

    // check if owner was added
    await travelToOwnerSettings(SafeDom)

    ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TEST_ID)
    expect(ownerRows.length).toBe(2)
    expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account')
    expect(ownerRows[0]).toHaveTextContent('0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1')
    expect(ownerRows[1]).toHaveTextContent(NEW_OWNER_NAME)
    expect(ownerRows[1]).toHaveTextContent(NEW_OWNER_ADDRESS)
    // Check that the transaction was registered
    await checkRegisteredTxAddOwner(SafeDom, NEW_OWNER_ADDRESS)
  })

  it('Replaces an owner', async () => {
    const NEW_OWNER_NAME = 'I replaced an old owner'
    const NEW_OWNER_ADDRESS = '0x1dF62f291b2E969fB0849d99D9Ce41e2F137006e'

    const twoOwnersSafeAddress = await aMinedSafe(store, 2)

    const SafeDom = renderSafeView(store, twoOwnersSafeAddress)
    await sleep(1300)

    // Travel to settings
    await travelToOwnerSettings(SafeDom)

    // check if there are 2 owners
    let ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TEST_ID)
    expect(ownerRows.length).toBe(2)
    expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account')
    expect(ownerRows[0]).toHaveTextContent('0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1')
    expect(ownerRows[1]).toHaveTextContent('Adol 2 Eth Account')
    expect(ownerRows[1]).toHaveTextContent('0xFFcf8FDEE72ac11b5c542428B35EEF5769C409f0')

    // click replace owner btn which opens the modal
    const replaceOwnerBtn = SafeDom.getAllByTestId(REPLACE_OWNER_BTN_TEST_ID)[1]
    fireEvent.click(replaceOwnerBtn)

    // fill and travel add owner modal
    const ownerNameInput = SafeDom.getByTestId(REPLACE_OWNER_NAME_INPUT_TEST_ID)
    const ownerAddressInput = SafeDom.getByTestId(REPLACE_OWNER_ADDRESS_INPUT_TEST_ID)
    const nextBtn = SafeDom.getByTestId(REPLACE_OWNER_NEXT_BTN_TEST_ID)
    fireEvent.change(ownerNameInput, { target: { value: NEW_OWNER_NAME } })
    fireEvent.change(ownerAddressInput, { target: { value: NEW_OWNER_ADDRESS } })
    fireEvent.click(nextBtn)
    await sleep(200)

    const replaceSubmitBtn = SafeDom.getByTestId(REPLACE_OWNER_SUBMIT_BTN_TEST_ID)
    fireEvent.click(replaceSubmitBtn)
    await sleep(1000)

    // check if the owner was replaced
    await travelToOwnerSettings(SafeDom)

    ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TEST_ID)
    expect(ownerRows.length).toBe(2)
    expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account')
    expect(ownerRows[0]).toHaveTextContent('0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1')
    expect(ownerRows[1]).toHaveTextContent(NEW_OWNER_NAME)
    expect(ownerRows[1]).toHaveTextContent(NEW_OWNER_ADDRESS)

    // Check that the transaction was registered
    await checkRegisteredTxReplaceOwner(SafeDom, '0xFFcf8FDEE72ac11b5c542428B35EEF5769C409f0', NEW_OWNER_ADDRESS)
  })
})