後から書くフロントエンドのテスト

今業務でやってるプロジェクト、ジョインした時点では

  • 普通のソーシャルゲーム
  • 規模はそこそこ大きい
  • MVCフレームワークなどは使ってない
  • テスト0
  • 運用中

フロントはこんな感じでした。
これはヤバいと思い開発の合間合間にテストを書いていったのですが、
その時にやったことの記録です。

使ったもの

  • 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が頻繁に変わるソーシャルゲームの場合
このくらいが落としどころなのかもしれません。

とはいえ、ここまでやってきて結構つらい感じはあったし
最初からテスト書きながら開発するのに越した事は無いと思います。