Ember Unit Testing Patterns
I am in the early stages of using Ember on a project. So far, I am very happy with the opportunities it opens up!
We write the integration tests described in our docs . We also plan to do unit testing of various things at a later stage when needed (components, controllers, views, etc.).
However, for now we only have a basic template to which the model is bound. For illustrative purposes, this might simply be:
<h1>{{title}}</h1>
We will pre-compile our templates on the server: they are available in the collection Ember.TEMPLATES
.
We would like to unit test just this template with a model (created in the test) bound to it. My thinking is that we should just load the application on the page, specify the page element where 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 figure out how to do it in an easy way.
I've already looked at this post and posts like, but they either seem outdated or deal with opinions that I don't think we need to have such a simple template.
Can anyone point me in the right direction? Am I viewing this problem incorrectly? We use qunit and ember-qunit combi as recommended in the Ember docs, if that's important.
source to share
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 check 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
source to share