LoginSignup
5

More than 3 years have passed since last update.

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

Posted at

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

GitHub ActionsへSignUp

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

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

image.png

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

image.png

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

image.png

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

image.png

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

GitHubにプロジェクトを作成

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

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

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

GitHub Actionsの設定

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

image.png

WorkFlowのセットアップ

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

image.png

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

image.png

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

image.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

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

image.png

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

image.png
  (省略)
image.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

 ↓ 詳細を見てみます

image.png

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

最後に

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

補足

こちらに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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5