How to use the @ember/test-helpers.waitFor function in @ember/test-helpers

test('wait helpers', async (assert) => {
    await render(hbs`<div class="message">Hello</div>`);

    await waitFor('.message', { count: 1, timeout: 10, timeoutMessage: 'uh oh' });
    await waitUntil(() =&gt; 'hello', { timeout: 1000, timeoutMessage: 'boom' });

    await settled();
    assert.ok(isSettled());

    const {
        hasPendingRequests,
        hasPendingTimers,
        hasPendingWaiters,
        hasRunLoop,
        pendingRequestCount
    } = getSettledState();
});

test('and yet again', async function(assert) {
  this.render(hbs`{{foo-bar}}`);

  await scrollTo(document, 10, 20);
  await selectFiles('input[type=file]', [new Blob(['texters'], { type: 'plain/text' })]);
  await waitUntil(() => find('.foo.active'));
  await waitFor('.bar.selected');
  assert.ok(true);
});

export async function saveCard(mode, id) {
  await click(`[data-test-card-save-btn]`);

  if (mode === 'creator') {
    if (id) {
      await waitFor(`[data-test-card-schema="${id}"]`, { timeout });
    } else {
      await waitFor('[data-test-card-schema^="new-card-"]', { timeout });
    }
  } else {
    await waitFor(`[data-test-card-save-btn].saved`, { timeout });
  }
}

export async function saveCard(mode, id) {
  await click(`[data-test-card-save-btn]`);

  if (mode === 'creator') {
    if (id) {
      await waitFor(`[data-test-card-schema="${id}"]`, { timeout });
    } else {
      await waitFor('[data-test-card-schema^="new-card-"]', { timeout });
    }
  } else {
    await waitFor(`[data-test-card-save-btn].saved`, { timeout });
  }
}

export async function saveCard(mode, id) {
  await click(`[data-test-card-save-btn]`);

  if (mode === 'creator') {
    if (id) {
      await waitFor(`[data-test-card-schema="${id}"]`, { timeout });
    } else {
      await waitFor('[data-test-card-schema^="new-card-"]', { timeout });
    }
  } else {
    await waitFor(`[data-test-card-save-btn].saved`, { timeout });
  }
}