Angular4テストカバレッジを有効にする方法

Question

私はAngular4プロジェクトに取り組んでいます。

私はコードカバレッジを設定しようとしています。私は非常にシンプルで小さなアプリケーションを作成しました。

私は見つけられたすべての可能なページを読みましたが、私は失われています。

Angular4でコードカバレッジを設定するにはどうすればよいですか？

アップデート2： 私は今カルマ・カバレッジ・レポーター https://www.npmjs.com/package/karma-coverage を使用することにしましたので、説明に従ってカルマconfファイルを作り直しています。

パッケージjsonが更新されました。テストが実行さと渡され、

を

は、私は今、フォルダが生成されている参照が、HTMLファイルには、空のテーブルを示しています

ここから何をすべきかわかりません。

ここは私のパッケージjsonです。私のWebPACKの設定に続いて

{ 
    "name": "angular2-webpack", 
    "version": "0.0.1", 
    "description": "A webpack starter for Angular", 
    "scripts": { 
     "pretest": "npm run lint", 
     "start": "webpack-dev-server --inline --progress --port 8080", 
     "test": "karma start", 
     "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail", 
     "lint": "tslint --force \"src/**/*.ts\"" 
    }, 
    "license": "MIT", 
    "dependencies": { 
     "@angular/common": "4.1.2", 
     "@angular/compiler": "4.1.2", 
     "@angular/core": "4.1.2", 
     "@angular/forms": "4.1.2", 
     "@angular/http": "4.1.2", 
     "@angular/platform-browser": "4.1.2", 
     "@angular/platform-browser-dynamic": "4.1.2", 
     "@angular/router": "4.1.2", 
     "bootstrap": "^3.3.7", 
     "core-js": "2.4.1", 
     "es6-shim": "^0.35.3", 
     "jquery": "^3.2.0", 
     "reflect-metadata": "^0.1.10", 
     "rxjs": "^5.0.1", 
     "zone.js": "^0.8.10" 
    }, 
    "devDependencies": { 
     "@types/jasmine": "2.5.47", 
     "@types/node": "^7.0.18", 
     "angular2-template-loader": "^0.6.0", 
     "awesome-typescript-loader": "^3.0.4", 
     "css-loader": "^0.28.1", 
     "extract-text-webpack-plugin": "^2.1.0", 
     "file-loader": "^0.11.1", 
     "html-loader": "^0.4.3", 
     "html-webpack-plugin": "^2.16.1", 
     "jasmine-core": "^2.4.1", 
     "karma": "^1.7.0", 
     "karma-chrome-launcher": "^2.0.0", 
     "karma-coverage": "^1.1.1", 
     "karma-jasmine": "^1.0.2", 
     "karma-phantomjs-launcher": "^1.0.4", 
     "karma-sourcemap-loader": "^0.3.7", 
     "karma-webpack": "^2.0.1", 
     "lint": "^1.1.2", 
     "node-sass": "^4.5.0", 
     "null-loader": "^0.1.1", 
     "phantomjs-prebuilt": "^2.1.7", 
     "raw-loader": "^0.5.1", 
     "rimraf": "^2.5.2", 
     "sass-loader": "^6.0.3", 
     "style-loader": "^0.17.0", 
     "tslint": "^5.2.0", 
     "tslint-loader": "^3.5.3", 
     "typescript": "~2.3.2", 
     "webpack": "^2.2.1", 
     "webpack-dev-server": "2.4.5", 
     "webpack-merge": "^4.1.0" 
    } 
} 

今更新カルマconfファイルが続く

var webpack = require('webpack'); 
var helpers = require('./helpers'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

const extractSass = new ExtractTextPlugin({ 
    filename: "[name].[contenthash].css", 
    disable: process.env.NODE_ENV === "development" 
}); 


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

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

    module: { 
     rules: [ 
      { 
       test: /\.ts$/, 
       loaders: [ 
        { 
         loader: 'awesome-typescript-loader', 
         options: {configFileName: helpers.root('src', 'tsconfig.json')} 
        }, 'angular2-template-loader' 
       ] 
      }, 
      { 
       test: /\.html$/, 
       loader: 'html-loader' 
      }, 
      { 
       test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
       loader: 'file-loader?name=assets/[name].[hash].[ext]' 
      }, 
      { 
       test: /\.css$/, 
       exclude: helpers.root('src', 'app'), 
       loader: 'style-loader!css-loader?sourceMap' 
      }, 
      { 
       test: /\.css$/, 
       include: helpers.root('src', 'app'), 
       loader: 'raw-loader' 
      }, 


      { 
       test: /\.scss$/, 
       exclude: helpers.root('src', 'app'), 
       use: extractSass.extract({ 
        use: [{ 
         loader: "css-loader" 
        }, { 
         loader: "sass-loader" 
        }], 
        // use style-loader in development 
        fallback: "style-loader" 
       }) 
      }, 
      { 
       test: /\.scss$/, 
       include: helpers.root('src', 'app'), 
       loader: 'raw-loader' 
      } 
     ] 
    }, 

    plugins: [ 
     extractSass, 
     new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows 
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
      helpers.root('./src'), // location of your src 
      {} // a map of your routes 
     ) 
    ] 
} 

