この記事はVoicyエンジニアによる技術ブログリレーの8日目記事です。
今日は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
の方を削除すると出力されなくなります。
その他の設定についてはこちらのドキュメントに記載されておりますので、ぜひチェックしてみてください。
最後に
以前VoicyのAngularプロダクトではテスト実装があまり行われておらずに課題となっていたのですが、エンジニア全体としてサービスのクオリティを上げるべく、テストの改善を進める取り組みを行いました。
そこで、まずは現状どこまで 出来ていて、そしてどれだけ改善できたのかを可視化するために、このカバレッジレポートを作成することにしました。それ以降は新規に開発したコンポーネント等については必ずテストを作成し、できれば100%、難しくても可能なだけ高いカバレッジとなるように開発を行っています。
Voicyではユーザーにとってより良い体験を届けるために、エンジニア全員が意見を出し合いながら日々改善を行なっています。そんなエンジニアチームに少しでも興味がある方は、ぜひこちらもご覧ください。 www.wantedly.com