修改 Angular 控制器单元测试的 $scope 值答案

【问题标题】：Modifying $scope Values for Angular Controller Unit Testing修改 Angular 控制器单元测试的 $scope 值
【发布时间】：2014-05-17 13:06:33
【问题描述】：

全部，

我有一个 AngularJS 控制器的单元测试套件，它遵循beforeEach() 模式：

var ResourcesCtrl,
    scope, rootScope, loc, ctrl;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $location) {
    scope = {};
    rootScope = {};
    loc = $location;
    ctrl = $controller;
    scope.instanceName = 'TestInstance';


    ResourcesCtrl = $controller('ResourcesCtrl', {
      $scope: scope,
      $rootScope: rootScope,
      $location: loc
    });
  }));

然后是一堆 it() 带有断言的块/期望所有都按预期工作。

现在我需要做的是，在我添加的一个测试用例中，更改scope.instanceName 的值；但是，似乎即使我在it() 测试用例中更改了它的值，也没有反映在控制器的范围内。我已经尝试在测试用例中使用新范围实例化控制器，但这也没有奏效。

所以我的问题如下：如何更改/覆盖在beforeEach() 设置中传递给控制器的变量？

【问题讨论】：

标签： angularjs unit-testing karma-runner

【解决方案1】：

这里的问题是对 $controller 的调用发生在 beforeEach 中，使用当时可用的任何范围变量。您希望能够在调用控制器之前更改scope 变量。一种选择是使用在每个规范中调用的init 函数，以便您可以准确控制何时调用控制器：

beforeEach(inject(function ($controller, $location) {
  scope = {};
  rootScope = {};
  loc = $location;
  ctrl = $controller;
  scope.instanceName = 'TestInstance';

  this.init = function() {
    ResourcesCtrl = $controller('ResourcesCtrl', {
      $scope: scope,
      $rootScope: rootScope,
      $location: loc
    });
  }
}));

...

it("should do something", function() {
  scope.instanceName = "NewName";
  this.init();
  ...
});

注意，这意味着this.init 必须在文件中的每个规范中调用。

【讨论】：

我想避免在每个规范中调用东西，但是，似乎可以解决问题。谢谢。
在每个规范中都使用init 函数的另一种方法是使用describe 将it 块组合在一起。
如果在控制器内部设置值并且想要将其覆盖为新值，这是否有效？我尝试像您的示例中那样覆盖该值，但是当控制器初始化时，它会将其更改回原始值。
@AronYsidoro 在这种情况下，您必须在控制器运行后修改范围。如果您正在测试控制器添加到范围的方法，那么应该可以正常工作。运行控制器，更改值，运行方法，检查返回值。如果您正在测试控制器的其他方面，它可能会变得很棘手，具体取决于您在做什么。

【解决方案2】：

在你的 beforeEach 中将 $rootScope 添加到参数列表并像这样分配以下变量

scope = $rootScope.$new();
rootScope = $rootScope;

因为它们来自 angular 的 $rootScope，如果需要，您可以调用 $apply()。

【讨论】：