2008年10月6日月曜日

QUnit Getting Started!

前回のエントリ JavaScript Unit Testing Frameworks では、JavaScript の Unit テストのためのフレームワークをいくつか紹介しました。今回は、その中から、jQuery 公式の Unit テストフレームワーク、QUnit 利用方法を簡単に紹介します。

QUnit は 2008/5 月に jQuery プロジェクトの top-level のプロジェクトとして開発が進められるようになったプロジェクトです。
QUnit is the unit testrunner for the jQuery project. It got promoted to a top-level project in May 2008 to make it easier to use in other projects, with focus on jQuery UI. Every plugin developer can leverage the testsuite to unit test their code. QUnit - jQuery JavaScript Library
プロジェクト採用されたのは最近ですが、既に jQuery プロジェクトの内部ソースコードのテストでは利用されている Unit Test フレームワークです。

本フレームワークは回帰テストに適しており、バグ報告が上がってきた場合は、そのバグを発生させるテストを書き、テストを通過するコードを書くことで、書き出したスクリプトの品質を向上させることができます。
また、Test Driven Development: TDD を日頃の習慣としているプログラマなら、十分なユニットテストのカバレッジを保証することで、安心してリファクタリングを進めていくことができます。
jQuery を利用する JavaScript プログラマーには大変嬉しい Unit Test フレームワークが登場した、と言えるのではないでしょうか?

jQuery は XUnit 直系のテストフレームワークではありませんが、提供している API の機能は XUnit を意識したものとなっています。QUnit から提供されている API は現在のところ、必要最低限というところですが、その分テストの基本に集中できます。
本エントリでは QUnit の基本的な利用方法を見てみることにします。

環境構築

まず、テストフレームワークを利用するための環境を構築しましょう。以下のコマンドから、testrunner.js 及び、 testsuite.css をダウンロードします。
$ cd public/javascripts
# jQuery をダウンロード (本エントリでは 1.2.6)
$ wget http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js

# testrunner.js をダウンロード
$ wget http://dev.jquery.com/view/trunk/qunit/testrunner.js

# テスト対象となるスクリプトを記述する JavaScript ファイルを生成
$ touch subjected-script.js

# サンプルテストコードを記述する JavaScript ファイルを生成
$ touch testing-example.js

# testsuite.css をダウンロード
$ cd ../stylesheets
$ wget http://dev.jquery.com/view/trunk/qunit/testsuite.css

# サンプルコードを動作させる html を生成
$ cd ../
$ touch unit-test-demo.html

Getting Started!

早速 QUnit を利用してみましょう。 API は QUnit のページ の Documentation から参照することができます。
まず、テスト対象となるスクリプトを、ここでは、 subjected-script.js というファイル名にして記述します。
function Person(name) {
this.name = name;
}
このコードをテストするコードを unit-test-demo.js というファイル名にして、記述します。
$(document).ready(function() {
// テスト対象のモジュールを記述
module("Person Constructor");
// テストする項目を記述
test("初期化時に name がセットされること", function() {
var person = new Person('Naofumi HAIDA');
equals(person.name, 'Naofumi HAIDA');
});
});
最後に、Test を走らせるための以下のような html, testing-example.html を public 直下に記述します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Js Testing Demo</title>
<link rel="stylesheet" href="/stylesheets/testsuite.css" type="text/css" media="screen" />
<script type="text/javascript" src="/javascripts/jquery-1.2.6.min.js"></script>
<script src="/javascripts/testrunner.js"></script>
<script src="/javascripts/subjected-script.js"></script>
<script src="/javascripts/unit-test-demo.js"></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>
ここまで来たら、/testing-example.html にアクセスしてみてください。
テストが通っていたら、以下のように表示されます。
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; ja-JP-mac; rv:1.9.0.3) Gecko/2008092414 Firefox/3.0.3

1. Person Constructor module: 初期化時に name がセットされること (0, 1, 1)