Your SlideShare is downloading. ×
0
Android × HTML5 in Fukuoka 2013/09/07(土)
JavaScriptのテストコード
一緒に勉強しませんか??
ぱくたそ無料写真素材を使用しております。ありがとうございます!  http://www.pakuta...
自己紹介
twitterID: itoKami1123
下請け・派遣で福岡をふらふらしてます。
最近はJavascriptメインになってきました。
今年はTDDできる人になりたいです。
福岡の皆で技術の底上げが出来ればと思い
たまに初心者向けの...
さてさて
JavaScriptでWebアプリを作っていると..
13年9月7日土曜日
たまにうっかりミスで
スペルミスによるエラーが発生しますよね!
ぱくたそ無料写真素材を使用しております。ありがとうございます!  http://www.pakutaso.com/about.html
13年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-scri...
Testemの準備
13年9月7日土曜日
{
"framework" : "jasmine",
"src_files" : [
"scripts/Dogaemon.js",
"spec/DogaemonSpec.js"
]
}
testemの設定ファイル testem.json に実行...
ブラウザで開くとテストが動く
ここにテスト結果が表示されます
13年9月7日土曜日
JavaScriptの動作を決める
仕様書(Spec)を作成
13年9月7日土曜日
//さいきょうロボDogaemonの仕様書
describe	
  ("Dogaemonクラス",	
  function()	
  {
	
  	
  
	
  
	
  
	
  
	
  
	
  
	
  
	
  
});
spec/...
//さいきょうロボDogaemonの仕様書
describe	
  ("Dogaemonクラス",	
  function()	
  {
	
  	
  //	
  挨拶機能
	
   describe	
  ("#helloメソッド",	
 ...
//さいきょうロボDogaemonの仕様書
describe	
  ("Dogaemonクラス",	
  function()	
  {
	
  	
  //	
  挨拶機能
	
   describe	
  ("#helloメソッド",	
 ...
保存(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.pro...
保存(ctr+s)!
13年9月7日土曜日
仕様書どおり動く事が
確認できました!
13年9月7日土曜日
仕様を変更してみます!
13年9月7日土曜日
//さいきょうロボDogaemonの仕様書
describe	
  ("Dogaemonクラス",	
  function()	
  {
  ・・・省略・・・
	
   //	
  お助け機能
	
   describe	
  ("#help"...
testemが更新を検知して自動でjasmine実行!
helpメソッドとか無いよとエラー
13年9月7日土曜日
// さいきょうロボ Dogaemonクラス
var Dogaemon = (function(){
var Dogaemon = function(){
};
Dogaemon.prototype = {
constructor: Dogae...
仕様書どおり動く事が
確認できました!
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 ↑の反対 (undefi...
Upcoming SlideShare
Loading in...5
×

JavaScriptのテストコード 一緒に勉強しませんか??

2,642

Published on

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

Published in: Technology
1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,642
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScriptのテストコード 一緒に勉強しませんか??"

  1. 1. Android × HTML5 in Fukuoka 2013/09/07(土) JavaScriptのテストコード 一緒に勉強しませんか?? ぱくたそ無料写真素材を使用しております。ありがとうございます!  http://www.pakutaso.com/about.html 13年9月7日土曜日
  2. 2. 自己紹介 twitterID: itoKami1123 下請け・派遣で福岡をふらふらしてます。 最近はJavascriptメインになってきました。 今年はTDDできる人になりたいです。 福岡の皆で技術の底上げが出来ればと思い たまに初心者向けの勉強会をしてます。 13年9月7日土曜日
  3. 3. さてさて JavaScriptでWebアプリを作っていると.. 13年9月7日土曜日
  4. 4. たまにうっかりミスで スペルミスによるエラーが発生しますよね! ぱくたそ無料写真素材を使用しております。ありがとうございます!  http://www.pakutaso.com/about.html 13年9月7日土曜日
  5. 5. Javaみたいに型や変数のチェックがあればなぁ... 動かすまでエラーか分からないなんてなぁ... 13年9月7日土曜日
  6. 6. \  __  / _ (m) _  ピコーン   |ミ| / `´  \  ( ゚∀゚)     ノヽノ |        < < そうだ!動かせばいいんじゃない!? 13年9月7日土曜日
  7. 7. よ〜し、 単体テストで動かすといったらxUnitだよなぁ。 QUnitを使おう!と思ってしらべてみると 13年9月7日土曜日
  8. 8. ん!? 13年9月7日土曜日
  9. 9. というわけでJasmineにしました。 13年9月7日土曜日
  10. 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. 11. Testemの準備 13年9月7日土曜日
  12. 12. { "framework" : "jasmine", "src_files" : [ "scripts/Dogaemon.js", "spec/DogaemonSpec.js" ] } testemの設定ファイル testem.json に実行する JavaScriptと仕様を確認するテストのJavaScriptを書いて $ testem を実行! 作るJavaScriptを指定する 仕様書ぽく動かすシナリオを テストコードで書く 13年9月7日土曜日
  13. 13. ブラウザで開くとテストが動く ここにテスト結果が表示されます 13年9月7日土曜日
  14. 14. JavaScriptの動作を決める 仕様書(Spec)を作成 13年9月7日土曜日
  15. 15. //さいきょうロボDogaemonの仕様書 describe  ("Dogaemonクラス",  function()  {                   }); spec/DogaemonSpec.js “Dogaemonクラス”の仕様を記述 13年9月7日土曜日
  16. 16. //さいきょうロボDogaemonの仕様書 describe  ("Dogaemonクラス",  function()  {    //  挨拶機能   describe  ("#helloメソッド",  function()  {                       }); }); spec/DogaemonSpec.js “Dogaemon#helloメソッド”の仕様を記述 13年9月7日土曜日
  17. 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. 18. 保存(ctr+s)! 13年9月7日土曜日
  19. 19. testemがファイル更新を検知してjasmine実行! Dogaemonクラスとか無いよとエラー 13年9月7日土曜日
  20. 20. 仕様に合わった実装がないからですね... 13年9月7日土曜日
  21. 21. Dogaemonクラス作成 13年9月7日土曜日
  22. 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. 23. 保存(ctr+s)! 13年9月7日土曜日
  24. 24. 仕様書どおり動く事が 確認できました! 13年9月7日土曜日
  25. 25. 仕様を変更してみます! 13年9月7日土曜日
  26. 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. 27. testemが更新を検知して自動でjasmine実行! helpメソッドとか無いよとエラー 13年9月7日土曜日
  28. 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. 29. 仕様書どおり動く事が 確認できました! 13年9月7日土曜日
  30. 30. こんな感じで 動作確認と仕様書が 同時にできます! 13年9月7日土曜日
  31. 31. でも、どうやって(どこまで) 仕様確認テストを書くのか 分かってません... 13年9月7日土曜日
  32. 32. よかったら一緒に勉強してくれる 人を探しております!   twitterID: itoKami1123 までご連絡下さい! 13年9月7日土曜日
  33. 33. 【宣伝】 福岡JavaEE勉強会(第1回) JavaEEハンズオンワークショップ!一緒に Webアプリを作りましょう! http://www.zusaar.com/event/1026009 ご興味ある方が是非どうぞ! 13年9月7日土曜日
  34. 34. おしまい 13年9月7日土曜日
  35. 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日土曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×