javascript - Angular 单元测试在指令中初始化 "nameless" Controller

Question

我很好奇如何对指令内的匿名 Controller 进行单元测试。

directive.js

app.directive('directive',
    function() {
        var controller = ['$scope', function($scope) {
            $scope.add = function() { ... };
        }];

        return {
            restrict: 'A',
            scope: {
                args: '='
            },
            templateUrl: '...',
            controller: controller
        };
    }
};

这样定义的 Controller 是否可以进行单元测试？我尝试用几种不同的方式初始化它。目前我有这样的设置:

describe('The directive', function() {
    var element,
        scope,
        controller;

    var args = {
        ...
    }

    beforeEach(module('app'));

    beforeEach(module('path/to/template.html'));

    beforeEach(function() {
        inject(function($compile, $rootScope, $controller) {
            scope = $rootScope.$new();
            scope.args = args;
            element = angular.element('<div directive></div>');
            template = $compile(element)(scope);
            scope.$digest();
            controller = element.$controller;       
        });
    });

    // assertions go here
});

我不断收到 TypeError: 'undefined' is not an object (evaluating ...) 错误，所以我认为我没有正确初始化 Controller 。我主要想知道这样的东西是否可以在完全不更改指令源代码的情况下进行单元测试。

Answer 1

我不确定您尝试做的事情是否可行。但是，我确实知道有一种更简单的方法，那就是让它成为一个标准 Controller 。 (您似乎已经意识到这一点，但值得指出。)

Controller 中的逻辑无论如何都不应该依赖于指令，因此通过创建命名 Controller ，您可以分离关注点，这是一件好事。 You can even see this used in recommended style guides for AngularJS.正确设置 Controller 后，测试它应该没有任何问题。像这样拆分它也有助于进行适当的依赖注入(inject)，从而使代码和测试更简单。