スーパー簡単 YUI で JavaScript ユニットテスト

JavaScript Yahoo UI

Yahoo UI を使うと JavaScript のユニットテストが非常に簡単にできます。
サンプルは、以下のページを参考にして書いたものです。※１


Getting Started with JavaScript Unit Testing and YUI Test


用意するものは以下の３つ

  • テスト対象の JS ファイル
  • テストを書いた JS ファイル
  • テストを実行する HTML ファイル

ここでは上から、簡単な足し算をする add.js、add-test.js、unittest.html を用意しました。


add.js

/**
 * 簡単な足し算関数。arg1 と arg2 の合計を返す。
 * 引数が未指定又は、非数値の場合、結果は NaN になる。
 */
function add(arg1, arg2) {
  arg1 = arg1 ? arg1 : NaN;
  arg2 = arg2 ? arg2 : NaN;
  if(isNaN(arg1) || isNaN(arg2)) return NaN;
  return Number(arg1) + Number(arg2);
}

add.js は見てのとおり、単純に足し算をする関数です。


add-test.js

/*
 * add()関数のテスト
 */
var testCase = new YAHOO.tool.TestCase({
    name: "add() Tests",

    testAddWithSuccesVer1: function(){
        var result = add(1, 1);
        YAHOO.util.Assert.areEqual(2, result);
    },

    testAddWithSuccesVer2: function(){
        var result = add(11, 222);
        YAHOO.util.Assert.areEqual(233, result);
    },

    testAddWithUnspecifiedOne : function(){
        var result = add(1);
        YAHOO.util.Assert.isNaN(result);
    },

    testAddWithUnspecifiedBoth : function(){
        var result = add();
        YAHOO.util.Assert.isNaN(result);
    },

    testAddWithNaN1 : function(){
        var result = add(1, "?");
        YAHOO.util.Assert.isNaN(result);
    },

    testAddWithNaN2 : function(){
        var result = add("@", 5);
        YAHOO.util.Assert.isNaN(result);
    }
});

add-test.js では YAHOO.tool.TestCase コンストラクタの引数にオブジェクトを渡して生成し、testCase に代入しています。
このオブジェクトには少なくとも、一つの name プロパティと、小文字の "test" で始まるテストメソッドを一つ以上用意します。


unittest.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>YUI で簡単ユニットテスト</title>
<!--CSS-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/logger/assets/skins/sam/logger.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/yuitest/assets/skins/sam/yuitest.css" />

<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/logger/logger-min.js&2.6.0/build/yuitest/yuitest-min.js"></script>

<!-- テスト対象JS -->
<script type="text/javascript" src="add.js"></script>

<!-- テストJS -->
<script type="text/javascript" src="add-test.js"></script>

<script type="text/javascript">
// TestCaseオブジェクトをTestRunnerに追加する
YAHOO.tool.TestRunner.add(testCase);

// onloadイベントハンドラでTestRunnerを実行する
// TestLoggerがテストの結果を出力する
window.onload = function(){
    //create the logger
    var logger = new YAHOO.tool.TestLogger("testLogger");

    //run the tests
    YAHOO.tool.TestRunner.run();
};
</script>
</head>
<body class="yui-skin-sam">

<div id="testLogger"></div>
</body>
</html>

unittest.html では yui のコードベースから CSS と JS のファイルをそれぞれインクルードしています。
これは決まり文句みたいなものですが、もちろん他のリソースをインクルードしても構いません。
そして、add.js と add-test.js をインクルードしています。
その下で、TestRunner に testCase を追加して onload イベントハンドラでそれが実行されるようにします。
onload イベントハンドラでは、logger を生成し、TestRunner を実行します。
タグは class 属性を "yui-skin-sam" にします。
ボディの中には <div> タグが一つあるだけです。
この <div> タグの id は TestLogger のコンストラクタに渡した "testLogger" です。


これをブラウザで表示すればテストが実行されます。
テストメソッドの結果は全て成功し、ログも全て "PASS" となっています。


実行結果（全て成功）


通常は、JavaScript ファイルは複数使っていると思うので、そんな場合はそのテストも TestRunner に add すれば続けて実行されます。
但し、その場合は、testCase を一意になる名前空間に宣言して、他のテストと名前が衝突しないように気をつけて下さい。


もしもテストメソッドが失敗するとその行は "FAIL" となり、失敗した理由がログに書き出されます。


実行結果（テストが失敗）※２



以上、YUI を使って JavaScript のユニットテストを簡単にやってしまおう、というお話でした。



※１ YUI のブログで説明されている CSS はレイアウトが崩れてしまうので CSS は以下のページのものを使いました。
http://developer.yahoo.com/yui/examples/yuitest/yt-simple-example.html

※２ 失敗しても赤にならない！
直感的に、成功すると緑、失敗すると赤になると期待して、"FAIL" の文字を見逃してしまわないように注意！