javascriptのテストコード 一緒に勉強しませんか??
DESCRIPTION
Android × HTML5 in Fukuoka 2013/09/07(土) ぱくたそ無料写真素材を使用しております。ありがとうございます!http://www.pakutaso.com/about.htmlTRANSCRIPT
![Page 1: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/1.jpg)
Android × HTML5 in Fukuoka 2013/09/07(土)
JavaScriptのテストコード
一緒に勉強しませんか??
ぱくたそ無料写真素材を使用しております。ありがとうございます! http://www.pakutaso.com/about.html
13年9月7日土曜日
![Page 2: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/2.jpg)
自己紹介
twitterID: itoKami1123
下請け・派遣で福岡をふらふらしてます。
最近はJavascriptメインになってきました。
今年はTDDできる人になりたいです。
福岡の皆で技術の底上げが出来ればと思い
たまに初心者向けの勉強会をしてます。
13年9月7日土曜日
![Page 3: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/3.jpg)
さてさてJavaScriptでWebアプリを作っていると..
13年9月7日土曜日
![Page 4: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/4.jpg)
たまにうっかりミスでスペルミスによるエラーが発生しますよね!
ぱくたそ無料写真素材を使用しております。ありがとうございます! http://www.pakutaso.com/about.html13年9月7日土曜日
![Page 5: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/5.jpg)
Javaみたいに型や変数のチェックがあればなぁ...
動かすまでエラーか分からないなんてなぁ...
13年9月7日土曜日
![Page 6: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/6.jpg)
\ __ / _ (m) _ ピコーン |ミ| / `´ \ ( ゚∀゚) ノヽノ | < <
そうだ!動かせばいいんじゃない!?
13年9月7日土曜日
![Page 7: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/7.jpg)
よ〜し、
単体テストで動かすといったらxUnitだよなぁ。
QUnitを使おう!と思ってしらべてみると
13年9月7日土曜日
![Page 8: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/8.jpg)
ん!?
13年9月7日土曜日
![Page 9: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/9.jpg)
というわけでJasmineにしました。
13年9月7日土曜日
![Page 10: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/10.jpg)
Testemを使ってjasmineをいれました。
Testemは、JavaScriptファイルが更新されると
自動でjasmineを動かしてくれます!便利!
http://blog.mach3.jp/2012/10/js-testem-script.html↑ブログを参考にインストールしました!
$ npm install testem -g node.jsのパッケージだよ
13年9月7日土曜日
![Page 11: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/11.jpg)
Testemの準備
13年9月7日土曜日
![Page 12: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/12.jpg)
{
"framework" : "jasmine",
"src_files" : [
"scripts/Dogaemon.js",
"spec/DogaemonSpec.js"
]
}
testemの設定ファイル testem.json に実行するJavaScriptと仕様を確認するテストのJavaScriptを書いて
$ testem を実行!
作るJavaScriptを指定する
仕様書ぽく動かすシナリオをテストコードで書く
13年9月7日土曜日
![Page 13: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/13.jpg)
ブラウザで開くとテストが動く
ここにテスト結果が表示されます
13年9月7日土曜日
![Page 14: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/14.jpg)
JavaScriptの動作を決める仕様書(Spec)を作成
13年9月7日土曜日
![Page 15: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/15.jpg)
//さいきょうロボDogaemonの仕様書describe ("Dogaemonクラス", function() { });
spec/DogaemonSpec.js
“Dogaemonクラス”の仕様を記述
13年9月7日土曜日
![Page 16: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/16.jpg)
//さいきょうロボDogaemonの仕様書describe ("Dogaemonクラス", function() {
// 挨拶機能 describe ("#helloメソッド", function() { });});
spec/DogaemonSpec.js
“Dogaemon#helloメソッド”の仕様を記述
13年9月7日土曜日
![Page 17: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/17.jpg)
//さいきょうロボDogaemonの仕様書describe ("Dogaemonクラス", function() {
// 挨拶機能 describe ("#helloメソッド", function() {
it("ぼくどがえもんと挨拶する", function() { var dogaChan = new Dogaemon(); expect( dogaChan.hello() ) .toEqual('ぼくどがえもん'); }); });});
spec/DogaemonSpec.js
“Dogaemon#helloメソッド”が持っている機能を具体的に記述
13年9月7日土曜日
![Page 18: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/18.jpg)
保存(ctr+s)!
13年9月7日土曜日
![Page 19: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/19.jpg)
testemがファイル更新を検知してjasmine実行!
Dogaemonクラスとか無いよとエラー13年9月7日土曜日
![Page 20: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/20.jpg)
仕様に合わった実装がないからですね...
13年9月7日土曜日
![Page 21: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/21.jpg)
Dogaemonクラス作成
13年9月7日土曜日
![Page 22: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/22.jpg)
// さいきょうロボ Dogaemonクラスvar Dogaemon = (function(){
var Dogaemon = function(){};
Dogaemon.prototype = { constructor: Dogaemon,
// 挨拶する hello: function(){ return 'ぼくどがえもん';
}
};
return Dogaemon;
})();
scripts/Dogaemon.js
Dogaemon#helloメソッドを実装!
13年9月7日土曜日
![Page 23: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/23.jpg)
保存(ctr+s)!
13年9月7日土曜日
![Page 24: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/24.jpg)
仕様書どおり動く事が確認できました!
13年9月7日土曜日
![Page 25: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/25.jpg)
仕様を変更してみます!
13年9月7日土曜日
![Page 26: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/26.jpg)
//さいきょうロボDogaemonの仕様書describe ("Dogaemonクラス", function() {
・・・省略・・・ // お助け機能 describe ("#help", function() { it("お助けをお願いすると false を返す", function() { var dogaChan = new Dogaemon(); expect( dogaChan.help() ).toBeFalsy(); }); });
});
spec/DogaemonSpec.js
“Dogaemon#helpメソッド”のび●の成長の為、助けをお願いしてもfalseを返す仕様にしました!
13年9月7日土曜日
![Page 27: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/27.jpg)
testemが更新を検知して自動でjasmine実行!
helpメソッドとか無いよとエラー13年9月7日土曜日
![Page 28: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/28.jpg)
// さいきょうロボ Dogaemonクラスvar Dogaemon = (function(){ var Dogaemon = function(){
};
Dogaemon.prototype = { constructor: Dogaemon, // 挨拶する hello: function(){ return 'ぼくどがえもん'; }, // お助け機能 help: function(){ return false; } }; return Dogaemon;})();
scripts/Dogaemon.js
Dogaemon#helpメソッドを実装!
13年9月7日土曜日
![Page 29: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/29.jpg)
仕様書どおり動く事が確認できました!
13年9月7日土曜日
![Page 30: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/30.jpg)
こんな感じで動作確認と仕様書が同時にできます!
13年9月7日土曜日
![Page 31: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/31.jpg)
でも、どうやって(どこまで)仕様確認テストを書くのか
分かってません...
13年9月7日土曜日
![Page 32: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/32.jpg)
よかったら一緒に勉強してくれる人を探しております!
twitterID: itoKami1123 までご連絡下さい!
13年9月7日土曜日
![Page 33: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/33.jpg)
【宣伝】福岡JavaEE勉強会(第1回)
JavaEEハンズオンワークショップ!一緒に
Webアプリを作りましょう!
http://www.zusaar.com/event/1026009
ご興味ある方が是非どうぞ!
13年9月7日土曜日
![Page 34: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/34.jpg)
おしまい
13年9月7日土曜日
![Page 35: JavaScriptのテストコード 一緒に勉強しませんか??](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556f64a8d8b42a9d338b4662/html5/thumbnails/35.jpg)
.toBe 同じオブジェクトならOK
.toEqual 同じ値ならOK
.toMatch 正規表現一致でOK
.toBeDefined 変数宣言されてる(undefinedで無い)ならOK
.toBeUndefined ↑の反対 (undefinedならOK)
.toBeNull nullならOK
.toBeTruthy trueならOK
.toBeFalsy ↑の反対( falseならOK)
.toContain 配列に含まれてたらOK
.toBeLessThan 小さければOK
.toBeGreaterThan ↑の反対( 大きければOK )
.toBeCloseTo 指定した精度に丸めた値が比較値と同じならOK
.toThrow 期待した例外発生があればOK
※ テスト条件を反転するときは .not を間につけます
Jasmineのテスト判定メソッド (マッチャー)
13年9月7日土曜日