Vue.js-CLIとMochaでtestを実行する

# はじめに

Vue.jsのCLI版でのテストの仕方。MochaとChaiでの実行方法について。

初めてVue-CLIをやってみた人が、自前のテストを追加して「`npm run test`」するまでの手順を記載。

なお、ほぼVue.jsの公式サイトに書いてある通りの内容。「実際どうなの？」の動作例を見たい人向け（私は見たい）。

- Vue.js公式の「単体テスト」の解説ページ
    -  [単体テスト — Vue.jss](https://jp.vuejs.org/v2/guide/unit-testing.html)

## 実施の大雑把な流れ

1. Vue-CLIのプロジェクトを作成
    - Karma＋Mocha＋Chaiで構成
1. テンプレートのまま「`npm run test`」を実行
1. jsファイルの別モジュールを追加して、そちらの関数を呼ぶように「`HelloWorld.vue`」を変更
1. 追加したjsファイルに対するテストコードを追加
1. 「`npm run test`」を実行し、追加分についても問題なくテストコードが動作することを確認



## 動作確認環境

- Node.js : v8.11.3
- Vue.js  : v2.9.6
- OS : Windows 7 / 10

# TDDするためのUnitTest環境の構築手順

※CDN版でのVue.js利用からのCLIへの移行は、[こちら](https://qiita.com/hoshimado/items/a06dd3122fed0fcdc681) の記事なども参照のこと。

Node.js環境にて、以下のコマンドを実行してVue-CLIを導入する。
なお、ここでは「ローカル」にインストールする。
（※「グローバル」にインストールしたい場合は「`-g`」をオプションを付けること）

```
npm install vue-cli
```

つづいて、以下のコマンドを実行して、vue-cliの**スケルトン的なもの**を作成する。これは「プロジェクト」などと呼ばれる一式。プロジェクト名は、ここでは「tdd_karma」とする。
（※上述のvue-cliを「グローバル」にインストールした場合は「`vue init webpack tdd_karmae`」で実行する）

```
node_modules\.bin\vue init webpack tdd_karma
```

コマンドを実行すると、いくつかの質問を聞かれる。次のように答える。

- Project name?
    - 任意のプロジェクト名を入れる。ここでは「tdd_karma」とする。
- Project description?
    - デフォルトのままEnterを押す（ A Vue.js project )
- Author 
    - 自分の名前を入れる（ 私の場合は、hoshimado ）
- Vue build (Use arrow keys) 
    - 簡単＆軽量化のため、「runtime」を選ぶ
- Install vue-router? 
    - 簡単のため、「No」を選ぶ
- Use ESLint to lint your code? 
    - 好きな方（Yes/No）を選ぶ（私は、今回はNo）
- Set up unit tests?
    - ここで**「 Karma 」を選択**する(Karma+Mocha、になる)
- Setup e2e tests with Nightwatch?
    - 好きな方（Yes/No）を選ぶ。今回はUnitTestにフォーカスしたいので「No」推奨

フォルダ「`tdd_karma`」の中に、Vue-CLIのプロジェクト（vueトランスパイル用の環境）が作成される。

次のコマンドを実行して、ブラウザで次のURLを開いて、先ずは動作確認をする。

```
cd tdd_karmae
npm run dev
```

`http://localhost:8080/`

ブラウザにVue.jsのサンプルページが表示されることを確認したら、コマンドライン上で「Ctrl+C」キーを押す。これにより、一旦Vueが止まる。


## テンプレートのまま、テストが走ることを確認

作成したプロジェクトには、次のようなテストのサンプルコードが既に含まれている。

`.\test\unit\specs\HelloWorld.spec.js`

```js
import Vue from 'vue'
import HelloWorld from '@/components/HelloWorld'

describe('HelloWorld.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(HelloWorld)
    const vm = new Constructor().$mount()
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App')
  })
})
```

これは、「`.\src\componets\HelloWord.vue`」に対して、「Vueのエントリ内のhelloクラスが指定されたノードの子ノードのh1タグに表示されているテキストが `Welcome to Your Vue.js App` であること」を検証するテスト。

実行するには、次のコマンドを実行する。

```
npm run test
```

テストの実行結果は次のようになる。
なお、カバレッジの算出も最初から組み込み済みとなっている。

![デフォルトのままでのUnitTest実行例](https://gyazo.com/e6472e2ef221d015bb78f28f579c93b4.jpeg)



# 任意のテストを追加

先ず、次のように外部ファイルの処理を呼ぶように追加実装（？）したとしよう。

```vue:HelloWorld.vue
<script>
var dataStrage = require("./dataStorage").dataStorage;

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: dataStrage.feach()
    }
  }
}
</script>

```

```js:dataStorage.js
var dataStorage = {
    "feach" : function () {
        return "Welcome to Your Vue.js App"
    }
};

export { dataStorage };

```

テストコードとして次のファイルを、`test\unit\specs`配下に追加する。

```js:
import Vue from 'vue';
import { dataStorage } from '@/components/dataStorage';
import { assert, expect } from 'chai';

describe("dataStrage.js", () => {
    it("should render correct contents", () => {
        let resutl = dataStorage.feach()

        assert(true, "chai is useable.");
        expect( resutl ).to.be.equal("Welcome to Your Vue.js App");
    });
});

```

改めてテストのコマンドを実行する。

```
npm run test
```

追加分についても問題なく動作することを確認

なお、例えば追加コード側が「"Welcome"」のみ、などでテストが失敗する場合、
次のような**エラー表示**となるが、これはあくまで「テストが失敗した」というだけ
なので、慌てない。

```
npm ERR! tdd_karma@1.0.0 test: `npm run unit`
npm ERR! Exit status 1
```

エラー表示の**上の方**を辿ると、どのテストがどのように失敗したのか、
いつものMochaの見慣れた表示があるので、安心すること。



# 参考サイトや本など

- Vue.js公式サイト　- Web
    - https://jp.vuejs.org/
- Babel6でMochaとChaiを使ったテストを書く - Web
    - https://qiita.com/yamadayuki/items/9885c9e126648cd8c5e3