mocha + power-assert (+ karma)環境の構築

ここでは、mocha + power-assert + karma 環境の設定手順とテストの実行方法を頭の整理＆備忘の為にまとめています。尚、本ページの情報は、Web知識の浅い、Node.jsの扉を叩いている程度のレベルの私が、ググった情報です。従って、誤りや、ずれてるところも多々あると思います。引用したものについては、出来る限り引用元を記載しましたが漏れている可能性もあります。

[karma](https://github.com/karma-runner/karma) を追加することで、以下の様にブラウザ経路によるフロント側のjavascriptもテストすることが可能です。
[karma](https://github.com/karma-runner/karma)を実行すると、ブラウザ(設定で指定が可能)が自動で起動され対象のテストを実行し、テスト結果はターミナル上に出力されます。また、指定により複数のブラウザでのでの評価が可能であり、ブラウザ種別依存の不具合検出にも役立ちます。

![mocha-power-assert-karma.png](https://qiita-image-store.s3.amazonaws.com/0/91771/0ae4fe2a-9ecc-d51b-9279-3445b3f04127.png)


本ページでは、 [mocha + power-assert環境の構築](http://qiita.com/gitseitanaka/items/ea47d261284879a1d774) で構築した環境に対して、 [karma](https://github.com/karma-runner/karma) をセットアップする方法をまとめます。
尚、フロント側からのテストが出来るということで、HTMLを絡めたテストが出来るらしいですが、ここでは触れません。



## 設定

大きく手順は以下の通りです。


1. 準備
2. karma関連モジュールのインストール
3. __karma.conf.js__ の生成＆編集


### 準備

* 先立ち [mocha + power-assert環境の構築](http://qiita.com/gitseitanaka/items/ea47d261284879a1d774) にて環境を構築しておきます。


### karma関連モジュールのインストール

* karmaを利用する為のモジュール群をインストールします。karmaは、テスト関連(開発より)のモジュールの為、
一部モジュール(karma-cli)を除き、 __--save-dev__ でlocalインストールします。


   * karmaをCLIで利用する為のモジュールのインストール。パス指定を省略するため、本モジュールのみ __-g__ でインストールします。既にinstallずみの場合は不要です。
       * [karma-cli](https://www.npmjs.com/package/karma-cli)
   * machaのkarma向けプラグイン(karma-mocha)をインストール
      * [karma-mocha](https://github.com/karma-runner/karma-mocha)
      * [karma-mocha-reporter](https://www.npmjs.com/package/karma-mocha-reporter)  (出力結果を見やすくしてくれます)
   * フロント側でpower-assertを解釈する為のモジュール群をインストール
      * [karma-browserify](https://www.npmjs.com/package/karma-browserify)
      * [babelify](https://github.com/babel/babelify)
      * [babel-plugin-espower](https://www.npmjs.com/package/babel-plugin-espower)
   * フロント側となるブラウザのランチャのインストール
ここでは、chromeを選択していますが、IE・firefoxなどのランチャを複数インストールしても可

      * [karma-chrome-launcher](https://github.com/karma-runner/karma-chrome-launcher)
      * (その他のランチャについては [こちら](https://www.npmjs.com/browse/keyword/karma-launcher) を参照)

> まとめるとこんな感じ


~~~
 > npm install -g karma-cli

 > npm install karma-mocha --save-dev -msvs_version=2012
 > npm install karma-mocha-reporter --save-dev 

 > npm install karma-browserify --save-dev
 > npm install babelify --save-dev
 > npm install babel-plugin-espower --save-dev

 > npm install karma-chrome-launcher --save-dev
~~~

### __karma.conf.js__ の生成＆編集

* __karma.conf.js__ を環境のルート(package.jsonとおなじところ)にサンプルをベースに生成し、各種設定を盛り込みます。

   * 更新点ポイントは以下の通りです。
      * ブラウザから参照するファイルパスの指定
      * ブラウザ用向けに変換するファイル群の指定
      * テストに用いるブラウザの指定

   * サンプルでは、 [mocha + power-assert環境の構築](http://qiita.com/gitseitanaka/items/ea47d261284879a1d774) の環境に、以下を加えたものとしています。
      * "js.front/*.js" フロント向けjs群
      * "test/front/*.js" フロント向けテストコードjs群

   * 尚、 `karma init` を実行することで、対話的に規定の __karma.conf.js__ を作成することが可能です。サンプルを実行する場合は、後述を適宜盛り込みます。

~~~javascript:karma.conf.js(sample)
module.exports = function(config) {
  config.set({
    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',
    // frameworks to use
    frameworks: [
        'mocha',
        'browserify'
    ],
    // ブラウザから参照するファイルパスの指定
    files: [
        'test/*.js',            // 例：サーバ向けテストコードjs群
        'js.front/*.js',        // 例：フロント向けjs群  *
        'test/front/*.js'       // 例：フロント向けテストコードjs群 *
        // "lib/jquery.js"      // 必要に応じて、jqueryなどのパスも追加
    ],
    // list of files to exclude
    exclude: [],
    // ブラウザ用向けに(browserifyで)変換するファイル群の指定
    // ここに記載するとrequire('power-assert')がテストコードで利用できる。
    // (テストコードのスクリプトの配置を記載する)
    preprocessors: {
        'test/*.js': ['browserify'],
        'test/front/*.js': ['browserify']
    },
    // browserify option
    browserify: {
      debug: true,
      transform: [
        ['babelify', {plugins: ['babel-plugin-espower']}]
      ]
    },
    // test results reporter to use
    reporters: ['mocha'],
    // web server port
    port: 9876,
    // enable / disable colors in the output (reporters and logs)
    colors: true,
    // level of logging. possible values:
    //   config.LOG_DISABLE || config.LOG_ERROR
    //   || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,
    // テストに用いるブラウザを指定する
    // 複数指定可。
    // https://www.npmjs.com/browse/keyword/karma-launcher
    browsers: ['Chrome'],
    // ファイルの変更監視をやめる。
    // "true":監視しません
    singleRun: false
  });
};
~~~

## テストの実行

お試しで、[mocha + power-assert環境の構築](http://qiita.com/gitseitanaka/items/ea47d261284879a1d774) のコードに、フロント側コードを追加してテストを行ってみます。


### テストコードの追加

* __karma.conf.js__ に合わせて、 以下をお試しとして追加します。


~~~javascript:js.front/front_js.js(フロント側テスト対象のコード)
var local_util = {
    additioner : function(a, b) {
      return a + b;
    }
};
~~~

~~~javascript:test/front/front_js.test.js(フロント側テストコード)
var assert = require("power-assert");

describe('front_js ', function () {
 
  describe("additioner", function() {
    it("２つの引数の和を返すべし", function() {
      assert( local_util.additioner(10, 20) === 20 );    // NG
      // assert( local_util.additioner(10, 20) === 30 ); // OK
    });
  });
  
})
~~~

### テストの実行

* `karma start` でテストを実行します。

~~~
 > karma start
~~~
* 実行すると __karma.conf.js__ で指定したブラウザが自動で立ち上がり、テスト結果が、コンソール上に表示されます。
* ブラウザ上には、結果は表示されません。(表示手段はあるかと思いますが未調査)
* 尚、ブラウザ上の"DEBUG"を押下すると、"debug.html"が表示され、各ブラウザの"デベロッパーツール"でもエラー情報が確認可能です。
* また、NG箇所を修正すると動的に、再評価され、再評価結果がコンソール上に表示されます。
尚、"debug.html"は動的に更新されない為、読み直す必要があります。


> __実行→エラー検出__

![karma_ng.png](https://qiita-image-store.s3.amazonaws.com/0/91771/5a14c2be-decf-d978-fbd5-67efced5d611.png)

> __実行により起動したブラウザ__

![karma_chrome.png](https://qiita-image-store.s3.amazonaws.com/0/91771/2df2088b-91df-7225-7d46-e44d61535bfb.png)

> __実行により起動したブラウザより debug.htmlを参照__

![karma_chrome_debug.png](https://qiita-image-store.s3.amazonaws.com/0/91771/ff9f69c1-ce89-8594-6cce-cb779d1ef09b.png)

> __コード修正→成功__

![karma_ok.png](https://qiita-image-store.s3.amazonaws.com/0/91771/4c8fbf08-9f6b-4c53-b051-e4b2c3872951.png)


## その他

### 豆知識

 `npm test` でテストを実行したい場合は、以下の様にpackage.jsonを編集すれば、テスト可能です。


~~~javascript:package.json(抜粋)
// package.json 抜粋
  "scripts": {
    "test": "karma start --single-run"   // "--single-run":ファイル監視しないで一回で終わる
  },
~~~

### sample

[ここ](https://github.com/gitseitanaka/study_mocha/tree/karma) に上記の環境をupしています。(ブランチ：karma)

利用手順は以下の通りです。

~~~
 > git clone https://github.com/gitseitanaka/study_mocha.git
 > cd study_mocha
 > git checkout -b karma origin/karma
 > npm install           # or "npm install --msvs_version=2012"
 > # フロント側テスト
 > karma start           # or "npm test"
 >                       # or karma start --single-run
 > # サーバ側テスト
 > mocha --require intelli-espower-loader      # mochaのみでも動きます
~~~