Jasmine间谍不能在构造函数中定义的函数上工作
问题描述:
我想窥探一个用作点击处理函数的函数。该函数在闭包的构造函数中定义。Jasmine间谍不能在构造函数中定义的函数上工作
var viewModel = function(){
var viewModel = function(){
var _this = this;
_this.internalClickHandler = function(){
console.log('I handled a click');
}
}
return viewModel;
}();
var testViewModel = new viewModel();
var theSpy = spyOn(testViewModel, 'internalClickHandler');
即使茉莉花高兴 'internalClickHandler' 存在并创建间谍,它永远不会被调用。实际上原来的功能(internalClickHandler)取而代之。
我创建了examples in codepen.io显示问题。失败的测试是试图窥探构造函数中的函数。
我的事件处理程序需要在构造函数中,因为它需要访问对象的实例,我确实想测试正确的处理程序已被触发,而不仅仅是触发了单击事件。
任何帮助将大受欢迎。由于
答
我通过使用包装对internalClickHandler的引用的匿名函数作为处理程序来解决此问题。这样原来的功能仍然被调用,我可以窥探它。
var viewModel = function(){
var viewModel = function(){
var _this = this;
_this.internalClickHandler = function(){
console.log('I handled a click');
}
}
return viewModel;
}();
var theViewModel = new viewModel();
var theSpy = spyOn(testViewModel, 'internalClickHandler');
$('#testLink').on('click',
function(){
theViewModel.internalClickHandler(); //<-- The anonymous function calls internalClickHandler
});
答
您将无法执行,因为以下几个原因,测试:
- 你clickHandler事件实际上被重新分配给不同的变量 上的DOM元素的onClick,看到这一行
document.getElementById('testLink').addEventListener('click', _this.internalClickHandler);
- 当点击触发被调用时,它实际上执行功能
onClick
而不是internalClickHandler
,尽管它们实际上(代码明智的) 相同,但它们被两个不同的变量引用 即onClick
&internalClickHandler
。 -
你最好试试这样的东西。
it('should spy on a event binding defined in constructor', function() { var testViewModel = new viewModel(); var tl = document.getElementById('testLink'); var theSpy = spyOn(t1, 'onclick'); //$('#testLink').trigger('click'); var event = new MouseEvent('click', { 'view': window, 'bubbles': true, 'cancelable': true }); tl.dispatchEvent(event); expect(theSpy).toHaveBeenCalled(); tearDown(); });
希望这有助于。
感谢您的回复,您的建议可以帮助我解决方案,并希望能帮助别人。你说得对,'onclick'函数被调用,而不是构造函数中的函数。但是,您的解决方案不能帮助我创建有用的测试,因为我只知道onclick已处理,但我不知道处理它的方式。 我发布了我的解决方案,它允许我窥探构造函数中的函数。 – moefinley
如果您认为这个答案有助于理解嘲弄点击/导向积极解决方案的概念,upvote会有所帮助。 –