WebStormでKarma+Mocha+power-assertのjavascriptテスト環境を作る



# npmでパッケージを揃える
### グローバル

`npm install -g grunt-cli bower`

### プロジェクト環境

- npm

プロジェクトルートに以下のpackage.jsonを置いて`npm install`するとパッケージが揃います

```json:package.json
{
  "engines": {
    "node": ">= 0.10.0"
  },
  "devDependencies": {
    "grunt": "~0.4.2",
    "karma-mocha": "^0.1.3",
    "karma-phantomjs-launcher": "^0.1.4",
    "grunt-espower": "^0.6.0",
    "grunt-karma": "^0.8.2"
  }
}
```

- bower

`bower install power-assert`でpower-assertと依存パッケージがインストールされます。

# Grunt設定

プロジェクトルートに`Gruntfile.js`を作り、テストに必要なタスクを定義します。ちなみに今回のプロジェクトのディレクトリ構成は

```
root
  /bower_compornents
  /node_modules  
  /src  
    /main  
      /sample_calc.js  
    /test  
      /sample_calc_test.js
  /Gruntfile.js
  /bower.jsoon
  /package.json
  /karma.conf.js
```

になっています

```js:Gruntfile.js
/*global module:false*/
module.exports = function (grunt) {

    // Project configuration.
    grunt.initConfig({
        // Task configuration.
        espower: {
            test: {
                files: [
                    {
                        expand: true,
                        cwd: 'src/test/',
                        src: ['*.js'],
                        dest: 'src/test/espower/',
                        ext: '.js'
                    }
                ]
            }
        },
        karma: {
            unit: {
                options: {
                    configFile: 'karma.conf.js',
                    autoWatch: false,
                    browsers: ["PhantomJS"],
                    reporters: ["progress"],
                    singleRun: true,
                    keepalive: true
                }
            }
        }
    });

    // These plugins provide necessary tasks.
    grunt.loadNpmTasks('grunt-espower');
    grunt.loadNpmTasks('grunt-karma');

    grunt.registerTask('test', ['espower', 'karma']);
};
```

- grunt-espower
  このタスクでは`/src/test/*.js`に一致するファイルを`/src/test/espower/*.js`にコンパイルします。コンパイル時にテストの実行に必要な他のjsファイルと結合されるようです。

- grunt-karma
  このタスクでKarmaを用いてテストを実行します。今回はすべてWebStormの中でテストを行うのでブラウザーはPhantomJSにします。

# karma.conf.jsの設定
Karmaの設定を記述します。

```js:karma.conf.js
module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['mocha'],
        files: [
            'bower_components/assert/assert.js',
            'bower_components/empower/lib/empower.js',
            'bower_components/estraverse/estraverse.js',
            'bower_components/power-assert-formatter/lib/power-assert-formatter.js',
            'bower_components/power-assert/lib/power-assert.js',
            'src/main/*.js',
            'src/test/espower/*.js'
        ],
        exclude: [

        ],
        preprocessors: {

        },
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: ['PhantomJS'],
        singleRun: false
    });
};
```

mochaを使ってPhantomJSでテストを行うように記述します。またテストに必要なファイルを`files`配列に書きます。 **書いた順番で読み込まれて実行される** ので、自分で書くときや、別のモジュールを追加するときは順番に気をつけてください。

# WebStormの実行プロファイルを作る
 
`Run -> Edit Configurations...`  
左上の追加ボタンからKarmaを選択して新しいプロファイルを作ります。  
![001.png](https://qiita-image-store.s3.amazonaws.com/0/20253/11d39b18-eb02-10ca-e41d-cfd794a45cc7.png)

このままでは、karmaのみの実行になるので、`Before launch`に`grunt-espower`を実行するよう設定します。`Befre launch`の追加ボタンから`Run external tools`を選択します。  
新しいアイテムを追加し、画像のように`grunt espower`が実行されるようにします。  
![002.png](https://qiita-image-store.s3.amazonaws.com/0/20253/eeaac43a-f0cb-65bc-12e3-cbfbd88e64a0.png)

# テストを書く
ここまで来たら最後にテストを動かすjsファイルを書きます。今回は簡単な足し算を行う`sample_calc.js`と、それをテストする`sample_calc_test.js`を書きました

```js:sample_calc.js
var add = function (a, b) {
    return a + b;
};
```

```js:sample_calc_test.js
describe("calc test", function () {

    it("add test", function () {
        var ary = [1, 2];
        assert(add(ary[0], ary[1]) === 2);
    })
});
```

# 実行

実際にさきほど設定した実行プロファイルを実行してみましょう。もしgruntが見つからないエラーが出たら、システムの環境変数にnodeのパスが通ってないです。
![003.png](https://qiita-image-store.s3.amazonaws.com/0/20253/919a7954-ffad-43ca-430e-8350ad852762.png)

power-assertすごいですね。びっくりしました。  
  
ちなみに、WebStormのデバッグはChromeもしくはFirefoxにしか対応しておらず、このKarmaのプロファイルではブレークポイントなどを使ったjsのデバッグはできません。WebStormでのjsのデバッグには別のプロファイルが用意されているので、そちらを使いますが今回はpowwer-assertを使ってテストを実行するのが目的なのでそちらには触れません。

以上、だいぶ長かったですがWebStorm内でKarmaを実行してpower-assertが使えました。今回の方法ではKarma実行の前処理に予め定義したgruntのタスクをコマンドラインで呼び出すという多少強引な手を用いましたが、WebStorm8でGruntコンソールが追加されるなど、gruntとの連携が今後強くなりそうなので、もしかすると近いうちにgruntをそのまま実行プロファイルとして使えるようになるかもしれません。（現状だとgruntコンソールからタスク実行はできるものの、キーボードショートカットなどが貧弱でマウス操作が必須）