2014/09/11 社内勉強会資料

1. MochaとChaiでやる JavaScriptテスト
株式会社FLECT
小西俊司
2014/09/11

2. Mochaとは
JavaScript製のテストフレームワーク
HTML内での実行とコマンド実行の両方をサポート
非同期処理を同期化して順番に実行出来る
BDDスタイルとTDDスタイルの両方の記法をサポート
Assertionライブラリは含まれていないので自分で選択

3. Assertionライブラリ？
Assert系、Should系、Expect系など複数の系統がある
書き方が違うだけでやっていることは同じ
assert.equal(a, 5);
a.should.equal(5);//ObjectのPrototypeを拡張している
Expect(a).to.equal(5);
Assertだけでもライブラリ毎に多彩な書き方がある
assert.ok
assert.isObject
assert.match

4. Chaiとは
Assert、Shoud、Expectのすべてをサポートしたライブラ リ
ただし実際に使用する場合は記法はどれかに統一した方が 良い
多分既存のAssertionライブラリの中では一番多機能

5. インストール–HTML実行
mocha.js、mocha.css、chai.jsを参照可能なところにコ ピー
クライアントライブラリの取得はできるだけBowerを使 用した方が良い
バージョン管理が楽になるので
jQuery等のメジャーなライブラリはブラウザのキャッシュ を使うためにCDNを使うのもアリ
bower install mocha --save-dev
bower install chai --save-dev
cpbower_components/mocha/mocha.* public/test
cpbower_components/chai/chai.js public/test

6. インストール–コマンド実行
npmでインストール
mochaはコマンドを使用するのでグローバルインストー ルする
npminstall –g mocha
npminstall chai --save-dev

7. HTMLの書き方
Mochaとchai
それ以外に必要なJS
(テスト対象のJS)
BDDスタイル
テストのJS
テスト結果出力用のdiv(id=“mocha”)
テストの実行
(PhantomJSでも実行可能)

8. JSの書き方
FizzBuzzサンプル
ここではテスト対象のメソッドも
同一ファイル内に書いてあるが
本来はテスト対象は外部にある
BDDで使用するキーワードは
describeとitの2つ
★describe
単純なグループ化
複数ネスとしても良い
describe has some describes
and some its.
★it
テストケース
it has some asserts.
assertを使用する

9. 非同期サポート
itのコールバック関数に
引数が宣言されている場合、
その引数に完了通知の
コールバック関数が渡される
その関数が実行されるまで
次のテストは実行されない
(デフォルトでは2秒で
タイムアウトする)

10. before(after), beforeEach
beforeはdescribe内で最初に一度だけ実行
beforeEachはdescribe内の各itを実行する前に毎回実行 (ネストしたdescribe内でも有効)
after、afterEachはその逆
itと同様に引数を宣言することで非同期処理の完了待ち が可能

11. タイムアウト
タイムアウト
デフォルト2000ms
コマンドラインオプション–tで設定可能
スロー判定
デフォルト75ms
コマンドラインオプション–s で設定可能
describeまたはitのコールバック内で個別に設定すること も可能
this.timeout(5000);
this.slow(3000);

12. コマンド実行
テストの書き方はHTMLから実行する場合と同じ
requireでNode.jsの各種モジュールが利用できる
HTTPのエンドポイントのテストを全部これでできないか と実験中
テストシナリオを決めて
Http(s)モジュールでリクエストの実行とレスポンスの確認
Pgモジュールで更新されたデータを確認
Input, Output, Storageが検証可能なので多分良い感じ
画面操作の検証はSeleniumじゃないと無理

13. Http(s)モジュール
Node.js標準のhttpライブラリ
びっくりするぐらいRaw
Cookieを自分でセットしないとならない
POST文字列を自分でURLEncodeして組み立て
Content-TypeとかContent-Lengthの計算も自力
何故かデフォルトでChunked
ラッパーを開発中
jQuery#ajaxライクなdata引き渡し
レスポンス完了時のコールバック
Cookie等のHTTPヘッダも空気読んで追加
CSRFサポート

14. Pgモジュール
Windowsだとそもそもインストールが辛い
node-gypでインストール時にバイナリをコンパイル
Python 2.7が必要
Visual Studioのインストールが必要(Express版で良いので無 償)
ていうかもはや開発者はMacを使うか、VMを使用するべき
そこを乗り切ればそれなりに使いやすいがやはりラッ パーは必要
HTMLテストからは実行不可

15. PhantomJS
HTMLテストをブラウザなしでコマンドで実行できる
Mochaのテストを実行するためには以下のインストール が必要
PhantomJS
mocha-phantomjs(グローバル)
以降、mocha-phantomjsコマンドでテストが実行可能
★注意
PhantomJSでの実行は
Fileプロトコルでの実行になるので
JSやCSSの参照に「//」始まりや
絶対パスを使用してはならない

16. さらに自動化したい場合
Grunt
grunt-mocha(Client side. 要PhantomJS)
Grunt-mocha-test(Server side)
各種CIツール
phantomjsがあればなんとかなるはず

17. メール送信のテストも出来るかも
メールテスト用のサーバをHeroku上に作成するというア イデアをちょっと思いついた
例えば新規ユーザ作成時にメールでユーザの存在確認を するような処理
Mochaからユーザ登録のURLをキック
メールアドレスはSendGridのParseAPI宛にしておく
テストサーバが受信メールをフックしてキャッシュに保存
Mochaからはテストサーバのポーリング、またはWebSocket で完了待ち
メールは数分以上遅延することがあるのが難点
が、うまくすれば汎用的なものを作れる可能性はある
HerokuButtonで公開するアプリとしてちょうど良いかも

18. まとめ
周辺ツールを整備していけばかなり、汎用的なテスト ツールになる可能性はある
エンドポイントを叩くテストはある程度自動生成できる と思う
テストしやすいエンドポイント設計をすることも重要
できるだけレスポンスはJSONにする
Seleniumでのテストやサーバサイドの単体テストが不要 になるわけではない
が、必要なテスト数は減らせる