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


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

GitHub ActionsへSignUp

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

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

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

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

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

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

GitHubにプロジェクトを作成

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


引用:https://github.com/features/actions

  • 以下のコマンドでAngularプロジェクトのテンプレートを生成し、上記プロジェクトにプッシュしておきます
ng new actions-test --routing --style=scss

GitHub Actionsの設定

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

WorkFlowのセットアップ

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

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

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

  • 内容は以下のようになってます
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タブを確認します

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

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


  (省略)

対象のプロジェクトが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にプッシュします。

 ↓ 詳細を見てみます

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

最後に

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

補足

こちらに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
Automating your workflow with GitHub Actions
karma - Configuration file