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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.

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

Avatar for Yasuhiro Shimizu

Yasuhiro Shimizu

August 18, 2022

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 の設定するよりは遥かに楽だった (個人的感想です)