Golden Testing Your Compose Library with Paparazzi

Photo by Javardh on Unsplash

Background Story ⏮️

One of hundred challenges of component or library development is ensuring of UI’s consistency. When we talk about UI component , I mean the whole of behavior such as margin, padding, text size, typography, color and every-single-thing about detail of the UI component itself.

Most of engineer is not good enough to see the difference between similar UI. Now take a look the following image and say out loud “YOU WRONG!” to me. 😝

Imagine you have 10 component and each component have 3 different types Most of the time we have to assure any changes — even tiny changes haven’t break any functionality.

Golden Test come to the rescue! 🧑‍🚒

What is Golden Testing, anw? 🤔

Golden Test also known as Snapshot Testing is a technique for ensuring the current component with a “golden” reference or correct version of UI’s component.

Libraries 📦

There is certain screenshot testing library like Paparazzi, Showkase, Shot and Roborazzi.

In this article we focus on using Paparazzi developed by CashApp. Paparazzi is one of popular screenshot testing library, robust, doesn’t need physical or an emulator, conciseness and also open source.

Tasks 🖋️

1. Record : Saves snapshot as a golden reference.
2. Verify : Tests and verifies against previously-recorded golden reference.

Notes:
1. Failures generate diffs at <module>/build/paparazzi/failures.
2. It is recommended you use Git LFS (Large File System)

Setting Up⚙️

I’ve created a simple library on Github. Take a look the following link if you interested.

GitHub - Rarj/CardX

Using DSL

plugins {
  id 'app.cash.paparazzi' version '1.3.4'
}

Using TOML

[versions]
paparazzi = "1.3.4"

[plugins]
paparazzi = { id = "app.cash.paparazzi", version.ref = "paparazzi" }

plugins {
  alias(libs.plugins.paparazzi)
}

Sync your gradle and makesure if you got no error.

Implementation 🎢

Add @get:Rule like the following snippet

class XComponentTest {
  
  @get:Rule
    val paparazzi = Paparazzi(
        deviceConfig = PIXEL_5,
        theme = "android:Theme.Material.Light.NoActionBar",
    )

}

class XComponentTest {
  ...

  @Test
  fun front_card_component() {
    paparazzi.snapshot {
      FrontCard(
        titleCard = "Visa",
        iconCard = R.drawable.ic_visa,
        numberCard = "1234 1234 1234 1234",
        nameCard = "Big Smoke",
        validDate = "01/28",
        frontAnimation = 1f
      )
    }
  }

}

Generate snapshot by recordPaparazziDebug using gradle wrapper to saves a snapshots into src/test/snapshots.

./gradlew <your_module>:recordPaparazziDebug

After task above finished, you will notice there is a new image-component file on src/test/snapshots

Generated Snapshot File

File name structure → <packagename>_<classname>_<functionname>.png.

Golden-Component Result

Commit the generated image file.

Now, try to make a tiny changes on the component let’s say Font size and then verify by using verifyPaparazziDebug.

./gradlew <your_module>:verifyPaparazziDebug

You will see a failed assertion on console and take a look a delta image file on <module>/build/paparazzi/failures.

Delta Snapshot Result

Explanations🎨

1. Expected (Left) : Golden reference or correct version of UI’s component
2. Actual (Right) : Your broken-tiny changes result
3. Delta (Mid) : The diffs between Expected and Actual

You can integrate through CICD and do verify on each Pull Request.

Just do you own explorations! 🪜