Skip to content

Commit

Permalink
update(testing): upd. route testing section (emberjs/ember.js#15933)
Browse files Browse the repository at this point in the history
This updates the route testing section according to the new Ember QUnit
testing patterns proposed in RFC#232.
  • Loading branch information
jayjayjpg committed Feb 12, 2018
1 parent 21a72bc commit 66e7721
Showing 1 changed file with 46 additions and 43 deletions.
89 changes: 46 additions & 43 deletions source/testing/testing-routes.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
_Unit testing methods and computed properties follows previous patterns shown
_Unit testing methods and computed properties follows previous patterns shown
in [Unit Testing Basics] because Ember.Route extends Ember.Object._

Testing routes can be done both via acceptance or unit tests. Acceptance tests
will likely provide better coverage for routes because routes are typically used
to perform transitions and load data, both of which are tested more easily in
Testing routes can be done both via application tests or container tests. Application tests
will likely provide better coverage for routes because routes are typically used
to perform transitions and load data, both of which are tested more easily in
full context rather than isolation.

That being said, sometimes it is important to unit test your routes. For example,
let's say we'd like to have an alert that can be triggered from anywhere within
our application. The alert function `displayAlert` should be put into the
`ApplicationRoute` because all actions and events bubble up to it from
That being said, sometimes it is important to test your routes in a smaller scope. For example,
let's say we'd like to have an alert that can be triggered from anywhere within
our application. The alert function `displayAlert` should be put into the
`ApplicationRoute` because all actions and events bubble up to it from
sub-routes and controllers.

> By default, Ember CLI does not generate a file for its application route. To
Expand All @@ -35,52 +35,55 @@ export default Route.extend({
```

In this route we've [separated our concerns](http://en.wikipedia.org/wiki/Separation_of_concerns):
The action `displayAlert` contains the code that is called when the action is
received, and the private function `_displayAlert` performs the work. While not
necessarily obvious here because of the small size of the functions, separating
code into smaller chunks (or "concerns"), allows it to be more readily isolated
The action `displayAlert` contains the code that is called when the action is
received, and the private function `_displayAlert` performs the work. While not
necessarily obvious here because of the small size of the functions, separating
code into smaller chunks (or "concerns") allows it to be more readily isolated
for testing, which in turn allows you to catch bugs more easily.

Here is an example of how to unit test this route:
Here is an example of test this route in an isolated test case:

```tests/unit/routes/application-test.js
import { moduleFor, test } from 'ember-qunit';
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';

let originalAlert;

moduleFor('route:application', 'Unit | Route | application', {
beforeEach() {
module('Unit | Route | application', function(hooks) {
setupTest(hooks);

hooks.beforeEach(function(assert) {
originalAlert = window.alert; // store a reference to window.alert
},
});

afterEach() {
hooks.afterEach(function(assert) {
window.alert = originalAlert; // restore window.alert
}
});
});

test('should display an alert', function(assert) {
assert.expect(2);

// with moduleFor, the subject returns an instance of the route
let route = this.owner.lookup('route:application');

// stub window.alert to perform a qunit test
const expectedTextFoo = 'foo';
window.alert = (text) => {
assert.equal(text, expectedTextFoo, `expect alert to display ${expectedTextFoo}`);
};

// call the _displayAlert function which triggers the qunit test above
route._displayAlert(expectedTextFoo);

// set up a second stub to perform a test with the actual action
const expectedTextBar = 'bar';
window.alert = (text) => {
assert.equal(text, expectedTextBar, `expected alert to display ${expectedTextBar}`);
};

test('should display an alert', function(assert) {
assert.expect(2);

// with moduleFor, the subject returns an instance of the route
let route = this.subject();

// stub window.alert to perform a qunit test
const expectedTextFoo = 'foo';
window.alert = (text) => {
assert.equal(text, expectedTextFoo, `expect alert to display ${expectedTextFoo}`);
};

// call the _displayAlert function which triggers the qunit test above
route._displayAlert(expectedTextFoo);

// set up a second stub to perform a test with the actual action
const expectedTextBar = 'bar';
window.alert = (text) => {
assert.equal(text, expectedTextBar, `expected alert to display ${expectedTextBar}`);
};

// Now use the routes send method to test the actual action
route.send('displayAlert', expectedTextBar);
// Now use the routes send method to test the actual action
route.send('displayAlert', expectedTextBar);
});
});
```

Expand Down

0 comments on commit 66e7721

Please sign in to comment.