2014年07月30日

QUnit入門

JavaScriptテストフレームワークの「QUnit」について解説します。

まずはQUnitのJSファイルとCSSファイルを読み込みます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.14.0.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="http://code.jquery.com/qunit/qunit-1.14.0.js"></script>
<script>
//コード
</script>
<script>
//テストコード
</script>
</body>
</html>


以下、コードとテストコードの別けて解説していきます。

QUnitではQUnit.test( )でテストを定義できます。第1引数にテストの名前、第2引数にコールバック関数としてテストの内容を記述します。

QUnit.test( "hello test", function( assert ) {
assert.ok( 1 == "1", "Passed!" );
});


コールバック関数内ではassertオブジェクトを利用できます。

assert.ok()では第1引数でstate(boolean値に変換されたもの)、第2引数にメッセージを指定できます。

以下のサンプルでは最初に2つのassert.ok( )以外は失敗を返します。

QUnit.test( "hello test", function( assert ) {
assert.ok( true, "true succeeds" );
assert.ok( "non-empty", "non-empty string succeeds" );
assert.ok( false, "false fails" );
assert.ok( 0, "0 fails" );
assert.ok( NaN, "NaN fails" );
assert.ok( "", "empty string fails" );
assert.ok( null, "null fails" );
assert.ok( undefined, "undefined fails" );
});


他にもassert.deepEqual()で第1引数と第2引数に与えられたオブジェクトが同一の値を持つか確認したり、

QUnit.test( "deepEqual test", function( assert ) {
var obj = { foo: "bar" };
assert.deepEqual( obj, { foo: "bar" }, "Two objects can be the same in value" );
});


assert.equal()で値が同じかどうか確認できます。

QUnit.test( "equal test", function( assert ) {
assert.equal( 0, 0, "Zero, Zero; equal succeeds" );
assert.equal( "", 0, "Empty, Zero; equal succeeds" );
assert.equal( "", "", "Empty, Empty; equal succeeds" );
assert.equal( "three", 3, "Three, 3; equal fails" );
assert.equal( null, false, "null, false; equal fails" );
});


expect()でテストの回数を指定できます。expect( 2 )と指定すると2回assertがsuccessを返さなければ失敗とみなします。

QUnit.test( "a test", function( assert ) {
expect( 2 );
function calc( x, operation ) {
return operation( x );
}
var result = calc( 2, function( x ) {
assert.ok( true, "calc() calls operation function" );
return x * x;
});
assert.equal( result, 4, "2 squared equals 4" );
});


イベントの確認はtriggerを利用して確認。

QUnit.test( "a test", function( assert ) {
expect( 1 );
var $body = $( "body" );
$body.on( "click", function() {
assert.ok( true, "body was clicked!" );
});
$body.trigger( "click" );
});


非同期のテストはQUnit.asyncTest()QUnit.start()を利用する。

QUnit.asyncTest( "asynchronous test: one second later!", function( assert ) {
expect( 1 );
setTimeout(function() {
assert.ok( true, "Passed and ready to resume!" );
QUnit.start();
}, 1000);
});




タグ:テスト QUnit test
posted by ねこまんま at 20:20 | Comment(0) | TrackBack(0) | test | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

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

この広告は180日以上新しい記事の投稿がないブログに表示されております。