テストの実行環境はDockerで作ると、環境をアレコレする必要がなくて便利です。 フロントエンドのテスト環境も簡単に建てられて、簡単に捨てられると便利なはずです。

というわけで Docker を使って Karma の環境を構築してみます。

必要なもの

  • docker
  • docker-compose
  • npm

Dockerfile

まずは Dockerfile を用意します。コンテナ内で必要なのは xvfb chrome firefox node npm karma あたりです。

FROM ubuntu:14.04

RUN apt-get install -y wget && \
    wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \
    echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list && \
    apt-get update && \
    apt-get install -y xvfb firefox google-chrome-stable nodejs npm && \
    ln -s `which nodejs` /usr/local/bin/node && \
    npm install -g karma-cli

WORKDIR /src
ENV DISPLAY :99

CMD rm -f /tmp/.X99-lock && \
    /usr/bin/Xvfb :99 & \
    while [ ! -f /tmp/.X99-lock ]; do sleep 1; done && \
    karma start

Chrome をインストールするためにいろいろやっていますが、大体は apt-get で入ります。コマンドは Xvfb の起動を待ってから Karma を起動させています。

今回はこれを docker-compose から 使います。

# docker-compose.yml

karma:
  build: .
  volumes_from:
    - data
  ports:
    - "9876:9876"

data:
  image: ubuntu:14.04
  volumes:
    - .:/src

docker-compose build でイメージを作っておきます。

Karma

Karma 側の設定もしておきます。 npm init で package.json を作ったら npm install -D karma で Karma をインストールします。 ./node_modules/.bin/karma init とすると karma.conf.js が作られます。聞かれる質問には適当に Chrome と Firefox でテストすると答えれば OK です。

// karma.conf.js

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['mocha'],
        files: ['test/**/*.js'],
        exclude: [],
        preprocessors: {},
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome', 'Firefox'],
        singleRun: false
    });
};

テスト対象のコードも用意しておきます。

// test/square.js

function square(x) {
    return x * x;
}

describe('square', function() {
    it('returns square', function() {
        if (square(2) === 4)
            throw Error();
    });
});

テストの実行

テストを実行するためにコンテナを起動します。

$ docker-comose up -d

ログを見てみると Karma が起動してテストを実行するのがわかります。

$ docker-compose logs karma

karma.conf.js に autoWatch: true が指定されているのでファイルを変更すると自動でテストされます。テストがわざと失敗するように書き換えると、自動で実行されること、テストが失敗することがわかります。

ファイルを編集したタイミング以外で実行したい場合は docker exec で可能です。

$ docker exec `docker-compose ps -q karma` karma run

docker-compose ps -q karma はコンテナIDを調べているだけなので、ID か名前がわかっているならもっと簡潔に書けます。

karma.conf.js を編集するなどした場合は再起動します。

$ docker-compose restart karma

ポート 9876 を開けておけば debug.html にアクセスして DevTools 等を使ってデバッグもできます。

さいごに

Chrome のインストールとか Xvfb の起動とか面倒な部分はありますが、一度作ってしまえば簡単につけたり消したりできる環境が作れます。 Dockerfile さえ作ってしまえば他のマシンにも同じ環境を作れるので便利に使えるはずです。