Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript Unit Test Why? What? How?

第38回HTML5とか勉強会「Webアプリ×テスト最新事情」の発表資料です。
https://html5j.cloudfoundry.com/event/sd38

  • Login to see the comments

JavaScript Unit Test Why? What? How?

  1. 1. JavaScript Unit TestWhy? What? How?佐藤鉄平@teppeis2013/04/26第38回HTML5とか勉強会
  2. 2. 自己紹介•佐藤鉄平•@teppeis•サイボウズでkintoneっていうB2Bサービスを作っています。•フロントからバックエンドまで•宗派: Vim, JS, Google Closure
  3. 3. JS連載2年目に突入!
  4. 4. 一人目なので、JSテストの全体像をお話します。まだJSでテストを書いてない人向けです。
  5. 5. コードはでてきません!
  6. 6. http://www.flickr.com/photos/freakygoldie/5044175060Why?
  7. 7. どうしてJavaScriptでユニットテストを書くのか?
  8. 8. そもそもテストって何だろう?
  9. 9. 実践アジャイルテスト
  10. 10. アジャイルテストの4象限ビジネス面技術面チームを支援する製品を批評する結合テスト機能テストユニットテストユーザビリティテスト探索的テスト性能テスト脆弱性テスト
  11. 11. ビジネス面技術面チームを支援する製品を批評する結合テスト機能テストユニットテストユーザビリティテスト探索的テスト性能テスト脆弱性テスト結合テスト
  12. 12. 結合テスト•ビジネスを支援する技術面のテスト•エンドツーエンド•「何を作るのか?」•どんなサービスでも必須•自動化推奨 (Seleniumなど)
  13. 13. ビジネス面技術面チームを支援する製品を批評する結合テスト機能テストユニットテストユーザビリティテスト探索的テスト性能テスト脆弱性テストユニットテスト
  14. 14. ユニットテスト•チームを支援する技術面のテスト•開発者による開発者のためのテスト•「どう作るのか?」•設計とコードの質が向上•大規模ではほぼ必須•自動化が必須
  15. 15. TDDと黄金の回転 ©t-wadaきれい汚い(すぐには)動かない 動作するRedGreenRefactoringTDDと黄金の回転http://www.slideshare.net/t_wada/javaja-tdd-2nd
  16. 16. 実践テスト駆動開発
  17. 17. 二重のフィードバックループ失敗する受入テストを書く失敗するユニットテストを書くテスト成功!リファクタリング
  18. 18. CI
  19. 19. JSをとりまく状況•コードとチームの大規模化•フロントエンド領域の増大•高速で高品質な開発の要求
  20. 20. ユニットテストの必要性が高まってる!
  21. 21. テスト環境の向上•Node.jsの隆盛•テスト関連ツールの盛り上がり•MV*フレームワークやモジュール化の仕組みが成熟
  22. 22. ユニットテストがやりやすくなった!
  23. 23. http://www.flickr.com/photos/beorn_ours/5675267679/What?
  24. 24. どこから手をつけたら。。
  25. 25. JSのユニットテストって難しいんでしょ?
  26. 26. JSテストの難しい点•コードがビューと結びつきがち•実行環境=ブラウザが扱いづらい=> MV*な設計で解決=> ツールで解決
  27. 27. MV*•いろいろ宗派はあるけど、やりたいことはビューとロジックの分離。•それさえできれば、ロジック(Model)のテストは普通にできるはず。
  28. 28. 例) メール一覧画面•Model•全部のリスト•宛先で絞り込み•タグで絞り込み•View•受け取ったら表示するだけ
  29. 29. Modelのテストをしよう!•純粋なロジック•不確実性が低い•リファクタリングで疎結合に分解
  30. 30. Viewのテストは•DOMのテストは書きにくい•ユーザビリティはテストできない•画面を見ながらの試行錯誤が必要•書きたくなったらチャレンジしよう!
  31. 31. http://www.flickr.com/photos/dunechaser/270552745/How?
  32. 32. テストツールの分類PhanotmJSjsdomenvjs実ブラウザTestemKarmaJasmineQUnitMochaJsTestDriverBuster.JSChaiexpect.jsSinon.JS実行環境リモートテストランナーテスティングフレームワークモックライブラリ
  33. 33. テスティングフレームワーク•テストの記述と実行を担当•どれを選んでも間違いはないレベル•詳細は今日の他の方の発表をお聞きくださいw
  34. 34. 実行環境が重要•実ブラウザ•本物だけど面倒、遅い•ヘッドレスブラウザ (PhantomJS)•だいたい本物でそこそこ速い•でもWebKitだけ•シミュレータ(jsdom, envjs)•偽物だけど速い
  35. 35. リモートテストランナー•ブラウザをキャプチャリングしてリモートでテストを実行するツール•実ブラウザの欠点を補う•同時に複数のブラウザでTDDが可能•Testem, Karma(Testacular),JsTestDeriver, Buster.JS
  36. 36. どれを選ぶ?PhanotmJSjsdomenvjs実ブラウザTestemKarmaJasmineQUnitMochaJsTestDriverBuster.JSChaiexpect.jsSinon.JS実行環境リモートテストランナーテスティングフレームワークモックライブラリ
  37. 37. Demo•おすすめ簡単構成•Jasmine + Testem + 実ブラウザ•FizzBuzz with TDD•CI with PhantomJS
  38. 38. ユニットテスト以外にも•カバレッジ測定•静的解析•Lint (JSHint, JSLint, Closure)•型チェック (Closure, TypeScript)•それらを支えるgruntなどなど
  39. 39. まとめ•JSでもユニットテストは大事!•モデルのテストから始めよう!•テスト関連ツールの進化がやばい!•TDDで楽しい開発!
  40. 40. http://www.flickr.com/photos/mlpeixoto/5351547427/When?
  41. 41. Just Now!
  42. 42. ありがとうございました!

×