Upload
toshio-ehara
View
2.590
Download
3
Embed Size (px)
DESCRIPTION
Android × HTML5 in Fukuoka 2013/09/07(土) ぱくたそ無料写真素材を使用しております。ありがとうございます!http://www.pakutaso.com/about.html
Citation preview
Android × HTML5 in Fukuoka 2013/09/07(土)
JavaScriptのテストコード
一緒に勉強しませんか??
ぱくたそ無料写真素材を使用しております。ありがとうございます! http://www.pakutaso.com/about.html
13年9月7日土曜日
自己紹介
twitterID: itoKami1123
下請け・派遣で福岡をふらふらしてます。
最近はJavascriptメインになってきました。
今年はTDDできる人になりたいです。
福岡の皆で技術の底上げが出来ればと思い
たまに初心者向けの勉強会をしてます。
13年9月7日土曜日
さてさてJavaScriptでWebアプリを作っていると..
13年9月7日土曜日
たまにうっかりミスでスペルミスによるエラーが発生しますよね!
ぱくたそ無料写真素材を使用しております。ありがとうございます! http://www.pakutaso.com/about.html13年9月7日土曜日
Javaみたいに型や変数のチェックがあればなぁ...
動かすまでエラーか分からないなんてなぁ...
13年9月7日土曜日
\ __ / _ (m) _ ピコーン |ミ| / `´ \ ( ゚∀゚) ノヽノ | < <
そうだ!動かせばいいんじゃない!?
13年9月7日土曜日
よ〜し、
単体テストで動かすといったらxUnitだよなぁ。
QUnitを使おう!と思ってしらべてみると
13年9月7日土曜日
ん!?
13年9月7日土曜日
というわけでJasmineにしました。
13年9月7日土曜日
Testemを使ってjasmineをいれました。
Testemは、JavaScriptファイルが更新されると
自動でjasmineを動かしてくれます!便利!
http://blog.mach3.jp/2012/10/js-testem-script.html↑ブログを参考にインストールしました!
$ npm install testem -g node.jsのパッケージだよ
13年9月7日土曜日
Testemの準備
13年9月7日土曜日
{
"framework" : "jasmine",
"src_files" : [
"scripts/Dogaemon.js",
"spec/DogaemonSpec.js"
]
}
testemの設定ファイル testem.json に実行するJavaScriptと仕様を確認するテストのJavaScriptを書いて
$ testem を実行!
作るJavaScriptを指定する
仕様書ぽく動かすシナリオをテストコードで書く
13年9月7日土曜日
ブラウザで開くとテストが動く
ここにテスト結果が表示されます
13年9月7日土曜日
JavaScriptの動作を決める仕様書(Spec)を作成
13年9月7日土曜日
//さいきょうロボDogaemonの仕様書describe ("Dogaemonクラス", function() { });
spec/DogaemonSpec.js
“Dogaemonクラス”の仕様を記述
13年9月7日土曜日
//さいきょうロボDogaemonの仕様書describe ("Dogaemonクラス", function() {
// 挨拶機能 describe ("#helloメソッド", function() { });});
spec/DogaemonSpec.js
“Dogaemon#helloメソッド”の仕様を記述
13年9月7日土曜日
//さいきょうロボ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日土曜日
保存(ctr+s)!
13年9月7日土曜日
testemがファイル更新を検知してjasmine実行!
Dogaemonクラスとか無いよとエラー13年9月7日土曜日
仕様に合わった実装がないからですね...
13年9月7日土曜日
Dogaemonクラス作成
13年9月7日土曜日
// さいきょうロボ Dogaemonクラスvar Dogaemon = (function(){
var Dogaemon = function(){};
Dogaemon.prototype = { constructor: Dogaemon,
// 挨拶する hello: function(){ return 'ぼくどがえもん';
}
};
return Dogaemon;
})();
scripts/Dogaemon.js
Dogaemon#helloメソッドを実装!
13年9月7日土曜日
保存(ctr+s)!
13年9月7日土曜日
仕様書どおり動く事が確認できました!
13年9月7日土曜日
仕様を変更してみます!
13年9月7日土曜日
//さいきょうロボ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日土曜日
testemが更新を検知して自動でjasmine実行!
helpメソッドとか無いよとエラー13年9月7日土曜日
// さいきょうロボ 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日土曜日
仕様書どおり動く事が確認できました!
13年9月7日土曜日
こんな感じで動作確認と仕様書が同時にできます!
13年9月7日土曜日
でも、どうやって(どこまで)仕様確認テストを書くのか
分かってません...
13年9月7日土曜日
よかったら一緒に勉強してくれる人を探しております!
twitterID: itoKami1123 までご連絡下さい!
13年9月7日土曜日
【宣伝】福岡JavaEE勉強会(第1回)
JavaEEハンズオンワークショップ!一緒に
Webアプリを作りましょう!
http://www.zusaar.com/event/1026009
ご興味ある方が是非どうぞ!
13年9月7日土曜日
おしまい
13年9月7日土曜日
.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日土曜日