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

test(':selected is replaced correctly', function(assert) {
  // find
  const checkedVal = find('.foo input:checked').value;
  assert.equal(checkedVal, 13);

  // findAll
  const checkedCount = findAll('select option:checked').length;
  assert.equal(checkedCount, 3);

  // Multiple jQuery selectors
  const firstChecked = find('.foo input:checked').value;
  const secondChecked = find(findAll('.foo input:checked')[2]).value;
});

test('visiting /foo', function(assert) {
  assert.equal(find('.foo').tagName, 'DIV');
});

test('visiting /foo', function(assert) {
  assert.equal(find('.foo').id, 'foo');
  assert.equal(find('.foo').getAttribute('data-test'), 'foo');
});

test('DOM interactions', async () => {
    await render(hbs`<div class="message">Hello, world</div>`);

    await click('.message');
    await doubleClick('.message');
    await tap('.message');
    await focus('.message');
    await blur('.message');
    await triggerEvent('.message', 'custom-event');
    await triggerKeyEvent('.message', 'keydown', 'Enter', { ctrlKey: true });
    await fillIn('.message', 'content');

    const messageElement = find('.message')!;
    await click(messageElement);
    await doubleClick(messageElement);
    await tap(messageElement);
    await focus(messageElement);
    await blur(messageElement);
    await triggerEvent(messageElement, 'custom-event');
    await triggerKeyEvent(messageElement, 'keydown', 'Enter', { ctrlKey: true });
    await fillIn(messageElement, 'content');
    await typeIn(messageElement, 'content');

    const allMessages = findAll('.message');
    for (const element of allMessages) {
        await click(element);
    }

    const root = getRootElement();

test('it renders', async function(assert) {
  this.render(hbs`{{foo-bar}}`);

  await click('.foo', {});
  assert.equal(find('.foo').id, 'foo');
  await fillIn('.foo input', 'bar');
  await blur('.foo input');
  assert.equal(find('.foo').textContent.trim(), 'foo');
});

async function drop(dragSelector, dragEvent, options) {
  let { drop: dropSelector, dropEndOptions, dragOverMoves } = options;

  let dropElement = await find(dropSelector);
  if (!dropElement) {
    throw(`There are no drop targets by the given selector: '${dropSelector}'`);
  }

  await dragOver(dropSelector, dragOverMoves);

  if (options.beforeDrop) {
    await options.beforeDrop.call();
  }

  let event = new MockEvent().useDataTransferData(dragEvent);
  await triggerEvent(dropSelector, 'drop', event);

  return await triggerEvent(dragSelector, 'dragend', dropEndOptions);
}

export function getInFroalaEditor(selector) {

  let element = find(`${selector} [contenteditable]`) || find(selector);

  if (element === null) {
      throw `getInFroalaEditor(): DOM element not found with the selector '${selector}'`;
  }

  return element.innerHTML.trim();

}

export default async function assertDetails(assert, {title, listLength, reachedInfinity}) {
  let postsTitle     = find('#posts-title');
  let postList       = find('ul');
  let infinityLoader = find('.infinity-loader');

  await settled();

  assert.equal(postsTitle.textContent, title);
  assert.equal(postList.querySelectorAll('li').length, listLength);
  assert.equal(infinityLoader.classList.contains('reached-infinity'), reachedInfinity);
}

export async function saveEdits() {
  let button = find('[data-test-cs-version-control-button-save]');
  if (!button) {
    throw new Error('Could not find save button. Did you open the tools?');
  }
  if (button.disabled) {
    throw new Error('Could not save the edits because the save button is disabled.');
  }

  await click(button);
}