Closed10

Scrap 仕組みから理解する！Composeプレビューを様々なバリエーションでスクリーンショットテストしよう

kk__777kk__777

Roborazzi ＋ そのほか強化ツール

Google　の Compose Preview Screenshot Testing も

kk__777kk__777

Preview で ローカルで 楽に画面の確認をしようぜ という考え
バリエーションを増やして テストできる範囲を増やそう
- night light
- tablet smartphone
- locales

手順的にはこれ
1, 集めて 2.撮って 3.検証する

kk__777kk__777

1 集める系のライブラリ

  • showkase

    • これは Previewのプロパティが一部取れない
    • UI Library のcatalog を作るのが目的なので Preview 取る って用途でないため
      Showkase.getMetaData().componentList : List<ShowkaseBrowserComponent> を交差するっぽい

  • Composable Preview Scanner

    • Previewの全てのパラメータにも、Previewについたアノテーションも持って来れるとのこと
      AndroidComposablePreviewScanner() : List<ComposablePreview<AndroidPreviewInfo>>
kk__777kk__777
  1. スクショするツール
    基本的に複数のライブラリを使う

  • ComposeTestRule
    公式のもの。Compsableをテストするためのもの。

  • Robolectric
    JVM 上 で AndroidFrameworkを実行するツール。

  • Roborazzi
    Robolectric を使ってスクショを撮るライブラリ

まあ、よく見るやつ。TestRule で引っ張ってきて、 Robolectric 上で Roborazziでスクショを撮る

  • テストしたいComposable関数を このテスト空間で呼び出す。

  • パラメータテストが可能

  • こちらは スクショの 保存先 path の指定 が可能

kk__777kk__777

Preview で集めてきたComposable を スクショ撮るやつに食わせる形 になる

  • Robolectric と Roborazzi は必須
  • Showkase or Composable Preview Scanner どちらか

同じ画像が撮れるか , 画像の名称に一意性は持たせられるか の担保が必要でShowkaseと合わせると以下

CpomosablePReviewScanner もほぼ一緒
画像の名称の 一意性は別の関数になる

実行
Showkase は TestRunnerから。 ComposablePreviewScanner は ビルドスクリプトのみでいけて テストコードは自動生成してくれる

kk__777kk__777

バリエーション を撮るには

Preview の 引数 で表現すれば良い

Previewへのアクセス

Previewの環境下でのスクショ

Composeの機能, Roboletricの機能 , CompopseTestrule機能 を 好きなの使い分け

Composeの場合は, CompositionLocal で 設定できる
Roboletric は APIがある
TestRule を使うと mainClock使えばAnimation を制御できる

組み合わせるとこの辺ができる

で,Robolaziが Test用のインターフェースを用意してくれているのでこれを実装すれば良い

実装したら BuildScriptから呼べば良い

まとめ

kk__777kk__777

Gradle Composable Screenshot test

アニメーションはできない
バグはまだありそう

kk__777kk__777

ざっとまとめ

できるようにした方が良いこと

  • Preview のパラメータ による Parametarized なテストはしたいよね
    • local , テーマ, fontScale , device
  • （CI）

大きく方法は二つ

Roborazzi （ + ComposeTestRule + Robolectric） と ComposablePReviewScanner によるVRT

ComposablePreviewScanner が Roborazziで定義したテストロジックを使って、テストコードの生成を行う。そのテストクラスを呼ぶことでVRTを実施する。
Roborazzi 側で定義する テストロジックで 細かくテストケースを指定できるイメージ

できなそうなこと

  • なさそう

Compose Preview Screenshot Testing

専用のソースセット空間から 対象のComposable関数 を 参照する。 その後 テストの実行をgradleタスクで行う。
srcSetで定義する Preview でバリエーションを表現すれば テストケースをしていできる（はず）

できなそうなこと

  • アニメーションの制御はできない
このスクラップは2024/09/28にクローズされました