10+1 Things you should know about JavaScript testing
•
10 likes•2,633 views
10+1 Things you should know about JavaScript testing - Nov 20, 2010 at John Resig feat. Shibuya.js, in Firefox Developers Conference 2010
10+1 Things you should know about JavaScript testing
- 1. Takuto Wada (@t_wada on Twitter) Nov 20, 2010 @ Firefox Developers Conference 10+1 things you should know about javascript testing JavaScript をテスト するときに考える 10のことがら+1
- 2. Who am I ? •TDD guy in Japan. •@t_wada on Twitter •twada on github
- 3. 大事なことを最初に => 宣伝 First things first. => Ad.
- 4. 97 Things Every Programmer Should Know 日本人寄稿者 (邦訳オンリー) @omo2009 @m_seki @hyoshiok @miyagawa @hotchpotch @dankogai @yukihiro_matz @t_wada
- 5. 97 Things Every Programmer Should Know 日本人寄稿者 (邦訳オンリー) @omo2009 @m_seki @hyoshiok @miyagawa @hotchpotch @dankogai @yukihiro_matz @t_wada 12月中旬発売
- 7. 1.「全部をテストする」 ことはできない You can’t test “everything”.
- 8. 「全部をテストする」 ことはできない •使い心地、綺麗な見た目のテスト は人間にしか出来ない •Usability, look and feel can be tested only by manually.
- 9. 「全部をテストする」 ことはできない •「人間でなくとも出来ることをテ ストにサポートさせる」と考える •Other aspects can be tested automatically, so let computers do them.
- 10. 2. 目視を可能な限り 減らす reduce visual inspection as much as possible.
- 11. 目視を可能な限り減らす •目視必須の所と目視不要の所を分 ける。 •Separate code that must be inspected visually from other code.
- 12. 目視を可能な限り減らす •目視不要の部分が増えるほど、人 間の手間が減る •The more you automate the non-visual testing, the more benefit you gain.
- 13. 3. 同期処理と 非同期処理を 分ける divide synchronous part from asynchronous part.
- 14. 同期処理と 非同期処理を分ける •非同期処理はテストが難しく、テス ト実行時間もかかりがち •Asynchronous tests tend to be complex and time-consuming.
- 15. •コードの非同期処理部分(イベント ハンドラ)を最小にして、同期的に テストできる部分を増やす •Maximize amount of code that can be tested synchronously, by minimizing asynchronous part of code. (e.g., event handlers)
- 16. 4. 内部構造を 隠 しすぎない Avoid too much information hiding.
- 17. 内部構造を 隠 しすぎない •例えば、テストですり替えたいハ ンドラに匿名関数を使わない •For example, avoid using anonymous functions for event handlers.
- 18. •内部の接合点をテストから見える ように、差し替えられるように設 計する •Pay attention to Seams and Interception Points . Provide enabling points for Mocks/ Stubs. (see WEwLC)
- 19. 5. カスタムイベントで 粗結合化する Decouple components by using custom-events.
- 20. カスタムイベントで 粗結合化する •イベント発火元と受取り側の結合 度を減らす •Decouple event handlers from event sources, by using custom events.
- 21. カスタムイベントで 粗結合化する •デザイン変更、DOM構造の変更 からロジックを隔離する •Make code independent from Design/DOM structure change.
- 22. 6. 先人の設計に学ぶ standing on the shoulders of giants.
- 23. 先人の設計に学ぶ •書籍を紐解き、先人の知恵に学ぶ •Read good books. Learn the wisdom and culture from these books.
- 24. 先人の設計に学ぶ •GoF のパターンは UI 開発に使え るものが多い •GoF patterns are good for rich user interface code design.
- 25. 7. 迷ったら、シンプル な仕組みを好む if in doubt, prefer simpler solution.
- 26. 迷ったら、シンプルな 仕組みを好む •複数の解法やライブラリなどで 迷ったら、シンプルな方を選ぶ •If there are two or more ways of solving problems, prefer simpler one.
- 27. 迷ったら、シンプルな 仕組みを好む •jQuery, そして QUnit もそう •Simpler solution may survive. jQuery and QUnit have quality and beauty of simplicity.
- 28. 8. ソフトウェアの 梃子(てこ)の 効果を生かす Use software leverage to your advantage.
- 29. ソフトウェアの梃子(てこ) の力を生かす •なるべく車輪の再発明はしない(車 輪の再開発/実装はしてもいい) •Don t reinvent the wheels. (But re-implement them sometimes)
- 30. •UNIX 文化を尊重し、CUI を使 う。プレーンテキスト、スクリプ ト、パイプ/フィルタを使いこなす •Prefer CUI. Respect UNIX culture. Use the power of plain text format, scripting, pipes and filters.
- 31. 9. ブラウザを 使わなくても テストできるようにする Seek for the way of testing outside the browser.
- 32. ブラウザを使わなくても テストできるようにする •env-js や xmlw3cdom.js は、ブ ラウザや DOM のふりをする •Try to use fake-browser-like libraries. See env-js and xmlw3cdom.js
- 33. QUnit-TAP というもの を作りました •QUnit-TAP (my product) produces TAP output from QUnit test code. •http://github.com/twada/qunit-tap
- 35. 徹底的に自動化する •継続的インテグレーション : 自動 テストは定期的に実行させる •Continuous Integration : Run automated tests periodically
- 36. 徹底的に自動化する •hudson かわいいよ hudson •hudson! hudson!
- 37. 11. 未だフロンティア である Still in frontier.
- 38. 未だフロンティアである •JavaScript のテストの決定解は いまだ無い •Still no definitive solutions for JavaScript testing.
- 39. 未だフロンティアである •JavaScript テストの未来を作る のは、あなたかもしれない •YOU may be the one. Create the future of JavaScript testing.
- 40. ご清聴 ありがとう ございました thank you very much.
- 41. 延長戦 Extra time.
- 42. デモ : DEMO •Spidermonkey + QUnit + QUnit-TAP + Growl •http://github.com/twada/qunit-tap
- 43. デモ : DEMO •Spidermonkey + QUnit + QUnit-TAP + xmlw3cdom.js •http://github.com/twada/qunit-tap