« Google Earth on Google Maps | メイン | Amazon.comの本をGoogle Maps風に閲覧する"Zoomii.com" »

jQueryのテスティングフレームワークQUnit

jQueryのSubversionリポジトリにtestフォルダがあって、jQuery自身のテストが納められていたのですが、そこで使われているテスティングフレームワークがQUnitとしてトップレベルのプロジェクトになったようです。

QUnit - jQuery JavaScript Library

これを使うと簡単にjQueryプラグインのテストコードが書けちゃいます。

使い方は以下の通り。

提供されているメソッド

test( name, test ) : nameにテストの名称、testには実行するテストを関数の形で渡します。

module( name ) : テストの途中で、テスト対象のモジュールや関数の目印を付けたいときに使います。nameにはモジュールの名称を渡します。

ok( state, message ) : stateがtrueならOK、falseならNGという判定になります。messageはテスト時に表示するメッセージです。

equals( actual, expected, message ) :actualとexpectedが同値ならOK、異なればNGという判定になります。messageは同上。

expect( amount ) : そのテスト(text(name,test)で引数に指定しているテスト関数)の中で実行されているok()/equals()の数をamountに指定します。テストの数が異なれば、エラーが表示されます。

start( ) : テストを再開します。

stop( ) : テストを中断します。Ajaxで非同期通信等のテストを行うとき、非同期処理前にstop()でテストを止め、非同期処理終了時のコールバック関数内でstart()を実行して、テストを再開します。

サンプル

実際のテストケースを見た方が早いと思うので、以下にQUnitのページで紹介されているサンプルコードを掲載します。

test("a basic test example", function() {
  ok( true, "this test is fine" );
  var value = "hello";
  equals( "hello", value, "We expect value to be hello" );
});

module("Module A");

test("first test within module", function() {
  ok( true, "all pass" );
});

test("second test within module", function() {
  ok( true, "all pass" );
});

module("Module B");

test("some other test", function() {
  expect(1);
  ok( true, "well" );
});

このテストの実行結果はこちらのページで確認できます。

テスト結果の行の最後の3つの数字は、それぞれ「エラー数」「成功数」「テスト総数」を意味しています。

結果の行をクリックすると、各テストのメッセージが表示されます。エラーが発生していた場合は、ここで、どのAssertでエラーが発生したかが分かります。

ということで、上記サンプルをちょっといじって、エラーが発生するパターンのページを作ってみました。

こちらでご確認ください。

equalsでエラーが発生した場合は、期待値と実際の処理結果の値が画面に表示されます。

非常にシンプルなフレームワークなので、さくっとテストを書くことができて便利です。

QUnitの基本的なHTMLは以下のようになります(DLはこちらから)。下記のページに、テストしたいjsを読み込んで、テストコードを書けばOKです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>QUnit sample</title>
        <script src="http://code.jquery.com/jquery-latest.js">
        </script>
        <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/qunit/testsuite.css" type="text/css" media="screen" />
        <script type="text/javascript" src="http://dev.jquery.com/view/trunk/qunit/testrunner.js">
        </script>
        <script type="text/javascript">
            $(function(){
                try {
                    //ここにテストを記述
                } 
                catch (e) {
                }
            });
        </script>
    </head>
    <body>
        <h1>QUnit example</h1>
        <h2 id="banner"></h2>
        <h2 id="userAgent"></h2>
        <ol id="tests">
        </ol>
        <div id="main">
        </div>
    </body>
</html>

テストケースを、どのように書いたら良いか分からない方は、本家のjQuery自身のテストケースを見てみることをおすすめします。以下にテストJavaScriptコードのリンクをいくつか紹介します。