在 $attr 上测试 $watch 的角度单元答案

【问题标题】：angular unit testing a $watch on an $attr在 $attr 上测试 $watch 的角度单元
【发布时间】：2016-04-14 19:20:48
【问题描述】：

据我了解，$attr.$observe 会触发一次。所以有时在属性上使用 $watch。我希望对需要 ngModel

的指令进行单元测试

scope.$watch(attr.ngModel, function (newValue) {
            minlength = parseInt(attr.minLength);
            scope.minLengthValidator(newValue);
        });

由于这是在 Link 函数中使用范围，所以我似乎可以调用 $digest。

我的模拟属性是这样开始的......

html = angular.element("<input ng-model=\"myUnit\" min-length=\"3\">");

我不确定是否可以在我的规范中重新定义 element.attr('min-length') 并运行 $digest 或者是否有更复杂的方法，因为手表正在传递一个新值。

我的模拟设置的其余部分是这样的

 $rootScope = $rootScope.$new();
 element = $compile(html)($rootScope);
 $rootScope.$digest(element);

 controller = element.controller('ngModel');
 scope = element.scope();

我之前没有在属性上测试过 $watch，所以任何指向我解决这个问题的方向都会非常感激。

【问题讨论】：

标签： javascript angularjs unit-testing

【解决方案1】：

scope.$watch(attr.ngModel, ...) 将在myUnit 范围属性上创建一个观察者。一旦创建了观察者，它就不会绑定到ngModel 属性值。

它可以像任何其他范围观察者一样进行测试：

scope.myUnit = ...;
$rootScope.$digest();
expect(scope.minLengthValidator).toHaveBeenCalledWith(...);

据我了解，$attr.$observe 会触发一次。

不，$attrs.$observe 观察者会在每次属性更改时触发，最好是 $scope.$watch。正如the manual 所说，

使用$observe观察包含属性的值变化插值（例如 src="{{bar}}"）。这不仅非常有效但这也是轻松获得实际价值的唯一方法，因为在链接阶段，尚未评估插值所以此时该值设置为未定义。

问题是属性属于 DOM，不能干净地测试。对于控制器规范 $attrs 可以模拟本地依赖项，但在指令规范中是不可能的。出于可测试性的原因，最好将属性绑定到范围属性并仅在不涉及 $attrs 的情况下测试范围。

【讨论】：