Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jetpack Composeから始める、頑張らないVRT

Jetpack Composeから始める、頑張らないVRT

Yasuhiro Shimizu

August 18, 2022
Tweet

More Decks by Yasuhiro Shimizu

Other Decks in Programming

Transcript

  1. VRTとは - Visual Regression Testing - 画像回帰テスト - 視覚的にリグレッションテストを行うこと -

    変更前後のスクリーンショットを比較して、差分を検出する - ユニットテストでは担保しづらい、見た目をテストできる
  2. VRTのつらいところ - テストケースのメンテ - 単純に書くものが増える - 実機/エミュレータを使う必要がある - 時間がかかる -

    テストの実行結果が不安定 - CIで動かすにしても/SaaS 使うにしても手間がかかる - 💰💰💰 でも…
  3. airbnb/showkase - Jetpack Compose の `@Preview` からUIカタログを作るライブラリ - kapt/ksp で

    `@Preview` 付き Composable の一覧を作り - その一覧を表示する Activity を提供する
  4. cashapp/paparazzi - 安心の square 製 - 実機/エミュレータ無しで Android View や

    Composable 関数を描画し、スクリーン ショットを取得できる - これ単体でも VRT を提供している
  5. - showkase x paparazzi だけでも VRT はできる - しかし paparazzi

    の VRT は非常にプリミティブで、レポートもない - もっとリッチに、かつ PR 上から確認できるようにしたい → reg-suit を使おう
  6. reg-suit の設定 - Node.js が必要 - プラグインは reg-keygen-git-hash-plugin, reg-notify-github-plugin, reg-publish-s3-plugin

    を選択 - 画像ディレクトリは preview-screenshots/src/test/snapshots/images を指定 - paparazzi の output ディレクトリ
  7. AWS S3 の設定 - reg-suit のウィザードの中で作成できる - Google Cloud Storage

    でも可 - Webページを公開できるように設定する
  8. CI の設定 - pull request と main ブランチへの push タイミングで実行する

    - main への push タイミングは比較元のレポートを作成するため - 比較元のコミットを判別するため、git は完全なクローンが必要 - デフォルトでは depth=1 でクローンしている - detached HEAD ではなく、ブランチをチェックアウトしていること - AWS S3 へのアクセスは OIDC の設定が必要 - CodeBuild の設定するよりは遥かに楽だった (個人的感想です)