我正在尝试为将值与其他输入字段匹配的指令编写单元测试。问题是如果我在应用指令的元素之前定义要匹配的元素,它可以正常工作,否则会失败。
当模板是时它工作正常
tpl = '<input name="verifyNewPassword" ng-model="verifyNewPassword" type="password"/>';
tpl += '<input name="newPassword" ng-model="newPassword" type="password" equals-to="userForm.verifyNewPassword"/>';
当模板为
tpl = '<input name="newPassword" ng-model="newPassword" type="password" equals-to="userForm.verifyNewPassword"/>';
tpl+='<input name="verifyNewPassword" ng-model="verifyNewPassword" type="password"/>';
这是我的指令
.directive('equalsTo', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
var sc = scope;
scope.$watch(attrs.ngModel, function() {
var eqCtrl = scope.$eval(attrs.equalsTo);
console.log('Value1: ' + ctrl.$viewValue + ', Value2: ' + eqCtrl.$viewValue);
if (ctrl.$viewValue===eqCtrl.$viewValue || (!!!ctrl.$viewValue && !!!eqCtrl.$viewValue)) {
ctrl.$setValidity('equalsTo', true);
eqCtrl.$setValidity('equalsTo', true);
} else {
ctrl.$setValidity('equalsTo', false);
eqCtrl.$setValidity('equalsTo', false);
}
});
}
};
})
这是我的测试代码:
describe('Unit: Testing Directives', function() {
var elm, scope;
beforeEach(function() {
module('mctApp');
inject(function($rootScope, $compile) {
scope = $rootScope.$new();
});
});
function compileDirective(tpl) {
if(!tpl) {
tpl = '<input name="newPassword" ng-model="newPassword" type="password" equals-to="userForm.verifyNewPassword"/>';
tpl += '<input name="verifyNewPassword" ng-model="verifyNewPassword" type="password"/>';
}
tpl = '<form name="userForm">' + tpl + '</form>';
inject(function($compile) {
var form = $compile(tpl)(scope);
});
scope.$digest();
}
it('must be valid form as both values are equal', function() {
scope.newPassword = 'abcdef';
scope.verifyNewPassword = 'abcdef';
compileDirective();
expect(scope.userForm.$valid).toBeTruthy();
});
});
最佳答案
测试失败,因为当 watch
最初触发时,$viewValue
的equals-to
ngModelController 为 NaN,因此字段有效性设置为 false 并且表单无效。
http://plnkr.co/edit/OZVmogR6GT2pIKUrHpuX?p=preview
当您在观察范围内输入的对象时 ngModel
分配给 - 已经设置为“abcdef” - watch 只被调用一次。如果您观看 ngModel.$viewValue
与您比较的输入相反,它保证初始状态始终是正确的,无论 DOM 中的输入顺序如何。
我还认为,观察该值更有意义,因为它是您要比较的值。
.directive('equalsTo', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
var sc = scope;
scope.$watch(attrs.equalsTo + '.$viewValue', function() {
var eqCtrl = scope.$eval(attrs.equalsTo);
console.log('Value1: ' + ctrl.$viewValue + ', Value2: ' + eqCtrl.$viewValue);
if (ctrl.$viewValue===eqCtrl.$viewValue || (!!!ctrl.$viewValue && !!!eqCtrl.$viewValue)) {
ctrl.$setValidity('equalsTo', true);
eqCtrl.$setValidity('equalsTo', true);
} else {
ctrl.$setValidity('equalsTo', false);
eqCtrl.$setValidity('equalsTo', false);
}
});
}
};
})
http://plnkr.co/edit/OZVmogR6GT2pIKUrHpuX?p=preview
备注
如果您使用的是 angular 1.3+,那么可能值得将新的验证器管道视为解决同一问题的更优雅的方法。
关于angularjs - 如何正确应用范围以便顺序无关紧要,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27546095/