Vue CLI 3.0でCI環境を最短で構築する

VueのCI環境を構築しようとした時に、参考にしたサイトの情報が古かったり、今となっては不要な作業が入っていたりしたので、最短の手順(2019/10/1時点)を残しておく。

ただ最短と言いながら、何を何のためにしているかが分かるようにTravisCI、Coverallsの連携部分は別々の手順としています。

# 環境
* Windows 10
* Node：12.2.0
* npm：6.9.0
* Vue CLI3.11.0
* GitHub
* TravisCI
* Coveralls

# 0. 環境構築
は終わっている前提で進めます。

# 1. Vueプロジェクトを作成する
プロジェクトを作成したいフォルダにて、下記コマンドを実行する。

```
$ vue create [project-name]
```

```Manually select features``` を選択する。
__デフォルトだと記載されているようにテスト機能が含まれていない為。__

```bash
Vue CLI v3.11.0
? Please pick a preset:    
  default (babel, eslint)  
> Manually select features 
```

```Babel```、```Linter / Formatter```に加えて、```Unit Testing```を選択する。
※```E2E Testing```はお好みで選択してください。私は普段使わないので。

```bash
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: 
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support        
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 (*) Unit Testing
 ( ) E2E Testing
```

ESLintの設定はお好みで。

```bash
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Pick a linter / formatter config: 
> ESLint with error prevention only 
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
```

```bash
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit
```

テストランナーは```Jest```を選択。
※私が```Jest```を使い慣れているだけなので

```bash
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: (Use arrow keys)
  Mocha + Chai
> Jest
```

```package.json``` にBabelの設定を保存

```bash
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 
  In dedicated config files
> In package.json
```

設定の保存はお好みで。
この設定をする事で、```package.json``` に下記の設定が追加されている。

```json
    "test:unit": "vue-cli-service test:unit"
```

試しに以下コマンドを実行してみると、テストが実行される。

```bash
$ npm run test:unit

> xxxxx@0.1.0 test:unit yyyyyy
> vue-cli-service test:unit

 PASS  tests/unit/example.spec.js
  HelloWorld.vue
    √ renders props.msg when passed (20ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.704s, estimated 5s
Ran all test suites.
```

## GitHubに公開する
詳細は割愛。

# 2. TravisCIと連携する
## TravisCI側の設定
1. GitHubアカウントでログインする。
2. 設定画面で対象のリポジトリを連携対象にする。

## テスト設定ファイルの作成する
プロジェクトルートに ```.travis.yml``` を作成する。

```.travis.yml
language: node_js
node_js:
  - "12.2.0"

cache:
  directories:
    - node_modules

script:
  - npm run test:unit
```

## GitHubにPushする
詳細は割愛。

# 3. Coverallsと連携する
## TravisCI側の設定
1. GitHubアカウントでログインする。
2. 設定画面(ADD REPO)で対象のリポジトリを連携対象にする。

※対象リポジトリが表示されない場合は、「SYNC REPOS」を押してみる。

## coverallsライブラリを追加する
下記コマンドを実行する。

```bash
$ npm install --save-dev coveralls
```

## Jestでカバレッジをとる設定を追加する
```package.json``` に ```collectCoverage```、```collectCoverageFrom``` の設定を追加する。

```json
  "jest": {


    "collectCoverage": true,
    "collectCoverageFrom": [
      "<rootDir>/src/**/*.{js,vue}",
      "!**/node_modules/**"
    ]
  }
```

余談だが、この設定を追加する事で、```npm run test:unit```を実行すると、カバレッジが出力されるようになる。

```bash
----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |      100 |        0 |        0 |                   |
 App.vue  |        0 |      100 |      100 |        0 |                 9 |
 main.js  |        0 |      100 |        0 |        0 |         1,2,4,6,7 |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        12.183s
Ran all test suites.
```

## テスト設定ファイルを変更する
```.travis.yml``` にカバレッジを渡す設定を追加する。

```.travis.yml
  - npm run test:unit && cat ./coverage/lcov.info | ./node_modules/.bin/coveralls
```

## GitHubにPushする
詳細は割愛。

# 4. README.mdにバッチを表示する。
詳細は割愛。
他のサイトを参考にしてください。

# 参考サイト
https://knowledge.sakura.ad.jp/3754/
https://chaika.hatenablog.com/entry/2019/07/18/083000