测试自定义验证 angularjs 指令 [英] To test a custom validation angularjs directive

问题描述

此自定义验证指令是官方 angular 站点上提供的示例.http://docs.angularjs.org/guide/forms它检查文本输入是否为数字格式.

This custom validation directive is an example presented at the official angular site. http://docs.angularjs.org/guide/forms It checks a text input is in number format or not.

var INTEGER_REGEXP = /^\-?\d*$/;
app.directive('integer', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        if (INTEGER_REGEXP.test(viewValue)) {
          // it is valid
          ctrl.$setValidity('integer', true);
          return viewValue;
        } else {
          // it is invalid, return undefined (no model update)
          ctrl.$setValidity('integer', false);
          return undefined;
        }
      });
    }
  };
});

为了对这段代码进行单元测试，我写了这个:

To unit test this code, I wrote this:

describe('directives', function() {
  beforeEach(module('exampleDirective'));

  describe('integer', function() {
    it('should validate an integer', function() {
      inject(function($compile, $rootScope) {
        var element = angular.element(
          '<form name="form">' +
            '<input ng-model="someNum" name="someNum" integer>' +
          '</form>'
          );
        $compile(element)($rootScope);
        $rootScope.$digest();
        element.find('input').val(5);
        expect($rootScope.someNum).toEqual(5);
      });
    });
  });
});

然后我得到这个错误:

Expected undefined to equal 5.
Error: Expected undefined to equal 5.

我在各处放置了打印语句以查看发生了什么，看起来该指令从未被调用过.测试这样的简单指令的正确方法是什么?

I put print statements everywhere to see what is going on, and it looks like the directive is never called. What is a proper way to test a simple directive like this?

推荐答案

其他答案的测试应该写成:

The other answer's tests should be written as:

describe('directives', function() {
  var $scope, form;
  beforeEach(module('exampleDirective'));
  beforeEach(inject(function($compile, $rootScope) {
    $scope = $rootScope;
    var element = angular.element(
      '<form name="form">' +
      '<input ng-model="model.somenum" name="somenum" integer />' +
      '</form>'
    );
    $scope.model = { somenum: null }
    $compile(element)($scope);
    form = $scope.form;
  }));

  describe('integer', function() {
    it('should pass with integer', function() {
      form.somenum.$setViewValue('3');
      $scope.$digest();
      expect($scope.model.somenum).toEqual('3');
      expect(form.somenum.$valid).toBe(true);
    });
    it('should not pass with string', function() {
      form.somenum.$setViewValue('a');
      $scope.$digest();
      expect($scope.model.somenum).toBeUndefined();
      expect(form.somenum.$valid).toBe(false);
    });
  });
});

注意 $scope.$digest() 现在在 $setViewValue 之后调用.这会将表单设置为脏"状态，否则它将保持原始"状态，这可能不是您想要的.

Note that $scope.$digest() now is invoked after $setViewValue. This sets the form into "dirty" state, otherwise it would remain "pristine", which probably is not what you want.

这篇关于测试自定义验证 angularjs 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！