BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)

+ Sinon.JS

BACKBONE.JSにJasmineでテストコード書いてみた
2013/10/16(水) JSテスト勉強会＠福岡第１回 LT資料
写真はWeb制作向け無料写真素材／ぱくたそ http://www.pakutaso.comを使ってます。ありがとうございます。
13年10月16日水曜日

自己紹介です
========
- twitter: @itokami1123
- 下請けやら派遣やらなんやら開発してます
- JavaEE6と会計の勉強はじめました。
- 目標
　業務系Webアプリの世界にもJavaScriptMVCを！
コミュニティの力で福岡を一つにして
　景気をよくする！(一生福岡でPGしたいっす)
　


今日の資料おかしいと思ったら
途中でビシバシ突っ込んでね！
(優しく)


BACKBONE.JSで書いていると
ソースが Model View に分かれます！


と言う事は
時間がなくても Modelだけ
テストコードかけるかも！？


↑のような画面を作ってるときの...


↑の一行明細のModelデータをテスト！


メニュー表項目(1行分データ)Modelに
var MenuItem = Backbone.Model.extend({
defaults: function(){
return {
name: "",
price: 0 ,
selected: false
};
},
toggleSelected: function(){
var putData={"selected": !this.get("selected")};
this.save( putData, {wait: true});
}
});


オブジェクト生成のテスト！
return {
name: "",
price: 0 ,
selected: false
};

describe ("MenuItem", function() {
var menuItem;
beforeEach(function() {
menuItem = new MenuItem();
});

},

afterEach(function() {
menuItem.destroy();
menuItem = null;
});
this.save( putData);
}

describe( "オブジェクト生成時", function() {

it( "初期値としてデフォルト値が設定される事", function() {

});

expect(menuItem).toBeDefined();
expect(menuItem.get("name")).toBe("");
expect(menuItem.get("price")).toBe(0);
expect(menuItem.get("selected")).toBe(false);
});
});
});


オブジェクト生成時テストはグリーン！やったね！
return {
name: "",
price: 0 ,
selected: false
};

var menuItem;
});

},

menuItem.destroy();
menuItem = null;
});
this.save( putData);
}

describe( "オブジェクト生成時", function() {

it( "初期値としてデフォルト値が設定される事", function() {

});

expect(menuItem.get("name")).toBe("");
expect(menuItem.get("price")).toBe(0);
expect(menuItem.get("selected")).toBe(false);
});
});
});


次はメニューボタンのON/OFFの切り替えテスト！
・・・省略・・・

});

var putData={
"selected": !this.get("selected")
};
}

var menuItem;
});
menuItem.destroy();
menuItem = null;
});

describe( "メニュー選択時", function(){

it( "トグル選択される事", function(){
expect(menuItem.get("selected")).toBeFalsy();
menuItem.toggleSelected();
expect(menuItem.get("selected")).toBeTrusy();
});

});
});

ぐぁぁぁぁぁ...、Σ( ` o ‘
・・・省略・・・

});

var putData={
};
}

var menuItem;
});
menuItem.destroy();
menuItem = null;
});


});

});
});

な、なんで...Σ( ` o ‘
・・・省略・・・

});

var putData={
};
}

var menuItem;
サーバにPUT更新するリクエストを単体で
動作させる必要がある作りでした...
});
menuItem.destroy();
menuItem = null;
});


});

});
});

そこでSinon.JS使います！

http://sinonjs.org/

テストコードを書き直しました〜。
・・・省略・・・

});


var putData={
};
}

Sinon.jsの機能で
ダミーの応答を返す！

ダミーで返す値を
細かく指定できます！

});


var menuItem,server;
beforeEach( function(){
menuItem = new MenuItem({
"id": 1, "name": "test",
"price": 100, "selected": false
});
menuItem.url = "/unitTestUrl";
server = sinon.fakeServer.create();
});
afterEach(function () {
server.restore();
});
server.respondWith(
"PUT","/unitTestUrl",[
200,
{"Content-Type": "application/json"},
'{"id":1,"name":"test","price":100,"selected":true}'
]);
server.respond();
expect(menuItem.get("selected")).toBeTruthy();
});
});

