GitHub Appsを使って回帰テストフロー組んだ話

1. GitHub Apps
and
Regression test workflow
SRE-SET Automation Night #2

2. About me
• @Quramy(twitter/GitHub/Qiita)
• フロントエンドエンジニア
• Angular/TypeScript -> React/Redux/Flow Type

3. Today s theme:
GitHub Appsを使ったら、
良い感じの回帰テストフローができた話

4. GitHub Apps is 何
• GitHub Appsとは
• GitHubと連携するアプリケーションの形態
• 下記の両方の機能を有する:
• GitHubのAPI実行によるレポジトリ操作
• Webhooks: レポジトリに起きたイベントに反応

5. GitHub Apps v.s. OAuth Apps
• OAuth Appsとの違い:
• OAuth Apps: GitHubのアカウントに紐づく
• GitHub Apps: GitHubのレポジトリに紐づく
• GitHub Appsは、特定のアカウントに依存しないため、
チームで開発するレポジトリに向く

6. https://developer.github.com/apps/getting-started-with-building-apps/

7. やりたかったことは回帰テスト
• フロントエンドの回帰テストが欲しかった
• 画面を構成するコンポーネントのスクショを保存
• 直近のスナップショットと、今回のスクショを比較
• 差分をレビューして問題なければ、
今回スクショを最新のスナップショットとして保存

8. 回帰テストフローのイメージ

9. スナップショット更新要件
差分発生時は、差分内容をチェックして分岐したい

10. 作成したツール
https://reg-viz.github.io/reg-suit/

11. Step 1. Appsのインストール
• レポジトリに対して、GitHub Appsをインストール

12. Step 2. Push ~ CIでの差分検知
• 提供されるCLIをCircleCIやTravisCIで実行。
GitHub Apps(AWS Lambda)がキックされる

13. Step 3. チームメンバへ通達
• 該当commitを含むPRへ、回帰テストの結果をコメント

14. Step 4. 差分の確認(=レビュー)
• レビュアはコメントのリンクから
詳細レポートを辿って内容確認

15. Step 5. Approve ~ Merge
• レビューの承認をトリガーにWebhooksで該当commit
ステータスを正常へ変更

16. reg-suitでのApps利用パターン
AppsはAWS Lambda + API Gatewayのみで実装
1. CIからの呼び出されるGitHub APIをcallする関数
• PRへのコメント, 独自commit ステータスのセット
2. レビュー承認時に呼び出されるWebhooks:
• 独自コミットcommitステータスの更新

17. まとめ
• 回帰テストをGitHubフローへ統合してみた
• GitHub Appsにより、差分検知 ∼ レビューのワーク
フローをPR上で実現できた
• 能動的なAPI実行 / 受動的なWebhooksの双方を実装
できるため、色々なワークフローをサポートできそう
• 紹介したフローの詳細は下記で確認可能です
https://github.com/reg-viz/reg-puppeteer-demo

18. Thank you !
by @Quramy