对于这个问题,这是一个后续问题:在AngularJS单元测试中模拟$ modal
引用的SO是一个非常有用的答案的优秀问题.之后我留下的问题是:我如何对模态实例控制器进行单元测试?在引用的SO中,测试调用控制器,但模拟了模态实例控制器.可以说后者也应该进行测试,但事实证明这非常棘手.原因如下:
我将在这里复制引用的SO中的相同示例:
.controller('ModalInstanceCtrl', function($scope, $modalInstance, items){
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
Run Code Online (Sandbox Code Playgroud)
所以我的第一个想法是,我只是直接在测试中实例化控制器,就像测试中的任何其他控制器一样:
beforeEach(inject(function($rootScope) {
scope = $rootScope.$new();
ctrl = $controller('ModalInstanceCtrl', {$scope: scope});
});
Run Code Online (Sandbox Code Playgroud)
这不起作用,因为在这种情况下,angular没有提供者来注入$ modalInstance,因为它是由UI模式提供的.
接下来,我转向计划B:使用$ modal.open来实例化控制器.这将按预期运行:
beforeEach(inject(function($rootScope, $modal) {
scope = $rootScope.$new();
modalInstance = $modal.open({
template: '<html></html>',
controller: 'ModalInstanceCtrl',
scope: scope
});
});
Run Code Online (Sandbox Code Playgroud)
(注意,模板不能是空字符串,否则会以密码方式失败.)
现在的问题是我无法看到范围,这是单元测试资源收集的习惯方式等.在我的实际代码中,控制器调用资源服务来填充选择列表; 我尝试测试这个设置expectGet以满足我的控制器正在使用的服务,我想验证控制器是否将结果放在其范围内.但模式是为模态实例控制器创建一个新的范围(使用我作为原型传入的范围),我无法弄清楚如何获得该范围的漏洞.modalInstance对象没有进入控制器的窗口.
有关"正确"测试方法的任何建议吗?
(注意:为模态实例控制器创建衍生作用域的行为并不是意料之外的 - 它是记录在案的行为.无论如何,我对如何测试它的问题仍然有效.)
我有一个控制器使用angular-ui/bootstrap中的Dialog:
function ClientFeatureController($dialog, $scope, ClientFeature, Country, FeatureService) {
//Get list of client features for selected client (that is set in ClientController)
$scope.clientFeatures = ClientFeature.query({clientId: $scope.selected.client.id}, function () {
console.log('getting clientfeatures for clientid: ' + $scope.selected.client.id);
console.log($scope.clientFeatures);
});
//Selected ClientFeature
$scope.selectedClientFeature = {};
/**
* Edit selected clientFeature.
* @param clientFeature
*/
$scope.editClientFeature = function (clientFeature) {
//set selectedClientFeature for data binding
$scope.selectedClientFeature = clientFeature;
var dialogOpts = {
templateUrl: 'partials/clients/dialogs/clientfeature-edit.html',
controller: 'EditClientFeatureController',
resolve: {selectedClientFeature: function () {
return clientFeature;
} …Run Code Online (Sandbox Code Playgroud)