About me

I love TypeScript, Node.js, React, React Native(Expo)

Agenda

  • Artifactsを活用し、コードレビューを省力化、改善する

具体例のためにいくつかのOSSを出しますが、それらの紹介ではなくCircleCI artifactsを用いるアイデア・方法論の紹介であることに注意されたし

CirlceCI Artifacts

Artifactsに登録するstep

ビルトインのstore_artifacts

version: 2
jobs:
  base: &base
    docker:
      - image: circleci/node:latest
    working_directory: ~/repo
    steps:
      - checkout
      - store_artifacts:
          path: coverage

Artifacts一覧を取得する

— Artifacts Of A Build – CircleCI API Reference

ENDPOINT='https://circleci.com/api/v1.1/project/:vcs-type/:username/:project'
curl "$ENDPOINT/:build_num/artifacts?circle-token=:token"

[
  {
    "path" : "raw-test-output/go-test-report.xml",
    "pretty_path" : "raw-test-output/go-test-report.xml",
    "node_index" : 0,
    "url" : "https://xxx/raw-test-output/go-test-report.xml"
  },
  ...
]

Artifactsを１ファイル取得する

curl '{{artifactsのURL}}?circle-token=:token'

— Download an artifact file – CircleCI API Reference

ArtifactsのURLをプルリクにコメントしてレビュー効率化

動作確認しているもの

  • Storybook

    • コンポーネントカタログ、UIパーツ集
    • 「このpropを与えたらこういう表示になる」を定義し再現

  • ステージング版アプリ

    • ReactをつかったSPA、Webpackでbundle
    • 自動テストやStorybookでカバーできない結合テスト（人力

PRの動作確認の効率を上げたい

  1. ローカルでPRブランチにcheckout
  2. bundle
  3. ローカルでサーバ起動、動作確認

stash事故、作業のキリが良くないと心理的ハードルが高い...
素早く、気軽に、有益なコードレビューをしたい

Artifactsで実現する

  • CIでSPAをビルドしArtifactsに保存
  • ArtifactsのURLをAPIから取得
  • GitHub APIを用いてURLをコメント

動かした図

めっちゃ楽

  • 心理的コストの削減

    • コメントされたURLを開くだけ（
    • ローカルのキリが悪くてもいつでも見れる

  • 時間の削減

    • CIでビルドしてる間別のことできる
    • ローカルでビルド待ちしなくていい

Artifactsのアクセス制限

  • CircleCIにログインしている
  • リポジトリに対してRead権限があるとアクセス可能

リポジトリのCollaboratorだけ管理する
S3等においてアクセス制限の二重管理しない

ArtifactsをPRにコメントするOSS

オレオレシェルだったものをOSS化してくれた

— Naturalclar/klank: Tool to notify circleci artifact to pull requests and/or slack channel

カバレッジのdiffを比較する

カバレッジレポート

これをPRにコメントできるが

ex. https://coverage.nodejs.org

カバレッジレポートは点だけだと足りない

  • 今のmasterはいくつなんだっけ？
  • このPRによってカバレッジ減ったのか増えたのか？

テストコード読めばだいたい分かる、でも人間じゃなくても分かる

※カバレッジだけが全てではないが、維持すべき重要な指標の１つ

Artifactsで前後比較する

  • APIでmasterブランチの最新ビルドを取得
  • APIでそのビルドからArtifacts一覧を取得
  • Artifactsからカバレッジレポートを取得
  • テストを実行しカバレッジ計測
  • 現在とArtifactsのカバレッジレポートを比較
  • 比較結果をGitHubにコメント

例えばこんな感じ

書式はcodecovというサービスを真似

coverage-diff-back

  • 作った
  • monorepoにも対応、JS向け
  • lcovのJSON吐ける言語なら使えるかも

— Leko/coverage-diff-back: Send the coverage difference back to the github on each pull requests

ビジュアルリグレッションテスト

storybookで目検する限界

  • 影響のある箇所だけ動作確認するのは容易

  • スタイル修正したときにデグレってないか影響範囲を目検...？

    • 数百パターンをPRのたびに全部チェック？
  • じゃあ確認するのを諦める？

無理 😭

— reg-viz/reg-suit: Visual Regression Testing tool

  • スクショを撮影しておく
  • 画像のdiffがあったものだけをまとめてレポートしてくれる

How diff works

  • GCSかAWS S3にスナップショット（スクショ）を保存
  • 要求された元のスナップショットと、現在のスクショを比較

GCS, S3の部分をArtifactsで代替できないだろうか

reg-suitのプラグイン機構

本題じゃないので詳しくはリポジトリを参照

— reg-viz/reg-suit: Visual Regression Testing tool

Artifactsでsnapshotを保存

  • stepのプロセスで「特定ディレクトリをartifactsに保存」はできない
  • 利用者にstore_artifactsを書いてもらわないといけない
  • パスがずれてるとバグる...

Orbを使って隠蔽できないか

Orb作ってstepを隠蔽

orbs:
  visual-regression: xxx/visual-regression@0.0.2
jobs:
  test:
    steps:
      # ...
      - visual-regression/reg-suit:
          base_branch: master
          base_dir: packages/components
          dest_dir: /tmp/reg-suit
workflows:
  version: 2.1
  test_deploy:
    jobs:
      - test

🎉🎉🎉

Conclusion

  • CircleCI Artifacts + PRにコメントで省力化

    • Storybook
    • SPAアプリ

  • masterのArtifacsとPRの成果物を比較

    • ビジュアルリグレッション
    • テストカバレッジレポート etc
  • 素早く、気軽に、有益なコードレビューをしたい

Thanks