はじめてのQUnit

js test

JavaScriptでテストを書きたくなったので以前id:haru01が使っていたQUnitを試してみる。

とりあえず動かしてみる

QUnitのサイト(http://docs.jquery.com/QUnit)を参考にしつつとりあえず動かしてみる。

QUnitのソースをgithubから取得したのち、qunit自身のテストが書かれているqunit/test/index.htmlをブラウザで開く。

$ git clone git://github.com/jquery/qunit.git
$ open qunit/test/index.html # QUnit自身のテストをブラウザで開く

Qunit Test Caseのページが開かれて、ページ内にテスト結果がずらーっと表示されていればOK。

Hello QUnit World

次は自分でテストコードを書いてみる。

qunit/test/test.htmlを元にして以下のqunit/test/hello_test.htmlを作る。qunit.cssとqunit.jsを読み込むところとbodyの部分は元のtest.htmlをそのまま利用する。

<!DOCTYPE html>
<html>
<head>
        <title>Hello QUnit</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="hello_test.js"></script><!-- hello_test.jsを読み込む -->
</head>
<body>
        <h1 id="qunit-header">Hello QUnit</h1><!-- タイトルを変更 -->
        <h2 id="qunit-banner"></h2>
        <div id="qunit-testrunner-toolbar"></div>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>
</body>
</html>

こちらはテストコード。

// hello_test.js
function hello() {
    return "hello";
}

test("hello", function() {
    ok("hello" == hello(), "use ok");
    equals(hello(), "hello", "use equals");
    same(["hello"], [hello()], "use same"); // deep recursive comparison assertion
});

hello_test.htmlをブラウザで開いてテスト結果が表示されればOK。

まとめ

QUnitでテストを書くには以下の手順を行えば良いことが分かった。

  1. test.htmlを元にして、テスト用のhtmlファイルを作成する(hello_test.html)
  2. テスト用htmlファイルへテストコードとテスト対象コードを読み込む(hello_test.js)
  3. テスト用htmlをブラウザを開くとテストが実行され、結果がbodyへ出力される

Assertionには次の3つがある。

  • ok(trueOrFalse, "message")
  • equals(actual, expect, "message")
  • same(actual, expect, "message")

equalsとsameの違いはオブジェクトツリーを再帰的に見るか否か。

例えば下記のようなコードの場合、equalsは同じインスタンスか否かしかチェックしてくれないためテストは失敗するが、sameの場合は配列の中が同じかどうかまで見てくれるためテストは成功する。

var a = [1, 2, 3];
equals(a, [1, 2, 3]); //=> エラー
same(a, [1, 2, 3]); //=> OK