：その咲き誇るコードが

https://github.com/uweDuesing/angular2-webpack-templateここで見つけることができます

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

var ENV = process.env.npm_lifecycle_event; 
var isTestWatch = ENV === 'test-watch'; 
module.exports = function (config) { 
    var _config = { 
     basePath: './', 

     frameworks: ['jasmine'], 

     files: [ 
      {pattern: './config/karma-test-shim.js', watched: false}, 
      '../src/**/*.js' 
     ], 
     // list of files to exclude 
     exclude: [], 
     preprocessors: { 
      './config/karma-test-shim.js': ['webpack', 'sourcemap'], 
      '../src/**/*.js': ['coverage'] 

     }, 
     coverageReporter: { 
      type : 'html', 
      dir : 'cover/' 
     }, 
     webpack: webpackConfig, 

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

     webpackServer: { 
      noInfo: true 
     }, 

     reporters: ['progress', 'mocha','coverage'], 

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

    config.set(_config); 

}; 

Answer 1

最初から設定する方法はわかりませんが、angle-cliで生成されたプロジェクトにはすでにコードカバレッジプラグインが設定されていることがわかります。 https://github.com/angular/angular-cli/wiki/testをチェックすると、ngテスト-ccを実行できます。

どのように構成されているかを調べるには、angle-cliでプロジェクトを生成し、ルートフォルダng ejectを実行すると、Webpack構成ファイルが表示されます。

Answer 2

ng ejectの後にセットアップでangular4 cliを動作させるのと同様の問題がありました。それは多分、これは他の誰かが、最初から、またはビューのng ejectポイントからそれをやって助けるpackage.jsonで私のためにいくつかのシンプルなラインであることが判明し、karma.conf.js

。

私はclient.argsの行を追加し、私が作成し、変数isCoverageにangularCli.codeCoverageを設定しなければならなかったカルマの設定のために次にpackage.jsonに

"test": "karma start ./karma.conf.js", 
"coverage": "karma start --coverage true ./karma.conf.js", 

をcoverageスクリプトを追加しましたpackage.jsonからコマンドラインオプションを読んでください。

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

module.exports = function (config) { 

    const isCoverage = config.coverage || false; 

    console.log(`Generate Coverage Statistics?: ${isCoverage}`); 

    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') 
    ], 
    client:{ 
     clearContext: false, // leave Jasmine Spec Runner output visible in browser 
     args: ['--coverage', config.coverage] 
    }, 
    files: [ 
     { pattern: './src/test.ts', watched: false } 
    ], 
    preprocessors: { 
     './src/test.ts': ['@angular/cli'] 
    }, 
    mime: { 
     'text/x-typescript': ['ts','tsx'] 
    }, 
    coverageIstanbulReporter: { 
     reports: [ 'html', 'lcovonly' ], 
     fixWebpackSourcePaths: true 
    }, 
    angularCli: { 
     environment: 'dev', 
     codeCoverage: isCoverage 
    }, 
    reporters: config.angularCli && config.angularCli.codeCoverage 
       ? ['progress', 'coverage-istanbul'] 
       : ['progress', 'kjhtml'], 
    port: 9876, 
    colors: true, 
    logLevel: config.LOG_INFO, 
    autoWatch: true, 
    browsers: ['Chrome'], 
    singleRun: false 
    }); 

}; 

Answer 3

karma.confファイルにangularCltを追加します。このような 何か：

angularCli: { 
 
     environment: 'dev', 
 
     codeCoverage: true 
 
    }

コード・カバレッジは、スクリプトコマンドnpm run test

Answer 4

で排出されたアプリのためのコード・カバレッジを実行したい場合、私は様々な記事を研究してきた重要な部分であります私が見つけた最も簡単な方法は -

$ npm install karma karma-jasmine karma-chrome-launcher karma-jasmine-html-reporter kar MA-カバレッジ - イスタンブール - レポーター

$ NGテスト--codeカバレッジ

$ HTTPサーバ-c-1 -o -p 9875 ./coverage

を開き、それChromeブラウザでのみ。