Angular アプリケーションのコードカバレッジを CircleCI の Artifacts で見る

やりたいこと

• Angular アプリケーションを CircleCI 上でテスト
• コードカバレッジを出力
• コードカバレッジのレポートを CircleCI 上で見る

Angular アプリケーションを CircleCI 上でテスト

• circleci/config.yml を用意
  • 前に https://qiita.com/kasaharu/items/affba96063cb8309118f でも書いたので詳細は割愛

.circleci/config.yml

version: 2
jobs:
  test:
    docker:
      - image: circleci/node:8.9.4-stretch-browsers
    steps:
      - checkout
      - run: echo "Start test"
      - run: yarn install
      - run: yarn test --watch=false
workflows:
  version: 2
  test:
    jobs:
      - test:

コードカバレッジの出力

• --code-coverage のオプションをつけるだけ

.circleci/config.yml

     steps:
       - checkout
       - run: echo "Start test"
       - run: yarn install
-       - run: yarn test --watch=false
+       - run: yarn test --watch=false --code-coverage
 workflows:
   version: 2

• ローカルで試すとプロジェクトルートに coverage/ が作成されることが確認できる

コードカバレッジのレポートを CircleCI 上で見る

• test を実行すると coverage/ が作成されるのでこれを CircleCI の Artifacts に配置する

.circleci/config.yml

     steps:
       - checkout
       - run: echo "Start test"
       - run: yarn install
       - run: yarn test --watch=false --code-coverage
+      - store_artifacts:
+          path: coverage
 workflows:
   version: 2

• CircleCI で test が走ると下記のように Artifacts に格納される
  

• index.html を押すとコードカバレッジが確認できる
  

参考リンク

• Storing and Accessing Build Artifacts - CircleCI