Vagrant + docker + karma で ES6を試したメモ

#Dockerで環境設定

まずはDockerfileを書いてkarmaを利用できる環境を用意。

```share/Docker/karma/Dockerfile.
FROM node:4.2.3

RUN mkdir -p /usr/karma/share
WORKDIR /usr/karma

#package.jsonを書き出し
RUN echo '{ "name": "my_karma","scripts": {"tests": "karma start" } }' > package.json

RUN npm install --save-dev babel-loader
RUN npm install --save-dev webpack
RUN npm install --save-dev jasmine-core
RUN npm install --save-dev karma
RUN npm install --save-dev karma-jasmine
RUN npm install --save-dev jasmine
RUN npm install --save-dev karma-phantomjs-launcher
RUN npm install --save-dev karma-webpack
RUN npm install --save-dev babel-preset-es2015
```

ビルド用のシェルを書く。

```share/shell/env.conf
#!/bin/bash

# 共有ディレクトリ
path_share_dir="/home/vagrant/share"

# docker用ディレクトリ
path_Dockerfile_dir="${path_share_dir}/Docker"

# 開発用ディレクトリ
path_dev_dir="${path_share_dir}/dev"

# dockerイメージファイル名(:タグ名)
imageName_karma="hibo/karma"

# コンテナ名
containerName_karma="karma"
```

```share/shell/build_karma.sh
#!/bin/bash
source "/home/vagrant/share/shell/env.conf"

cd $path_Dockerfile_dir/karma && docker build -t $imageName_karma .
```

dockerイメージの作成。

```
./share/shell/build_karma.sh
```


#テストの手順

以下のサイトを参照に、karmaでes6のテストを行う。
[Writing Jasmine unit tests in ES6][link-2]

`could not find preset` のエラーが出たので、
babel-preset-es2015をインストール（上記Dockerfile参照）。
以下の設定ファイルのmoduleにqueryを追加した。

```share/dev/karma/karma.conf.js
module.exports = function(config) {
  config.set({
    browsers: ['PhantomJS'],
    files: [ { pattern: './test/test-context.js', watched: false } ],
    frameworks: ['jasmine'],
    preprocessors: { './test/test-context.js': ['webpack'] },
    webpack: {
      module: {
        loaders: [ {
          test: /\.js/, 
          exclude: /node_modules/, 
          loader: 'babel-loader',
          query:{"presets":["es2015"]}
        } ]
      }
    },
    webpackServer: {
      noInfo: true 
    },
    port: 9876
  }); 
};
```

エントリポイント。

```share/dev/karma/test/test-context.js
var context = require.context(
                './source', 
                true, 
                /-spec\.js$/
              );

context.keys().forEach(context);
```

テスト用のクラスファイル。

```share/dev/karma/test/source/calculator.js
export class Calculator{ 
  add(op1,op2){ return op1 + op2; } 
  subtract(op1,op2){ return op1 - op2; }
}
```

テストスクリプト。

```share/dev/karma/test/source/calculator-spec.js
import {Calculator} from './calculator'; 

describe('Calculator', () => { 
  it('should add two numbers', () => { 
    let calculator = new Calculator(); 
    let sum = calculator.add(1,4); 
    expect(sum).toBe(5); 
  }); 
  it('should subtract two numbers', () => { 
    let calculator = new Calculator(); 
    let sum = calculator.subtract(4,1); 
    expect(sum).toBe(3); 
  }); 
});
```

dockerコンテナの実行用シェルを作成。

```share/shell/karma_docker_start.sh
#!/bin/bash

source "/home/vagrant/share/shell/env.conf"
docker run -it --name $containerName_karma --rm \
           -v $path_dev_dir:/usr/karma/share \
           $imageName_karma /bin/bash -c \
           'npm run-script tests -- ./share/karma/karma.conf.js'
```

実行。

```
./share/shell/karma_docker_start.sh
```

これで実行できるが、ファイルを更新したら自動で再読み込みができていない。
単純に`watched：true`にすればいいというものでもなさそう。

# ファイルの監視を行う。
gulpを入れて管理させるようにする……ともうwebpackと分けてしまったほうがいい気がする。
次回はそちらの環境を作ってみたいと思う。


#参照サイト
[webpack/karma-webpack][link-1]
[Writing Jasmine unit tests in ES6][link-2]
[npm-scriptsに関するメモ][link-3]
[Jasmine × Karma × Gulp でつくるユニットテスト環境 入門 - AngularJS + TypeScript #3][link-4]
[Karma,Mocha,WebPack,gulp,ES6でテストを書いてみた][link-5]
[karma-runner/gulp-karma][link-6]

[link-1]:https://github.com/webpack/karma-webpack
[link-2]:http://www.syntaxsuccess.com/viewarticle/writing-jasmine-unit-tests-in-es6
[link-3]:http://blog.sasaplus1.com/2014/11/30/01/
[link-4]:http://tech.recruit-mp.co.jp/front-end/post-5299/
[link-5]:http://blog.mamansoft.net/karmamochawebpackgulpes6%E3%81%A7%E3%83%86%E3%82%B9%E3%83%88%E3%82%92%E6%9B%B8%E3%81%84%E3%81%A6%E3%81%BF%E3%81%9F/
[link-6]:https://github.com/karma-runner/gulp-karma