testem + mocha on Travis-CI - ブラウザでのテストを自動化する

node.js

Travis-CIでブラウザのテストできないのかなー、できないよなーと思いつつ、いろいろ探してみたら出来るような事を知り、今ホット（なのかな？）なtestemを使う事でmochaでのテストも実行できるらしい！という事を知ったので試してみました。

準備

package.jsonの記述を変更します。

package.json
"scripts": {
  "pretest": "./node_modules/.bin/bower install",
  "test": "./node_modules/.bin/mocha && ./node_modules/.bin/testem ci"
},
"devDependencies": {
  "bower": "~0.8",
  "chai": "~1.5",
  "mocha": "~1.8",
  "testem": "~0.2"
}

testemが必要なのでtestemを入れます。
mochaとchaiを入れていますが、node.jsでのテストに必要なのでインストールしています。
bowerはmochaとjQueryとchaiをインストールするためにインストールしています。


pretestなんて初めて書いたなーというのと、testは&&じゃなくてセミコロンとかの方が良かったかなーと今更。
node.jsでのテストでこけるとブラウザでのテストがされないので。

component.json

ちなみにcomponent.jsonはこんな感じ。

{
  "name": "base62",
  "version": "0.3.0",
  "main": "./base62.min.js",
  "devDependencies": {
    "chai": "~1.5",
    "jquery": "~1.8",
    "mocha": "~1.8"
  }
}

最近のbowerだとdevDependenciesが書けるようになってるみたいなので便利です。

test-base62.html

ブラウザで開いてテストするためのhtmlファイルにもちょっと変更を加えます。

<script src="../components/jquery/jquery.js"></script>
<script src="../components/mocha/mocha.js"></script>
<script src="../components/chai/chai.js"></script>
<script src="/testem.js"></script>

mochaやchaiの後にtestem.jsを加えるだけです。

testem.json

testemの設定ファイルを書きます。
この場合、htmlを開いてテストして欲しいので以下のように記述します。

{
  "test_page": "./test/test-base62.html"
}

詳しくはこの辺に。GitHub - testem/testem: Test'em 'Scripts! A test runner that makes Javascript unit testing fun.
test_pageを指定する場合はframeworkとかsrc_filesは指定できないようです。まあ、そりゃそうなんだけど。

.travis.yml

Travis-CIでFirefoxなどのテストをするために以下を追加します。

before_script:
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start
  - sleep 5

これで準備完了！

実行してみる

実行するとだいたい以下のような感じ。
Travis CI - Test and Deploy Your Code with Confidence
Firefoxとphantomjsでテストされます。


OS Xで実行してみてもなかなか面白い（ブラウザが勝手に起動して勝手に消える）のでお試しあれ。
ちなみに私の環境ではFirefoxとChromeとSafariでテストされました。Operaも入れているとOperaもテストされたのかも。


base62.jsで試してみたので、詳しくご覧になりたい方はリポジトリの方へどうぞ。


参考：
http://about.travis-ci.org/docs/user/gui-and-headless-browsers/
http://the-little-book-of-busterjs.readthedocs.org/en/latest/doc/column/TravisCI/