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) は、カルマを介してロードするとエラーが発生し、次のように定義されています。
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(document, ['mcc']); ランダムにエラーが発生します。つまり、ブラウザー (chrome、phantomJS) がモジュールを見つける場合と、カルマを実行しているときに見つからない場合があります。通常の Web アプリとして実行すると、最初は常に正常に動作します。