CODEWITHSUNDEEP
unit-testingember.jsqunit
sammy34
sammy34

Reputation: 5467

Ember Unit Testing Templates

I'm in the early stages of using Ember in a project. So far I'm very excited about the possibilities it opens up!

We're writing integration tests as described in their docs. We also plan to do unit testing of various things at a later stage when required (components, controllers, views etc).

Right now, however, we just have a basic template to which a model is bound. For illustrative purposes it could simply be:

<h1>{{title}}</h1>

We're precompiling our templates on the server: they're available in the Ember.TEMPLATES collection.

We'd like to unit test just this template with a model (created in the test) bound to it. My thinking is that we should just be able to load the app on a page, specify a page element into which the template should be rendered, create a dummy model, bind it 'somehow' to the template, render the template and then do some jQuery assertions. Sounds straight-forward, but I can't seem to find out how to do this in an easy way.

I've already looked at this post and posts like this, but they either seem to be out of date or deal with views, which I don't think we have a need for with such a simple template.

Can anyone point me in the right direction? Am I looking at this problem the wrong way? We're using qunit and ember-qunit combi as recommended in the Ember docs, in case that's of importance.

Upvotes: 3

Views: 1098

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

You can always create a view on the fly and attach a controller and your template to it, then attach it to the page and test that the bindings are working. 

var controller = Em.ObjectController.create({
  model: { title: 'hello'}
});
var fooView = Em.View.create({
  container: App.__container__,
  templateName: 'foo',
  controller: controller
});

// start up the run loop and inject template into the page
Em.run(function(){
  fooView.appendTo('#foo');  
});

equal(find("h1").length, 1, "h1 is injected");
equal(find("h1").html(), 'hello', "text says hello");
fooView.remove(); // cleanup

http://emberjs.jsbin.com/wipo/45/edit

Upvotes: 4

Related Questions