JsTestDriverで簡単テスト
最近、何かとJavascriptに触れる機会が多くなってきました。クライアント側としてHTML5が注目され、サーバ側としてNode.jsが発展してきたおかげですね。その一方で、Javascriptのテストほど面倒なものはありません。特に、ブラウザ上でのテストなど自動化することが時に難しかったりし ます。このブラウザ上でのテストを自動化できる仕組みがJsTestDriverです。今回はJsTestDriverの導入方法と簡単な使い方をご紹介します。
JsTestDriverとは
JsTestDriverはGoogleが作ったテストフレームワークです。導入も使い方もとても簡単であり、様々なブラウザを使ったテストを自動化することが出来ます。Javascriptのテストフレームワークは多数ありますが、その中でもJsTestDriverは簡単かつ正確なツールです。
JsTestDriverの導入
導入はとても簡単です。まず、http://code.google.com/p/js-test-driver/downloads/list から最新のJsTestDriver.jarをダウンロードします（現在は、JsTestDriver-1.3.4.b.jar）。そして、各自のホームにbinディレクトリを作成（任意の場所でも大丈夫です）し、jarファイルを配置します。例えば、
Linx or Mac: ~/bin/JsTestDriver-1.3.4.b.jar
Windows: C: ¥bin ¥JsTestDriver-1.3.4.b.jar
などおきます。そして後は、これらへのパスを通すために環境変数を設定すれば、導入は完了です。
Linux (or Mac): export JSTESTDRIVER_HOME=~/bin
Windows（コマンドライン）：set JSTESTDRIVER_HOME=C: ¥bin
Windows（環境変数を編集）：JSTESTDRIVER_HOMEを新規作成し、jarファイルのパスを設定
テストケース
今回は、sample.jsというファイルのテストをしてみます。
src/sample.js
var Sample = {
say: function() {
return 'Hello world';
},
set: function(elem) {
elem.innerHTML = this.say();
}
};
Sampleオブジェクト自体は簡単で、'Hello world'を返すメソッドと、'Hello world'をDOMのinnerHTMLに入れるメソッドを持っています。このテストケースを、JsTestDriver用に書いてみます。
test/sample.js
TestCase('SampleTest', {
setUp: function() {
this.sample = Object.create(Sample);
},
'test should return greeting': function() {
assertEquals('Hello world', this.sample.say());
},
'test should check innerHtml of DOMElement': function() {
/*:DOC += <div id="sample"></div> */
var elem = document.getElementById('sample');
this.sample.set(elem);
assertEquals('Hello world', elem.innerHTML);
}
});
JsTestDriverでは、TestCase関数を使用します。その第二引数に各テストケースをオブジェクト形式で記述します。この中では、いわゆるassert関数（assert、assertTrue、assertEquals, assertSame、…）やDOM用のassert関数（assertTagName、assertClassName、assertElementId、…）を使用します。
この中では、documentオブジェクトも使えます。さらに、DOCアノテーションがあります（test/sample.jsの11行目のコメント）。ブロックコメント内に以下のように記述することで、DOM要素を追加できる機能です。
/*:DOC += <div id="sample"></div> */
ここではdocumentオブジェクトにDIVタグが追加され、テストケース内にて使用可能となります。Javascriptのテストで最も厄介な部分を軽く記述できるあたりが、とても有り難いところです。
テスト準備
テストケースまでかけたら、テストを実行します。JsTestDriverを使う際には１つだけ前提条件があります。対象となるブラウザがインストールされていることです（自分の開発環境にブラウザは入っていますよね）。JsTestDriverはブラウザを利用してテストを実行します。そのため、テスト前に以下のことを実行し、使用するブラウザを設定します。
- サーバを起動（JARファイル）
- ブラウザをキャプチャ
まず、サーバを起動します。ここでは、先にダウンロードしてきたバイナリファイル（JsTestDriver-1.3.4.b.jar）を使用し、ポート4224番でサーバを起動します。OS毎に次のようにコマンドを実行してみましょう。
Linux (or Mac): java -jar $JSTESTDRIVER_HOME/JsTestDriver-1.3.4.b.jar --port 4224
Windows: java -jar JSTESTDRIVER_HOME ¥JsTestDriver-1.3.4.b.jar --port 4224
次に、テスト対象となるブラウザをキャプチャ（JsTestDriverから）します。テスト対象となるブラウザを起動し、http://localhost:4224 にアクセスします。
この画面にて、以下のどちらかを選択します。
Capture This Browser： 通常はこちら
Capture This Browser in a strict mode： javascriptをstrict modeで確認したい場合はこちら
リンクをクリックし、次の画面が表示されれば、テスト前の準備は終了です。
テスト実行
テストを実行するには、設定ファイルを記述（JsTestDriver.conf）します。このファイル内に、サーバ設定、ファイル読み込み設定を記述します。形式はYAMLです。
ソースとテストファイルの配置が以下のような場合、
├── JsTestDriver.conf
├── src
│ └── sample.js
└── test
└── sample.js
設定ファイルは次のようになります。
server: http://localhost:4224
load:
- src/*.js
- test/*.js
もし、依存関係がある場合、ファイルを個別に記述できます。 例えば、次のように記述すると、const.js、util.jsの順に読み込まれ、src/*.jsではそれらのファイルは読み込まれません。依存関係の解決も楽ですね。
load:
- src/const.js
- src/util.js
- src/*.js
- test/*.js
後は、以下 のコマンドでテストを実行します。コマンドは、JsTestDriver.confファイルがあるディレクトリで実行して下さい。
Linux: java -jar $JSTESTDRIVER_Home/JsTestDriver-1.3.4.b.jar --tests all
Windows: java -jar JSTESTDRIVER_Home ¥JsTestDriver-1.3.4.b.jar --tests all
すると、テストが実行され、結果が表示されます。エラーがなければ、以下の通りとなります。
setting runnermode QUIET
..
Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (1.00 ms)
Chrome 21.0.1180.89 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (1.00 ms)
このように簡単にDOMを使用できることが分かると思います。実際に自動テストを導入する際には、設計やコードの質も要求されます。そのため、逆説的になりますが、自動テストを念頭において実装を進める（もしくはテスト駆動開発を実施する）と、コードの品質も向上します。これからJavascriptで開発しようと考えている方は、ぜひ一度試してみて下さい。
