javascript - How to unit test views in ember.js? -

javascript - How to unit test views in ember.js? -

we in process of learning ember.js. our development tdd, , want ember.js no exception. have experience building backbone.js apps test-driven, familiar testing front-end code using jasmine or mocha/chai.

when figuring out how test views, ran problem when template view uses has #linkto statement. unfortunately unable find test examples , practices. gist our quest answers how decently unit-test ember applications.

when looking @ test linkto in ember.js source code, noticed contains total wiring of ember app back upwards #linkto. mean cannot stub behaviour when testing template?

how create tests ember views using template renders?

here a gist our test , template create test pass, , template create fail.

view_spec.js.coffee

# test made mocha / chai, # chai-jquery , chai-changes extensions describe 'todoitemsview', -> beforeeach -> testserializer = ds.jsonserializer.create primarykey: -> 'id' testadapter = ds.adapter.extend serializer: testserializer teststore = ds.store.extend revision: 11 adapter: testadapter.create() todoitem = ds.model.extend title: ds.attr('string') store = teststore.create() @todoitem = store.createrecord todoitem title: 'do something' @controller = em.arraycontroller.create content: [] @view = em.view.create templatename: 'working_template' controller: @controller @controller.pushobject @todoitem aftereach -> @view.destroy() @controller.destroy() @todoitem.destroy() describe 'amount of todos', -> beforeeach -> # $('#konacha') div gets cleaned between each test em.run => @view.appendto '#konacha' 'is shown', -> $('#konacha .todos-count').should.have.text '1 things do' 'is livebound', -> expect(=> $('#konacha .todos-count').text()).to.change.from('1 things do').to('2 things do').when => em.run => extratodoitem = store.createrecord todoitem, title: 'moar todo' @controller.pushobject extratodoitem

broken_template.handlebars

<div class="todos-count"><span class="todos">{{length}}</span> things do</div> {{#linkto "index"}}home{{/linkto}}

working_template.handlebars

<div class="todos-count"><span class="todos">{{length}}</span> things do</div>

our solution has been load whole application, isolate our test subjects much possible. example,

describe('fooview', function() { beforeeach(function() { this.foo = ember.object.create(); this.subject = app.fooview.create({ foo: this.foo }); this.subject.append(); }); aftereach(function() { this.subject && this.subject.remove(); }); it("renders foo's favoritefood", function() { this.foo.set('favoritefood', 'ramen'); em.run.sync(); expect( this.subject.$().text() ).tomatch( /ramen/ ); }); });

that is, router , other globals available, it's not complete isolation, can send in doubles things closer object under test.

if want isolate router, linkto helper looks controller.router, do

this.router = { generate: jasmine.createspy(...) }; this.subject = app.fooview.create({ controller: { router: this.router }, foo: this.foo });

javascript unit-testing model-view-controller ember.js