Angularでテストカバレッジを取得する

今日はAngularでテストカバレッジを取得できるようにした時の話をしようと思います。

プロジェクト作成

まずはAngularのプロジェクトを作成します。

$ ng init voicy-blog-relay

プロジェクトが作成できたらテストファイルも作成されています。

試しにテストを実行してみます。

$ ng test

無事テストが実行されました。

テストカバレッジ取得

Angularのng testコマンドには元からカバレッジを取得するオプションがあります。ドキュメントはこちら

さっそく実行してみます。

$ ng test --no-watch --code-coverage

実行すると以下のようなサマリ結果が表示されます

=============================== Coverage summary ===============================
Statements   : 100% ( 3/3 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 0/0 )
Lines        : 100% ( 2/2 )
================================================================================

また、カバレッジレポートのHTMLも作成されるので確認してみましょう。ファイルはデフォルトではプロジェクトフォルダのcoverage/{プロジェクト名}に作成されてるのでindex.htmlをブラウザで開いてみます。

ファイルごとの詳細なレポートも確認できて、どこの行がテストできていないかもわかるので、個人的には見やすくてとても気に入ってます。

カバレッジレポート設定

テストやカバレッジレポートについての設定はkarma.conf.jpに書かれており、レポートに関する主な設定はcoverageReporterの部分になります。

coverageReporter: {
  dir: require('path').join(__dirname, './coverage/voicy-blog-relay'),
  subdir: '.',
  reporters: [
    { type: 'html' },
    { type: 'text-summary' }
  ]
},

これらはレポート結果をどう出力するかの設定となっており、試しに

{ type: 'html' },

の部分を削除するとHTMLファイルが作成されなくなります。また、実行時にコンソールに表示される

=============================== Coverage summary ===============================
Statements   : 100% ( 3/3 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 0/0 )
Lines        : 100% ( 2/2 )
================================================================================

こちらのレポートはtext-summaryの方を削除すると出力されなくなります。

その他の設定についてはこちらのドキュメントに記載されておりますので、ぜひチェックしてみてください。