バシャログ。

QUnitの概要

QUnitはjQueryプロジェクトの為のユニットテストツールです。(QUnit - ABOUTより)有名な各種xUnitフレームワークよりチェックのための関数も少なく、シンプルに書けそうな感じです。そしてなによりブラウザ上でテストが走ります。

Using QUnitを見るとテストに必要なものがわかりますが、必要なファイルは、jquery.js, QUnitのテストランナー(testrunner.js)とスタイルシート, テスト対象のコードとテストコードです。

Moneyオブジェクトの例を写経

いきなりjQueryプラグインのテストとか心臓に悪そうなので、普通のテストをやってみます。(dollar.test.js)

ちなみにこのエントリーで完成したテストランナーはTDD By Sample Test Suiteで実行することができます。

test("Multiplication", function(){
    var five = new Dollar(5);
    five.times(2);
    equals(five.amount, 10);
});

このテストコードはケント・ベック著「テスト駆動開発入門」（ピアソン・エデュケーション・2003）のMoneyオブジェクトの例をJavaScriptにしたものです。

さて、このコードをFirebugを有効にしたFirefoxで走らせると、テストは失敗し、2つのエラーになります。ただエラーになるだけでなく気の利いたメッセージを表示してくれました。

Test Multiplication died, exception and test follows
ReferenceError: Dollar is not defined message=Dollar is not defined

Dollarを実装しよう

エラーになってレッドバーが派手に表示されたことを確認したら、Dollarを実装していきます。(dollar.js)scriptタグも追加しましょう！

var Dollar = function(amount){
};

Javaのクラスの代わりにコンストラクタ関数を書くことにします。(newを付けて呼び出し、オブジェクトを生成する関数のことです)そしてまたテスト実行します

Test Multiplication died, exception and test follows
TypeError: five.times is not a function message=five.times is not a function

こんどはfive.timesが関数ではないと言われました。JavaScriptでは宣言していない変数はundefinedという値になってしまうので、こう言われてしまいます。そこでtimes関数を実装します。

var Dollar = function(amount){
};
Dollar.prototype.times = function(multiplier){
}

JavaやPHPのコードとは大分雰囲気が違いますが、これで、timesは変数Dollarに属する関数になりました。Firebugコンソールのエラーも消えたと思います。テスト結果を見てみると、、、

   1. Multiplication (1, 0, 1)
         1. failed, expected: 10 result: undefined
Tests completed in 5 milliseconds.
1 tests of 1 failed.

1つのテストのうち、1つが失敗と表示されます。最初に書いた、テストの「equals」の部分が失敗したようです。

test("Multiplication", function(){
    var five = new Dollar(5);
    five.times(2);
    equals(five.amount, 10);
});

さて、テストにパスするように実装します。

var Dollar = function(amount){
  this.amount = amount;
};
Dollar.prototype.times = function(multiplier){
  this.amount = this.amount * multiplier;
}

テストを実行すると、成功し、グリーンバーが表示されたことと思います。(さきほども紹介しましたTDD By Sample Test Suiteで実行結果を見てください。)かけ算するためのクラスが実装できました。

まとめ

今日はjQueryのユニットテストツールのQUnitを試して、テスト駆動開発入門のコードをJavaScriptでほんのちょっとだけ実装してみました。