イマドキのIDE事情(167) 手軽に導入!JS Test DriverでJavaScriptをテストしてみよう

JS Test Driverとは?

JS Test DriverはオープンソースのJavaSscript用テスティングフレームワークで、Googleによって開発されたものだ。ブラウザを制御してテストを実行するサーバ(複数のブラウザを制御可能)と、そのサーバと通信するクライアントからなり、コマンドラインから実行できるためCIとも組み合わせることが可能だ。

図1:JS Test Driverのアーキテクチャ(JS Test DriverのWebサイトより)

また、コマンドラインから実行するだけでなく、IDE用のプラグインも用意されている。今回はこのJsTestDriverについて見ていきたい。

JS Test DriverでJavaScriptをテストしてみる

はじめに基本的なコマンドラインでの利用方法から見ていこう。まずダウンロードページからJsTestDriver-x.x.x.jar(x.x.xの部分はバージョンによって異なる。本稿執筆時点では1.3.5)をダウンロードする。ここではテスト対象として以下のようなディレクトリ構成のJavaScriptプロジェクトがあるものとする。

+-JsTestDriver-1.3.5.jar(ダウンロードしたjarファイル)
|
+-JsTestDriver.conf(JSTestDriverの設定ファイル)
|
+-src/
|  |
|  +-HelloWorld.js(テスト対象のJavaScriptファイル)
|
+-test/
   |
   +-HelloWorldTest.js(テストケース)

それぞれのファイルの内容は以下の通りだ。

JsTestDriver.conf(JsTestDriverの設定ファイル)

server: http://localhost:4224
load:
  - src/*.js
  - test/*.js

src/HelloWorld.js(テスト対象のJavaScriptファイル)

function hello(name){
  return 'Hello ' + name + '!';
}

test/HelloWorldTest.js(テストケース)

TestCase('HelloWorldTest', {
  'test hello': function() {
    assertEquals('Hello Naoki!', hello('Naoki'));
  }
});

実際にテストを実行してみよう。コマンドラインから以下を実行してサーバを起動する。

> java -jar JsTestDriver-1.3.5.jar --port 4224

続いてテストを行うブラウザでhttp://localhost:4224にアクセスすると以下のような画面が表示されるので「Capture This Browser」をクリックする。

図2:テストを行うブラウザのキャプチャ

以下のような画面になったらテストの準備は完了だ(ここで複数のブラウザをキャプチャしておくことで同時に複数のブラウザでテストを実行することができる)。

図3:テストの準備ができたところ

コマンドラインから以下のコマンドでテストを実行することができる。

> java -jar JsTestDriver-1.3.5.jar --test all

テストが実行されると以下のように表示され、テストが成功したことがわかる。

setting runnermode QUIET
.
Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (1.00 ms)
  Firefox 22.0 Windows: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (1.00 ms)

JsTestDriverでは単純なアサートだけでなく、テスト用のDOMツリーを定義したり、console.log()で出力したログを標準出力に表示する機能やカバレッジを取得する機能などがある。

また、プロジェクトの構成や依存するJavaScriptファイルのインポート等についてはJsTestDriver.confの設定で柔軟に対応することが可能だ。詳細についてはJsTestDriverのプロジェクトサイトにあるWikiを参照して欲しい。

プラグインでIDE上からの利用も可能

JS Test DriverにはEclipse上でテストを実行するためのプラグインも用意されており、以下の更新サイトからインストールすることができる。

http://js-test-driver.googlecode.com/svn/update/

ここでは前述の構成のプロジェクトがEclipse上のワークスペース内にインポートされているものとする(ただし、jarファイルはEclipseプラグインに含まれているため不要だ)。

プラグインのインストール後、まず設定画面でサーバのポート番号やテストの実行に使用するブラウザのパスを指定する。

図4:JsTestDriverプラグインの設定

JsTestDriverビューを開き、ビューの右上に配置されているアイコンからサーバを起動後、テストを実行したいブラウザのアイコンをクリックするとキャプチャされ、準備状態となるのでテストケースを右クリックして「Run As」→「Js Test Driver Test」を選択するとテストが実行され、結果が表示される。

図5:JsTestDriverビュー

図6:テスト結果が表示されたところ

このようにEclipseプラグインを使用することでIDE上から直接テストを実行できるうえ、結果をグラフィカルに確認することができ便利だ。コーディングにEclipseを使っているのであればこちらを使用するといいだろう。また、Eclipseの他にIntelliJ用のプラグインも提供されている。近年Web開発用途にはRubyMineやWebStormといったIntelliJベースのIDEが人気を集めているが、これらを使用している方も是非試してみて欲しい。

まとめ

近年Web開発におけるJavaScriptの重要性は増すばかりだ。そのためJavaScriptのテスト技法も注目を集めるようになってきている。JsTestDriverは導入が容易なうえ、CIに組み込むことも可能だ。JavaScriptのユニットテストを行いたいが、どのツールを使えばよいかわからないという方は、まずは気軽にJsTestDriverを試してみてはどうだろうか。