spyOn 侦听器监视功能不起作用答案

【问题标题】：spyOn listener watch function not workingspyOn 侦听器监视功能不起作用
【发布时间】：2015-08-27 16:01:16
【问题描述】：

当我尝试监视 $scope.$watch 的侦听器函数时，就像从不调用 spyOn

我的控制器

angular.module('angularApp')
    .controller('MainCtrl', function ($scope) {
        $scope.name = '';

        this.changeName = function () {
            console.log('the name has change to ' + $scope.name);
        };

        $scope.$watch('name', this.changeName);
    });

我的测试

describe('Controller: MainCtrl', function () {

    // load the controller's module
    beforeEach(module('angularApp'));

    var MainCtrl,
        scope;

    // Initialize the controller and a mock scope
    beforeEach(inject(function ($controller, $rootScope) {
        scope = $rootScope.$new();
        MainCtrl = $controller('MainCtrl', {
            $scope: scope
        });
    }));

    it('should check if watcher was triggered', function () {
        // Spy the listener funtion
        spyOn(MainCtrl, 'changeName');

        // Change the watched property
        scope.name = 'facu';

        // Digest to trigger the watcher.
        scope.$digest();

        // Expect the function to have been called
        expect(MainCtrl.changeName).toHaveBeenCalled();
    });
});

问题在于，测试执行它并打印控制台日志，而不是监视函数。

我正在使用角度 1.4

【问题讨论】：

检查js fiddle，实例化控制器时手表的监听函数没有运行。

标签： javascript angularjs jasmine karma-jasmine angularjs-watch

【解决方案1】：

这是预期行为，它与 jasmine 或 angular 无关，而是与属性持有的函数引用有关。当您在控制器实例化上执行$scope.$watch('name', this.changeName) 时，this.changeName（当时）持有的函数引用被设置为被监视。即使你窥探控制器实例上的函数（稍后），控制器实例的属性changeName 持有的函数引用也只会改变（到创建的包装函数由 jasmine 跟踪调用）但不是观察者，因为它仍然使用原始函数引用。因此，当 watch 执行时，它只会运行实际的函数引用，而不是稍后在 changeName 属性上设置的 spy func 引用。

如果您在控制器中执行此操作：

   var vm = this;
   $scope.$watch('name', function(){
       vm.changeName();
   });

你会看到你的测试通过了。

【讨论】：