js-test-driverでのテストの書き方
では、早速js-test-driverでテストを書いていきましょう。まず、js-test-driverのテストを実行するには、テストコードやプロダクトコードの置き場所などを記述した設定ファイルが必要です。設定ファイルはデフォルトでは「JsTestDriver.jstd」というファイル名で作成し、YAML形式で記述します（リスト1）。
server: http://localhost:8888 load: - js/*.js - test/*.js
設定ファイルには、表1のような値を設定することができます。
| パラメータ | 概要 |
|---|---|
| server | サーバのデフォルトのURL。この値は、実行時のコマンドラインオプションで上書きできる |
| load | テストを実行する前に、ブラウザにロードするファイルのリスト |
| test | 実行するテストが書かれているファイル |
| serve | cssなど、静的に読み込む必要があるファイル |
| exclude | 読み込みを除外するファイル |
| plugin | 読み込むプラグイン |
| timeout | タイムアウト時間（秒） |
テストコードの記述
テストコードは、js-test-driverに用意されているテスティングフレームワークを使用します。後述しますが、プラグインを使用することでその他のテスティングフレームワークも使用できます。
TestCaseメソッドを使って記述します（リスト2）。第1引数にテストの名前、第2引数にテストの内容を連想配列として記述していきます。連想配列のキーがテストのメッセージに、値がテストメソッドになっています。キーのテストメッセージは、「test」で始まる必要があります。連想配列のキーをsetUpにすると、テストコード実行前に処理されるコード、tearDownにすると、テストコード実行後に処理されるコードを記述することができます。
今回は、fizzbuzzのテストを行ってみました。リスト3は、そのプロダクトコードです。
TestCase('FizzBuzzTest', {
// テスト前の初期処理
setUp: function() {
},
// テスト後の初期処理
tearDown: function() {
},
'test 3の場合はFizzが返ってくる': function() {
assertEquals(fizzbuzz(3), 'Fizz');
},
'test 5の場合はBuzzが返ってくる': function() {
assertEquals(fizzbuzz(5), 'Buzz');
},
'test 15の場合はFizz,Buzzが返ってくる': function() {
assertEquals(fizzbuzz(15), 'Fizz,Buzz');
},
'test 3と5の倍数以外は、数字が返ってくる': function() {
assertNotEquals(fizzbuzz(1), 'Fizz');
assertNotEquals(fizzbuzz(1), 'Buzz');
assertEquals(fizzbuzz(1), 1);
assertEquals(fizzbuzz(7), 7);
assertEquals(fizzbuzz(13), 13);
}
});
var fizzbuzz = function(n) {
if (n % 3 === 0 && n % 5 === 0){
return "Fizz,Buzz";
}else if (n % 3 === 0){
return "Fizz";
}else if (n % 5 === 0){
return "Buzz";
}else{
return n;
}
}
主なアサーションメソッドは以下のとおりです。その他のアサーションメソッドは、プロジェクトページのWikiを参照してください。
| アサーションメソッド | 否定アサーションメソッド | 概要 |
|---|---|---|
| assertEquals(メッセージ, 期待値, 処理結果の値) | assertNotEquals(メッセージ, 期待値, 処理結果の値) | 期待値と処理値が同じであるか |
| assertTrue(メッセージ, 処理結果の値) | assertFalse(メッセージ, 処理結果の値) | 処理結果の値がtrueであるか |
| assertNull(メッセージ, 処理結果の値) | assertNotNull(メッセージ, 処理結果の値) | 処理結果の値がNullであるか |
| assertUndefined(メッセージ, 処理結果の値) | assertNotUndefined(メッセージ, 処理結果の値) | 処理結果の値がUndefinedかどうか |
| assertException(メッセージ, コールバック, エラー内容) | assertNoException(メッセージ, コールバック) | コールバックを実行時にExceptionが発生するか |
| assertTypeOf(メッセージ, 型, 処理結果の値) | - | 処理結果の値が指定した型であるか |
| assertMatch(メッセージ, 正規表現, 処理結果の値) | - | 処理結果の値が指定した正規表現にマッチングしているか |
| assertInstanceOf(メッセージ, コンストラクタ, 処理結果の値) | assertNotInstanceOf(メッセージ, コンストラクタ, 処理結果の値) | 処理結果の値のオブジェクトが指定したコンストラクタのオブジェクトか |
プロセスの起動
では、作成したテストを実行してみましょう。js-test-driverは、Javaで動作します。Javaをインストールした上で、プロジェクトページの「Downloads」からjs-test-driver-1.3.5.jarをダウンロードします。
プロセスを起動します。プロセスの起動は、Javaを使用するため、コマンドで行います（リスト4）。起動ポートはオプションで変更することができます。ここでは、8888を指定しています。
java -jar [jarが存在するパス]/js-test-driver-1.3.5.jar --port 8888
テストの実行
続いて、立ち上げたサーバにブラウザでアクセスします。http://localhost:8888/にアクセスしてみましょう。図2-1のような画面が表示されます。「Capture This Browser」リンクをクリックすると、図2-2のようなページが表示され、サーバとブラウザが接続し、テストが実行される準備が整います。
サーバプロセス起動処理とは別のターミナルを起動し、テストコマンドを実行します。すると、サーバプロセスに接続しているすべてのブラウザでテストが実行され、結果が表示されます（リスト5）。今回は、ChromeとInternet ExplorerとFirefoxでサーバへ接続してみました。それぞれのブラウザでテストが実行されたことがメッセージとして出力されます。
cd [JsTestDriver.jstdが置かれているディレクトリ]
java -jar [jarが存在するパス]/js-test-driver-1.3.5.jar --config ./JsTestDriver.jstd --tests all
setting runnermode QUIET
............
Total 12 tests (Passed: 12; Fails: 0; Errors: 0) (4.00 ms)
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko Windows:Run 4 tests (Passed: 4; Fails: 0; Errors 0) (4.00 ms)
Firefox 29.0 Windows: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (1.00 ms)
Chrome 35.0.1916.153 Windows: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3739.00 ms)
［エラーの場合］
FF......F...
Total 12 tests (Passed: 9; Fails: 3; Errors: 0) (2.00 ms)
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko Windows:
Run 4 tests (Passed: 3; Fails: 1; Errors 0) (1.00 ms)
FizzBuzzTest.test 3の場合はFizzが返ってくる failed (1.00 ms): AssertError: expected "Fizz" but was "Fizzs"
AssertError: expected "Fizz" but was "Fizzs"
at test 3の場合はFizzが返ってくる (http://localhost:8888/test/test/test-sample.js:9:5)
Firefox 29.0 Windows: Run 4 tests (Passed: 3; Fails: 1; Errors 0) (2.00 ms)
FizzBuzzTest.test 3の場合はFizzが返ってくる failed (1.00 ms): AssertError: expected "Fizz" but was "Fizzs"
["test 3の場合はFizzが返ってくる"]@http://localhost:8888/test/test/test-sample.js:9
Chrome 35.0.1916.153 Windows: Run 4 tests (Passed: 3; Fails: 1; Errors 0) (0.00 ms)
FizzBuzzTest.test 3の場合はFizzが返ってくる failed (0.00 ms): AssertError: expected "Fizz" but was "Fizzs"
Error: expected "Fizz" but was "Fizzs"
at Object.TestCase.test 3の場合はFizzが返ってくる (http://localhost:8888/test/test/test-sample.js:9:18)
