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