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

1. JavaScript Unit Test
Why? What? How?
佐藤鉄平@teppeis
2013/04/26
第38回HTML5とか勉強会

2. 自己紹介
•佐藤鉄平
•@teppeis
•サイボウズでkintoneっていう
B2Bサービスを作っています。
•フロントからバックエンドまで
•宗派: Vim, JS, Google Closure

3. JS連載２年目に突入!

4. 一人目なので、
JSテストの全体像を
お話します。
まだJSでテストを書いてない
人向けです。

5. コードはでてきません！

6. http://www.flickr.com/photos/freakygoldie/5044175060
Why?

7. どうしてJavaScriptで
ユニットテストを書くのか？

8. そもそもテストって何だろう？

9. 実践アジャイルテスト

10. アジャイルテストの4象限
ビジネス面
技術面
チームを
支援する
製品を
批評する
結合テスト
機能テスト
ユニットテスト
ユーザビリティテスト
探索的テスト
性能テスト
脆弱性テスト

11. ビジネス面
技術面
チームを
支援する
製品を
批評する
結合テスト
機能テスト
ユニットテスト
ユーザビリティテスト
探索的テスト
性能テスト
脆弱性テスト
結合テスト

12. 結合テスト
•ビジネスを支援する技術面のテスト
•エンドツーエンド
•「何を作るのか？」
•どんなサービスでも必須
•自動化推奨 (Seleniumなど)

13. ビジネス面
技術面
チームを
支援する
製品を
批評する
結合テスト
機能テスト
ユニットテスト
ユーザビリティテスト
探索的テスト
性能テスト
脆弱性テスト
ユニットテスト

14. ユニットテスト
•チームを支援する技術面のテスト
•開発者による開発者のためのテスト
•「どう作るのか？」
•設計とコードの質が向上
•大規模ではほぼ必須
•自動化が必須

15. TDDと黄金の回転 ©t-wada
きれい
汚い
(すぐには)動かない 動作する
Red
Green
Refactoring
TDDと黄金の回転
http://www.slideshare.net/t_wada/javaja-tdd-2nd

16. 実践テスト駆動開発

17. 二重のフィードバックループ
失敗する
受入テスト
を書く
失敗する
ユニットテスト
を書く
テスト成功!
リファクタリング

18. CI

20. JSをとりまく状況
•コードとチームの大規模化
•フロントエンド領域の増大
•高速で高品質な開発の要求

21. ユニットテストの
必要性が高まってる！

22. テスト環境の向上
•Node.jsの隆盛
•テスト関連ツールの盛り上がり
•MV*フレームワークや
モジュール化の仕組みが成熟

23. ユニットテストが
やりやすくなった！

24. http://www.flickr.com/photos/beorn_ours/5675267679/
What?

25. どこから手をつけたら。。

26. JSのユニットテストって
難しいんでしょ？

27. JSテストの難しい点
•コードがビューと結びつきがち
•実行環境＝ブラウザが扱いづらい
=> MV*な設計で解決
=> ツールで解決

28. MV*
•いろいろ宗派はあるけど、
やりたいことはビューとロジックの分離。
•それさえできれば、
ロジック（Model）のテストは
普通にできるはず。

29. 例) メール一覧画面
•Model
•全部のリスト
•宛先で絞り込み
•タグで絞り込み
•View
•受け取ったら表示するだけ

30. Modelのテストをしよう!
•純粋なロジック
•不確実性が低い
•リファクタリングで疎結合に分解

31. Viewのテストは
•DOMのテストは書きにくい
•ユーザビリティはテストできない
•画面を見ながらの試行錯誤が必要
•書きたくなったらチャレンジしよう！

32. http://www.flickr.com/photos/dunechaser/270552745/
How?

33. テストツールの分類
PhanotmJS
jsdom
envjs
実ブラウザ
Testem
Karma
Jasmine
QUnit
Mocha
JsTestDriver
Buster.JS
Chai
expect.js
Sinon.JS
実行環境
リモート
テストランナー
テスティング
フレームワーク
モック
ライブラリ

34. テスティングフレームワーク
•テストの記述と実行を担当
•どれを選んでも間違いはないレベル
•詳細は今日の他の方の発表を
お聞きくださいｗ

35. 実行環境が重要
•実ブラウザ
•本物だけど面倒、遅い
•ヘッドレスブラウザ (PhantomJS)
•だいたい本物でそこそこ速い
•でもWebKitだけ
•シミュレータ(jsdom, envjs)
•偽物だけど速い

36. リモートテストランナー
•ブラウザをキャプチャリングして
リモートでテストを実行するツール
•実ブラウザの欠点を補う
•同時に複数のブラウザでTDDが可能
•Testem, Karma(Testacular),
JsTestDeriver, Buster.JS

37. どれを選ぶ？
PhanotmJS
jsdom
envjs
実ブラウザ
Testem
Karma
Jasmine
QUnit
Mocha
JsTestDriver
Buster.JS
Chai
expect.js
Sinon.JS
実行環境
リモート
テストランナー
テスティング
フレームワーク
モック
ライブラリ

38. Demo
•おすすめ簡単構成
•Jasmine + Testem + 実ブラウザ
•FizzBuzz with TDD
•CI with PhantomJS

39. ユニットテスト以外にも
•カバレッジ測定
•静的解析
•Lint (JSHint, JSLint, Closure)
•型チェック (Closure, TypeScript)
•それらを支えるgruntなどなど

40. まとめ
•JSでもユニットテストは大事！
•モデルのテストから始めよう！
•テスト関連ツールの進化がやばい！
•TDDで楽しい開発！

41. http://www.flickr.com/photos/mlpeixoto/5351547427/
When?

42. Just Now!

43. ありがとうございました！