I am mitsuruog | Angular2 Unit Testing

Angular2 の実装の方法は記事をよく目にする機会が増えたので、テストについての自分が困らないように調べてみたシリーズ。

今回はカバレッジ編。

（注意）Angular 2.0.0-beta.9 をベースに話しています。 E2E テストは protractor がそのまま利用できると思うので、ここでのテストはユニットテストの話です。

Angular2 Unit Testing

準備
基本
Mock, Spy の基本(TBD)
DOM のテスト
XHR のテスト
Component のテスト(TBD)
Service のテスト(TBD)
Pipe のテスト
Directive のテスト(TBD)
カバレッジ

カバレッジ編

コード網羅率（コードもうらりつ、英: Code coverage ）コードカバレッジは、ソフトウェアテストで用いられる尺度の 1 つである。プログラムのソースコードがテストされた割合を意味する。コード網羅率 - Wikipedia

カバレッジを取得することのメリットは、コードの危ない部分に対して効果的にテストができているか客観的に評価できることです。。特に HTML 形式のレポートは、コードとテストを実行した部分を重ねて表示することができ、結果を視覚的に見やすくしてくれます。

最近の JavaScript のテストではカバレッジ取得のための環境が整ってきたこともあり、積極的に活用していくべきです。

karma-coverage でカバレッジを測定する

Karma でカバレッジを取得するためには、プラグインの 1 つであるkarma-coverageを利用します。早速、リポジトリのdevDependencyに追加します。

npm install karma karma-coverage --save-dev

続いてkarma.conf.jsの設定を変更します。

karma.conf.js

'use strict';
// Karma configuration

let baseLibs = [...];

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

    // ...省略

    // (1)
    // (*.spec.js, *.mock.js)以外のJavaScriptファイルをカバレッジ測定の対象とします
    preprocessors: {
      "app/**/!(*spec|*mock).js": ['coverage']
    },

    // (2)
    // テスト完了時のreporterにカバレッジ用reporterを設定します
    reporters: ['mocha', 'coverage'],

    // (3)
    // カバレッジ用reporterの出力先, フォーマットを指定します
    // see https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md
    coverageReporter: {
      dir : 'report/coverage/',
      reporters: [{
        type: 'html'
      }]
    }

    // ...省略

  })
}

テストを実行するとreport/coverageの直下に HTML 形式のカバレッジレポートが出力されます。

karma-coverage 内部では、JavaScript のカバレッジ測定ツールとして有名なistanbulを利用しています。 HTML レポートでは、ディレクトリやファイルごとにカバレッジを知ることができます。これを見ながらカバレッジの低い部分などに追加のテストを書いていきます。

コードとテスト実行した部分を重ねあわせて表示することで、テストが不足している部分を容易に発見できます。

ところがこのままでは、レポートのコードが ts ファイルをトランスパイルした JavaScript ファイルとなっているため、実際に作成した ts ファイル上のどの部分に該当するかが非常に分かりにくいです。

remap-istanbul で ts ファイルとリンクさせる

先ほどのカバレッジレポートを改良してトランスパイル前の ts ファイルをリンクさせます。リンクさせるにはremap-istanbulを利用します。

remap-istanbul とは、ts ファイルをトランスパイルした際に生成される SouceMap(ここでは inline SouceMap)を元に、カバレッジレポートをオリジナルの ts ファイルにリンクさせるツールです。早速、リポジトリのdevDependencyに追加します。

npm install karma remap-istanbul --save-dev

続いてkarma.conf.jsの設定を変更します。カバレッジレポートのフォーマットをhtmlではなくjsonに変更します。

karma.conf.js

'use strict';
// Karma configuration

let baseLibs = [...];

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

    // ...省略

    // (1)
    // (*.spec.js, *.mock.js)以外のJavaScriptファイルをカバレッジ測定の対象とします
    preprocessors: {
      "app/**/!(*spec|*mock).js": ['coverage']
    },

    // (2)
    // テスト完了時のreporterにカバレッジ用reporterを設定します
    reporters: ['mocha', 'coverage'],

    // (3)
    // カバレッジ用reporterの出力先, フォーマットを指定します
    // see https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md
    coverageReporter: {
      dir : 'report/coverage/',
      reporters: [{
        type: 'json',
        subdir : '.',
        file : 'coverage-final.json',
      }]
    }

    // ...省略

  })
}

テストを実行するとreport/coverage/coverage-final.jsonに JSON 形式のカバレッジレポートが出力されます。これを remap-istanbul で HTML 形式のレポートに仕立てて行きます。

node_modules/.bin/remap-istanbul -i report/coverage/coverage-final.json -o report/coverage/ -t html

コマンドを実行するとreport/coverageの直下に HTML 形式のカバレッジレポートが出力されます。

今度は ts ファイルとカバレッジレポートがリンクするようになりました。めでたし。めでたし。

まとめ

カバレッジの取り方とレポートの表示についてでした。 HTML レポートの出力方法は他にもあると思いますので、いろいろ試してみるといいでしょう。カバレッジレポートを取得することで、テストが十分でない箇所を明らかにすることができ、つまらないテストにゲーム的な要素が加わってテストを書くことが楽しくなります。

PR

こちらに初学者のための Minimum starter kit を作成しましたので、ぜひ利用してください。 (もちろんカバレッジも取得できます！！)

mitsuruog/angular2-minimum-starter: Minimum starter kit for angular2

Angular2 Unit Testing - カバレッジ編

Angular2 Unit Testing

カバレッジ編

karma-coverage でカバレッジを測定する

remap-istanbul で ts ファイルとリンクさせる

まとめ

PR