2016-03-03 61 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