2016-09-15 2 views
8

角度2+ウェブパックでカルマカバレッジを設定するにはどうすればよいですか?角度2のカルマウェブパックのカバレッジを設定する

私はクイックスタートウェブパックガイドを角度から追っています。しかし、カバレッジツールは空白で、テストは表示されません。ありがとう!

私のフォルダ構造が

project 
|--src (project files) 
|--tests (all my testfiles) 

私webpack.test.jsこの

var helpers = require('./helpers'); 

module.exports = { 
    devtool: 'inline-source-map', 

    resolve: { 
     extensions: ['', '.ts', '.js'] 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.ts$/, 
       loaders: ['ts'] 
      }, 
      { 
       test: /\.html$/, 
       loader: 'null' 

      }, 
      { 
       test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
       loader: 'null' 
      }, 
      { 
       test: /\.css$/, 
       exclude: helpers.root('src', 'app'), 
       loader: 'null' 
      }, 
      { 
       test: /\.css$/, 
       include: helpers.root('src', 'app'), 
       loader: 'null' 
      } 
     ] 
    } 
} 

私Karma.conf.js

var webpackConfig = require('./webpack.test'); 

module.exports = function (config) { 
    var _config = { 
     basePath: '', 

     frameworks: ['jasmine', 'sinon'], 

     files: [ 
      {pattern: './config/karma-test-shim.js', watched: false} 
     ], 
     preprocessors: { 
      './config/karma-test-shim.js': ['webpack', 'sourcemap'] 
     }, 
     plugins:[ 
      require('karma-jasmine'), 
      require('karma-coverage'), 
      require('karma-webpack'), 
      require('karma-phantomjs-launcher'), 
      require('karma-sourcemap-loader'), 
      require('karma-mocha-reporter'), 
      require('karma-sinon') 
     ], 

     coverageReporter: { 
      type : 'html', 
      dir : 'coverage/' 
     }, 

     webpack: webpackConfig, 

     webpackMiddleware: { 
      stats: 'errors-only' 
     }, 

     webpackServer: { 
      noInfo: true 
     }, 

     reporters: ['mocha','coverage'], 
     port: 9876, 
     colors: true, 
     logLevel: config.LOG_INFO, 
     autoWatch: true, 
     browsers: ['PhantomJS'], 
     singleRun: false 
    }; 

    config.set(_config); 
}; 

とカルマ - テスト - のように見えるですshim.js

Error.stackTraceLimit = Infinity; 

require('core-js/es6'); 
require('reflect-metadata'); 

require('zone.js/dist/zone'); 
require('zone.js/dist/long-stack-trace-zone'); 
require('zone.js/dist/proxy'); 
require('zone.js/dist/sync-test'); 
require('zone.js/dist/jasmine-patch'); 
require('zone.js/dist/async-test'); 
require('zone.js/dist/fake-async-test'); 

var testContext = require.context('../tests', true, /\.spec\.ts/); 

testContext.keys().forEach(testContext); 

var testing = require('@angular/core/testing'); 
var browser = require('@angular/platform-browser-dynamic/testing'); 

testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting()); 
+0

はい、この例は私にとっても機能しません。私は約エラーが発生しました:0の0エラーが実行されました。しかし、私は公式の文書のようにすべてをやった。 – Velidan

+0

ダウンロードしてみましたか? https://angular.io/generated/zips/webpack/webpack.zip then npm installしてからnpmを実行してnpm testをビルドしますか?それは私のために完了しました。私は、作業抽出されたジップに相違点をアナウンスしたいと思います。 – JGFMK

答えて

0

ゆうkarma.config.jsための完全な設定をする必要があります

coverageIstanbulReporter: { 
     reports: ['html', 'lcovonly'], 
     fixWebpackSourcePaths: true, 
     // enforce percentage thresholds 
     // anything under these percentages will cause karma to fail with an exit code of 1 if not running in watch mode 
     thresholds: { 
      emitWarning: false, // set to `true` to not fail the test command when thresholds are not met 
      global: { // thresholds for all files 
       statements: 80, 
       lines: 80, 
       branches: 80, 
       functions: 80 
      }, 
      each: { // thresholds per file 
       statements: 80, 
       lines: 80, 
       branches: 80, 
       functions: 80, 
       overrides: {} 
      } 
     } 
    }, 

以下のようにイスタンブールレポータープロパティを追加するためのコードの下に使用し、プラグインも

​​

にコード・カバレッジ・プラグインの下にインポートする必要があります以下:

// Karma configuration file, see link for more information 
// https://karma-runner.github.io/0.13/config/configuration-file.html 

module.exports = function(config) { 
    config.set({ 
     basePath: '', 
     frameworks: ['jasmine', '@angular/cli'], 
     plugins: [ 
      require('karma-jasmine'), 
      require('karma-chrome-launcher'), 
      require('karma-jasmine-html-reporter'), 
      require('karma-coverage-istanbul-reporter'), 
      require('@angular/cli/plugins/karma'), 
      require('karma-htmlfile-reporter'), 
     ], 
     client: { 
      clearContext: false // leave Jasmine Spec Runner output visible in browser 
     }, 
     coverageIstanbulReporter: { 
      reports: ['html', 'lcovonly'], 
      fixWebpackSourcePaths: true, 
      // enforce percentage thresholds 
      // anything under these percentages will cause karma to fail with an exit code of 1 if not running in watch mode 
      thresholds: { 
       emitWarning: false, // set to `true` to not fail the test command when thresholds are not met 
       global: { // thresholds for all files 
        statements: 80, 
        lines: 80, 
        branches: 80, 
        functions: 80 
       }, 
       each: { // thresholds per file 
        statements: 80, 
        lines: 80, 
        branches: 80, 
        functions: 80, 
        overrides: {} 
       } 
      } 
     }, 
     angularCli: { 
      environment: 'dev' 
     }, 
     // reporters: config.angularCli && config.angularCli.codeCoverage ? ['spec', 'karma-remap-istanbul'] : ['spec'], 
     // reporters: ['mocha'], 
     reporters: ['progress', 'html', 'kjhtml'], 
     htmlReporter: { 
      outputFile: 'testreports/report.html', 
      // Optional 
      pageTitle: 'Rest Reports', 
      subPageTitle: 'Suite-wise report ', 
      groupSuites: true, 
      useCompactStyle: true, 
      useLegacyStyle: false 
     }, 
     port: 9876, 
     colors: true, 
     logLevel: config.LOG_INFO, 
     autoWatch: true, 
     browsers: ['Chrome'], 
     singleRun: false 
    }); 
}; 
関連する問題