javascript 如何使用 jasmine 通过点击事件来断言间谍被调用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11529158/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to assert a spy is invoked with event on click using jasmine?
提问by Toran Billups
I'm writing a simple click handler and need the event passed in (like so)
我正在编写一个简单的点击处理程序，需要传入的事件（像这样）
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);
Currently in my jasmine spec I've got something to spy on the function I expect gets invoked (but since it's called with e -not without args- my assertion is failing)
目前在我的 jasmine 规范中，我有一些东西可以监视我期望被调用的函数（但因为它是用 e -not without 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();
});
How can I correct this "toHaveBeenCalledWith" to work as I expect?
我怎样才能更正这个“toHaveBeenCalledWith”来按我的预期工作？
UPDATE
更新
I couldn't get the accepted answer to work as is but I was able to alter it just a little and the below is my 100% working example
我无法按原样得到公认的答案，但我能够稍微改变它，下面是我的 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();
});
回答by Andreas K?berle
You have to trigger your own event passing a spy for the stopPropagationmethod, cause you wanna test if the event was stopped.
您必须触发自己的事件，为该stopPropagation方法传递一个间谍，因为您想测试该事件是否已停止。
var event = {
type: 'click',
stopPropagation: function(){}
}
var spy = spyOn(event, 'stopPropagation');
$('#some_dom_element').trigger(event);
expect(spy).toHaveBeenCalled();
Note: there is code smell when you spy on the object you want to test, because you start to test the inner behavior of your class. Think about your function as a black box and test only the things you put in and get out. In your case, renaming the function in will break the test, while the code is still valid.
注意：当您窥探要测试的对象时，会有代码异味，因为您开始测试类的内部行为。把你的功能想象成一个黑匣子，只测试你放入和取出的东西。在您的情况下，重命名函数将破坏测试，而代码仍然有效。
回答by Katja
If you can't use jQuery you may use dispatchEventand check its return value (based on this answer).
如果您不能使用 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();
