如何在模块化 angularjs 范围内测试指令？

Question

我正在尝试测试在根模块的另一个子模块的子模块中定义的指令。我无法访问指令控制器中定义的范围变量。问题似乎在于从测试内部访问范围。

主模块名为oppia，它有一个名为stateEditorModule的子模块，这个子模块还有一个名为stateContentEditorModule的子模块。我尝试注入 $scope 而不是 $rootScope 但它似乎不起作用。

这是测试代码：

  beforeEach(function() {
    module('oppia');
    module('stateEditorModule');
    module('stateContentEditorModule');
  });

    outerScope = $rootScope.$new();
    var elem = angular.element(
      '<state-content-editor>' +
      '</state-content-editor>');
    var compiledElem = $compile(elem)(outerScope);
    outerScope.$digest();
    ctrlScope = compiledElem[0].getControllerScope();
  }));

  fit('should start with the content editor not being open', function() {
    expect(ctrlScope.contentEditorIsOpen).toBe(false);
  });

contentEditorIsOpen 变量在指令的范围内定义。

contentEditorIsOpen 在代码的当前状态下是不可访问的。

我在这个问题上坚持了很长时间，如果有人可以提供解决方案或指出有关如何测试多模块 AngularJS 应用程序的文档，我将不胜感激。

Answer 1

通常您不会测试指令本身。相反，您将测试该指令的控制器。

这意味着您需要在 DI 中注册控制器。然后，您可以直接通过 DI 获取该指令的控制器（无需创建和编译指令），为该控制器提供初始范围，调用函数，并在该范围内断言一些 var 为特定值。

文档中的示例： https://docs.angularjs.org/guide/unit-testing#testing-a-controller

如果您使用的是组件而不是指令，请查看以下内容： https://docs.angularjs.org/guide/component#unit-testing-component-controllers

更新：

我使用指令的 controllerAs 属性为控制器命名为 stateContentEditorController

controllerAs 仅在模板范围内为该控制器创建别名，但不会在 DI（依赖注入）模块中注册它，因此您无法从 DI 系统中检索它。

我的建议是分别编写指令和控制器，并使用angular.module('moduleName').controller('controllerName', [...]) 注册控制器。然后在你的指令定义对象中写{controller: 'controllerName', ...}。这样您就可以在测试中检索控制器。