読者です 読者をやめる 読者になる 読者になる

けさらんぱさらん

方向性は定めず、ただ思いつくままに

JasmineでjQueryのajaxメソッドのテストをする

JavaScriptのテストライブラリJasmineでテストを書いていて嵌ったのでメモ

テストしたいコードはこんな感じ

function Details() {
    this.id = 0;
    this.name = "";
}

Details.prototype.getData = function (url, id) {
    var self = this;

    $.ajax({
        url: url,
        type: "GET",
        datatype: "json",
        data: { id: id },
    }).done(function (data) {
        self.id = data.Id;
        self.name = data.Name;
    }).fail(function (message) {
        alert(message);
    });
};

まあこんな感じのよくあるjQueryを使ったAjaxでデータを取得する処理です。

このgetDataメソッドをテストしたいのですが
サーバと通信してテストするんじゃなくてモックを使って通信は無しの方向で行きたいです。

調べてみるとオプション引数のsuccessを使う例は結構あったのですが、ajax.doneメソッドを使った例はあまり無かったんですよね
ということで( ..)φメモメモ

describe("Detailsクラスは", function () {
    var details = null;

    beforeEach(function () {
        details = new Details();
    });

    afterEach(function () {
        details = null;
    });

    it("getDataを呼び出すとidとnameに値が代入される", function () {
        spyOn($, "ajax").andCallFake(
            function () {
                var d = $.Deferred();
                d.resolve({ Id: 1, Name: "test1" });
                return d.promise();
            });
        details.getData("http://test.com",1);
        expect(details.id).toEqual(1);
        expect(details.name).toEqual("test1");
    });

    it("getDataでデータの取得に失敗するとAlertが表示される", function () {
        spyOn($, "ajax").andCallFake(
            function (pos) {
                var d = $.Deferred();
                d.reject("error");
                return d.promise();
            });

        details.getData("http://test.com",1);
    });
})

ぶっちゃけまだよく分かっていないのですが上記でちゃんと動きました。
まあ失敗するテストは、ちゃんとテストにはなっていないのですが・・・一応failメソッドがちゃんと呼ばれてました。