testing一个自定义validation的angularjs指令

这个自定义validation指令是在官方网站上提供的一个例子。 http://docs.angularjs.org/guide/forms它检查一个文本input是否是数字格式。

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

为了unit testing这个代码，我写了这个：

 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. 

我把打印语句放在任何地方，看看是怎么回事，看起来这个指令从来没有被调用。 testing像这样的简单指令的正确方法是什么？

Answer 1

另一个答案的testing应该写成：

 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之后被调用。 这将forms设置为“脏”状态，否则将保持“原始”，这可能不是你想要的。

Answer 2

我通过阅读angular度的应用程序代码了https://github.com/angular-app/angular-app这个video也可以帮助http://youtu.be/ZhfUv0spHCY?t=31m17s

我犯的两个错误：

• 当你正在做ng-model时，不要直接绑定到范围
• 使用表单控制器来直接操纵要传递的指令

这是更新的版本。 指令是一样的，只有我改变了的testing。

 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

我testing自定义指令在对象“$ error”中search自定义validation的名称。 例：

  '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('[e-mail]').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('[e-mail]').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) })); }); 

我希望我能帮助你！