JavaScript Unit Test Why? What? How?

JavaScript Unit TestWhy? What? How?

佐藤鉄平@teppeis

2013/04/26第38回HTML5とか勉強会

自己紹介•佐藤鉄平•@teppeis•サイボウズでkintoneっていうB2Bサービスを作っています。

•フロントからバックエンドまで•宗派: Vim, JS, Google Closure

JS連載２年目に突入!

一人目なので、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

実行環境

リモートテストランナー

テスティングフレームワーク

モックライブラリ

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

実行環境が重要•実ブラウザ•本物だけど面倒、遅い•ヘッドレスブラウザ (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!

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