I am mitsuruog | werckerでフロントエンドをCIテストする

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

ベースは Node 用の基本構成

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

wercker - docs - Nodejs

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とします。@じゃないです。

box: node:4.2.2

bower を使うには

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

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

例）

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

参考資料

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