角度でes6を使用したテストサービスクラス

Question

es6角形アプリケーションではservice classと書かれています。データとしてhttpを使用してapiを要求しています。今私はmocha and chaiを通してサービスをテストしたいと思います。

"use strict"; 
const HTTP = new WeakMap(); 
class EventService{ 
    constructor($http, moment){ 
     HTTP.set(this, $http); 
     this.$http = $http; 
     this.url = 'http://test/api/events?'; 
     this.apiKey = '1234asd'; 
    } 

    getEvents(){ 
     return this.$http({ 
      url: this.url + 'from=' + this.from + '&to=' + this.to + '&apiKey=' + this.apiKey, 
      method: "GET", 
      crossDomain: true, 
      headers: { 
       'Content-Type': 'application/json; charset=utf-8' 
      } 
     }); 
    } 
} 


EventService.$inject = ['$http', 'moment']; 

export default EventService; 

Karma.conf.js：

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: ['mocha', 'chai'], 


    // list of files/patterns to load in the browser 
    files: [ 
     'node_modules/angular/angular.js', 
     'node_modules/angular-mocks/angular-mocks.js', 
     'node_modules/moment/moment.js', 
     'node_modules/angular-moment/angular-moment.js', 
     'lib/shared/services/events-service.js', 
     'tests/*.js' 
    ], 


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


    // preprocess matching files before serving them to the browser 
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 
    preprocessors: { 
    }, 


    // 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 
    }) 
} 

は、今私はちょうどテストスイートのアップを取得しようと実行している、しかし、私がすると、次のエラーを取得していています。ここのサービスのように見えるものがあります私は実行するkarma start：

Uncaught SyntaxError: Unexpected token export 
    at lib/shared/services/events-service.js 

これは、サービスのエクスポートコマンドにあります。この作業を行うために構成を変更する必要がありますか？

Answer 1

ファイルをブラウザで判読可能な形式に前処理する必要があると思います。これは、例えば、karma-rollup-preprocessor,rollup-plugin-babel、およびes2015-rollupバベルプリセットを使用して行うことができます。だからあなたのKarma.conf.jsファイルには、次のようになります。

var babel = require('rollup-plugin-babel'); 

module.exports = function(config) { 
    config.set({ 
     basePath: '', 
     frameworks: ['mocha', 'chai'], 
     files: [ 
      'node_modules/angular/angular.js', 
      'node_modules/angular-mocks/angular-mocks.js', 
      'node_modules/moment/moment.js', 
      'node_modules/angular-moment/angular-moment.js', 
      'lib/shared/services/events-service.js', 
      'tests/*.js' 
     ], 
     preprocessors: { 
      'lib/shared/services/events-service.js': ['rollup'], 
      'tests/*.js': ['rollup'] 
     }, 
     rollupPreprocessor: { 
      plugins: [ 
       babel({ 
        'babelrc': false, 
        'presets': ['es2015-rollup'] 
       }) 
      ], 
      format: 'iife', 
      moduleName: '<your_project>', 
      sourceMap: 'inline' 
     }, 
     /* other config options */ 
    }); 
}; 

これはそれを行うための唯一の方法の方法ですが、あなたのファイルは、前Karmaによって実行されることにブラウザフレンドリーes5iife Sにバンドルし、前処理されます。これにより、あなたが得たが削除されます。お役に立てれば。