10+1 Things you should know about JavaScript testing

5,412 views
5,293 views

Published on

10+1 Things you should know about JavaScript testing - Nov 20, 2010 at John Resig feat. Shibuya.js, in Firefox Developers Conference 2010

Published in: Technology, Business
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,412
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
12
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

10+1 Things you should know about JavaScript testing

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

×