Backbone.js查看在瀏覽器中使用Sinon Spies的測試

Question

我正在爲Backbone View編寫測試以測試在獲取模型後調用渲染函數。測試是：

beforeEach(function() { 
    $('body').append('<div class="sidebar"></div>'); 
    profileView = new ProfileView(); 
}); 

it('should call the render function after the model has been fetched', function (done) { 
    profileView.model = new UserModel({md5: 'd7263f0d14d66c349016c5eabd4d2b8c'}); 
    var spy = sinon.spy(profileView, 'render'); 
    profileView.model.fetch({ 
     success: function() { 
      sinon.assert.called(spy); 
      done(); 
     } 
    }); 
}); 

我使用Sinon Spies將間諜對象附加到profileView視圖對象的渲染函數。

的觀點是：

var ProfileView = Backbone.View.extend({ 
    el: '.sidebar' 
    , template: Hogan.compile(ProfileTemplate) 
    , model: new UserModel() 
    , initialize: function() { 
     this.model.bind('change', this.render, this); 
     this.model.fetch(); 
    } 
    , render: function() { 
     $(this.el).html(this.template.render()); 
     console.log("Profile Rendered"); 
     return this; 
    } 
}); 

的獲取是所謂的測試後，改變事件射擊和視圖的渲染功能獲取調用，但興農間諜沒有檢測到渲染正在稱爲失敗。

作爲一個實驗，我試圖調用在測試中呈現功能以查看是否間諜識別它：

it('should call the render function after the model has been fetched', function (done) { 
    profileView.model = new UserModel({md5: 'd7263f0d14d66c349016c5eabd4d2b8c'}); 
    var spy = sinon.spy(profileView, 'render'); 
    profileView.render(); 
    profileView.model.fetch({ 
     success: function() { 
      sinon.assert.called(spy); 
      done(); 
     } 
    }); 
}); 

間諜檢測被叫在上述情況下作出。

有誰知道爲什麼Spy在我的初始測試中沒有識別渲染調用？

Answer 1

問題是，在構建視圖的過程中，初始化函數會綁定事件直接發送到渲染功能。你不能用間諜截獲這個事件，因爲在你設置你的間諜（你在建造之後）之前，綁定已經發生了。

解決方案是在構建視圖之前窺探原型。所以你必須把間諜移到beforeEach，或者把視圖的構建移到測試中。

要設置的間諜：

this.renderSpy = sinon.spy(ProfileView.prototype, 'render'); 
this.view = new ProfileView(); 

再後來，刪除間諜：

ProfileView.prototype.render.restore() 

那麼這將在「普通」間諜調用來渲染，以及從改變事件該模型。

Answer 2

僅有3猜測：

1. 你假設的Model已更新，且模型事件觸發後fetch({ success })回調被稱爲..也許不是這樣。 解決方案：嘗試播放調試約here。
2. 也許fetch調用不是成功所以不調用成功回調。 解決方案：嘗試將錯誤回調添加到fetch以查看我們發送的內容是否存在。
3. Model.validate響應false，什麼是不太可能如果您還沒有實施它。

（我敢打賭，爲2.）

Answer 3

這個工作對我來說，雖然諜照是在集合中使用：

var thatzzz = this; 
    this.hcns.fetch({ 
     success: function(){ 
      expect(thatzzz.hcnsFetchSpy).toHaveBeenCalled(); 
     } 
}); 

• 間諜已於beforeEach
定義