CoverallsというGitHubのプロジェクトのテストカバレッジを記録するためのサービスがあって、クライアントサイドのJavaScriptのテストでもできそうだったんでやってみた。

最近のJavaScriptのカバレッジツールはBlanket.jsがいけてるらしいんだけど、これを使ってクライアントサイドJavaScriptのカバレッジをCoverallsに投げるの若干めんどそうだったんで、ponchoっていうラッパーを使ってみた。

ponchoはMocha、PhantomJS、Blanket.jsをうまいことつないでくれるやつで、普通にMochaでテスト書いてるプロジェクトだったらすごく簡単に設定できる。Mocha限定になっちゃうけど。

すでにMochaでテストが書かれてて、test/index.htmlとかでテスト実行できる（ブラウザで開いてMochaのテストが走る）とすると、まず、

$ npm install poncho

して、カバレッジをとりたい対象のファイルを読み込んでいるscript要素にdata-coverをつける。

<script src="flipsnap.js" data-cover></script>

そしてponchoコマンドを実行するとカバレッジが取れる（phantomjsがインストールされてないとダメかも）。こんな感じ。

$ ./node_modules/.bin/poncho test/index.html
file: flipsnap.js
coverage: 81.0909090909091
hist: 223
misses: 52
sloc: 275

これをCoverallsに投げるには、レポーターにlcovを指定してnode-coverallsにパイプで出力を渡すだけ。

$ npm install coveralls
$ ./node_modules/.bin/poncho -R lcov test/index.html | ./node_modules/.bin/coveralls

ローカルでこれ実行してもエラーになるので、これをtravis-ciで実行できるようにする。

例えば.travis.ymlはこんな感じ。

script: phantomjs test/lib/mocha-phantomjs.coffee test/index.html
after_success:
  - npm install poncho coveralls
  - ./node_modules/.bin/poncho -R lcov test/index.html | ./node_modules/.bin/coveralls

npmのインストールとかはpackage.jsonに書いてもいいけどそのへんはお好みで。

そしてCoverallsとTravisCIの両方でプロジェクトをONにしてpushするとTravisCIからCoverallsに結果が送られる。結果はこんな感じ。

pxgrid/js-flipsnap | Coveralls - Test Coverage History & Statistics

既存のコードにほとんど手を入れず（data-coverつけるぐらいで）簡単に設定できた。すごい。Mochaですでにテスト書いてある場合はponchoでCoverallsは簡単でオススメ。