2013年5月4日土曜日

JsTestDriverでUnit Test + Code Coverage

はじめに

JsTestDriverで、JavaScriptのユニットテストを実行し、htmlレポートでカバレッジを確認する方法。環境は次の通り。
  • OS: Ubuntu 12.10 (Xubuntu)
  • エディタ: gedit
  • テストランナー: JsTestDriver 1.3.5
  • テストブラウザ: Firefox 20.0
  • カバレッジ・レポーター: LCOV 1.9
アウトラインは次の通り。なお、コードの書き方については深入りしない。JsTestDriverのProject Wikiを参照のこと。
  1. 初期設定
  2. 実行準備
  3. 実行
    • パスの場合
    • 失敗してデバッグの場合
  4. カバレッジ確認

初期設定

ディレクトリ構成は下記の通りとする。jarの配置がJsTestDriverおよびカバレッジ・プラグインのインストールに相当する。プロダクトコードgreeter.jsとテストコードgreetertest.jsの内容については、Getting Started with JsTestDriverを参照のこと。
.
├─ jsTestDriver.conf
├─ src
│   └─ greeter.js
├─ test-lib
│   └─ jstestdriver
│       ├─ JsTestDriver-1.3.5.jar
│       └─ plugins
│           └─ coverage-1.3.5.jar
├─ test-output
│   └─ coverage
└─ test-src
     └─ greetertest.js

設定ファイルjsTestDriver.confの内容は次のようになる。jsの読み込み順序をコントールしたい場合など、詳細については、ConfigurationFileを参照のこと。
server: http://localhost:4224

load:
  - src/*.js

test:
  - test-src/*.js

plugin:
 - name: "coverage"
   jar: "test-lib/jstestdriver/plugins/coverage-1.3.5.jar"
   module: "com.google.jstestdriver.coverage.CoverageModule"

実行準備

ユニットテストを実行する前に、テストサーバを起動しブラウザをキャプチャする必要がある。まずテストサーバを起動するために、シェルで次のコマンド実行する。
# オプション--portをjsTestDriver.confで指定したポート番号に一致させる
$ java -jar test-lib/jstestdriver/JsTestDriver-1.3.5.jar --port 4224
続いて、ブラウザからhttp://localhost:4224/captureにアクセスする。

コマンドライン・フラグで、シェルからテストサーバを起動すると同時に、ブラウザをキャプチャすることもできる。詳細については、CommandLineFlagsを参照のこと。

実行

シェルで次のコマンドを実行する。
$ java -jar test-lib/jstestdriver/JsTestDriver-1.3.5.jar --tests all --testOutput test-output

パスの場合

テストをパスするなら、次のような結果が返ってくる。カバレッジはファイルにしか出力されない。簡易にコンソールで確認したいなら、オプション--testOutputを外しておく。
setting runnermode QUIET
Firefox: Reset
Firefox: Reset
.
Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (0.00 ms)
  Firefox 20.0 Linux: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (0.00 ms)
加えて、test-outputにテスト結果(JUnit XML形式)とカバレッジ(LCOV互換)が出力される。
  • TEST-Firefox_200_Linux.GreeterTest.xml
  • jsTestDriver.conf-coverage.dat

失敗してデバッグの場合

失敗すると、次のような結果が返ってくる。カバレッジ用と思われるLCOV.jsの出力がうるさいけれど、カバレッジ有無を簡単に切り替えられるかどうか未確認。
setting runnermode QUIET
Firefox: Reset
Firefox: Reset
F
Total 1 tests (Passed: 0; Fails: 1; Errors: 0) (1.00 ms)
  Firefox 20.0 Linux: Run 1 tests (Passed: 0; Fails: 1; Errors 0) (1.00 ms)
    GreeterTest.testGreet failed (1.00 ms): AssertError: expected "Hello World!" but was "Hell World!"
      GreeterTest.prototype.testGreet@http://localhost:4224/test/src-test/greeter_test.js:7
      runTest@http://localhost:4224/test/com/google/jstestdriver/coverage/javascript/LCOV.js:203
      TestResultIterator.prototype.runNext@http://localhost:4224/test/com/google/jstestdriver/coverage/javascript/LCOV.js:292
      InstrumentedTestCaseRunner.prototype.run@http://localhost:4224/test/com/google/jstestdriver/coverage/javascript/LCOV.js:250
      InstrumentedTestCaseRunnerPlugin.prototype.runTestConfiguration@http://localhost:4224/test/com/google/jstestdriver/coverage/javascript/LCOV.js:221

失敗したメソッドをデバッグするため、そのメソッドのみを実行するために、シェルで次のコマンドを実行する。
$ java -jar test-lib/jstestdriver/JsTestDriver-1.3.5.jar --tests GreeterTest.testGreet
デバッグするのにconsole.log()で十分なら、コマンドラインフラグに --captureConsoleを付けてテストを実行すればよい。

ブレークポイントが必要なときは、ブラウザのデバッガを利用する。そのためには、キャプチャしたブラウザのデバッガ (Firefoxなら[ツール] > [Web開発] > [デバッガ]、あるいはFireBug) を開き、ブレークポイントを設定すればよい。再度、上記コマンドを再実行すると、ブレークポイントで停止するので、デバッグできる。

console.log()にせよブラウザのデバッガにせよ、ここでもカバレッジ用のコードが挿入されて煩わしいが、カバレッジ有無を簡単に切り替えられるかどうか未確認。

カバレッジ確認

カバレッジデータjsTestDriver.conf-coverage.datの/./を/に置換しておく。本来的には不要な作業だが、置換しておかないとカバレッジのhtmlレポートがリンク切れを起こす。恐らくIssue 367と同じ問題が発生していると思われる。

htmlレポートを生成するには、シェルで下記コマンドを実行する。test-output/coverage以下に多数のファイルが生成されるが、index.htmlがエントリーポイント。genhtmlの詳細については、Linux Test Project - Coverage » lcovを参照のこと。
$ genhtml -o test-output/coverage -f test-output/jsTestDriver.conf-coverage.dat

雑感

カバレッジを測ろうとすると、出力が汚くなる。特にデバッグコードに測定用コードが挿入されてしまうのが煩わしい。簡単に切り替えられると良いのだけれど、カバレッジ有無がコマンドライン・フラグではなくて設定ファイルのようなので面倒。設定ファイルの切り替えにしようとすると、ほぼ複製になってしまう。

Issue 367のgenhtmlで生成するHTMLレポートのリンクが切れる問題は、置換してから渡すようなワンライナーで当座はしのげそう。jsTestDriverというよりLCOVの問題だけれど、変更履歴を見ると1.10では解決されていそう。
- Fixed directory prefix calculation
Linux Test Project - Coverage » lcov

0 件のコメント:

コメントを投稿