Ember CLI testing with ember mocha

To write and run a test for Ember CLI with ember-mocha

Assuming we have a component called PrettyColor in app/components/pretty-color.js

import Ember from 'ember';

var PrettyColor = Ember.Component.extend({
  classNames: ['pretty-color'],
  attributeBindings: ['style'],
  style: function(){
    return 'color: ' + this.get('name') + ';';
  }.property('name')
});

export default PrettyColor;

We can write a mocha test as follows:

First we do some initial setup and import what we need such as the PrettyColor component to be tested

import Ember from 'ember';
import { describeComponent, it } from 'ember-mocha';
import { setResolverRegistry } from 'tests/test-support/resolver';
import { PrettyColor } from 'app/components/pretty-color';

window.expect = chai.expect;

Then we setup a resolver to link component:pretty-color to PrettyColor.

function setupRegistry() {
  setResolverRegistry({
    'component:pretty-color': PrettyColor,
  });
}

Now we can describe/specify the component via describeComponent and use beforeSetup to setup the resolver map.

first call to this.$() renders the component. and this.$() references the rendered component instance, similar to $E in the browser console.

describeComponent('pretty-color', {

  beforeSetup: function() {
    setupRegistry();
  }

}, function() {

  it("has the correct className", function() {
    // first call to this.$() renders the component.
    expect(this.$().is('.pretty-color')).to.be.true;
  });

  it("uses the correct custom template", function() {
    var component = this.subject();

    expect($.trim(this.$().text())).to.equal('Pretty Color:');

    Ember.run(function() {
      component.set('name', 'green');
    });

    expect($.trim(this.$().text())).to.equal('Pretty Color: green');
  });

  it("$", function() {
    var component = this.subject({name: 'green'});
    expect($.trim(this.$('.color-name').text())).to.equal('green');
    expect($.trim(this.$().text())).to.equal('Pretty Color: green');
  });
});