A Few Tips to Make your EmberJS QUnit Tests Read Like a Spec

Even though unit tests often test small pieces of code, you still want to write the tests in a way where future readers, including yourself can get a good idea of what the code does (or should do) by quickly reading test output. They can essentially be documentation that doesn't go stale (as long as they are passing that is). An extra benefit to writing tests in specification style is that it focuses you on the behavior of your tests rather than your tests innards, which is generally a good practice for robust and useful tests.

In developing code that runs EmberJS, a typical setup is to run QUnit with TestEm UI to run and report tests continuously while you develop. If you write your tests in a certain way, your test output can be quite readable. Here's an example:

QUnit Spec-Style Output

Add a Test Module Description With the Name of What is Being Tested

By default, testem will show the generated name of the test as type:file, (ex. component:chat-history-bar), but you can override this to give it a more natural sounding name (eg. Chat History Bar Component) by setting a description on your module

moduleForComponent('chat-history-bar', 'Chat History Bar Component', {  

Start Test Names with "should"

This will let the text flow naturally from the subject above. It also lets you focus on writing tests in a behavioral style, focusing on what the thing you're testing should do as an outside observer.

test('should show loading indicator when room is loading history', function (assert) {  

Add a Description to Asserts with Intent

If you don't give your asserts description, they show up as 'ok' on screen, or when they fail something like 'expected true but received false'. Adding descriptions gives the reader (and yourself) a good indication of what the testcase is actually validating as well as why a testcase fails. You can use this information to both more quickly debug problems, and to review the strength of your tests.

assert.equal(this.$('.pc-loading').length, 1, 'loading indicator should be shown');  
assert.equal(this.$('.load-more-history').length, 0, 'load more history link should not be shown');  
assert.equal(this.$('.no-more-history').length, 0, 'no more history text should not be shown');