2016-03-03 69 views
3

我正尝试在使用服务器端模板引擎呈现index.ejsindex.dust的Angular项目上实现前端单元测试。这个文件还包括一个全局变量var cdn = "http://s3.amazon.com";,它在角度应用程序中使用。我运行start karma karma.config.js,我收到ReferenceError: cdn is not defined: app.js L20用EJS索引进行角度Karma-Jasmine单元测试

cdn var当我用Node运行我的应用程序时可用,但是当我尝试在我的Angular Ctrls上运行单元测试时,我收到上述错误。

我试图用karma-ejs-preprocessor模块(这里:https://www.npmjs.com/package/karma-ejs-preprocessor)在我的测试实例cdn,但我得到一个新的错误:No provider for "framework: jasmine"

index.ejs

<!doctype html> 
<html lang="en" ng-app="app"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Test</title> 

    <script src="./bower_components/angular/angular.js"></script> 
    <script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script> 
    <script src="./bower_components/angular-mocks/angular-mocks.js"></script> 
    <script src="./bower_components/angular-resource/angular-resource.js"></script> 

    <script src="./app.js"></script> 

    </head> 
    <body> 
    <h1>Angular Unit Testing</h1> 

    <script> 
     var cdn = "./"; 
    </script> 

    <main> 
     <div ui-view></div> 
    </main> 
    </body> 
</html> 

karma.conf.js

// Karma configuration 
// Generated on Sat Mar 12 2016 02:53:19 GMT-0800 (Pacific Standard Time) 

module.exports = function(config) { 
    config.set({ 

    // base path that will be used to resolve all patterns (eg. files, exclude) 
    basePath: '', 

    // frameworks to use 
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 
    frameworks: ['jasmine'], 


    // list of files/patterns to load in the browser 
    files: [ 
     'client/src/bower_components/angular/angular.js', 
     'client/src/bower_components/angular-ui-router/release/angular-ui-router.js', 
     'client/src/bower_components/angular-mocks/angular-mocks.js', 
     'client/src/bower_components/angular-resource/angular-resource.js', 
     'client/src/app.js', 
     'tests/test.js' 
    ], 


    // list of files to exclude 
    exclude: [ 
    ], 

    plugins: [ 
     'karma-qunit', 
     'karma-ejs-preprocessor', 
     'karma-jasmine', 
     'karma-chrome-launcher' 
    ], 

    // preprocess matching files before serving them to the browser 
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 
    preprocessors: { 
     'server/_views/index.ejs': ['ejs'] 
    }, 

    ejsOptions: { 
     parentPath: './server/_views/index.ejs' 
    }, 


    // test results reporter to use 
    // possible values: 'dots', 'progress' 
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter 
    reporters: ['progress'], 


    // web server port 
    port: 9876, 


    // enable/disable colors in the output (reporters and logs) 
    colors: true, 


    // level of logging 
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 
    logLevel: config.LOG_INFO, 


    // enable/disable watching file and executing tests whenever any file changes 
    autoWatch: true, 


    // start these browsers 
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 
    browsers: ['Chrome'], 


    // Continuous Integration mode 
    // if true, Karma captures browsers, runs the tests and exits 
    singleRun: false, 

    // Concurrency level 
    // how many browser should be started simultaneous 
    concurrency: Infinity 
    }) 
} 

test.js

describe('State1Ctrl', function() { 
    var $rootScope, 
     $scope, 
     controller; 

    beforeEach(function() { 
    module('app', 'ui.router'); 

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

    describe('Init', function() { 
    it('should be init', function() { 
     expect($scope.test).toBeTruthy(); 
    }); 
    }); 
}); 

app.js

(function() { 
    'use strict'; 

    angular.module('app', [ 
    'ui.router' 
    ]) 

    .controller('State1Ctrl', ['$scope', function($scope) { 
    console.log('cdn2', cdn); 
    $scope.test = 'hi'; 
    console.log($scope.test); 
    }]) 

    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { 
    // For any unmatched url, redirect to /state1 
    $urlRouterProvider.otherwise("/state1"); 

    // cdn is available here 
    console.log("cdn: ", cdn); 

    // Now set up the states 
    $stateProvider 
    .state('state1', { 
     url: "/state1", 
     templateUrl: cdn + "views/state1.html", 
     controller: 'State1Ctrl' 
    }) 
    .state('state1.list', { 
     url: "/list", 
     templateUrl: "views/state1.list.html", 
     controller: function($scope) { 
     $scope.items = ["A", "List", "Of", "Items"]; 
     } 
    }) 
    .state('state2', { 
     url: "/state2", 
     templateUrl: "views/state2.html" 
    }) 
    .state('state2.list', { 
     url: "/list", 
     templateUrl: "views/state2.list.html", 
     controller: function($scope) { 
     $scope.things = ["A", "Set", "Of", "Things"]; 
     } 
    }); 

    }]); 

})(); 

回购这里展示的问题:https://github.com/superveetz/Loopback-Tests.git

  1. npm install从基地。
  2. bower install from /client/src
  3. karma start karma.conf.js from base。
  4. node .从基地看到cdn正常使用。
+0

请列出你的src目录下的JS文件 –

回答

1

请更新karma.config中的插件部分。

plugins: [ 
    'karma-qunit', 
    'karma-ejs-preprocessor', 
    'karma-jasmine', 
    'karma-chrome-launcher' 
], 

并运行这些命令。

npm install karma-jasmine --save-dev 

npm install karma-chrome-launcher --save-dev 

了解更多详情请here

编辑1:

请不要thihs变化。

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

代替$rootScope.new()使用$rootScope.$new()

定义cdnconsole.log('cdn2', cdn)您的CDN,所以它不会停止你的测试脚本

+0

哎我原来的问题是发生在那里'即使'index.ejs'文件正在被成功预处理:\,cdn'仍然没有在我的测试中定义。我已更新回购和发布以反映文件更改。 – SuperVeetz

+0

请检查EDIT1 –

+0

我更新了我的回购以使用上述更改。但是'cdn not defined'错误是由于'my state'声明中的这一行'templateUrl:cdn +“views/state1.html”'发生的。在我们的实际项目中,'cdn' var是基于我们的'NODE_ENV'变量生成的,所以我们可以有多个开发和生产环境。我希望我的测试能够以类似的方式运行,其中测试的资产将基于运行服务器的'NODE_ENV'。 – SuperVeetz