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

时间:2015-12-31 18:12:09

标签: javascript angularjs unit-testing

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

(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 () {
...
});

我只是坚持实施。我知道我应该使用角度模拟但是如何?我该怎么做?

提前致谢。

1 个答案:

答案 0 :(得分:3)

您可以使用$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();

  });

});