사용자 정의 유효성 검사 angularjs 지시문을 테스트하려면

사용자 정의 유효성 검사 angularjs 지시문을 테스트하려면

이 커스텀 검증 지시는 공식 각도 사이트에서 제시된 예시입니다.http://docs.angularjs.org/guide/forms 텍스트 입력이 숫자 형식인지 여부를 확인합니다.

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

이 코드를 테스트하기 위해 다음과 같이 썼습니다.

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.

무슨 일이 일어나고 있는지 보려고 여기저기 인쇄물을 붙여놨는데 지시문이 전혀 불리지 않는 것 같아요.이와 같은 간단한 지시사항을 테스트하는 적절한 방법은 무엇입니까?

다른 답변의 테스트는 다음과 같이 작성해야 합니다.

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()now는 다음에 호출됩니다.$setViewValue이렇게 하면 폼이 "더러운" 상태로 설정됩니다.그렇지 않으면 폼은 "프린스티나" 상태로 남습니다.이것은 아마 당신이 원하는 것이 아닐 것입니다.

angular-app code https://github.com/angular-app/angular-app을 읽고 알게 되었습니다.이 비디오도 도움이 됩니다.http://youtu.be/ZhfUv0spHCY?t=31m17s

내가 저지른 두 가지 실수:

• ng-model 실행 시 스코프에 직접 바인딩하지 않음
• 양식 컨트롤러를 사용하여 지시문에 전달할 내용을 직접 조작합니다.

업데이트 버전입니다.지시문은 동일하지만 제가 변경한 테스트만 해당됩니다.

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

사용자 지정 검증의 이름 "$error" 개체에서 사용자 지정 지시 검색을 테스트합니다.예:

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

내가 널 도울 수 있길 바래!

언급URL : https://stackoverflow.com/questions/15219717/to-test-a-custom-validation-angularjs-directive