werckerでフロントエンドをCIテストする

github private repositoryも無料でCIテストできるのでwerckerを使うことが多いです。
プロジェクト立ち上げ時に設定した後、安定すると放置になる設定周り。ついつい忘れてしまうので、自分用メモ。
フロントエンドエンジニアでもCIテストできる最小構成です。

ベースはNode用の基本構成

まず、自動テストはNode.jsで行うようにしていると思うので、Node用の基本設定をベースにするのがいいと思います。

wercker - docs - Nodejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
box: nodesource/trusty
# Build definition
build:
# The steps that will be executed on build
steps:
# A step that executes `npm install` command
- npm-install
# A step that executes `npm test` command
- npm-test

# A custom script step, name value is used in the UI
# and the code value contains the command that get executed
- script:
name: echo nodejs information
code: |
echo "node version $(node -v) running"
echo "npm version $(npm -v) running"

Nodeバージョン指定

Nodeのバージョンを指定したい場合の設定方法。
boxで指定できます。Docker hubのコンテナを指定できるので、Docker hub上のNodeのOFFICIAL REPOSITORYを指定しておきます。バージョン指定はよく間違えるのですが、node:4.2.2とします。@じゃないです。

1
box: node:4.2.2

bowerを使うには

フロント側のライブラリをbowerから取得しているプロジェクトは、テストの前にbower installしておく必要があります。
buildフェーズにてbowerをグローバルインストールして、bower installできるようにしておきます。permissionで怒られるので--allow-rootを忘れずに。
(このあたりは独自でbox作成しておくと不要になりそうです。)

1
2
3
4
5
6
7
8
9
10
11
build:
steps:
# npm install -g でbowerをインストールする
- script:
name: install npm -g
code: sudo npm install -g grunt-cli bower

# bower install
- script:
name: install bower
code: bower install --allow-root

これでpackage.jsonのscriptのtestにテスト用のコマンドが指定されている場合は- npm-testすればOKです。

おまけ

CIテストはヘッドレスブラウザを使いましょう

ローカルは実ブラウザを使ったテストしている場合は、ヘッドレスブラウザを使いましょう。
ヘッドレスブラウザはPhantomJSが代表的です。だた、v1.0系はモダンブラウザとのcompatibilityの問題があるため、v2.0以降を使った方がいいです。

CIでも実ブラウザを使いたい場合は、werckerで頑張るより、お金を払ってSauce Labs使った方がいいと思います。

テスト結果をhipchatで通知する

テスト結果をhipchatなどで通知したい場合は、buildフェーズのafter-stepsで行います。
hipchatのintegrationの例は公式サイトにあります。

wercker - docs - Hipchat notifications

例)

1
2
3
4
5
6
7
8
9
10
11
12
build:

# 省略。。。

after-steps:
- install-packages:
packages: sudo gawk
- hipchat-notify:
token: $HIPCHAT_TOKEN
room-id: $HIPCHAT_ROOM
from-name: wercker
on: failed

(※)$HIPCHAT_TOKEN$HIPCHAT_ROOMはweckerで定義した環境変数です。

まとめ

これで最低限のCIテストができるようになりました。
初めてだと少し苦労する点があるので、まとめてみました。

実際のwercker.yml

wercker.ymlはこちらに置いておきます。

https://gist.github.com/mitsuruog/ee724841d81c6ecab5e9

参考資料

もっと頑張りたい人向け。