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

3,146 views

Published on

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

Published in: Technology
1 Comment
13 Likes
Statistics
Notes
No Downloads
Views
Total views
3,146
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
17
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide

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

×