AngularJS测试，找不到我的控制器

Question

我在测试控制器时遇到问题。 我动态地加载它们（延迟加载，请稍后），所以我这样写它们：

angular.module('myApp').controllerProvider.register('DashboardCtrl', [
    '$scope', function ($scope) {
        $scope.foo = 'bar';
    }
]);

我这样初始化我的模块：

var app = angular.module('myApp', [
    'ngRoute',
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ui.router'
]);

app.run([
    '$rootScope', '$state', '$stateParams',
    function ($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    }
]);

app.config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
    app.stateProvider = $stateProvider;
    app.routeProvider = $urlRouterProvider;
    app.controllerProvider = $controllerProvider;
    app.compileProvider = $compileProvider;
    app.filterProvider = $filterProvider;
    app.provide = $provide;

    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('dashboard', {
            url         : '/',
            templateUrl : 'views/dashboard.html',
            controller  : 'DashboardCtrl',
            resolve     : {
                deps : function ($q, $rootScope) {
                    var deferred = $q.defer();

                    curl('scripts/controllers/dashboard.js')
                        .then(function () {
                            $rootScope.$apply(function () {
                                deferred.resolve({});
                            });
                        });

                    return deferred.promise;
                }
            }
        });
});

这样可行。 方法描述如下： http : //ify.io/lazy-loading-in-angularjs/

但是，当我要测试时，每次都会出现错误：错误：[ng：areq]参数'DashboardCtrl'不是一个函数，未定义

我的测试脚本：

describe('Controller: DashboardCtrl', function () {
    'use strict';

    var DashboardCtrl,
        scope;

    // load the controller's module
    beforeEach(function () {
        var app = angular.module('cellierApp', [
            'ngRoute',
            'ngCookies',
            'ngResource',
            'ngSanitize',
            'ui.router'
        ]);

        app.run([
            '$rootScope', '$state', '$stateParams',
            function ($rootScope, $state, $stateParams) {
                $rootScope.$state = $state;
                $rootScope.$stateParams = $stateParams;
            }
        ]);

        app.config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
            app.stateProvider = $stateProvider;
            app.routeProvider = $urlRouterProvider;
            app.controllerProvider = $controllerProvider;
            app.compileProvider = $compileProvider;
            app.filterProvider = $filterProvider;
            app.provide = $provide;
        });

        inject(function ($controller, $rootScope) {
            scope = $rootScope.$new();
            DashboardCtrl = $controller('DashboardCtrl', {
                $scope : scope
            });
        });
    });

    it('should attach a list of awesomeThings to the scope', function () {
        expect(scope.foo).toBeDefined();
        expect(scope.foo).toBe('bar');
    });
});

我不知道我在做什么错。 有没有认识的人？ 提前致谢

Answer 1

我不确定Karma是否支持Script.js加载，但是可以确定它是否支持Require.js。

自从您遵循了该教程，您是否检查了他在github上给出的最后一个示例（它也包含单元测试）？ 这个想法是，您可以将所有内容转换为使用Require.js而不是Script.js，并使用Karma和karma-requirejs进行测试。

尽管不太困难，但是有很多更改。 我不会在此处发布工作代码，但我建议阅读以下内容： http : //ify.io/unit-testing-lazily-loaded-angularjs-artefacts/和http://karma-runner.github.io /0.8/plus/RequireJS.html

我无法链接最后一个示例，因为我没有声誉，但这在您链接的教程的底部。

要查看将异步模块定义与RequireJS一起使用的可运行示例，请查看示例应用程序。”

Answer 2

您无需加载模块，但可以在此代码段中覆盖角度模块：

 var app = angular.module('cellierApp', [
    'ngRoute',
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ui.router'
  ]);

正确的电话是

beforeEach(function() {
    // the module to be tested
    module('cellierApp');
});

另外，应用程序的var声明非常糟糕。 您有一个角容器，可以使用它，不要无缘无故地在全局闭包上创建对象。 更改此：

var app = angular.module('myApp', [
    'ngRoute',
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ui.router'
]);

app.run...

至：

angular.module('myApp', [
        'ngRoute',
        'ngCookies',
        'ngResource',
        'ngSanitize',
        'ui.router'
    ])
.config([...

.run([....

单元测试本身可以简化很多：

describe('Controller: DashboardCtrl', function() {
    'use strict';

    var scope;

    // load the controller's module
    beforeEach(function() {
        module('cellierApp');
    });

    beforeEach(inject(function($controller, $rootScope) {
        scope = $rootScope.$new();
        $controller('DashboardCtrl', {
            $scope: scope
        });
    }));

    it('should attach a list of awesomeThings to the scope', function() {
        expect(scope.foo).toBeDefined();
        expect(scope.foo).toBe('bar');
    });
});

Answer 3

在测试中，您没有注册控制器

将用于创建控制器的代码放入测试中

app.controllerProvider.register('DashboardCtrl', [
    '$scope', function ($scope) {
        $scope.foo = 'bar';
    }
]);

但是，根据您的测试设置，应通过测试系统加载应用程序和控制器文件，并应使用

beforeEach(module('cellierApp'));

而不是直接在测试中创建应用