测试AngularUI引导模式实例控制器 [英] Testing AngularUI Bootstrap modal instance controller

查看:145
本文介绍了测试AngularUI引导模式实例控制器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是一个有点的后续问题这一个: AngularJS UI引导嘲讽$模态在单元测试

This is a somewhat of a follow-on question to this one: AngularJS UI Bootstrap mocking $modal in unit test

引用的SO是非常有用的答案一个非常好的问题。我留下后然而,这问题是这样的:我怎么单元测试模式的情况下控制?在SO引用,调用控制器测试,但模态实例控制器嘲笑。可以说是后者也应测试,但是这已经被证明是非常棘手的。这里的原因:

The referenced SO is an excellent question with very useful answer. The question I am left with after this however is this: how do I unit test the modal instance controller? In the referenced SO, the invoking controller is tested, but the modal instance controller is mocked. Arguably the latter should also be tested, but this has proven to be very tricky. Here's why:

我会复制同样的例子来自引用所以在这里:

I'll copy the same example from the referenced SO here:

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

所以,我首先想到的是,我只想直接实例化控制器的测试,就像在测试其他任何的控制器:

So my first thought was that I would just instantiate the controller directly in a test, just like any other controller under test:

beforeEach(inject(function($rootScope) {
  scope = $rootScope.$new();
  ctrl = $controller('ModalInstanceCtrl', {$scope: scope});
});

这并不在此背景下,因为工作,角不具有提供商注入$ modalInstance,因为这是由用户界面模态提供。

This does not work because in this context, angular does not have a provider to inject $modalInstance, since that is supplied by the UI modal.

接下来,我想谈谈B计划:使用$ modal.open来实例化控制器。这将运行按预期:

Next, I turn to plan B: use $modal.open to instantiate the controller. This will run as expected:

beforeEach(inject(function($rootScope, $modal) {
  scope = $rootScope.$new();
  modalInstance = $modal.open({
    template: '<html></html>',
    controller: 'ModalInstanceCtrl',
    scope: scope
  });
});

(注意,模板不能为空字符串,否则它将含糊失败。)

(Note, template can't be an empty string or it will fail cryptically.)

现在的问题是,我不可见性的范围,这是习惯的方式进行单元测试资源采集等。在我真正的code,控制器调用资源服务来填充选项列表;我试图测试这个设置一个expectGet满足我的控制器使用的服务,我想验证控制器把结果在其范围内。但模式是创建的新的的范围为模态例如控制器(使用我通过在为原型的范围),我想不通我怎么能得到范围的孔。该modalInstance对象没有一个窗口到控制器。

The problem now is that I have no visibility into the scope, which is the customary way to unit test resource gathering, etc. In my real code, the controller calls a resource service to populate a list of choices; my attempt to test this sets an expectGet to satisfy the service my controller is using, and I want to validate that the controller is putting the result in its scope. But the modal is creating a new scope for the modal instance controller (using the scope I pass in as a prototype), and I can't figure out how I can get a hole of that scope. The modalInstance object does not have a window into the controller.

在正确的方式有什么建议来测试这个?

Any suggestions on the "right" way to test this?

(N.B:创建模态例如控制器衍生范围的行为并不意外 - 它是记录的行为我如何测试它的问题仍然是有效的,无论)

(N.B.: the behavior of creating a derivative scope for the modal instance controller is not unexpected – it is documented behavior. My question of how to test it is still valid regardless.)

推荐答案

我测试通过直接实例化控制器(您最初以为做上述同样的方式)的模态对话框中使用的控制器。

I test the controllers used in modal dialogs by instantiating the controller directly (the same way you initially thought to do it above).

由于还有的 $ modalInstance 没有嘲笑的版本,我只需创建一个模拟对象,并传递到控制器。

Since there there's no mocked version of $modalInstance, I simply create a mock object and pass that into the controller.

var modalInstance = { close: function() {}, dismiss: function() {} };
var items = []; // whatever...

beforeEach(inject(function($rootScope) {
  scope = $rootScope.$new();
  ctrl = $controller('ModalInstanceCtrl', {
      $scope: scope, 
      $modalInstance: modalInstance, 
      items: items
  });
}));

现在控制器的依赖性得到满足,你可以测试该控制器像任何其他控制器。

Now the dependencies for the controller are satisfied and you can test this controller like any other controller.

例如,我可以做 spyOn(modalInstance,'关闭'),然后断言我的控制器在适当的时候关闭对话框。

For example, I can do spyOn(modalInstance, 'close') and then assert that my controller is closing the dialog at the appropriate time.

这篇关于测试AngularUI引导模式实例控制器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