AngularJS 构造函数中的观察者在测试时未被触发

Question

我创建了一个工厂，其中 returns 一个构造函数。构造函数包括一个查看实例的属性的观察者。在测试中更改属性时，不会触发观察者。在测试之外，它被解雇了。 $rootScope.$apply 似乎没有帮助。

这是一个 jsfiddle，其中包含我的代码和测试的简化版本。

//--- CODE --------------------------
(function (angular) {
    var myApp = angular.module('myApp', []);

    myApp.factory('MyObject', function($rootScope) {
        function MyObject() {
            this.prop = 5;
            this.watcherCallback = angular.noop;

            $rootScope.$watch(this.prop, this.watcherCallback);
        }

        return MyObject;
    });
})(angular);


// ---SPECS-------------------------
describe('MyObject', function () {
    beforeEach(module('myApp'));

    var MyObject, rootScope;
    beforeEach(inject(function (_MyObject_, $rootScope) {
        MyObject = _MyObject_;
        rootScope = $rootScope;
    }));

    it('calls the watcher when "prop" updates', function() {
        var newObj = new MyObject();
        spyOn(newObj, 'watcherCallback');

        newObj.prop = 10;
        rootScope.$apply();

        expect(newObj.watcherCallback).toHaveBeenCalled();
    });
});

为什么守望者不开火？

Answer 1

var newObj = new MyObject();

这会将 noop 分配给 newObj.watcherCallback。并将 newObj.watcherCallback（因此，noop）注册为观察者回调。

spyOn(newObj, 'watcherCallback');

这用另一个函数替换了 newObj.watcherCallback，它可以让您知道何时调用这个新的间谍函数。但它没有将此间谍函数注册为对 rootScope 的观察者回调。 register是什么，原来是：noop.

因此，当您更改属性的值并调用 $apply() 时，rootScope 仍然具有对 noop 函数的引用并调用它。你的间谍不知道它。

如果你在构造函数中这样做应该可以正常工作：

var that = this;
$rootScope.$watch(this.prop, function() {
    that.watcherCallback();
});

AngularJS 构造函数中的观察者在测试时未被触发

AngularJS watcher in constructor not fired while testing

jasmine

angularjs

angular-services

angularjs-watch