Jasmine spy не работает над функцией, определенной в конструкторе

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

Несмотря на то, жасмин счастлив, что 'internalClickHandler существует и создает шпиона, он никогда не будет вызван. Фактически исходная функция (internalClickHandler) получает вызов вместо этого.

Я создал examples in codepen.io, которые показывают проблему. Пробный тест - это попытка попытаться найти функцию в конструкторе.

Мой обработчик событий должен находиться в конструкторе, так как ему нужен доступ к экземпляру объекта, и я хочу проверить, что правильный обработчик был уволен не только, что был вызван событие клика.

Любая помощь будет приниматься в значительной степени. Благодаря

Answer 1

Я решил это, используя в качестве обработчика анонимную функцию, обернутую ссылкой на 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 
}); 

Answer 2

Вы не сможете выполнить этот тест из-за следующих причин:

1. Ваш clickHandler фактически получает переназначен на другой переменной на DOM Element OnClick см эта линия document.getElementById('testLink').addEventListener('click', _this.internalClickHandler);
2. Когда вызывается триггер щелчка, он фактически выполняет функцию onClick и NOT internalClickHandler, хотя они действительны (код мудрый) то же самое, но на них ссылаются две разные переменные i.e onClick & internalClickHandler.

3. Вам лучше попробовать что-то подобное.

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

Надеется, что это помогает.