AngularJS + Require + Karma - 无法运行测试答案

【问题标题】：AngularJS + Require + Karma - having trouble getting tests to runAngularJS + Require + Karma - 无法运行测试
【发布时间】：2013-06-27 22:01:01
【问题描述】：

我在使用 require 和 karma 为我的 AngularJS 应用程序编写测试时遇到问题。从 karma 加载主源文件时，我随机收到“未定义模块”错误，我不确定为什么。

我的项目结构如下：

main
 -webapp
 -components
   -{all my external libs}
 -js
   -{my js files}
test
  -lib
    angular-mocks.js
    underscore.js
  -webapp
    karma.conf.js
    server.js
    test-main.js -> require js config
   -unit
     myTest.js

我的 test-main.js 定义如下-

var tests = [];
for (var file in window.__karma__.files) {
if (/Test\.js$/.test(file)) {
    tests.push(file);
    console.log(file);
}
}


requirejs.config({
baseUrl:'base/',
paths:{
    'angular':'main/webapp/components/angular-1.0.7',
    'jquery':'main/webapp/components/jquery',
    'jquery-ui':'main/webapp/components/jquery-ui',
    'lodash':'main/webapp/components/lodash',
    'underscore':'test/webapp/lib/underscore',
    'angular-mocks':'test/webapp/lib/angular-mocks',
    'requireLibChecker':'test/webapp/checker/requireLibChecker',
    'bootstrap':'main/webapp/components/bootstrap/js/bootstrap',
    'bootstrap-datepicker':'main/webapp/components/bootstrap/js/bootstrap-datepicker',
    'app':'main/webapp/js/mcc',
    'helper':'main/webapp/js/helper',
    'js':'main/webapp/js'
},

shim:{
    'angular':{
        exports:'angular'
    },
    'angular-mocks':{
        exports:'angular-mocks'
    },
    'underscore':{
        exports:'_'
    },
    'jquery-ui':{
        deps:['jquery'],
        exports:'jquery-ui'
    },
    'bootstrap-datepicker':{
        deps:['jquery', 'bootstrap'],
        exports:'datepicker'
    }
},
priority:[
    "angular"
],

// ask Require.js to load these files (all our tests)
deps:tests,

priority:['angular'],


// start test run, once Require.js is done
callback:window.__karma__.start
});

我的主要第一个源文件（mcc.js）在通过 karma 加载时导致错误，定义如下：

define("app", [
'angular', 
'js/controllers/overviewctrl',
'js/controllers/topicactivityctrl',
'js/services/transportmodel',
'js/services/subjectmodel',
'js/directives/controlsdirective',
'bootstrap-datepicker',
'jquery-ui'
], function(angular) {

var app = angular.module('mcc', []).config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/overview', {
            templateUrl:'partials/system-overview.html', 
            controller: 'OverviewController'
        }).
        when('/overview/:systemId', {
            templateUrl:'partials/system-overview.html', 
            controller: 'OverviewController'
        }).
        otherwise({redirectTo:'/overview'});
}]);

app.controller("AppController", ['$rootScope', 'transportModel', function($rootScope, transportModel) {
    $rootScope.$on("$routeChangeError", function(event, current, previous, rejection) {
        alert("Route Change Error: " + rejection);
    });

    if ($rootScope.mcc_region === undefined)
        $rootScope.mcc_region = "New York";

    transportModel.then(function(tm) {
        $rootScope.mcc_regions = tm.regions;
    });

}]);

return app;

});


require(['angular', 'helper'], function(angular, helper) {

angular.element(document).ready(function() {

    /* MANUALLY LOAD TO WAIT FOR APP */
    angular.bootstrap(document, ['mcc']); --> This line causes the error

    /* NAVIGATE TO TOP OF PAGE FOR MOBILE DEVICES */
    window.scrollTo(0, 1);


});

});

我正在尝试调试究竟是什么原因 -
angular.bootstrap（文档，['mcc']）；随机导致错误 - 也就是说，有时浏览器（chrome、phantomJS）会找到模块，有时在运行 karma 时找不到。如果我将它作为常规网络应用程序运行，它第一次总是可以正常工作。

【问题讨论】：

标签： angularjs requirejs karma-runner

【解决方案1】：

我认为您不想在执行测试时引导应用程序。您是否尝试将该模块重构为另一个文件？例如，当您运行应用程序时，该文件等效于您的 test-main.js。

我的意思是模块：

require(['angular', 'helper'], function(angular, helper) {

    angular.element(document).ready(function() {

        /* MANUALLY LOAD TO WAIT FOR APP */
        angular.bootstrap(document, ['mcc']); --> This line causes the error

        /* NAVIGATE TO TOP OF PAGE FOR MOBILE DEVICES */
        window.scrollTo(0, 1);


});

可能根本不需要 Karma 加载。

【讨论】：