@testing-library/react#waitForElement TypeScript Examples

The following examples show how to use @testing-library/react#waitForElement. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: CrystalBall.test.tsx    From ds2020_mauricio with GNU General Public License v3.0 6 votes vote down vote up 
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!");
});
Example #2
Source File: safe.dom.settings.owners.ts    From multisig-react with MIT License 6 votes vote down vote up 
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)
}
Example #3
Source File: moveFunds.helper.ts    From multisig-react with MIT License 6 votes vote down vote up 
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)
}
Example #4
Source File: AddressForm.test.tsx    From mail-my-ballot with Apache License 2.0 6 votes vote down vote up 
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')
})
Example #5
Source File: safe.dom.funds.thresholdGt1.ts    From multisig-react with MIT License 5 votes vote down vote up 
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,
    )
  })
})
Example #6
Source File: tokens.ts    From multisig-react with MIT License 5 votes vote down vote up 
toggleToken = async (dom, symbol) => {
  const btn = await waitForElement(() => dom.getByTestId(`${symbol}_${TOGGLE_TOKEN_TEST_ID}`))

  act(() => {
    fireEvent.click(btn)
  })
}
Example #7
Source File: autosuggest.test.tsx    From openmrs-esm-patient-registration with MIT License 5 votes vote down vote up 
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();
  });
});
Example #8
Source File: safe.dom.settings.owners.ts    From multisig-react with MIT License 4 votes vote down vote up 
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)
  })
})