我正在编写一个简单的点击处理程序,需要传入(像这样)的事件
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调用的,而不是没有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();
});
如何更正此"toHaveBeenColledWith"以按预期工作?
更新
我无法得到公认的答案,但我可以稍微修改一下,下面是我的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();
});
您必须触发自己的事件,为stopPropagation
方法传递间谍,因为您想测试事件是否已停止。
var event = {
type: 'click',
stopPropagation: function(){}
}
var spy = spyOn(event, 'stopPropagation');
$('#some_dom_element').trigger(event);
expect(spy).toHaveBeenCalled();
注意:当您监视要测试的对象时,会有代码气味,因为您开始测试类的内部行为。把你的功能想象成一个黑盒子,只测试你放入和取出的东西。在您的情况下,在中重命名函数将破坏测试,而代码仍然有效。
如果不能使用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();