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

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。失败的测试是试图监视构造函数中的函数的测试。

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

任何帮助将不胜感激。谢谢

Answer 1

您将无法执行该测试，原因如下：

您的 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();
});

希望这对您有所帮助。

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 间谍不适用于构造函数中定义的函数

Jasmine spy doesn't work on a function defined in a constructor

events

constructor

spy

jasmine