Architect's Log

I'm a Cloud Architect. I'm highly motivated to reduce toils with driving DevOps.

QUnitでJavaScriptのユニットテストを自動化する

JavaScript jQuery TDD

QUnitを使うとJavaScriptのユニットテストを自動化できます。テストには以下が必要です。

testsuite.cssのインクルード
testrunner.jsのインクルード
idが"main"のdiv

詳細はソースコードを見てください。

ソースコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QUnit sample</title>
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/qunit/testsuite.css"
	type="text/css" media="screen" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/qunit/testrunner.js">
</script>
<script type="text/javascript">
$(function () {
	try {
		// ここにテストケースを書く
		test("a basic test example", function () {
			// 第１引数がtrueか？
			ok(true, "this test is fine");

			var value = "hello";
			// 第１引数と第２引数が一致しているか？
			equals("hello", value, "We expect value to be hello");
		});
	}
	catch (e) {
	}
});
</script>
</head>
<body>
<h1>
	QUnit example</h1>
<h2 id="banner">
</h2>
<h2 id="userAgent">
</h2>
<ol id="tests">
</ol>
<div id="main">
</div>
</body>
</html>

テスト結果