YUITest を使ってJavascriptの単体テストを自動化するまで（前編）

Javascriptのテストフレームワークにはいくつも種類があるが、そのなかでYUIのTestライブラリの使い方を紹介する。YUITestでテストを書くことで、それの実行から自動化までを用意に実現することができる。その一連の方法を紹介する。

テストを書く

まず大事なのはテストを書くこと。今回はサンプルとしてとてもシンプルな関数を用意する。シンプルすぎる。

target.js

/**
 * 引数を足しあわせて結果を返す
 *
 * @param {Number} operand1
 * @param {Number} operand2
 * @return {Number} sum of args
 */
var sum = function(op1, op2) {
     return op1 + op2;
}

この関数をテストしていこう。テストファーストという言葉もあるが、それは空の彼方へ置いておけばいい。いまのところは。
テストはこんなかんじになるだろう。

test.js

YUI({ loadInclude: {TestRunner: true}}).use('test', function (Y) {

     var testCase = new Y.Test.Case({

          name : 'sum() のテスト',

          setUp : function() {
          },

          tearDown : function() {
          },

          'test normal' : function() {
               Y.Assert.areSame(10, sum(2, 8), '合計は10');
          },

          testNull : function() {
               Y.Assert.isNull(sum(null, 1), '不正な引数の場合はNullが返る');
          }
     });

     // load TestCase
     Y.Test.Runner.add(testCase);
});

いきなりよくわからないキーワードが出てきてしまった。YUI? なんだそれは。まだそれはわからなくていい。大事なのは

testXXX という名前のメソッドを用意すれば、それがテストとして実行されること
’空白を含む名前' というメソッドもテストとして実行されること
Y.Assert.XXXX というAssertionsがあること
setUp, tearDown はよくあるはなし

だろう。

テストを実行する

さぁ、さっそくテストを実行しよう。実行するためのHTMLを用意してブラウザで読みこめばテストが実行される。

testRunner.html

<html>
    <head>
         <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </head>
    <body>
        <div id='log' class='yui3-skin-sam'></div>
        <script src="http://yui.yahooapis.com/3.16.0/build/yui/yui-min.js"></script>
        <script type='text/javascript'>

            // コンソール表示の設定を先にロードする
            YUI({ loadInclude: {TestRunner: true}}).use('test', 'test-console', function (Y) {
                // out puts Console
                (new Y.Test.Console({
                    newestOnTop : false,
                    filters : { pass : true, fail : true, info : true, status : true }
                })).render('#log');

                Y.Test.Runner.setName('単体テスト');
            });
        </script>

        <!-- テスト対象をロード -->
        <script src="target.js"></script>

        <!-- テストをロード -->
        <script src="test.js"></script>

        <script type='text/javascript'>
            YUI({ loadInclude: {TestRunner: true}}).use('test', 'test-console', function (Y) {
                // テスト実行
                Y.Test.Runner.run();
            });
        </script>
    </body>
</html>

YUIのライブラリをサイトから直接ロードして実行する。テスト結果を表示するコンソールは<div id=‘log’></div>に出力されるので必ず用意しよう。コンソール、テスト対象、テスト、の順にロードして最後にテストを実行だ。これをブラウザでロードしよう。

Very Good!!

見事に結果が表示されている。たった3行のコードにだってエラーがあるんだから、君が書いているコードにだってかならずエラーが潜んでいる。テストをどんどん書いてバグをどんどん潰していくんだ！まず手始めに testNull のエラーを取り除いてみよう。

より詳しい使い方は下記を参照しよう。
YUITest
http://yuilibrary.com/yui/docs/test/
コンソール
http://yuilibrary.com/yui/docs/test-console/
Assertion
http://yuilibrary.com/yui/docs/api/ Assertを検索

コマンドラインからのテスト実行

ブラウザからテストを実行することはできたが、これは少々面倒な作業だ。なにより自動化することがとても困難だ。テストを迅速に実行しそれを自動化するにはコマンドラインからテストを実行する必要があるのだ。

PhantomJS + grover

PhantomJSはコマンドから利用できるブラウザで、これを使うことでテストを実行することができる。合わせて grover というYUITest専用のPhantomJSラッパーツールを組み合わせることで簡単にコマンドラインからテストを実行出来るようなる。
それぞれは簡単にインストールすることができる

$ brew install phantomjs
$ npm install -g grover

OSがMacじゃない君は自力でインストール方法を調べてくれ。もしくはここで立ち去っても構わない。Macだけど実行できない君はHomebrew をインストールして出直して来い。
さぁPhantomJSとgroverのインストールが終わったらテストを実行しよう

$ grover testRunner.html

Fantastic!!

これでいつでも迅速にテストを実行出来るようになった。

カバレッジの測定

次はカバレッジを測定しよう。カバレッジを測定するにはテスト対象のtarget.jsを変換する必要がある。変換にはYUITestで提供されているjarを使う。https://github.com/yui/yuitest ここから java/build/yuitest-coverage.jar をダウンロードして早速変換だ。

$ java -jar yuitest-coverage.jar -o target-coveraged.js target.js

testRunner.html のテスト対象を target-coveraged.js に変えて実行すればカバレッジを測定できる。テストにエラーがあるとカバレッジを測定できないから先のエラーは直しておこう。

$ grover ―coverage testRunner.html

Terrific!!

いちいちファイルを変換するのは面倒だから一連の処理を1つのタスクとしてまとめてしまおう。

task.sh

#!/bin/sh
java -jar yuitest-coverage.jar -o target-coveraged.js target.js
grover --coverage testRunner.html

さぁこれで準備は整った。あとはこれを自動化していこう。

後編へ続く YUITest を使ってJavascriptの単体テストを自動化するまで（後編） - masayuki14 note

主夫ときどきプログラマ

データベース、Webエンジニアリング、コミュニティ、etc

YUITest を使ってJavascriptの単体テストを自動化するまで（前編）

テストを書く

テストを実行する

コマンドラインからのテスト実行

カバレッジの測定