sinonを使ったjavascriptのテスト

前回でjavascriptの開発環境もできたので, いざコーディング！

･･･まではよかったのだが･･･

ここで課題が2つ.

1. テスト(特に通信系)どう書くの？

2. コーディング規約は？

とりあえず普通のテストはいいとして…通信…Mock？
とか調べてたら出てきたのが Sinon.js
ライブラリのように使え, いろいろと内蔵しているじゃじゃ馬
いろいろありすぎて手に負えませんorz

とりあえずjQuery.ajaxが使いたかったので, 有効そうな2つをピックアップ.

A. FakeServer
名前の通り偽者のサーバを立てる. 

var sinonTestCase = sinon.testCase({
    setUp : function() {
        this.server = sinon.fakeServer.create();
    },
    tearDown : function() {
        this.server.restore();
    },
    "test server":function () {
        this.server.respondWith("GET", "/some/article/comments.json",
                                [200, { "Content-Type": "application/json" },
                                 '[{ "id": 12, "comment": "Hey there" }]']);
        var callback = sinon.spy();
        jQuery.getJSON("/some/article/comments.json", callback);
        this.server.respond();
        sinon.assert.calledWith(callback, [{ id: 12, comment: "Hey there" }]);
    },
});

TestCase("Fakeserver test case", sinonTestCase); 

これで "Fakeserver test case" という名前のテストクラスが出来上がる.
setUp でfakeServerを立ち上げ
tearDown でその偽サーバを破棄している.
偽者とはいえ通信系, 破棄しておかないと特に通しのテストの時に…
"test server" がテストクラス名. 名前は test から始めないとテストとして認識されないので注意.
sinon.fakeServer.responsedWith で偽サーバのresponseの内容を決める.
sinon.spyは仮のcallback関数. これをテストしたい関数に組み込むことで, 後々sinon.assertが使えたりする. 詳しくはAPIで
server.respond() を呼ぶことでfakeServerが応答し, 先に設定したresponseを返す.

これにより, callbackにfakeServerからの応答が入る.

あとはsinon.assertを用いてきちんと応答が受け取れたことを確認する.


…すっごい不安だ('A`)

B. Stub
あるクラスの ある関数を 一時的に置き換える
stubのよるテスト例

var sinonTestCase = sinon.testCase({

    "test with stub" : function() {
        var json = [{"hoge":"hoge","foo":"foo","bar":"bar"},
        {"hoge2":"hoge2","foo2":"foo2","bar2":"bar2"},
        {"hoge3":"hoge3","foo3":"foo3","bar3":"bar3"}];

        var stub = sinon.stub(jQuery, "ajax");
      stub.yieldsTo("success", json);
  
        jQuery.ajax({
            success: function (data) {
                assertEquals(json, data);
            }
        });
       stub.restore();
    }
});

TestCase("Stub test case", sinonTestCase);

こちらは"Stub test case"クラス.
8行目にてstubを作成, 9行目にてjQuery.ajaxというメソッドの返り値を指定している.
11行目から実際にテストしたいメソッドを呼び, 値をチェックする.

こっちのほうが使いやすい気はした(･`ω･´) (ｷﾘｯ
restore()は忘れずに.(setUp&tearDownに入れたほうがいい気がした(^ω^；).

参考：SinonAPI

明らかにAPIのが正しいのでそちらを参考に…


コーディング規約についてはまた後日…(・ω・)ノシ