QUnitでJSのユニットテストを書く

JavaScriptでユニットテストしたい！と思って探していたら、QUnit（http://docs.jquery.com/Qunit）というのがjQueryに存在した。

基本的な使い方は、各ファイルをHTMLで読み込んでおいて、ブラウザで読み込むのみ。

初期状態はこんな感じ。bodyの部分は、テスト結果の出力用なのでこのまま書く。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
<link href="http://code.jquery.com/qunit/git/qunit.css" rel="stylesheet" />
</head>
<body>
<h1 id="qunit-header">QUnit example</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, will be hidden</div>
</body>
</html>

ここに、まずはテストされるJavaScriptを読み込む。
テストされるJSは、今回は下記のようなものにした。
今回はモジュールっぽく書いているが、別にこの形にこだわる必要はない

mypackage.js。テストを失敗させたいので、あえてバグを入れてある

myPackage = {};
myPackage.myModule = function() {
    return {
        // 文字列の中の0の個数を数える
        myFunction : function(text) {
            index = 0;
            count = 0;
            while ((index = text.indexOf("0")) !== -1) {
                text = text.substring(++index);
                count++;
            }
            return count;
        }
    };
}();
myPackage.anotherModule = function() {
    return {
        // 文字列の中の０と0の数を数える
        myFunction : function(text) {
            // ここにバグがある（うっかり全て置換しないのでテストがNGになる）
            text = text.replace("０", "0");
            return myPackage.myModule.myFunction(text);
        }
    };
}();

テストコードを書く。module の部分はただの区切りと思って良いだろう。

mypackage-test.js。

$(function() {
    module("myPackage.myModule.myFunction");
    test("testMyFunction", function(){
        equal(myPackage.myModule.myFunction("0"), 1, "0");
        equal(myPackage.myModule.myFunction("01"), 1, "01");
        equal(myPackage.myModule.myFunction("010"), 2, "010");
        equal(myPackage.myModule.myFunction("01０"), 1, "01０");
    });
    module("myPackage.anotherModule.myFunction");
    test("testAnotherMyFunction", function(){
        equal(myPackage.anotherModule.myFunction("0"), 1, "0");
        equal(myPackage.anotherModule.myFunction("01"), 1, "01");
        equal(myPackage.anotherModule.myFunction("010"), 2, "010");
        equal(myPackage.anotherModule.myFunction("01０"), 1, "01０");
        // 最後の全角０は半角に変換されないのでエラーになる
        equal(myPackage.anotherModule.myFunction("０1０"), 2, "０1０");
    });
});

これらをまとめて読み込むだけだ。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
<link href="http://code.jquery.com/qunit/git/qunit.css" rel="stylesheet" />
<!-- まとめて読み込む -->
<script type="text/javascript" src="mypackage.js"></script>
<script type="text/javascript" src="mypackage-test.js"></script>
</head>
<body>
<h1 id="qunit-header">QUnit example</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, will be hidden</div>
</body>
</html>

テストしたいブラウザで読み込むとこのとおり。

tetsunosukeのnotebook

tetsunosukeのメモです

QUnitでJSのユニットテストを書く