How to do Ember integration testing for route crossings?

Question

I am having trouble integrating testing with ember using the Toran Billup TDD Guide .

I use Karma as my test runner with Qunit and Phantom JS.

I am sure that half of them are related to my knowledge of a newcomer to Ember runloop. My question has two parts:

1) How can I fully perform a vist () check in a run loop?

2) How can I check conversions? The index route ('/') should go to the resource route called "project.index".

module("Projects Integration Test:", { setup: function() { Ember.run(App, App.advanceReadiness); }, teardown: function() { App.reset(); } }); test('Index Route Page', function(){ expect(1); App.reset(); visit("/").then(function(){ ok(exists("*"), "Found HTML"); }); }); 

Thanks in advance for any pointers in the right direction.

Answer 1

I just clicked an example application that makes a simple jump when you click the "/" route using ember.js RC5

https://github.com/toranb/ember-testing-example

A simple example of "hello world" looks like this:

1.) the template that you redirect during the transition

 <table> {{#each person in controller}} <tr> <td class="name">{{person.fullName}}</td> <td><input type="submit" class="delete" value="delete" {{action deletePerson person}} /></td> </tr> {{/each}} </table> 

2.) application code ember.js

 App = Ember.Application.create(); App.Router.map(function() { this.resource("other", { path: "/" }); this.resource("people", { path: "/people" }); }); App.OtherRoute = Ember.Route.extend({ redirect: function() { this.transitionTo('people'); } }); App.PeopleRoute = Ember.Route.extend({ model: function() { return App.Person.find(); } }); App.Person = Ember.Object.extend({ firstName: '', lastName: '' }); App.Person.reopenClass({ people: [], find: function() { var self = this; $.getJSON('/api/people', function(response) { response.forEach(function(hash) { var person = App.Person.create(hash); Ember.run(self.people, self.people.pushObject, person); }); }, this); return this.people; } }); 

3.) The integration test is as follows:

 module('integration tests', { setup: function() { App.reset(); App.Person.people = []; }, teardown: function() { $.mockjaxClear(); } }); test('ajax response with 2 people yields table with 2 rows', function() { var json = [{firstName: "x", lastName: "y"}, {firstName: "h", lastName: "z"}]; stubEndpointForHttpRequest('/api/people', json); visit("/").then(function() { var rows = find("table tr").length; equal(rows, 2, rows); }); }); 

4.) The helper integrator that I use on most of my ember.js projects

 document.write('<div id="foo"><div id="ember-testing"></div></div>'); Ember.testing = true; App.rootElement = '#ember-testing'; App.setupForTesting(); App.injectTestHelpers(); function exists(selector) { return !!find(selector).length; } function stubEndpointForHttpRequest(url, json) { $.mockjax({ url: url, dataType: 'json', responseText: json }); } $.mockjaxSettings.logging = false; $.mockjaxSettings.responseTime = 0; 

Answer 2

I am not familiar with karma, but the parts of your test that should interact with ember should be put into the execution loop (as you mentioned)

 Ember.run.next(function(){ //do somethin transition stuff here etc }); 

To check the current route, you can steal information from the discharge, here is some information that I stole from at some point.

 var router = App.__container__.lookup("router:main"); //get the main router var currentHandlerInfos = router.router.currentHandlerInfos; //get all handlers var activeHandler = currentHandlerInfos[currentHandlerInfos.length - 1]; // get active handler var activeRoute = activeHandler.handler; // active route 

If you start testing the controller, I wrote some information about this http://discuss.emberjs.com/t/unit-testing-multiple-controllers-in-emberjs/1865