如何斷言使用茉莉花點擊事件調用間諜？

Question

我正在編寫一個簡單的點擊處理程序並需要傳入事件（就像這樣）

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);

目前在我的 jasmine 規范中我有一些東西可以監視我期望被調用的函數（但是因為它是用 e 調用的 - 而不是沒有參數 - 我的斷言失敗了）

    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”以按我預期的方式工作？

---

更新

我無法按原樣獲得可接受的答案，但我可以稍微改變一下，下面是我的 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();
    });

Answer 1

您必須通過stopPropagation方法的間諜來觸發自己的事件，因為您想測試事件是否已停止。

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

注意：當你窺探你想要測試的對象時會有代碼味道，因為你開始測試你的類的內部行為。 把你的功能想象成一個黑盒子，只測試你放入和取出的東西。 在您的情況下，重命名中的函數將破壞測試，而代碼仍然有效。

Answer 2

如果你不能使用 jQuery，你可以使用dispatchEvent並檢查它的返回值（基於這個答案）。

const domElem = document.getElementById('some_dom_element');
const clickEvent = new MouseEvent('click', {
  view: window,
  bubbles: true,
  cancelable: true
});

const cancelled = !domElem.dispatchEvent(clickEvent);
expect(cancelled).toBeTruthy();