次は↑の明細複数行のModelデータをテスト！


明細複数行Model(Collection)に
var MenuList = Backbone.Collection.extend({
model: MenuItem,
comparator: 'id'
sumPrice: function(){
var sum = 0,
selectedMenuItems = this.where({ selected:true });
_.each( selectedMenuItems, function( model){
sum += model.get( "price");
});
return sum;
},
createMenu: function(name,price){
var menuItemData = {
name:name,
price:price,
selected:false
};
this.create(menuItemData, {wait: true});
},
});


合計金額算出のテストケース追加！
model: MenuItem,
comparator: 'id'
var sum = 0,
});
return sum;
},
describe ( "MenuList", function() {
name:name,
describe ( "選択メニュー合計金額算出", function() {
price:price,
selected:false
it( "格納モデルの選択中より合計金額を算出する", function() {
};
var menuList = new MenuList([
},
{ name:"a", price: 100, selected: true},
{ name:"b", price: 200, selected: false},
});
{ name:"c", price: 400, selected: true},
]);
expect( menuList.sumPrice()).toBe( 500);
});
});


});

合計金額算出のテストはOK(グリーン)!＼(^o^)/
model: MenuItem,
comparator: 'id'
var sum = 0,
});
return sum;
},
name:name,
describe ( "選択メニュー合計金額算出", function() {
price:price,
selected:false
it( "格納モデルの選択中より合計金額を算出する", function() {
};
var menuList = new MenuList([
},
{ name:"a", price: 100, selected: true},
{ name:"b", price: 200, selected: false},
});
{ name:"c", price: 400, selected: true},
]);
expect( menuList.sumPrice()).toBe( 500);
});
});


});

次は新規メニュー登録のテストケース追加！
model: MenuItem,
comparator: 'id'
// ・・・省略・・・

var sum = 0,

describe( "新規メニュー表登録", function() {

it( "サーバより返却された名称と金額が設定されること", function(){
});
var menuList = new MenuList();
return sum;
menuList.url = "/unitTestUrl";
},
server.respondWith([
200,
'{"id":123,"name":"sevNam",
"price":1005,"selected":false}'

name:name,
price:price,
selected:false
};

]);
menuList.createMenu( 'test', 1000);
server.respond();

this.create(
menuItemData,
{wait: true}
);

expect( menuList.size()).toBe( 1);
var model = menuList.get(123);
expect( model.get("name") ).toBe( "sevNam");
expect( model.get("price") ).toBe( 1005);

},
});
});


});

})

新規メニュー表登録処理もOK(グリーン）！
model: MenuItem,
comparator: 'id'
// ・・・省略・・・

var sum = 0,

describe( "新規メニュー表登録", function() {

it( "サーバより返却された名称と金額が設定されること", function(){
});
var menuList = new MenuList();
return sum;
menuList.url = "/unitTestUrl";
},
server.respondWith([
200,
'{"id":123,"name":"sevNam",
"price":1005,"selected":false}'

name:name,
price:price,
selected:false
};

]);
menuList.createMenu( 'test', 1000);
server.respond();

this.create(
menuItemData,
{wait: true}
);

expect( menuList.size()).toBe( 1);
var model = menuList.get(123);
expect( model.get("name") ).toBe( "sevNam");
expect( model.get("price") ).toBe( 1005);

},
});
});


});

})

まとめ


まとめです
========
- Backbone.jsのように MV*にすれば
　Modelのみのテストコードが書きやすい！

まとめ

- ModelからのAjax通信も
　Sinon.jsのFakeServerを使えば
　ユニットテストできる！


何か質問とか
もっとこうした方が良いよとかありますか？？


ご清聴ありがとうございました！

今日の資料で出てきたソースは以下で公開してます。
https://github.com/itokami1123dev/hamburger_shop_prj


BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)

Recommended

Recommended

More Related Content

More from Toshio Ehara

More from Toshio Ehara (20)

Recently uploaded

Recently uploaded (10)

BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)