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コードのリンクをいくつか紹介します。
| 固定リンク
|
