QUnitでJavaScriptのUnitTest

概要

JavaScriptのテストフレームワークであるQUnitの導入について説明します。

インストール

https://github.com/jquery/qunitにアクセス
ZIPボタンを押下して、ソースコードの圧縮ファイルを取得する
取得したjquery-qunit-v1.2.0-4-g0712230.zip（2012/02/01現在）を任意の場所に解凍する

解凍したjquery-qunit-0712230をテスト対象を参照できる任意の位置に配置すれば準備完了です。

解凍後フォルダ構成

addons = 拡張機能
 qunit = QUnitのテスト本体
┣qunit.css
┗qunit.js
test = テストサンプル
┣headless.html
┣index.html
┣logs.html
┣logs.js
┣same.js
┣swarminject.js
┗test.js
History.md
package.json
README.md

基本的なテスト方法

qunitフォルダを任意の階層にコピー

テスト用htmlのベースとして、index.htmlをコピーして流用する。

以下の呼び出しでテストの実行
test( name, test )

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("レイヤー表示テスト")

サンプル

ファイル構成
QunitTest
│
├─qunit
│ qunit.css
│ qunit.js
│
└─test
changeListDisabled.js
swarminject.js
sampleTest.html
testChangeListDisabled.js

sampleTest.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>QUnit Test Suite</title>
	<link rel="stylesheet" href="../qunit/qunit.css" type="text/css" media="screen">
	<script type="text/javascript" src="../qunit/qunit.js"></script>
	<script type="text/javascript" src="./changeListDisabled.js"></script>
	<script type="text/javascript" src="./testChangeListDisabled.js"></script>

	<script src="swarminject.js"></script>
</head>
<body>
	<h1 id="qunit-header">QUnit Test Suite</h1>
	<h2 id="qunit-banner"></h2>
	<div id="qunit-testrunner-toolbar"></div>
	<h2 id="qunit-userAgent"></h2>
	<ol id="qunit-tests"></ol>
	<div id="qunit-fixture">test markup</div>
	<hr />
	<h3>以下はテスト用データ</h3>
	<form name="frm1">
		<input type="checkbox" name="chk1" value="1" />チェックボックス1 <br/>
		<input type="checkbox" name="chk1" value="2" />チェックボックス2 <br/>
		<input type="checkbox" name="chk1" value="3" />チェックボックス3 <br/>
	</form>
</body>
</html>

実装コード：changeListDisabled.js

function changeListDisabled(list, isDisable){
	for (var i =0; i<list.length;i++) {
		list[i].disabled = isDisable;
	}
}

テストコード：testChangeListDisabled.js

module("module changeListDisabled");

test("test changeListDisabled disabled=trueに設定", function() {
	changeListDisabled(document.getElementsByName('chk1'),true);
	
	var list = document.getElementsByName('chk1');
	var disabled;
	for (var i=0;i<list.length;i++) {
		disabled = document.getElementsByName('chk1')[i].disabled;
		equal(disabled, true, "チェックボックスchk1[" + i + "]のdisabledは" + disabled);
	}
});

test("test changeListDisabled disabled=falseに設定", function() {
	changeListDisabled(document.getElementsByName('chk1'),false);
	
	var list = document.getElementsByName('chk1');
	for (var i=0;i<list.length;i++) {
		disabled = document.getElementsByName('chk1')[i].disabled;
		equal(disabled, false, "チェックボックスchk1[" + i + "]のdisabledは" + disabled);
	}
});