後から書くフロントエンドのテスト
今業務でやってるプロジェクト、ジョインした時点では
フロントはこんな感じでした。
これはヤバいと思い開発の合間合間にテストを書いていったのですが、
その時にやったことの記録です。
使ったもの
- Mocha
- chai
- Sinon.js
- testem
- PhantomJS
- CasperJS
DOMのテストもしたかったので実行環境はブラウザにしています。
Jasmineでも良かったのですがアサーションも自分で選びたかったので
Mochaを使いました。
どのくらい書いたか
結論から言うと共通のメソッドやコンポーネントだけしか書いてません。
そもそもテストを書く事を全く考慮されていないコードで、
DOMと密結合しまくりだったり
if (result) { resultDom += '<div class="result"...'; } wrapper.innerHTML = resultDom;
長過ぎる関数だったり
function buildHogeList = function() { // 200行くらいの処理 }
外部から完全に遮断されていたり
(function() { var HogeController = function() {... })();
といった有様でした。
最初は頑張ってこれらに合わせて書いていたのですが、
- 「
.hogeButton
という要素をクリックするとhogeController.hogeClickHandler
が呼び出される」 - 「buildHogeTitleは
<div class="hoge">massage</div>
というDOMを生成する」
みたいなテストケースをひたすら書いているのはあまりにも効率が悪いと感じたので
それらを補完する意味でも後述のCasperJSなどを使用したテストに注力しました。
CasperJSが便利
単体テストに加えて、CasperJSでスクレイピングをするようにしました。
CasperJSはテストやスクレイピング用のユーティリティを備えたPhantomJSのラッパーです。
動作としては
- 全ページのチェック
- チュートリアルの進行
- 基本ゲームループ
合わせてjsエラーのチェック、DOMの状態などのアサーション、
スクリーンショットを取ってレイアウトをざっくり確認、といった事をしています。
Jenkinsとの連携
Jenkins上に専用のジョブを作成して、ビルド後にトリガーで実行されるようにしました。
ビルド前に単体テスト、ビルド後にそのサーバー上でCasperJSでのテストを実行しています。
これはまだやってないんですが、 HARファイルや画面キャプチャなどの成果物を
アップロードしてどこかで確認できるようになるとかなり捗りそうだなーと考えています。
思ったこと
テストファーストとかカバレッジとか完全に無視してしまってますが
仕様やDOMが頻繁に変わるソーシャルゲームの場合
このくらいが落としどころなのかもしれません。
とはいえ、ここまでやってきて結構つらい感じはあったし
最初からテスト書きながら開発するのに越した事は無いと思います。