为需要 ng-model 的 Angular 指令编写单元测试

Question

我是单元测试的新手，并试图弄清楚如何设置它。我有以下指令：

(function () {
    'use strict';

    angular
        .module('hntb-utils')
        .directive('notZero', notZero);

    //notZero.$inject = [];

    function notZero() {
        return {
            require: 'ngModel',
            link: link,
            restrict: 'A',
            scope: '='
        };

        function link(scope, element, attributes, ngModelCtrl) {
            ngModelCtrl.$validators.notZero = function (value) {
                return value != 0;
            }
        }
    }

})();

该指令（如果作为非零属性添加到也使用 ng-model 的元素）通过向 ngModelController 添加验证器来确保模型值不为零。

我试图弄清楚如何测试这个指令。我想我可能应该有类似的东西：

it("should ensure model is not zero", function () {
...
});

我只是真的坚持实施。我知道我应该使用角度模拟，但如何？我要模拟什么？

提前致谢。

Answer 1

您可以使用$compile 服务来编译带有ngModel 指令和notZero 指令的输入元素。使用.controller() 方法获取该元素的ngModelController。然后，操作该元素的范围模型以应用多个测试用例。

这是一个demo。

describe('notZero', function() {

  var scope, 
    ngModel;

  beforeEach(module('hntb-utils'));

  beforeEach(inject(function($compile, $rootScope) {

    scope = $rootScope.$new();

    var input = $compile('<input type="number" ng-model="model" not-zero />')(scope);

    ngModel = input.controller('ngModel');

  }));

  it("should validate a non-zero number as a valid number", function () {

    scope.model = -1;
    scope.$apply();
    expect(ngModel.$error.notZero).toBeFalsy();

    scope.model = 1;
    scope.$apply();
    expect(ngModel.$error.notZero).toBeFalsy();

  });

  it("should validate a zero number as an invalid number", function() {

    scope.model = 0;
    scope.$apply();
    expect(ngModel.$error.notZero).toBeTruthy();

  });

});