読了: 約 4 分

サービスを運用する中でテストを書いてないと拡張が難しい、確認に無駄な口数がかかるようになりますよね。

テスト駆動開発について今更ながらメモしておきます。

テスト駆動開発とは

詳しい説明はwikipedia先生に譲ります。
テストを書いてから実装の流れですね。
小さなスタートアップではTDDなのかどうか微妙ですが、今のプロジェクトでは徐々にこういう方向に持っていっています。
機能追加・拡張する時に無駄なフロントの確認項目が増えるからです。
最近ではgrunt,phantomなどで自動化したりサイトのキャプチャをとったり、
フロントのテストのためのものが増えてきましたね。

Jasmine / Karmaで永続的にチェックする

Karmaはテストの実行環境
karma

下記がGunosyで流れてきて、非常に簡単で、分かり易いです。
今のプロジェクトがテストをJasmineで書いているので、Jasmineで進めようと思っているのですが、
どうしたいのかにもよりますが、何でテストを書けばよいのか迷っていたのでこれならファイルを修正するたびに
wacherが働くので楽ですね。


【javascriptを使う人に知って貰いたい（エンジニア、デザイナ問わず）】karmaを使ったテスト駆動開発入門（ついでにJasmineも）

流れを知りたい方はこの動画が参考になります。
元々Testacularというものが今はKarmaになったようです。

他参考：
karmaでらくらくJavaScriptをテスト

結果

//実行
karma start

下記がコマンドの結果。
最初はわざとエラーを出していて、その後に成功しています。

INFO [karma]: Karma server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 27.0 (Mac)]: Connected on socket id eEPuMNG5Y2-7pi2uJYN2
Chrome 27.0 (Mac) Hello Test test FAILED
Expected 'test1' to equal 'test'.
Error: Expected 'test1' to equal 'test'.
at null.<anonymous> (~/karma/spec/HelloSpec.js:9:15)
Chrome 27.0 (Mac): Executed 1 of 1 (1 FAILED) (0.058 secs / 0.011 secs)
INFO [watcher]: Changed file "~/karma/spec/HelloSpec.js".
INFO [watcher]: Changed file "~/karma/spec/HelloSpec.js".
Chrome 27.0 (Mac): Executed 1 of 1 SUCCESS (0.483 secs / 0.009 secs)
INFO [watcher]: Changed file "~/karma/spec/HelloSpec.js".
Chrome 27.0 (Mac): Executed 1 of 1 SUCCESS (0.278 secs / 0.004 secs)
WARN [Chrome 27.0 (Mac)]: Disconnected
INFO [Chrome 27.0 (Mac)]: Connected on socket id BIKQ835GLrhvF3vDJYN3
Chrome 27.0 (Mac): Executed 1 of 1 SUCCESS (0.04 secs / 0.009 secs)

Jasmineを実際のアプリケーションでやっているような例ががあったのでそちらを参考に。

coverageの計測

karma.conf.js内に下記を記述し、coverageを計測します。

preprocessors = {
  'src/*.js': 'coverage'
};
reporters = ['progress', 'coverage'];

coverageReporter = {
  type: 'html',
  dir : 'coverage/'
};

フォルダの構造は下記で、index.htmlを開くと計測結果が表示されます。
またファイル単位でも見る事が出来るの便利ですね。

coverageを計測し、質の高いコードを書いていく事が大切だと思います。