Ember.js を学習中です。私たちはすべての開発 TDD を行っており、Ember.js も例外ではありません。Backbone.js アプリをテスト駆動で構築した経験があるため、Jasmine または Mocha/Chai を使用したフロントエンド コードのテストに精通しています。
ビューをテストする方法を考えているときに、ビューが使用するテンプレートに#linkTo
ステートメントがある場合に問題が発生しました。残念ながら、良いテストの例と実践を見つけることができません。この要点は、ember アプリケーションを適切に単体テストする方法の答えを得るための私たちの探求です。
Ember.js ソース コードの linkToのテストを確認したところ、サポートするために ember アプリの完全な接続が含まれていることに気付きました#linkTo
。これは、テンプレートをテストするときにこの動作をスタブできないということですか?
テンプレート レンダリングを使用して ember ビューのテストを作成するにはどうすればよいですか?
以下は、テストの要旨と、テストに合格するテンプレート、およびテストに失敗するテンプレートです。
view_spec.js.coffee
# This test is made with Mocha / Chai,
# With the chai-jquery and 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') is a div that gets cleaned between each test
Em.run => @view.appendTo '#konacha'
it 'is shown', ->
$('#konacha .todos-count').should.have.text '1 things to do'
it 'is livebound', ->
expect(=> $('#konacha .todos-count').text()).to.change.from('1 things to do').to('2 things to do').when =>
Em.run =>
extraTodoItem = store.createRecord TodoItem,
title: 'Moar todo'
@controller.pushObject extraTodoItem
壊れた_テンプレート.ハンドルバー
<div class="todos-count"><span class="todos">{{length}}</span> things to do</div>
{{#linkTo "index"}}Home{{/linkTo}}
working_template.handlebars
<div class="todos-count"><span class="todos">{{length}}</span> things to do</div>