单元测试传递承诺的Angular指令表达式属性
Unit testing Angular directive expression attribute which passes promises
我花了很多时间试图对一个在控制器中生成/跟踪承诺的指令进行单元测试,这里可以看到一个如何完成的例子:https://plnkr.co/edit/d8wMq0qlpiE4P25q5lhB
指令:
.directive('testDirective', function() {
return {
scope: {
save: '&',
},
template: '<div><a href="#" ng-click="handleSave($event)">Click Here</a></div>',
link: function(scope, element, attr, controllers) {
scope.someData = {
saving: false
};
scope.handleSave = function() {
scope.someData.name = parseInt(Math.random() * 100);
scope.someData.saving = true;
scope.someData.error = false;
scope.someData.id = null;
return scope.save()(scope.someData)
.then(function(data) {
scope.someData = data;
})
.catch(function(err) {
scope.someData.error = true;
})
.finally(function() {
scope.someData.saving = false;
});
};
}
};
})
控制器:
.controller('TestCtrl', function($scope, $q, $timeout) {
$scope.saveCtrl = function(directiveData) {
return $q(function(resolve, reject) {
$timeout(function() {
if (Math.round(Math.random())) {
directiveData.id = parseInt(Math.random() * 100);
resolve(directiveData);
} else {
reject(new Error());
}
}, 2000)
});
}
});
模板:
<test-directive save="saveCtrl"></test-directive>
如示例中所示,它作为组件起作用,但是测试无法完成,因为.finally()从未被调用。我尝试了很多变体来强制使用$digest,但似乎没有一个能完成这个承诺。
我想我明白了。https://plnkr.co/edit/CBvrZo4g9LjJC61VV0wp
' ' '
$scope.saveCtrl = function(data) {
return $q(function(resolve, reject) {
setTimeout(function() {
if (Math.round(Math.random())) {
var id = parseInt(Math.random() * 100);
resolve(id);
} else {
reject(new Error());
}
elementScope.$apply();
$scope.$apply();
}, 100);
});
};
' ' '
在第39行有一个未定义的变量,并且角超时的行为很奇怪。这将导致使用超时来测试完整的指令流。我认为超时可能不需要,但你可以假设即时超时的情况下,没有任何测试损失。
相关文章:
- 我未保存的更改指令需要适用于具有不同名称的所有表单
- 表单级别的Anguarjs指令,访问所有字段并检查验证
- 如何使用带有隐含的角度指令对表进行排序
- 在表上使用 ng-repeat 指令
- 角度指令:使提交按钮指令侦听表单验证
- Angularjs的智能表模块-与处理它有关的问题's指令
- 当uib分页被包装在另一个指令中时,AngularJS表数据没有更新
- 无法用tr替换表中的指令
- 指令和表单验证中的 AngularJS 动态必需属性
- 带有指令不起作用的 AngularJS 动态表单字段 ID
- AngularJS在ng-click上调用自定义指令(A表单)
- 表单操作无法正常工作.它不会移动到指令链接,即<表单 action=“”>
- ng 单击“对指令中的表行不起作用”
- AngularJS对动态生成的输入指令的表单验证不适用于ngForm
- 如何从其他指令控制表单的有效性
- Angular:指令访问表单元素
- 带有自定义指令的表行
- Angular js指令在表单中未保存数据时显示浏览器后退按钮的警报
- 从指令设置表单元素的属性
- 使用指令的表单验证不起作用