/ Testing

Integration tests for components

We have a new style of test for components at our disposal, an integration test. The crucial difference being that we render the component in a snippet of handlebars code: E.g.

this.render(hbs`{{accept-button action='approveChanges'}}`);

Ember-cli comes with a generator for this new type of component test

ember g component-test accept-button

which will create a test file in tests/integration/components with

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('accept-button', 'Integration | Component | accept button', {
  integration: true

test('it renders', function(assert) {

  // Set any properties with this.set('myProperty', 'value');
  // Handle any actions with this.on('myAction', function(val) { ... });


  assert.equal(this.$().text(), '');

  // Template block usage:
      template block text

  assert.equal(this.$().text().trim(), 'template block text');

To start taking advantage of this hbs method we install the ember-cli-htmlbars-inline-precompile addon. If you are using a recent version of ember-cli (>= 1.13.0) it should already be installed.

ember install ember-cli-htmlbars-inline-precompile

For more background see the pull request in ember-test-helpers


and some example usage