我如何监视 ngModel？

Question

问题

我正在对一个指令进行单元测试，它没有控制器或模板，只有一个 link 函数。该指令需要ngModel 并在link 函数中调用其函数之一。我想在我的单元测试中监视ngModel，以确保调用了正确的函数。

代码

指令：

angular.module('some-module').directive('someDirective', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, controller) {
      controller.doSomething();  //Calls some random function on the ngModel controller
    }
  };
});

我的尝试

我尝试像这样注入一个间谍ngModel：

beforeEach(module(function($provide) {
  $provide.factory('ngModelDirective', function() {
    return {};
  });
  $provide.factory('ngModelController', function() {
    return function() {};
  });
}));

正如我在 this question 上发现的那样，尝试覆盖内置属性会引发错误，这是一种不好的做法。

然后我尝试按照Angular docs 所说的方式测试指令：

var $scope = $rootScope.$new();
var element = $compile('<div some-directive></div>')($scope);

然后像这样监视NgModelController：

var ngModelControllerSpyDoSomething = sinon.spy(element.controller('ngModel'), 'doSomething');

但这不起作用，因为一个$compile 正在运行，它执行link 函数，所以我不会监视它，直到为时已晚（间谍回来了，因为从未被调用过） .如果我在创建间谍之前或之后放置$scope.$digest();，情况也是如此。

Answer 1

您必须将您的间谍添加到您要注入到$compile-Function 的$scope 中，然后将其链接到实际指令s HTMLngModel` 中，所以：

var $scope = $rootScope.$new();
$scope.mySpy = // create a stub function with sinon here
var element = $compile('<div some-directive ng-model="mySpy"></div>')($scope);