Question

我想窥探一个用作点击处理程序的函数。该函数在闭包的构造函数中定义。

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

尽管Jasmine很高兴'internalClickHandler'存在并创建了间谍，但它永远不会被调用。事实上，原始函数（internalClickHandler）会被调用。

我创建了显示问题的examples in codepen.io。失败的测试是试图窥探构造函数中的函数。

我的事件处理程序需要在构造函数中，因为它需要访问对象的实例，我确实想测试是否已经触发了正确的处理程序而不仅仅是触发了click事件。

任何帮助都会受到极大的欢迎。感谢

Answer 1

由于以下原因，您将无法执行该测试：

您的clickHandler实际上被重新分配给另一个变量在DOM元素onClick上，请看这一行 document.getElementById('testLink').addEventListener('click', _this.internalClickHandler);
当调用click触发器时，它实际执行该函数 onClick而非internalClickHandler，虽然它们是实际的（代码明智的）同样但它们被两个不同的变量引用即onClick＆amp; 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();
});

希望这有帮助。

Answer 2

我通过使用包含对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 
});

Jasmine间谍不适用于构造函数中定义的函数

2 个答案: