Ember.js Unit testing routes

In this post, I will be talking about everyone’s favorite topic in programming, you have all heard of it, testing!

Testing in Ember can be a bit daunting when first starting out on the framework. But after taking the time to learn and understand Ember, I have found that it is easy to work with and create, given that I’m still not an expert at it ( Although I have gotten better at it ).

Today, I’ll be going over how to write tests for Ember routes with unit testing.

Before we begin, I have to mention that we will be using the ember-sinonmodule in order to use all of the convenient tools for testing. Without it, writing tests would be unbearable. To install ember-sinon, I installed the ember-sinon-qunit and it will install ember-sinon as an addon. The reason why I did this is because there was not any instructions on how to install ember-sinon using ember on their github page. Although I think you can try doing ember install ember-sinon in the terminal in your project folder and that should work too.

To get started, lets use the Ember CLI to generate a route (We’re gonna assume you have already created your project):

ember g route fun-route

This will install a fun-route.js in your app/routes directory, along with a template (which we won’t be needing for this tutorial) and the fun-route-test.js under tests/unit/routes.

Then, we will install ember-sinon. Make sure your are in your project’s app or client directory and do the following:

ember install ember-sinon-qunit

and this should install ember-sinon.

Now that we have the two main ingredients, lets dive in and start coding!

Here’s the code for our fun-route.js :

// fun-route-test.js
import { moduleFor, test } from 'ember-qunit';
import Ember from 'ember';
import sinon from 'sinon';
let route
moduleFor('route:fun-route', 'Unit | Route | fun-route', {
  // Specify the other units that are required for this test.
  // needs: ['controller:foo']
  beforeEach() {
    route = this.subject({
      transitionTo: sinon.spy()
      controller: Ember.Object.create({
      	foods: []
      })
    })
  }
});
test('call updateFoodsArray action and update foods', function(assert) {
  assert.equal(route.controller.foods.length, 0);
route.send('updateFoodsArray', 'pho')
assert.equal(route.controller.foods.length, 1);
  assert.deepEqual(route.controller.foods, ['pho']);
});
test('call linkTo action and transitionTo', function(assert) {
  route.send('linkTo', 'route-name')
assert.ok(spy.calledOnce)
  assert.ok(spy.calledWith('route-name'))
})

As you can see, we imported sinon in order to use the spy functions that it provides. More info on that on their guide and a lot of other tools you can use for testing!

We have the beforeEach() method inside the moduleFor so that we do not repeat ourselves for each test, or else we would have to redeclare routes for every test with the same properties.

In the first test, we have the route.send(‘actionName’, ‘args’) . This will call our actions in our js file so we can test its functionality. Note that if we had multiple args, they would have to match the same positions as they are declared like route.send(‘actionName’, ‘args1’, ‘args2’) .

In our second test, we use sinon’s spy function to make sure that our linkTo action was called and within it, the transitionTo was called once and with a specific set of arguments, in this case just the string route-name .

And that’s how you get started with unit testing in Ember! This is a very basic tutorial but you can expand and achieve much more complex testing when you fully understand it! Sinon is a great tool for testing if a function was called or not and with what arguments. I have been using it a lot later and I encourage you all to check it out and incorporate it the next time you write your tests!