ember-test-setup

Testing shorthands to reduce duplication

Motivation

You have many tests with duplicated render setup, templates, and post render code.

test('my test 1', async function(assert) {
  this.setProperties({
    foo: true,
    bar: true
  });

  await render(hbs`
    {{my-component
      foo=foo
      bar=bar
    }}
  `);

  let label = document.querySelector('label');
  let input = document.querySelector('input');

  /// run tests
});

test('my test 2', async function(assert) {
  this.setProperties({
    foo: true,
    bar: true
  });

  await render(hbs`
    {{my-component
      foo=foo
      bar=bar
    }}
  `);

  let label = document.querySelector('label');
  let input = document.querySelector('input');

  /// run tests
});

// more tests

You might try to make your own helpers to remove the duplication, but here is a standard solution.

let label, input;

let render = setupRender(hooks, {
  beforeRender() {
    this.setProperties({
      foo: true,
      bar: true
    });
  },
  template: hbs`
    {{my-component
      foo=foo
      bar=bar
    }}
  `,
  afterRender() {
    label = document.querySelector('label');
    input = document.querySelector('input');
  }
});

test('my test 1', async function(assert) {
  await render();

  /// run assertions
});

test('my test 2', async function(assert) {
  await render();

  /// run assertions
});

// more tests

Compatibility

• Ember.js v3.16 or above
• Ember CLI v2.13 or above
• Node.js v10 or above

Installation

ember install ember-test-setup

Usage

Replace

import { render } from '@ember/test-helpers';

with

import { setupRender } from 'ember-test-setup';

Then add

let render = setupRender(hooks, {
  beforeRender() {
    // optional
  },
  template: hbs`
    {{my-component
      // ...
    }}
  `,
  afterRender() {
    // optional
  }
});

And finally replace all usages of

await render(hbs`
  {{my-component
    // ...
  }}
`);

with

await render();

It is possible to override the default template, useful for testing default values.

await render(hbs`{{my-component}}`);

You can also do this for models and services.

import { setupModel, setupService } from 'ember-test-setup';

setupModel(hooks, {
  beforeModel() {
    // optional
  },
  model: 'my-model',
  init: () => ({
    // optional
  }),
  afterModel(model) {
    // optional
  }
});

setupService(hooks, {
  beforeService() {
    // optional
  },
  service: 'my-service',
  init: () => ({
    // optional
  }),
  afterService(service) {
    // optional
  }
});

let model = this.model({ /* optional */ });
let service = this.service({ /* optional */ });

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.