Để kiểm tra hướng dẫn xác thực angularjs tùy chỉnh

Question

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 Kiểm tra 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; 
     } 
     }); 
    } 
    }; 
}); 

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

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âu in ở khắp mọi nơi để xem những 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ì?

Answer 1

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

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() nay được gọi sau khi $setViewValue. Điều này đặt mẫu thành trạng thái "bẩn", nếu không nó sẽ vẫn "nguyên sơ", mà có lẽ không phải là những gì bạn muốn.

Answer 2

I figured it out bằng cách đọc mã góc ứng dụng https://github.com/angular-app/angular-app Video này cũng giúp quá http://youtu.be/ZhfUv0spHCY?t=31m17s

Hai sai lầm mà tôi đã thực hiện:

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

Đây là phiên bản cập nhật. Chỉ thị là như nhau, chỉ là thử nghiệm mà 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); 
    }); 
    }); 
}); 

Answer 3

Tôi kiểm tra chỉ thị tùy chỉnh của mình đang tìm kiếm trong đối tượng "$ error" tên của xác thực tùy chỉnh. Ví 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!