TodoAppsをCircleCiを用いてテスト環境を構築する

こんにちは！
CircleCi でテスト環境を構築しました！
忘備録として記録します！

下記内容を記載したコードは[こちらのリポジトリ](URL"https://github.com/yoshiblog-space/circleci_taskApps")に置いてます。
###CircleCiで使用するためのステップ
1.Appsの立ち上げ
2.jestなどのテスト環境を準備する
3.Docker環境の構築
4.CircleCiの導入

###1.Appsの立ち上げ
僕はVue.jsを利用してアプリを作成しました。
CircleCiを活用する上で感じたことは

「設計思想」

でした。これは、jestを導入してテストケースを考えている際に感じたことではありますが、ベースの考え方の必要性を痛感しました。
そうなんです、これがなければテストケースがかけませんでした。特に僕のような初心者には混乱する一方です。
そこで、導入したのが、

[「Atomic Design ベース」](URL"https://qiita.com/d2cd-kimura/items/4aee84da42131f40b808")

です。

| 段階 | 内容 | UI例 |
|:-:|:-:|:-:|
|  Atoms | これ以上分けられない単位  | ボタン・テキスト入力・ラベル  |
| Molecules  | Atomsが複数組み合わさったもの  | 入力フォーム  |
|  Organisms | １つの明らかな機能を持つ  | ヘッダー  |
| Templates  | ページの枠組みを構成する  | ワイヤーフレーム  |
|  Pages | ページにコンテンツを挿入したもの  | デザインカンプ  |

詳細は、わかりやすく解説してくれているQiitaの記事を参照ください。
こちらのルールに沿ってコンポーネントを作ります。

例：すべて、完了、作業中の3つの状態で表示切り替えを行うコンポーネント
（ラジオボタンを利用した切り替え）

```javascript
//ラジオボタン　コンポーネント
<template>
  <label>
    <input
      type="radio"
      name="state"
      :value="filterLabel"
      :checked="defaultState"
      v-on:click="handleClick"
    />{{ filterLabel }}</label>
</template>
<script>
export default {
  name: 'radio-Btn',
  props: {
    filterLabel: { type: String },
    defaultState: { type: Number }
  },
  emits: ["clickFilters"],
  methods: {
    handleClick() {
      const clickLabel = this.filterLabel;
      this.$emit("clickFilters", clickLabel);
    }
  }
};
</script>
```


```javascript
//ラジオボタンを組み合わせて作成した状態遷移のフォーム
<template>
  <div class="state">
    <radio-Btn
      v-for="state in stateFilter"
      :key="state.id"
      :filterLabel="state.label"
      :defaultState="state.defaultState"
      v-on:clickFilters="clickFilter"
    />
  </div>
</template>
<script>
import radioBtn from "./RadioBtn";
export default {
  name:'todo-Filter',
  props: {
    stateFilter: { type: Array }
  },
  components: {
    "radio-Btn": radioBtn
  },
  emits: ["selectFilter"],
  methods: {
    clickFilter(clickLabel) {
      this.$emit("selectFilter", clickLabel);
    }
  }
};
</script>
```

というように分解して作成することができれば、テストケースもシンプルになり作成がスムーズになります。


###2.jestなどのテスト環境を準備する
僕自身はvue.jsを利用していることもありjestを利用してテストケースを作成しました。
後の祭りではありませんが、とりあえずなんとか動くアプリケーションを作っていた僕には沼にハマってしまい、結局アプリを再作成する羽目になりました。本当にコンポーネント思考などベースとなる考え方が必要だなと感じます。

設計思想がしっかりしていないと、何がしたくてコンポーネントを作ったかがわからず、テストも何すればいいかわからないと言った状態になります。

CircleCiでテストを自動化するためにもここではしっかりと記載しておきましょう！！


###3.Dockerの導入
CircleCiでもdockerを利用してます。そのためにも、Dockerfileで自分自身のアプリケーションの環境、立ち上げまでのプロセスを構築できる必要があります。

```
 //Dockerfileの基本的な書き方

# コンテナイメージを利用します。そのため、ベースとなるnodejsを何利用するかを記載します。
FROM node:lts-alpine

# カレントワーキングディレクトリとして 'app' フォルダを指定する
WORKDIR /app
COPY ./ ./

# プロジェクトの依存ライブラリをインストールする
RUN npm install

#プロジェクトの立ち上げ
RUN npm run build
```

###4.CircleCiの実行
1〜３までのステップが対応できれば、導入までのハードルは低いです。
circleCiとの接続はgithubと連携で完了します。

問題は、configファイルの作成です。
今回の場合、アプリケーションの環境構築、テストの実行まではCircleCiまでに行ってもらうので、

```

#動かす環境の定義
#executorsは複数設定が可能ですが、
#今回はdefaultの命名でdokerのイメージをpullしbuildする環境を設定
executors:
  default:
    docker:
      - image: cimg/node:lts

#versionは必ず2.1にしてください。2では動かない状態です。
#ここではjobを設定します。
#jobs内容としては
#setupという名前でpackageをインストールして稼働できる環境構築のためのjob
#testという名前でjestを実行します。
#(npm run test:unitという形でpackage.jsonファイルのscriptsで宣言しています。）

version: 2.1
jobs:
  setup:
    executor: default
    steps:
      - checkout
      - run: 
          working_directory: vuetask3
          command: npm install
      - persist_to_workspace:  #ファイルは引き継がれないのでコピーする記載が必要です。
          root: .
          paths:
            - .

  test:
     executor: default
     steps:
      - checkout
      - attach_workspace:
         at: .
      - run:
           working_directory: vuetask3
           command: npm run test:unit


##workflowsではこれまでに設定したjobsをどのように実行を行うのかを
#フローにして記載します。
#developブランチの指定する必要があるので、filtersで設定しています。

workflows:
  version: 2.1
  build_test:
    jobs:
      - setup:
         filters:  # 正規表現フィルターを使用すると、ブランチ全体が一致する必要があります
            branches:
              only:  # 以下の正規表現フィルターに一致するブランチのみが実行されます
                - develop
      - test:
          filters:  # 正規表現フィルターを使用すると、ブランチ全体が一致する必要があります
           branches:
            only:  # 以下の正規表現フィルターに一致するブランチのみが実行されます
              - develop
          requires:
            - setup
````

以上になります。
走り書きをしたのでなかなか綺麗にまとまっていませんが、CircleCiは正しいステップを踏めばスムーズに進みそうです＾＾