Android × HTML5 in Fukuoka　2013/09/07(土) ぱくたそ無料写真素材を使用しております。ありがとうございます！http://www.pakutaso.com/about.html

1. Android × HTML5 in Fukuoka 2013/09/07(土)
JavaScriptのテストコード
一緒に勉強しませんか？？
ぱくたそ無料写真素材を使用しております。ありがとうございます！ http://www.pakutaso.com/about.html
13年9月7日土曜日

2. 自己紹介
twitterID: itoKami1123
下請け・派遣で福岡をふらふらしてます。
最近はJavascriptメインになってきました。
今年はTDDできる人になりたいです。
福岡の皆で技術の底上げが出来ればと思い
たまに初心者向けの勉強会をしてます。
13年9月7日土曜日

3. さてさて
JavaScriptでWebアプリを作っていると..
13年9月7日土曜日

4. たまにうっかりミスで
スペルミスによるエラーが発生しますよね！
ぱくたそ無料写真素材を使用しております。ありがとうございます！ http://www.pakutaso.com/about.html
13年9月7日土曜日

5. Javaみたいに型や変数のチェックがあればなぁ...
動かすまでエラーか分からないなんてなぁ...
13年9月7日土曜日

6. ＼ __ ／
＿ （ｍ） ＿ ﾋﾟｺｰﾝ
|ミ|
／ ｀´ ＼
( ﾟ∀ﾟ)
ノヽノ |
< <
そうだ！動かせばいいんじゃない！？
13年9月7日土曜日

7. よ〜し、
単体テストで動かすといったらxUnitだよなぁ。
QUnitを使おう！と思ってしらべてみると
13年9月7日土曜日

8. ん！？
13年9月7日土曜日

9. というわけでJasmineにしました。
13年9月7日土曜日

10. Testemを使ってjasmineをいれました。
Testemは、JavaScriptファイルが更新されると
自動でjasmineを動かしてくれます！便利！
http://blog.mach3.jp/2012/10/js-testem-script.html
↑ブログを参考にインストールしました！
$ npm install testem -g node.jsのパッケージだよ
13年9月7日土曜日

11. Testemの準備
13年9月7日土曜日

12. {
"framework" : "jasmine",
"src_files" : [
"scripts/Dogaemon.js",
"spec/DogaemonSpec.js"
]
}
testemの設定ファイル testem.json に実行する
JavaScriptと仕様を確認するテストのJavaScriptを書いて
$ testem を実行！
作るJavaScriptを指定する
仕様書ぽく動かすシナリオを
テストコードで書く
13年9月7日土曜日

13. ブラウザで開くとテストが動く
ここにテスト結果が表示されます
13年9月7日土曜日

14. JavaScriptの動作を決める
仕様書(Spec)を作成
13年9月7日土曜日

15. //さいきょうロボDogaemonの仕様書
describe
("Dogaemonクラス",
function()
{
});
spec/DogaemonSpec.js
“Dogaemonクラス”の仕様を記述
13年9月7日土曜日

16. //さいきょうロボDogaemonの仕様書
describe
("Dogaemonクラス",
function()
{
//
挨拶機能
describe
("#helloメソッド",
function()
{
});
});
spec/DogaemonSpec.js
“Dogaemon#helloメソッド”の仕様を記述
13年9月7日土曜日

17. //さいきょうロボ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日土曜日

18. 保存(ctr+s)！
13年9月7日土曜日

19. testemがファイル更新を検知してjasmine実行！
Dogaemonクラスとか無いよとエラー
13年9月7日土曜日

20. 仕様に合わった実装がないからですね...
13年9月7日土曜日

21. Dogaemonクラス作成
13年9月7日土曜日

22. //
さいきょうロボ Dogaemonクラス
var
Dogaemon
=
(function(){
var
Dogaemon
=
function(){};
Dogaemon.prototype
=
{
constructor:
Dogaemon,
//
挨拶する
hello:
function(){
return
'ぼくどがえもん';
}
};
return
Dogaemon;
})();
scripts/Dogaemon.js
Dogaemon#helloメソッドを実装！
13年9月7日土曜日

23. 保存(ctr+s)！
13年9月7日土曜日

24. 仕様書どおり動く事が
確認できました！
13年9月7日土曜日

25. 仕様を変更してみます！
13年9月7日土曜日

26. //さいきょうロボ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日土曜日

27. testemが更新を検知して自動でjasmine実行！
helpメソッドとか無いよとエラー
13年9月7日土曜日

28. // さいきょうロボ 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日土曜日

29. 仕様書どおり動く事が
確認できました！
13年9月7日土曜日

30. こんな感じで
動作確認と仕様書が
同時にできます！
13年9月7日土曜日

31. でも、どうやって（どこまで）
仕様確認テストを書くのか
分かってません...
13年9月7日土曜日

32. よかったら一緒に勉強してくれる
人を探しております！
twitterID: itoKami1123 までご連絡下さい！
13年9月7日土曜日

33. 【宣伝】
福岡JavaEE勉強会（第１回）
JavaEEハンズオンワークショップ!一緒に
Webアプリを作りましょう！
http://www.zusaar.com/event/1026009
ご興味ある方が是非どうぞ！
13年9月7日土曜日

34. おしまい
13年9月7日土曜日

35. .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日土曜日