2012-07-17 51 views
12

我正在寫一個簡單的點擊處理程序,並需要事件(像這樣)如何使用茉莉花在點擊事件時調用間諜?

Thing = function($){ 

    var MyObject = function(opts){ 
     this.opts = opts; 
    }; 

    MyObject.prototype.createSomething = function(){ 
     var that = this; 
     $('#some_dom_element').live('click', function(e) { 
      that.doStuff(e); 
     }); 
    }; 

    MyObject.prototype.doStuff = function(e) { 
     //do some javascript stuff ... 
     e.preventDefault(); 
    }; 

    return MyObject; 

}(jQuery); 

目前在我的茉莉花規範我已經得到的東西來窺探我希望傳遞給函數被調用(但因爲它是所謂的隨e - 不是沒有args-我斷言失敗)

it ("live click handler added to the dom element", function(){ 
     var doSpy = spyOn(sut, 'doStuff'); 
     sut.createSomething(); 
     $("#some_dom_element").trigger('click'); 
     expect(doSpy).toHaveBeenCalledWith(); 
    }); 

我怎樣才能糾正這種「toHaveBeenCalledWith」如我所料工作?


UPDATE

我無法接受的答案工作,因爲是但我可以改變它只是一點點,下面是我100%的工作例如

it ("should prevent default on click", function(){ 
     var event = { 
      type: 'click', 
      preventDefault: function() {} 
     }; 
     var preventDefaultSpy = spyOn(event, 'preventDefault'); 
     sut.createSomething(); 
     $("#some_dom_element").trigger(event); 
     expect(preventDefaultSpy).toHaveBeenCalledWith(); 
    }); 

回答

13

您必須觸發自己的事件,爲stopPropagation方法傳遞間諜,導致您想測試事件是否已停止。

var event = { 
    type: 'click', 
    stopPropagation: function(){} 
} 
var spy = spyOn(event, 'stopPropagation'); 
$('#some_dom_element').trigger(event); 
expect(spy).toHaveBeenCalled(); 

注:有代碼味道,當你窺視你想測試的對象,因爲你開始測試類的內部行爲。把你的功能想象成一個黑盒子,只測試你放入和放出的東西。在你的情況下,重命名函數將破壞測試,而代碼仍然有效。