此自定义验证指令是官方角度站点上提供的示例 . 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.
我把print语句放在任何地方,看看发生了什么,看起来永远不会调用该指令 . 测试像这样的简单指令的正确方法是什么?
3 回答
其他答案的测试应写成:
请注意,
$scope.$digest()
现在在$setViewValue
之后调用 . 这将表单设置为“脏”状态,否则它将保持“原始”状态,这可能不是您想要的 .我通过读取角度应用程序代码https://github.com/angular-app/angular-app想出来了这个视频也有帮助http://youtu.be/ZhfUv0spHCY?t=31m17s
我犯的两个错误:
在进行ng-model时,不要直接绑定到作用域
使用表单控制器直接操作指令传递的内容
这是更新版本 . 该指令是相同的,只是我改变的测试 .
我测试我的自定义指令在对象“$ error”中搜索自定义验证的名称 . 例:
我希望我能帮助你!