07.単体テスト
Last modified by kashi on 2015年01月28日, 19:15
チュートリアル目次
このページでは、QUnit 1.8.0 を使用しています。
QUnitは https://github.com/jquery/qunit/tags からダウンロードできます。
QUnitは https://github.com/jquery/qunit/tags からダウンロードできます。
概要
ロジックで複雑な処理を実装する場合等、JavaScriptでも単体テストを行っておくことが、品質担保に効果的です。
JavaScriptの単体テストツールは、JSUnitやQUnit、JSSpecなど様々なものがあります。
hifiveでは、
- 非同期処理を含め、一通りのことが実行可能。
- 簡単で使いやすい。
- jQueryでも採用されている。
といった理由でQUnitを採用しています。
QUnitの導入・テスト実施方法
- qunit.jsと、qunit.cssをダウンロードします。
- テストしたいページに、qunit.jsとqunit.cssを含めます。
- 2.のHTMLにテストケースを記述します。
- 3.のHTMLファイルを開くと、テストが開始され結果が表示されます。
基本構文
以下にQUnitを利用する際のサンプルコードを示します。なお、このサンプルコードは
http://docs.jquery.com/QUnit#source を参考としています。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
<!--QUnitスタンドアロンで実行可能-->
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
<script>
// モジュールに所属しないテスト
test("a basic test example", function(){
ok(true, "this test is fine");
var value = "hello";
equal("hello", value, "We expect value to be hello");
});
module("Module A"); // モジュール"Module A"の定義
test("first test within module", function(){ // モジュール"Module A" のテスト
ok(true, "all pass");
});
module("Module B"); // モジュール"Module B"の定義
test("some other test", function(){ // モジュール"Module B" のテスト
expect(2); // このテスト関数内部では2つの成功があればOK
equal(true, false, "failing test"); // ここで失敗する為、成功数が足りずexpect()は失敗
equal(true, true, "passing test");
});
module("Module C");// モジュール"Module C"の定義
asyncTest("asyncTest", function(){ // モジュール"Module C" のテスト
// 時間のかかる処理を実行する
setTimeout(function(){
// 時間のかかる処理についてのアサートを行う
ok(true, "always fine");
start();
}, 100); // 100ミリ秒後にsetTimeOut()関数の第1引数である関数を実施
});
test("asyncTest by normal test", function(){ // モジュール"Module C" のテスト
stop(1); // test()で非同期のテストを実行する為、stop()関数でセマフォの数を設定する(start()を実行する回数)
// 時間のかかる処理を実行する
setTimeout(function(){
// 時間のかかる処理についてのアサートを行う
ok(true, "always fine");
start();
}, 200); // 200ミリ秒後にsetTimeOut()関数の第1引数である関数を実施
});
</script>
</head>
<body>
<!-- テスト結果を表示する領域 -->
<div id="qunit"></div>
<div id="qunit-fixture">test markup, will be hidden</div>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
<!--QUnitスタンドアロンで実行可能-->
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
<script>
// モジュールに所属しないテスト
test("a basic test example", function(){
ok(true, "this test is fine");
var value = "hello";
equal("hello", value, "We expect value to be hello");
});
module("Module A"); // モジュール"Module A"の定義
test("first test within module", function(){ // モジュール"Module A" のテスト
ok(true, "all pass");
});
module("Module B"); // モジュール"Module B"の定義
test("some other test", function(){ // モジュール"Module B" のテスト
expect(2); // このテスト関数内部では2つの成功があればOK
equal(true, false, "failing test"); // ここで失敗する為、成功数が足りずexpect()は失敗
equal(true, true, "passing test");
});
module("Module C");// モジュール"Module C"の定義
asyncTest("asyncTest", function(){ // モジュール"Module C" のテスト
// 時間のかかる処理を実行する
setTimeout(function(){
// 時間のかかる処理についてのアサートを行う
ok(true, "always fine");
start();
}, 100); // 100ミリ秒後にsetTimeOut()関数の第1引数である関数を実施
});
test("asyncTest by normal test", function(){ // モジュール"Module C" のテスト
stop(1); // test()で非同期のテストを実行する為、stop()関数でセマフォの数を設定する(start()を実行する回数)
// 時間のかかる処理を実行する
setTimeout(function(){
// 時間のかかる処理についてのアサートを行う
ok(true, "always fine");
start();
}, 200); // 200ミリ秒後にsetTimeOut()関数の第1引数である関数を実施
});
</script>
</head>
<body>
<!-- テスト結果を表示する領域 -->
<div id="qunit"></div>
<div id="qunit-fixture">test markup, will be hidden</div>
</body>
</html>
非同期通信を行う場合
- stop()関数で一時的にテストを停止し、非同期通信の結果が帰った関数の中でstart()関数を実行し、テストを再開します。
test("asyncTest", function(){
stop(1); // 非同期処理完了後に呼ぶstart()の回数は1回なので、セマフォに1を指定する
$.getJSON("/someurl", function(result) {// 1秒間待機する間にJSONの結果を取得
equal(result.value, "someExpectedValue"); //結果を比較する
start(); // アサーションが実行された後でテストを再開する
});
});
stop(1); // 非同期処理完了後に呼ぶstart()の回数は1回なので、セマフォに1を指定する
$.getJSON("/someurl", function(result) {// 1秒間待機する間にJSONの結果を取得
equal(result.value, "someExpectedValue"); //結果を比較する
start(); // アサーションが実行された後でテストを再開する
});
});
- stop()関数は、パラメータにセマフォの値を取ります。(未指定の場合は1が設定されます)
Timerを設定する場合
- asyncTest()関数を使ってテストを実行する例を以下に記述します。
asyncTest("asyncTest", function(){
setTimeout(function(){
// 時間のかかる処理についてのアサートを行う
equal(obj.value, expectValue);
start();
},100 /* 100ms待機する */);
});
setTimeout(function(){
// 時間のかかる処理についてのアサートを行う
equal(obj.value, expectValue);
start();
},100 /* 100ms待機する */);
});
- start();が呼ばれるまで、このテストは終了しません。この間にほかのテストが呼ばれることはありません。
- 参考:http:d.hatena.ne.jp/Jxck/20100721/1279681676
DOM操作時にAssertする場合
- DOMノードの要素を変更する簡単な例について例を示します。
test("domTest", function(){
var domtest = document.getElementById("dom_test");
equal(domtest.id, "dom_test");
domtest.setAttribute("id", "dom_test2");
notEqual(domtest.id, "dom_test");
equal(domtest.id, "dom_test2");
});
var domtest = document.getElementById("dom_test");
equal(domtest.id, "dom_test");
domtest.setAttribute("id", "dom_test2");
notEqual(domtest.id, "dom_test");
equal(domtest.id, "dom_test2");
});
次のステップ⇒チュートリアル08.ドキュメント記述・生成(JSDoc)