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

Posted 2021-04-14

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

主要模块名为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应用程序的文档，我将不胜感激。

答案

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

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

来自doc：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', ...}。这样您就可以在测试中检索控制器。