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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在模块化的angularjs范围内测试指令?相关的知识,希望对你有一定的参考价值。

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

主要模块名为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', ...}。这样您就可以在测试中检索控制器。

以上是关于如何在模块化的angularjs范围内测试指令?的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS:= 和 @ 在指令范围内的区别? [复制]

AngularJS指令范围内的'@'和'='有啥区别?

为啥我应该在 AngularJS 中使用隔离范围指令?

在 AngularJS 中从没有隔离范围的指令调用控制器函数

如何在 AngularJS 指令范围中设置默认值?

AngularJS