2012年9月5日

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: &yen;bin &yen;JsTestDriver-1.3.4.b.jar

などおきます。そして後は、これらへのパスを通すために環境変数を設定すれば、導入は完了です。


Linux (or Mac): export JSTESTDRIVER_HOME=~/bin
Windows（コマンドライン）：set JSTESTDRIVER_HOME=C: &yen;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 &yen;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 &yen;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で開発しようと考えている方は、ぜひ一度試してみて下さい。