jquery-mockjax を使って CRUD 処理をすべてテストする方法

jQuery.ajax の動作を差し替えられる jquery-mockjax プラグインは、自分にとって JavaScript での UI 開発に欠かせないプラグインになってしまった。何が気に入っているかっていうと、動的に、しかも簡単にレスポンスを変更できるところ。

以前書いた

• jquery-mockjax 使えよ色々と捗るぞ - present

では決め打ちの JSON を返していたけど、Backbone.js を使った開発では、サービス呼び出しを次のような方法でモックに差し替えてテストしている。

// テストデータ
var NEXT_ID = 1;
var PRODUCTS = [
    { id: NEXT_ID++, name: "foo" },
    { id: NEXT_ID++, name: "bar" }
];

// テストデータを返す
$.mockjax({
    url: "/products/",
    type: "GET",
	contentType: 'text/json',
    response: function() {
        this.responseText = PRODUCTS;
    }
});

// ajax で送信されてきたデータを、テストデータに追加
$.mockjax({
    url: "/products/",
    type: "POST",
	contentType: 'text/json',
    response: function(settings) {
        var newProduct = JSON.parse(settings.data);
        newProduct.id = NEXT_ID++;
        PRODUCTS.push(newProduct);
        this.responseText = newProduct;
    }
});

// ajax で送信されてきたデータで、テストデータを更新
$.mockjax({
    url: "/products/*",
    type: "PUT",
	contentType: 'text/json',
    response: function(settings) {
        var data = JSON.parse(settings.data);
        var target = _.find(PRODUCTS, function(p) { return p.id === data.id; });
        if (target) {
            target.name = data.name;
            this.responseText = target;
        } else {
            this.responseText = {};
        }
    }
});

// テストデータを削除
$.mockjax({
    url: "/products/*",
    type: "DELETE",
	contentType: 'text/json',
    response: function(settings) {
        var sepIndex = url.lastIndexOf("/");
        var strId = url.substring(sepIndex + 1);
        var targetId = Number(strId);
        PRODUCTS = _.reject(PRODUCTS, function(p) { return p.id === targetId; });
        this.responseText = {};
    }
});

CRUD 処理をすべてテストできるので、開発が非常に捗る。