Ember Unit Testing Templates

Question

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.

This seems more like an integration test than a unit test, meaning it'd be easier to test during integration testing. — Kingpin2k
+1 to integration testing for this scenario. If you need to test a "hbs helper" or something more isolated (like a controller function/view function) I'd say unit test it but the value-add here is that a model and template work together like you'd expect and a true integration test solves this best IMHO — Toran Billups
Thank you both so much for your contributions. Really appreciate it! #ember4lyf ;p — sammy34

Kingpin2k Kingpin2k · Accepted Answer · 2014-09-07T22:51:04

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

Ember Unit Testing Templates

1 Answers