Qunit紹介
QUnit
QUnitは、コードをデバッグするための強力なJavaScriptユニットテストフレームワークです.このフレームワークはjQueryチームのメンバーによって開発され、jQueryの公式テストキットです.任意の正規JavaScriptコードQUnitでテストできます.プロジェクトの公式サイトのファイルは住所をダウンロードします
テストプログラムの作成
htmlテストページを作成し、qunit.jsとqunit.cssの2つの必要なファイルを導入します.ここで、qunit.jsはテストキットプログラムであり、qunit.cssはテストキットの結果表示のスタイルを制御するために使用される. <!--sample.html:-->
<html>
<head>
<meta charset="utf-8">
<title>QUnit basic example</title>
<link rel="stylesheet" href="./resources/qunit.css">
<script type="text/javascript" src="./resources/jquery.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="./resources/qunit.js"></script>
<script>
test( "a basic test example", function() {
var value = "hello";
equal( value, "hello", "We expect value to be hello" );
});
</script>
</body>
</html>
配置されたファイルとファイルの構造は以下の通りです.|-qunit-test
| |-sample.html
| |-resources
| | |-qunit.js
| | |-qunit.css
| | |-jquery.js
テストの結果は、qunit.jsによってページコードの<div id="qunit"></div>に出力されるように制御されます.もう1つの必須要素は<div id=""qunit-fixture""></div>である.各testの実行が完了すると、要素を変更すると自動的にリセットされます.jquery.jsの導入はjQuery構文を用いて書かれたプログラムをテストするためである.ブラウザでsample 1を開く.htmlには、次の図のような結果が表示されます.
テストフレームワーク使用説明
タイトルの下に横線があり、緑はすべての使用例が正しいことを示し、赤は少なくとも1つの使用例エラーを示しています.次は3つのcheckboxです.「Hide passed tests」をクリックすると、通過した用例をフィルタリングし、失敗した用例のみを表示できます.「Check for Globals」は、Windowsオブジェクトのtest実行前後の変化を確認するために使用され、変化が発生するとエラーが発生します.「No try-catch」は、試験用例で投げ出された異常を表示し、当選時にそのまま死なせ、選択しない場合はエラーメッセージを表示します.各テスト例について、タイトルに含まれる(x,y,z)は、z個の断言が合計であり、y個が正しいこと、x個が間違っていることを示す.
断言する
OK(truthy[,message])true であるか否かを判断する
equal(actual,expected[,message])判断actual=expected deepEqual(actual,expected[,message])判断actual==expected 例としてtest("assertion",function(){ ok( true, "true succeeds" );
ok( NaN, "NaN fails" );
equal( 0, 0, "0, 0 : equal succeeds" );
equal( "", 0, "Empty, 0: equal succeeds" );
equal( null, "", "null, empty: equal fails" );
var obj = { foo: "bar" };
deepEqual( obj, { foo: "bar" }, "Two objects can be the same in value" );
equal( "", 0, "Empty, 0: equal succeeds" );
});
同期コードのテスト
同期コードのテストには、-test(name,expected,fucntion(){...}):expcetedとはassertionの数を指す. - test( name, function(){expected(amount);...}):functionにexpected(amount)を追加し、amountはassertingの数を表します.
test()は通常のテスト例であり、デフォルトでは同期されています.これは、次から次へと実行されることを意味します.expected()の最も価値のある点はcallback関数のテストです.callback関数が何らかの理由で実行できない場合、実際の断言の数がexpected値に等しくない場合、追加のエラーメッセージが表示されます. test( "a test", 2, function() {
ok( true, "sucess" );
ok( false, "fail" );
});
test( "a test", function() {
expect( 2 );
function calc( x, operation ) {
return operation( x );
}
var result = calc( 2, function( x ) {
ok( true, "calc() calls operation function" );
return x * x;
});
equal( result, 4, "2 square equals 4" );
});
非同期コードのテスト
Ajaxリクエストまたはsettimeout()またはsestInterval()で呼び出されるメソッドには、非同期テスト関数asyncTest()を使用する必要があります. asyncTest( "asynchronous test: one second later!", function() {
expect( 1 );
setTimeout(function() {
ok( true, "Passed and ready to resume!" );
start();
}, 1000);
});
ユーザーの動作のテスト
ユーザーの動作をテストするときは、1つの関数を使用することはできません.通常、匿名の関数を使用して要素にバインドされたイベントをシミュレートする必要があります.イベントのトリガは、trigger()またはtriggerHandler()を使用して実現される.test( "div click test", 1, function() {
var $body = $( "#qunit-fixture" );
$body.bind( "click", function() {
ok( true, "body was clicked!" );
});
$body.trigger( "click" );
});
次に、keyのレコーダKeyLogger()をシミュレートし、testでイベントeventを初期化し、2回トリガしたQunitのdemoの例を示す.function KeyLogger( target ) {
if ( !(this instanceof KeyLogger) ) {
return new KeyLogger( target );
}
this.target = target;
this.log = [];
var self = this;
this.target.bind( "keydown", function( event ) {
self.log.push( event.keyCode );
});
}
test( "keylogger api behavior", function() {
var event,
$doc = $( document ),
keys = KeyLogger( $doc );
// trigger event
event = $.Event( "keydown" );
event.keyCode = 'A';
$doc.trigger( event );
$doc.trigger( event );
// verify expected behavior
equal( keys.log.length, 2, "2 key was logged" );
equal( keys.log[ 0 ], 'A', "correct key was logged" );
});
モジュール化
自分の用例の順序をより論理的にするためにmodule()関数を用いて用例をグループ化することができる.あるmodule()の後に現れるすべての使用例をグループに分けます. module( "group a" );
test( "a basic test example", function() {
ok( true, "this test is fine" );
});
test( "a basic test example 2", function() {
ok( true, "this test is fine" );
});
module( "group b" );
test( "a basic test example 3", function() {
ok( true, "this test is fine" );
});
test( "a basic test example 4", function() {
ok( true, "this test is fine" );
});
グループ化が可能であるほか、module()はテスト例から汎用コードを抽出し、オプションの2番目のパラメータで各testの実行前、後の関数を定義することもできる. module( "module", {
setup: function() {
ok( true, "one extra assert per test" );
}, teardown: function() {
ok( true, "and one extra assert after each test" );
}
});
test( "test with setup and teardown", function() {
expect( 3 );
ok( true, "test" );
});
推奨フレームワークプログラム
一番上に作成されたテストフレームワークは、学習時に作成されたdemoフレームワークです.本当に使用中は、外部から導入された方法でテスト用例の書くことに慣れやすいようにしています.以下に示すように、プロジェクトコードmyProject.jsおよびテストコードmyTests.jsは、プロジェクトに直接導入される.<!--sample-framework.html:-->
<html>
<head>
<meta charset="utf-8">
<title>QUnit basic example</title>
<link rel="stylesheet" href="./resources/qunit.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="./resources/qunit.js"></script>
<script type="text/javascript" src="./resources/jquery.js"></script>
<!-- -->
<script type="text/javascript" src="myProject.js"></script>
<!-- -->
<script type="text/javascript" src="myTests.js"></script>
</body>
</html>
<!--sample.html:-->
<html>
<head>
<meta charset="utf-8">
<title>QUnit basic example</title>
<link rel="stylesheet" href="./resources/qunit.css">
<script type="text/javascript" src="./resources/jquery.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="./resources/qunit.js"></script>
<script>
test( "a basic test example", function() {
var value = "hello";
equal( value, "hello", "We expect value to be hello" );
});
</script>
</body>
</html>
|-qunit-test
| |-sample.html
| |-resources
| | |-qunit.js
| | |-qunit.css
| | |-jquery.js
ok( true, "true succeeds" );
ok( NaN, "NaN fails" );
equal( 0, 0, "0, 0 : equal succeeds" );
equal( "", 0, "Empty, 0: equal succeeds" );
equal( null, "", "null, empty: equal fails" );
var obj = { foo: "bar" };
deepEqual( obj, { foo: "bar" }, "Two objects can be the same in value" );
equal( "", 0, "Empty, 0: equal succeeds" );
});
test( "a test", 2, function() {
ok( true, "sucess" );
ok( false, "fail" );
});
test( "a test", function() {
expect( 2 );
function calc( x, operation ) {
return operation( x );
}
var result = calc( 2, function( x ) {
ok( true, "calc() calls operation function" );
return x * x;
});
equal( result, 4, "2 square equals 4" );
});
asyncTest( "asynchronous test: one second later!", function() {
expect( 1 );
setTimeout(function() {
ok( true, "Passed and ready to resume!" );
start();
}, 1000);
});
test( "div click test", 1, function() {
var $body = $( "#qunit-fixture" );
$body.bind( "click", function() {
ok( true, "body was clicked!" );
});
$body.trigger( "click" );
});
function KeyLogger( target ) {
if ( !(this instanceof KeyLogger) ) {
return new KeyLogger( target );
}
this.target = target;
this.log = [];
var self = this;
this.target.bind( "keydown", function( event ) {
self.log.push( event.keyCode );
});
}
test( "keylogger api behavior", function() {
var event,
$doc = $( document ),
keys = KeyLogger( $doc );
// trigger event
event = $.Event( "keydown" );
event.keyCode = 'A';
$doc.trigger( event );
$doc.trigger( event );
// verify expected behavior
equal( keys.log.length, 2, "2 key was logged" );
equal( keys.log[ 0 ], 'A', "correct key was logged" );
});
module( "group a" );
test( "a basic test example", function() {
ok( true, "this test is fine" );
});
test( "a basic test example 2", function() {
ok( true, "this test is fine" );
});
module( "group b" );
test( "a basic test example 3", function() {
ok( true, "this test is fine" );
});
test( "a basic test example 4", function() {
ok( true, "this test is fine" );
});
module( "module", {
setup: function() {
ok( true, "one extra assert per test" );
}, teardown: function() {
ok( true, "and one extra assert after each test" );
}
});
test( "test with setup and teardown", function() {
expect( 3 );
ok( true, "test" );
});
<!--sample-framework.html:-->
<html>
<head>
<meta charset="utf-8">
<title>QUnit basic example</title>
<link rel="stylesheet" href="./resources/qunit.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="./resources/qunit.js"></script>
<script type="text/javascript" src="./resources/jquery.js"></script>
<!-- -->
<script type="text/javascript" src="myProject.js"></script>
<!-- -->
<script type="text/javascript" src="myTests.js"></script>
</body>
</html>