読者です 読者をやめる 読者になる 読者になる

プログラマーな日々

プログラマーをやっています。好きなツール:WorkFlowy、好きな言語:C#、好きなサービス:Backlog、好きなAWS:AWS Lambda。

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

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 () {
			// 第1引数がtrueか?
			ok(true, "this test is fine");

			var value = "hello";
			// 第1引数と第2引数が一致しているか?
			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>

テスト結果