入門Visual Regression Test

# Visual Regression Test
画像回帰テストです
これの設定をある程度まで手順書に落とし、公開します
きっと手順通りにやったら10分ぐらいでできる。。。はず

## DEMO
https://github.com/k-okina/book-management/pull/6

## 1. vue cli ui等で適当にプロジェクトを作成する

## 2. vue-cli-plugin-storybookを追加
https://github.com/storybooks/vue-cli-plugin-storybook
これだけで凄く簡単にstorybookをvueに追加できます。
一度起動してみて正常に起動できるか確認しましょう！

## 3. storybookからスクショを撮るライブラリを導入
日本での画像回帰テストの第一人者と言っても過言ではないQuramyさんがstorybookから簡単に画像を抽出してくれるzisuiという素晴らしいライブラリを作っています。
https://github.com/Quramy/zisui

### install

```
$ yarn add zisui --dev
```

### package.jsonにコマンド追加
こんな感じでコマンドを追加します。
このコマンドはstorybookのサーバーを起動して、そのstorybookのポート番号を6006番と期待して、スクレイピングし、ローカルに保存します。(勿論吸い出し終わったら自動でstorybookサーバーを閉じてくれます
デフォだと``__screenshots__``ディレクトリとかに保存されます。

```
"screenshot": "zisui --serverCmd \"yarn serve:storybook\" http://localhost:6006"
```

## 4. reg-suitを導入
reg-suitを導入します。
reg-suitでは、ローカルの画像と自身のs3やgcs等に保存されている画像との差分比較できます。
比較結果は主に3種類あって、新たな画像が追加された、画像に差分が出た、画像が削除された、です。
基本的に画像に差分が出たプルリクはreg-suitは警告を発します(勿論github連携前提)。そして、その警告が発されたプルリクがマージされた場合はその画像の差分が正しいという事になり、比較元画像が更新されます。
詳しくはreg-suitのドキュメントを参照してください。

### install
reg-suit initで、今回自分の場合はgcsを選択しました。
gcsのバケットも作る？と聞かれますが、作りましょう。
もしgcloud認証がいるよーとか色々言われたら全て従います。
ローカルの比較元画像が格納されているディレクトリはどれか聞かれると思いますが、その時はzisui導入時に選択したディレクトリを指定してください。
zisuiのデフォルトは``__screenshots__``です。
また、githubとか各種サービスと連携したいと出ますが、連携しといてください。

```
$ npm install -g reg-suit
$ cd path-to-your-project
$ reg-suit init
# Answer a few questions...
```

一応npm内で完結するようにdevでパッケージも追加しときます

```
$ yarn add reg-suit --dev
```

### package.jsonに追加
こんな感じで画像回帰テストするコマンドを追加します

```
"regression": "reg-suit run",
```

### 実際にテストしてみる

まずは画像を吸い出す

```
$ yarn screenshot
```

比較する

```
$ yarn regression
```

もしgcsの権限がないよーとかって叱られたら、権限がつくように、ローカルでgcloud loginとか正しいprojectを選ぶとか色々頑張ってやってください


## circleciに組み込む
### googleのサービスアカウントキー(jsonタイプ)を取得
以下のリンクをそれとなくやればすぐ手に入るはずです。
https://cloud.google.com/docs/authentication/getting-started

### circleciの環境変数に埋め込む
先程ダウンロードしたjsonキーファイルをbase64エンコードします。

```
$ base64 your-project.json
```

### 出力された値をcircleciの環境変数に埋め込みます。
環境変数名はGCLOUD_SERVICE_KEYにしてください。

### circleciでの埋め込み方
<img width="1669" alt="スクリーンショット 2018-11-11 11.27.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/141711/cc17c4cc-e2c2-6406-c8bd-0e1989584f02.png">

既にあるプロジェクトの場合jobsタブのこの右上にある歯車をクリックすると、設定画面に飛べます
メニューでEnvironment Variablesをクリックして、keyをGCLOUD_SERVICE_KEYにして、valueをサービスキーをbase64エンコードした文字列を貼り付けてください

<img width="1667" alt="スクリーンショット 2018-11-11 11.32.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/141711/49c756a5-711e-a08f-6cf2-5e8d2057a441.png">

以上で環境変数の設定は完了です

## プロジェクトにcircleciの設定を追加する
一応vue cli uiのバージョンは以下の通りです。

```
$ vue -V
3.1.1
```

この手順通りの設定をやっていれば以下の設定で上手く動くと思います。

```
defaults: &defaults
  working_directory: ~/reg-suit
  docker:
    - image: kahiro/node-nightmare
      environment:
        DISPLAY: ":99"
        GOOGLE_APPLICATION_CREDENTIALS: "/root/gcloud-service-key.json"

version: 2
jobs:
  build:
    <<: *defaults
    steps:
      - checkout
      - run:
          name: setup GCP
          command: echo $GCLOUD_SERVICE_KEY | base64 -d > /root/gcloud-service-key.json
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "yarn.lock" }}
            - v1-dependencies-
      - run:
          name: Install dependencies
          command: yarn --pure-lockfile
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "yarn.lock" }}
      - run:
          name: Lint
          command: yarn run lint
      - run:
          name: Test
          command: yarn run test:unit
      - run:
          name: Screenshot
          command: yarn run screenshot
      - run:
          name: Regression
          command: yarn run regression
```

## image kahiro/node-nightmareの設定
Dockerfileは以下のとおりです
もしnodeのバージョンこれが良いとかあったら調整してdocker hubに上げて使うと便利そうです。

```dockerfile
FROM node:9.8.0

RUN apt-get update -y
RUN apt-get install -y xvfb x11-xkb-utils xfonts-100dpi xfonts-75dpi \
    xfonts-scalable xfonts-cyrillic x11-apps clang libdbus-1-dev \
    libgtk2.0-dev libnotify-dev libgnome-keyring-dev libgconf2-dev \
    libasound2-dev libcap-dev libcups2-dev libxtst-dev libxss1 \
    libnss3-dev gcc-multilib g++-multilib

COPY ./xvfbd /usr/local/bin
RUN chmod 755 /usr/local/bin/xvfbd
```

## 設定完了
以上で設定は完了していると思います。
せっかくなので設定したブランチでプルリクを出してみましょう！