2010年09月01日

jQueryのテストフレームワーク「QUnit」

jQueryのテストフレームワーク「QUnit」を使ってみました。

QUnitプロジェクト
QUnit ソースコード

まずはgithubよりソースコードをダウンロードします。

ダウンロードしたファイルで利用するのは「qunit.js」と「qunit.css」。
次のようにダウンロードせずに直接githubから参照することも出来る。

<link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>


QUnitでは次のようにテストを行います。

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


testメソッドの第1引数にテスト名、第2引数にテストケースを含めた関数を定義します。

テストの出力用に次のようなHTMLを追加しておきます。

<h1 id="qunit-header">QUnit example</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>


テスト時は次の3つのアサーションが利用できます。

ok(true , "this test is fine");


okメソッドでは第1引数がtrueの場合にテストが通りfalseの場合テストに通りません。第2引数にメッセージが定義できます。

equals(value , "helo", "We expect value to be hello");


equalsメソッドでは第1引数と第2引数が等しい場合にテストに通ります。第2引数にメッセージが定義できます。


same(value , "helo", "We expect value to be hello");


sameメソッドはequalsメソッドより厳格には第1引数と第2引数が等しいかチェックします。(値だけではなく型まで同じかどうか確認)

アサーション以外にも次のようなメソッドでテストが制御できます。

expect( 数値) : 


expectはtestメソッド中で実行されているアサーションの数が指定できます。第2引数にメッセージが定義できません。


module("Module");


moduleメソッドでは続くテストの名前を付けることが出来ます。setupとteardownの関数をリセットしてくれる効果もあります


module("Module B",{
setup:function(){
hoge1=100
},
teardown:function(){
hoge1=0
}
});


setupとteardownの関数は次のように定義できます。(teardownが良くわかってない)

次のサイトが非常に詳しく解説されていてわかりやすかったです。

[JavaScript][jQuery][QUnit]QUnitの基本的な使い方

タグ:QUnit
posted by ねこまんま at 06:03 | Comment(1) | TrackBack(0) | jQuery | 更新情報をチェックする
この記事へのコメント
こんにちは!
今回はおしらせ?をしたくなったのでします(宣伝ではありません)。
えーと、equalsメソッドは2009年から非推奨となったらしいです。sameも同様です。もしみてくださったのなら、直した方がよいとおもいます。
Posted by ぱんだ at 2013年01月03日 00:46
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/161179546
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック