Ember QUnit 0.2.x

By: Robert Jackson
testing

Ember QUnit 0.2.x has been released. It brings a whole bunch of bug fixes and some much needed cleanup, but there are a couple breaking changes also.

History of the changes

Ember QUnit started as a self contained library to make unit testing of Ember applications significantly easier. Ember QUnit proved that unit testing an Ember application could be very simple, and users of other testing frameworks wanted to join in the unit testing fun. Unfortunately, the early code was fairly coupled to QUnit (the testing framework being used) so reusing the Ember unit testing helpers separate from QUnit was not possible.

Ember QUnit 0.2.x is a complete organizational refactor to remove the Ember unit testing helpers (into the appropriately named ember-test-helpers) and keep the QUnit specific parts in Ember QUnit. The majority of this refactoring effort was done by Dan Gebhardt and sponsored by the good folks at SwitchFly (you can read their write-up of the work here). Out of this effort we have been able to create Ember Mocha which now has feature parity with Ember QUnit and is a truly first class Ember unit testing solution. Due to the usage of a general purpose underlying ember-test-helpers library, it should now be possible to create a nice wrapper around nearly any JS testing framework.

Notable Changes

setup and teardown Deprecation

setup and teardown are deprecated in favor of beforeEach / afterEach. This update was made to allow closer conformance to QUnit 2.x concepts.

// Refactor from (under 0.1.x):
import { test, moduleForComponent } from 'ember-qunit';

moduleForComponent('awesome-sauce', 'AwesomeSauceComponent', {
  setup: function() { },

  teardown: function() { }
});

// To (under 0.2.x):
import { test, moduleForComponent } from 'ember-qunit';

moduleForComponent('awesome-sauce', 'AwesomeSauceComponent', {
  beforeEach: function() { },

  afterEach: function() { }
});

Global Assertion Deprecation

Usage of global assertions are deprecated and should be replaced with the Assert argument to your test callbacks. This update was made to allow closer conformance to QUnit 2.x concepts.

// Refactor from (under 0.1.x):
import { test, moduleForComponent } from 'ember-qunit';

moduleForComponent('awesome-sauce');

test('implements awesomeness', function() {
  equal(....);
  ok(....);
});

// To (under 0.2.x):
import { test, moduleForComponent } from 'ember-qunit';

moduleForComponent('awesome-sauce');

test('implements awesomeness', function(assert) {
  assert.equal(....);
  assert.ok(....);
});

Arguments to setup / teardown / beforeEach / afterEach

In prior versions of Ember QUnit, the setup and teardown hooks were called with a single argument: the container. In Ember QUnit 0.2 this argument is no longer present.

Note: usage of setup and teardown are deprecated, you should use beforeEach and afterEach.

// Refactor from (under 0.1.x):
import { test, moduleForComponent } from 'ember-qunit';

moduleForComponent('awesome-sauce', 'AwesomeSauceComponent', {
  setup: function(container) {
    /* do stuff */
  },

  teardown: function(container) {
    /* do stuff */
  }
});

// To (under 0.2.x):
import { test, moduleForComponent } from 'ember-qunit';

moduleForComponent('awesome-sauce', {
  beforeEach: function() {
    var container = this.container;

    /* do stuff */
  },

  afterEach: function() {
    var container = this.container;

    /* do stuff */
  }
});

Deprecated this.append in Component tests

In a component test you would previously call this.append() to append your component into the DOM. This was somewhat confusing, and took some explaining when teaching to newcomers, so it has been replaced with this.render() which fits much better in our Ember mindset.

// Refactor from (under 0.1.x):
import { test, moduleForComponent } from 'ember-qunit';

moduleForComponent('awesome-sauce');

test('implements awesomeness', function() {
  var component = this.subject();

  this.append();

  equal(component.$().text(), 'WHOAA!! AWESOME!!!');
});

// To (under 0.2.x):
import { test, moduleForComponent } from 'ember-qunit';

moduleForComponent('awesome-sauce');

test('implements awesomeness', function(assert) {
  var component = this.subject();

  this.render();

  assert.equal(component.$().text(), 'WHOAA!! AWESOME!!!');
});

Ordering of afterEach / teardown Callback

In Ember QUnit 0.1.x, the teardown callback was called after all internal cleanup was finished (like clearing the container, removing any views from the DOM, etc). In Ember QUnit 0.2.x afterEach / teardown is called before the internal hooks.

Build Changes

There are a few build related changes with Ember QUnit 0.2.x:

  • Build output is removed from the main repo, and now is maintained at ember-qunit-builds.
  • The output file locations are no longer nested in dist/.
  • CJS and AMD output is no longer generated.

ember-cli-qunit Version

If you are using Ember CLI, you should update to ember-cli-qunit version 0.3.7.

Summary

Please file issues ember-qunit issues if you come across anything that isn’t listed here.