Question

我正在努力从指令中获取控制器以进行单元测试。这是我的角度应用程序：

angular.module('test-app', [])

    .controller('loadingCtr', ['$scope', function ($scope) {

    }])

    .directive('loading', function() {
        return {
            restrict: 'E',
            controller: 'loadingCtr'
       };
    });

这是我的单元测试代码：

describe('loading', function () {

    beforeEach(inject(function($rootScope, $compile) {

        var fooElement = $compile('<loading></loading>')($rootScope);
        var fooController = fooElement.controller('loading');

        $rootScope.$digest();
        console.log(fooController);
    })); 

    describe('loading: testing loading directive', function() {
        it('should create loading directive', function() {
        });
    });
});

这是一个混乱的问题：http://plnkr.co/edit/38cc5HQFgeHDhnC8OMo8?p=info

fooController始终返回undefined。我尝试过使用我在网上找到的以下示例，但总是得到相同的结果：

Unit testing a directive that defines a controller in AngularJS

http://daginge.com/technology/2014/03/03/testing-angular-directive-controllers-with-jasmine-and-karma/

这里有什么明显的东西我不见了吗？

Answer 1

唯一的问题我可以看到你没有在你的灯具中加载模块test-app，这意味着编译的html代码并没有真正编译指令loading，因为它在注射器。因此，请尝试在beforeEach块中加载模块。加载模块可确保在模块下注册的指令，控制器，服务等在注入器中可用，否则它只会将模块用作ng，它对loading指令一无所知。

即

describe('loading', function () {
   var fooController;

    //Load the module 
    beforeEach(module('test-app'));

    beforeEach(inject(function($rootScope, $compile) {

        var fooElement = $compile('<loading></loading>')($rootScope);
        fooController = fooElement.controller('loading');

        $rootScope.$digest();
        console.log(fooController);
    })); 

    describe('loading: testing loading directive', function() {
        it('should create loading directive', function() {
          expect(fooController).toBeDefined();
        });
    });
});

<强> Demo

另请注意，如果您使用.controller注册控制器，则可以通过$controller(ctrlName)构造直接获取控制器实例。如果您在指令中使用controllerAs语法与bindToController:true，那么您可以从范围获取它，其属性名称也与别名相同。

单元测试指令的控制器

1 个答案: