GitHub ActionsでAngularプロジェクトの自動テストを実行してみる

GitHub ActionsでCI/CDの標準サポートが発表されましたね。
ベータ版が公開されているので、試しに使ってみようかと思います。


# GitHub ActionsへSignUp

まだベータ版なので別途サインアップが必要みたいです。

- TOPページにGitHub Actionsのアナウンスが出ているため、クリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/3c0f8ec8-063a-a053-57cb-5c59aaab465d.png)

- 「Sign up for the beta」を押下して、ベータ版にサインアップします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/126bb039-2018-5566-cd82-5630e5306d99.png)

- 「Register for GitHub Actions Beta」を押下して登録を完了させます
※メールでの通知が欲しい場合は「Please～」にチェックを入れておきます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/ab867a69-31b4-6cbe-c9b8-0091bf3a1338.png)

- これで登録が完了しました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/1ee877e5-43b6-ac95-63a7-cfd63dfefcfe.png)



ただ、これですぐに使えるわけではなく、使えるようになるには数日かかります。
実際、登録してから1～2週間してGitHub Actionsが使えるようになりました！という旨のメールが来ました。。



# GitHubにプロジェクトを作成

- Publicリポジトリであれば完全無料みたいなので、今回はPublicリポジトリで作成します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/09a29d65-30b1-79ba-3131-d197a4febbb5.png)
引用：https://github.com/features/actions


- 以下のコマンドでAngularプロジェクトのテンプレートを生成し、上記プロジェクトにプッシュしておきます

```
ng new actions-test --routing --style=scss
```



# GitHub Actionsの設定

GitHub Actionsが使えるようになっていると、以下のように`Actions`タブが出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/27bde2f8-b13e-65cb-a287-4b7ce6ba4543.png)

## WorkFlowのセットアップ

- `Actions`タブを選択すると、セットアップ項目が色々出てきます。  
  一からセットする場合は`Set up a workflow yourself`を押せば良さそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/3f7f9a7b-9e35-7d45-b4d1-0a219c5e8088.png)


- 今回はAngularプロジェクトなので、Node.jsのテンプレートを使ってみようと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/00a263c3-a8c2-9247-435e-1d34feb90c08.png)

- `setup this workflow`を選択すると、`.github/workflow/nodejs.yml`の作成画面になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/6a8cae58-1545-9d95-f1f5-2d40841f6a37.png)

- 内容は以下のようになってます

```.github/workflow/nodejs.yml
name: Node CI

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [8.x, 10.x, 12.x]

    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: npm install, build, and test
      run: |
        npm install
        npm run build --if-present
        npm test
      env:
        CI: true
```

- いったんこのままプッシュします（右上の`Start commit`から直接できます）。


## Workflow確認

- nodejs.ymlをプッシュした後、再度`Actions`タブを確認します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/eb6f3629-4d1b-1232-3569-0c5e5823a3c7.png)

- 先ほどプッシュしたnodejs.ymlの内容でワークフローが動作しています。
- `master`の部分を押下するとジョブの実行状況が確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/91acb8de-431d-9dda-ff57-996401c7356d.png)

失敗してる。。。
⇒項目を押下すると、詳細な内容が確認できます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/5e3f21e0-b0b5-402a-ecff-b11727b151eb.png)
　　（省略）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/1257f355-1368-5882-6b63-bef3649a05a8.png)


対象のプロジェクトがAngular8なので、Node.jsのバージョンは10以上でないとダメでした。
なので、先ほど作成したnodejs.ymlから8系を削除します。

```.github/workflow/nodejs.yml
    strategy:
      matrix:
        node-version: [10.x, 12.x]
```

これでビルドは通るようになりますが、GitHub Actions上だとChromeを立ち上げられないので、テストが失敗します。



## ChromeHeadlessを使う
ブラウザを立ち上げずに実行するため、今回はChromeHeadlessを使います。
（ほかにもPhantomJSを使う方法とかもあります）


- ワークフローの`npm run test`に引数を追加します

``` .github/workflow/nodejs.yml
npm run test -- --watch=false --browsers=ChromeHeadless
```
※オプションについて（npm run test の後の`--`はnpm runにオプションを渡すためのものです。）
　`--watch=false`　ウォッチモードOFF
　`--browsers=ChromeHeadless`　ChromeHeadlessで実行

- karmaの設定で、browsersにChromeHeadlessを追加しておきます

```karma.conf.js
browsers: ['Chrome', 'ChromeHeadless'],
```


これで再度GitHubにプッシュします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/ba925935-0f49-f375-13eb-620d14be6d17.png)

　↓　詳細を見てみます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/31e9277f-209d-9772-9c32-a334b5d0ebdf.png)

ちゃんとテストが実行され、すべて成功しています！！！



# 最後に

無事Angularプロジェクトの自動テストができました！
今後はGithubPagesへの自動デプロイも追加して、GithubのみでのDevOps環境とか作ってみたいですね:grin:






# 補足

[こちら](https://help.github.com/en/articles/about-github-actions#usage-limits)にWorkflowの制限について記載がありました

> Exceeding usage limits may result in jobs queueing, failing to run, or failing to complete. Limits are subject to change.
>
> - You can execute up to 20 workflows concurrently per repository.
> - You can execute up to 1000 API requests in an hour across all actions within a repository.
> - Each job in a workflow can run for up to 6 hours of execution time.
> - You can run up to 20 jobs concurrently per repository across all workflows.

- リポジトリごとに20フローまで同時実行可能
- リポジトリ内の全アクションで1時間あたり1000APIリクエストが可能
- ワークフローの各ジョブは6時間まで実行可能
- リポジトリ内の全ワークフローで20ジョブまで同時実行可能

# 参考

[GitHub Actions](https://github.com/features/actions)
[Automating your workflow with GitHub Actions](https://help.github.com/en/categories/automating-your-workflow-with-github-actions)
[karma - Configuration file](http://karma-runner.github.io/4.0/config/configuration-file.html)