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) {  
  assert.expect(2);

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

  this.render(hbs`{{accept-button}}`);

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

  // Template block usage:
  this.render(hbs`
    {{#accept-button}}
      template block text
    {{/accept-button}}
  `);

  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

https://github.com/switchfly/ember-test-helpers/pull/38

and some example usage

https://github.com/yapplabs/ember-radio-button/blob/master/tests/unit/components/radio-button-test.js

Tags: Testing