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

时间:2013-06-27 22:01:01

标签: angularjs requirejs karma-runner

我在使用require和karma为我的AngularJS应用程序编写测试时遇到了麻烦。我随机得到的模块没有定义'从业力加载主源文件时出错,我不确定原因。

我的项目结构如下:

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(document,[' mcc']); 随机导致错误 - 也就是说,有时浏览器(chrome,phantomJS)找到模块,有时它在通过业力时不会发生。如果我将它作为常规Web应用程序运行,它第一次运行正常。

1 个答案:

答案 0 :(得分:0)

我认为您不想在执行测试时引导应用程序。您是否尝试将该模块重构为另一个文件?例如,当您运行应用程序时,该文件等同于 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加载。