3

我很难通过 angularjs 指令运行业力单元测试。这是我的设置：

var scope, ele;
    var template = '<div data-my-directive data="data" config="config"></div>';

    beforeEach(function () {
        // Load directive's module
        module('dashboard');
        module('templates-dev');

        // Load mock services/data (overriding real implementation)
        module(function($provide) {
            $provide.value("MockWidgetData", new MockWidgetData());
        });

        // Construct services/data to be available
        // inside each testing block.
        inject(function($rootScope, $compile, MockWidgetData) {
            // Create a fresh scope
            scope = $rootScope.$new();
            ele = angular.element(template);

            // Fill that scope with mock data
            scope.config = MockWidgetData.config;
            scope.data = MockWidgetData.data;

            // Compile the element and attach our scope
            $compile(ele)(scope);

            // Digest the scope to trigger a scope update
            // and attach our directive's link function
            scope.$digest();
        });
    });

我的指令将 'data' 和 'config' 对象传递给它的孩子，这恰好是其他指令。该指令本身使用 a templateUrl，这就是为什么我提供module(templates-dev): 一个html2js预编译、角度模块化$templateCache的模板的 'd 版本。这是我的指令的示例templateUrl：

<div id="container">
        <button id="my-btn" ng-click="doSomething('parameter')"></button>
        <div other-dir data="data" config="config"></div>
</div>

这是我的指令示例：

angular.module('dashboard').directive('myDirective', function() {
    return {
        restrict: 'A',
        templateUrl: 'my-dir-template.html',
        scope: { // 
            data: '=',
            config: '='
        },
        replace: true,
        link: function(scope, element, attrs) {

            scope.someFunc() = { ... },
            scope.someFunc1() = { ... },

        });

问题：

  • 在 $compile(ele)(scope) 之后，元素的 .log() 显示了整个 DOM，包括各种 angular.js 指令和其他奇怪的信息。我希望看到我的指令的测试模板与上面的 templateUrl 混合在一起。
  • 范围的 .log() 显示完整的数据和配置对象，以及它们的预期值。正如人们所期望的那样，它还显示了我的指令的链接函数中可用的函数。但是，在我的测试块中，好像范围对象被清空了......我无法访问我的指令的任何函数（它们都返回未定义）。
  • 我可以通过 捕获我的指令的 html 的一些元素ele.find("#my-btn").eq(0)，但是没有一个正常的函数起作用（.click() 等）。

我究竟做错了什么？编译过程有问题吗？我的测试结构错了吗？我应该尝试删除链接功能并用控制器替换它吗？我的范围只是没有排队，我已经失败了两天了......有点烦人。

经过仔细检查......看起来我scope.$digest()之前可以$compile(ele)(scope)，它将正确地将“数据”和“配置”对象传播到子范围。但是，我的范围随后将无法访问在我的指令链接中定义的函数。

4

1 回答 1

0

你应该scope.$digest()在之后打电话$compile(ele)(scope)。摘要是进行指令编译所必需的。您的指令具有隔离范围，这就是您无法访问它的功能的原因。要获得它们，您应该尝试以下操作：

var elScope = element.isolateScope(); 在这里你会得到你的elScope.someFunc();

检查这个单元测试指令的例子：

http://best-web-creation.com/articles/view/id/angular-js-unit-test-directive?lang=en

于 2015-07-23T11:11:13.200 回答