JSCoverでカバレッジを取得する
では次に、JavaScriptでカバレッジを取得してみましょう。ここではJSCoverというツールを使用します。JSCoverはJavaScriptプログラムのコードカバレッジを測定するツールで、JSCoverageというカバレッジ取得ツールをベースにより使いやすく強化しています。JSCoverはJavaで作られていますので、あらかじめJavaのインストールが必要です。
JSCoverはサーバを起動してカバレッジを取得します。処理の流れは図のとおりです。サーバを起動し、HTMLやJavaScriptのコンテンツの返却と同時にカバレッジの取得を行います。JSCoverサーバには主に以下の役割があります。
- WebサーバとしてHTMLなどのコンテンツ読み込み
- JavaScriptファイルをカバレッジが取れるコードに変換
- テストの実行と同時にカバレッジの取得
- カバレッジ取得結果表示
JSCoverのダウンロード
JSCoverをダウンロードしましょう。公式ページの「Download」リンクを押下し、最新バージョンをダウンロードしてください。「SourceForge downloads page.」のリンクからダウンロードが可能です。
ダウンロードしたzipファイルを解凍すると「target/dist/JSCover-all.jar」というファイルがあります。これを使用してサーバを起動します。
サーバを起動する
ダウンロードが終わりましたので、サーバを起動してみましょう。サンプルではテスト対象のファイルやJSCover-all.jarを以下のように配置しています。今回は、テスティングフレームワークであるjasmineを使用した、fizzbuzzのテストを動作させます。
d:sample
│ JSCover-all.jar （JSCoverのjarファイル）
│ SpecRunner.html（JavaScriptを読み込みテストを動作させるhtml）
│
├─jasmine（jasmineのライブラリ）
│ boot.js
│ console.js
│ jasmine-html.js
│ jasmine.css
│ jasmine.js
│ jasmine_favicon.png
│
├─js（テスト対象のコード）
│ fizzbuzz.js
│
└─test（テストコード）
fizzbuzz.spec.js
では、サーバを起動してみましょう。上記のようなコードが置かれているディレクトリに移動し、コマンドを実行します。指定できる主なオプションは表のとおりです。
cd d:sample java -jar JSCover-all.jar -ws --document-root=. --report-dir=target
| オプション | デフォルト | 説明 |
|---|---|---|
| -h,--help | 利用できない | コマンドライン・ヘルプを表示します。 |
| --document-root=PATH | カレントディレクトリ | Webコンテンツを表示するドキュメントルートディレクトリを指定します（相対でも絶対でも指定可能） |
| --no-instrument=URL | なし | カバレッジを計測しないURLを指定します。 |
| --no-instrument-reg=URL | なし | カバレッジを計測しないURLを正規表現で指定します。 |
| --only-instrument-reg=URL | なし | カバレッジを計測するURLを正規表現で指定します。 |
| --report-dir=PATH | カレントディレクトリ | カバレッジレポートを保存するための（相対でも絶対でも指定可能）PATHで指定されたディレクトリ指定します。 |
| --port=PORT | 8080 | サーバがリッスンするポートを指定します |
| --proxy | 利用できない | プロキシモードで実行します |
| --save-json-only | 利用できない | カバレッジ保存時に、jscoverage.jsonのみを保存します |
| --no-branch | 利用できない | 分岐カバレッジデータの収集をオフにします |
| --no-function | 利用できない | functionカバレッジデータの収集をオフにします |
| --local-storage | 利用できない | HTML5のローカルストレージからカバレッジデータを保存し、ロードします |
| --log=LEVEL | SEVERE | 指定されたJavaログレベルを指定します。レベルの有効な値は 、 SEVERE, WARNING, INFO, CONFIG, FINE, FINER, FINESTです。 |
起動後、http://localhost:8080/jscoverage.htmlにアクセスします。以下のような画面が表示されると成功です。この画面でテストを実行し、カバレッジの取得や表示を行います。
テストの実行
テストを実行し、カバレッジを取得してみましょう。URL欄にテストを実行しカバレッジを取得するテストのURLを記述します。ここでは、http://localhost:8080/SpecRunner.htmlを指定し、テストを実行しています。実行した時点でカバレッジの取得は成功しています。Summaryタブをクリックしてみましょう。カバレッジが表示されます。
取得しているカバレッジは以下の3種類です。
-
statement（命令網羅）：
コード内の命令が実行されている割合です。 -
branch（分岐網羅）：
コード内の判定分岐の結果として、真になる場合と偽になる場合の処理がそれぞれ1回以上実行されている割合です。 -
function：
コード内の関数単位で実行されている割合です。
ソースのリンクをクリックすると、ソースの中でどこの処理が通っているかを確認することができます（注：2014年7月時点ではIEでは正しく動作しなかったため、Google Chromeで動作させています）。
Storeタブは、StoreReportボタンを押下することでカバレッジ取得結果を保存することができます。保存先は、サーバ起動オプション「--report-dir」で指定したディレクトリに保存されます。そこに保存されたjscoverage.htmlを表示すると、現状表示されている結果と同じ処理結果が表示されます。
