个人中心
gpt4 book ai didi

javascript - 测试 AngularUI Bootstrap 模式实例 Controller

转载 作者：行者123 更新时间：2023-12-02 23:58:23 25 4
gpt4 key购买 nike

这是这个问题的后续问题:Mocking $modal in AngularJS unit tests

所引用的SO是一个很好的问题，有着非常有用的答案。然而，在此之后我剩下的问题是:如何对模态实例 Controller 进行单元测试？在引用的 SO 中，测试了调用 Controller ，但模拟了模态实例 Controller 。按理说后者也应该进行测试，但事实证明这非常棘手。原因如下:

我将从此处引用的 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');
  };
});

所以我的第一个想法是我会在测试中直接实例化 Controller ，就像测试中的任何其他 Controller 一样:

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

这不起作用，因为在这种情况下，Angular 没有提供程序来注入(inject) $modalInstance，因为它是由 UI 模式提供的。

接下来，我转向 B 计划:使用 $modal.open 实例化 Controller 。这将按预期运行:

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

(注意，模板不能是空字符串，否则会神秘地失败。)

现在的问题是我无法了解范围，这是单元测试资源收集等的惯用方法。在我的真实代码中， Controller 调用资源服务来填充选择列表；我尝试测试此设置一个expectGet以满足我的 Controller 正在使用的服务，并且我想验证 Controller 是否将结果放入其范围内。但是模态正在为模态实例 Controller 创建一个新的范围(使用我作为原型(prototype)传入的范围)，并且我不知道如何获得该范围的漏洞。 modalInstance 对象没有进入 Controller 的窗口。

关于测试这个的“正确”方法有什么建议吗？

(注意:为模态实例 Controller 创建派生范围的行为并不意外 - 这是记录的行为。无论如何，我关于如何测试它的问题仍然有效。)

最佳答案

我通过直接实例化 Controller 来测试模式对话框中使用的 Controller (与您最初在上面想到的方式相同)。

由于没有 $modalInstance 的模拟版本，我只需创建一个模拟对象并将其传递到 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
  });
}));

现在 Controller 的依赖关系已满足，您可以像测试任何其他 Controller 一样测试此 Controller 。

例如，我可以执行 spyOn(modalInstance, 'close')，然后断言我的 Controller 正在适当的时间关闭对话框。

关于javascript - 测试 AngularUI Bootstrap 模式实例 Controller ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24373220/

25 4 0
文章推荐： wordpress - 无法在 WordPress 中安装插件
文章推荐： apache-kafka - Kafka 服务器配置 - 监听器与广告监听器
文章推荐： ruby-on-rails - 使用rails elastic beanstalk配置rsyslog
文章推荐： angularjs - 如何在onsenui中使用多个html文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com