Để kiểm tra chỉ thị anglejs xác thực tùy chỉnh

Chỉ thị xác thực tùy chỉnh này là một ví dụ được trình bày tại trang web góc chính thức. http://docs.angularjs.org/guide/forms Nó kiểm tra đầu vào văn bản có ở định dạng số hay không.

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;
        }
      });
    }
  };
});

Để kiểm tra đơn vị mã này, tôi đã viết như sau:

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);
      });
    });
  });
});

Sau đó, tôi nhận được lỗi này:

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

Tôi đặt các câu lệnh in ở khắp mọi nơi để xem điều gì đang xảy ra, và có vẻ như chỉ thị không bao giờ được gọi. Cách thích hợp để kiểm tra một chỉ thị đơn giản như thế này là gì?

Các bài kiểm tra của câu trả lời khác nên được viết là:

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);
    });
  });
});

Lưu ý rằng $scope.$digest()bây giờ được gọi sau $setViewValue. Điều này đặt biểu mẫu thành trạng thái “bẩn”, nếu không nó sẽ vẫn ở trạng thái “nguyên sơ”, điều này có thể không phải là điều bạn muốn.

Tôi đã tìm ra nó bằng cách đọc mã ứng dụng góc https://github.com/angular-app/angular-app Video này cũng hữu ích http://youtu.be/ZhfUv0spHCY?t=31m17s

Hai sai lầm mà tôi đã mắc phải:

• Không ràng buộc trực tiếp với phạm vi khi bạn đang làm ng-model
• Sử dụng bộ điều khiển biểu mẫu để thao tác trực tiếp những gì cần chuyển cho các lệnh

Đây là phiên bản cập nhật. Chỉ thị vẫn vậy, chỉ có bài kiểm tra là tôi đã thay đổi.

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);
    $scope.$digest();
    form = $scope.form;
  }));

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

Tôi kiểm tra các lệnh tùy chỉnh của mình khi tìm kiếm tên của xác thực tùy chỉnh trong đối tượng "$ error". Thí dụ:

  'use strict';

describe('Directive: validadorCorreo', function () {

  // load the directive's module
  beforeEach(module('sistemaRegistroProCivilApp'));

  var inputCorreo, formulario, elementoFormulario, scope, $compile;

  beforeEach(inject(function ($rootScope, _$compile_) {
    scope = $rootScope.$new();
    $compile = _$compile_;

    elementoFormulario = angular.element('<form name="formulario">' + 
      '<input type="text" name="correo" data-ng-model="correo" required data-validador-correo/>' + 
      '</form');
    scope.correo = '';
    elementoFormulario = $compile(elementoFormulario)(scope);
    scope.$digest();
    inputCorreo = elementoFormulario.find('input');
    formulario = scope.formulario;
    console.log(formulario.correo.$error);
  }));

  it('Deberia Validar si un correo ingresado en el input es correcto e incorrecto', inject(function ($compile) {

    inputCorreo.val('eric+@eric.com').triggerHandler('input');
    expect(formulario.correo.$error.email).toBe(true); //Here, the name of the custom validation appears in the $error object.
    console.log(formulario.correo.$error);

    inputCorreo.val('eric@eric.com').triggerHandler('input');
    expect(formulario.correo.$error.email).toBeUndefined();//Here, the name of the custom validation disappears in the $error object. Is Undefined
    console.log(formulario.correo.$error.email)
  }));
});

Tôi hy vọng tôi có thể giúp bạn!