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

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

ベースはNode用の基本構成

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

wercker - docs - Nodejs

1
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
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
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

参考資料

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