13

我正在编写一个简单的点击处理程序并且需要传入的事件（像这样）

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”以按预期工作？

更新

我无法按原样获得公认的答案，但我能够稍微改变它，以下是我的 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();
    });
4

2 回答 2

16

您必须触发自己的事件，为该stopPropagation方法传递一个间谍，因为您想测试事件是否已停止。

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

注意：当您监视要测试的对象时，会有代码气味，因为您开始测试类的内部行为。把你的功能想象成一个黑盒子，只测试你放入和取出的东西。在您的情况下，重命名函数会破坏测试，而代码仍然有效。

于 2012-07-18T19:07:27.510 回答
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();
于 2019-11-08T13:18:18.843 回答