JsTestDriverのJavaScriptのTDD環境の構築

前々からJavaScriptのTDD環境を構築したかったんですが、ようやく重い腰があがりました。

現在は、これで勉強中。

テスト駆動JavaScript

ひとまず、JsTestDriverのインストールをメモっておく。

環境は、Windows7です。

①Javaのインストール

だいたいのパソコンにJavaがインストールされていると思うので、詳細は割愛。

• コマンドプロンプトで、【java -version】でインストールされているか確認できる。
• もし、コマンド実行できない場合は、javaコマンドに環境変数の設定ができていないので、javaコマンドに環境変数のpathに設定する。僕が設定したフォルダは【C:\Program Files (x86)\Java\jre6\bin】。

②JsTestDriverのインストール

• 【http://code.google.com/p/js-test-driver/downloads/list】にアクセスする。
• 【JsTestDriver-1.3.4.b.jar】をダウンロード
• 適当なフォルダに配置。（僕の場合はここ→C:\pleiades\xampp\jbin）
• jarファイルの格納フォルダを環境変数に設定する。名前は【JSTESTDRIVER_HOME】とする。

③JsTestDriverの起動および動作確認

• コマンドプロンプトで、【java -jar %JSTESTDRIVER_HOME%\JsTestDriver-1.3.4.b.jar --port 4224】を実行。ポート4224は、JsTestDriverのデフォルトポートみたいです。
• 【setting runnermode QUIET】が表示されれば、OK。

 

④動作対象のブラウザを設定

• 次に任意のブラウザを起動して、【 http://localhost:4224/】にアクセスする。
• 【Capture This Browser】と【Capture This Browser in strict mode】が表示され、ひとまず、【Capture This Browser】を選択する。
• これで、テストするブラウザの指定が完了。
• 複数のブラウザでテストする場合は、これを繰り返す。

 

⑤動作確認

• 設定ファイルを準備する。保存場所はどこでもよいです。ただし、srcフォルダとtestフォルダは、設定ファイルの場所から相対パスで指定すること。src配下がプロダクトコード置き場。test配下がテストコード配下。

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

• テストコードを準備する

TestCase("convert_test", {
    setUp: function(){
        this.str = "aaa";
    },

    tearDown: function(){
        delete this.str;
    },

    "test convertNG": function(){
        var result = this.str.convert();
        assertString(result);
        assertEquals("AAA", result);
    },
}); 

• プロダクトコードを準備する

String.prototype.convert = function convert(){
    return this.toUpperCase();
};

• 今回は、指定された文字列を大文字変換するだけの簡単なコード。
• コマンドプロンプトを起動して、設定ファイルが格納されているフォルダに移動して、【C:\pleiades\xampp\htdocs\jstest>java -jar %JSTESTDRIVER_HOME%\JsTestDriver-1.3.4.b.jar --tests all】を実行する。
• 結果はこんな感じ。