@1024pix/ember-testing-library

The Ember Testing Library is a very lightweight solution for testing Ember components. It provides light utility functions on top of Ember built-in helpers, in a way that encourages better testing practices. Its primary guiding principle is:

• The more your tests resemble the way your software is used, the more confidence they can give you.

For more info, please visit testing library guiding principles.

Installation

npm install -D @1024pix/ember-testing-library @testing-library/dom @ember/test-helpers

Usage

Ember testing library gives access to dom testing library queries in an Ember app. For more info on dom testing library queries, follow Testing library doc.

The current API methods that can be used are as follows:

• getScreen
• within
• visit
• render
• clickByName
• clickByText
• fillByLabel
• selectByLabelAndOption
• selectOptionInRadioGroup
• getByTextWithHtml
• getAllByTextWithHtml
• queryByTextWithHtml
• queryAllByTextWithHtml
• findByTextWithHtml
• findAllByTextWithHtml

Please note that Ember Testing Library does not include the userEvent package, and that you should therefore use Ember built-in test helpers to interact with components and/or DOM nodes in integration/acceptance tests.

Acceptance test example:

import { visit } from '@1024pix/ember-testing-library';
import { click } from '@ember/test-helpers';

test('it should disable the button when clicked', async function (assert) {
  // given
  const screen = await visit('/home');

  // when
  const button = screen.getByRole('button', { name: 'Send message' });
  await click(button);

  // then
  assert.dom(button).isDisabled();
});

Integration test example:

import { render } from '@1024pix/ember-testing-library';
import { click } from '@ember/test-helpers';

test('it should disable the button when clicked', async function (assert) {
  // given
  const screen = await render(hbs`<LoginForm />`);

  // when
  const button = screen.getByRole('button', { name: 'Login' });
  await click(button);

  // then
  assert.dom(button).isDisabled();
});