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は、特定のアカウントに依存しないため、 チームで開発するレポジトリに向く
- 7. やりたかったことは回帰テスト • フロントエンドの回帰テストが欲しかった • 画面を構成するコンポーネントのスクショを保存 • 直近のスナップショットと、今回のスクショを比較 • 差分をレビューして問題なければ、 今回スクショを最新のスナップショットとして保存
- 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