mocha+testling-ciでブラウザテストを自動化する

結果的にはこの様なバッジが出来ます、githubにpushする度更新されるので便利。

環境を整える

コマンドラインからもcoffeeやmochaは実行したいのでこの二つはグローバルに入れる。詳細は前の投稿で。

$ git init
$ npm init

$ npm install coffee-scirpt -g
$ npm install mocha -g
$ npm install chai --save-dev

package.jsonにtestling設定を追加。

欲張りすると無駄に重なるので注意。

package.json

{
  "testling": {
    "browsers": {
      "ie": [ 6, 7, 8, 9, 10 ],
      "ff": [ 12, 13, 14, 15, 16, 17 ],
      "chrome": [ 20, 21, 22, 23 ],
      "opera": [ 10, 11, 12 ],
      "safari": [ 5.1 ]
    },
    "harness" : "mocha",
    "files": "test/*.coffee"
  },
  "devDependencies": {
    "chai": "*",
    "mocha": "*",
    "coffee-script": "*"
  }
}

githubのプロジェクトページでwebhookを設定

プロジェクトページ > settingボタンをクリック > サイドバーからservice hooks > WebHook URLに

http://git.testling.com

と入力。

詳細はgithubの公式ドキュメント参照。

完成

これでgithubにpushする度以下のURLで結果が見れます、テスト待ちに少々時間がかかります。

http://ci.testling.com/ユーザー名/プロジェクト名

README.mdにはこう書きますとテスト結果が画像で表示されます。

README.md

[![browser support](http://ci.testling.com/USER/PROJECT.png)](http://ci.testling.com/USER/PROJECT)

詳細は公式ドキュメントを参照。

作者はbrowserifyなどを作ったbrowserling