Showkase

Intro

Showkase is an annotation-processor based Android library that helps you organize, discover, search and visualize Jetpack Compose UI elements.

Quick Setup

1. Add the dependency to the module which has a number of UI components

implementation "com.airbnb.android:showkase:1.0.0-beta14"
kapt "com.airbnb.android:showkase-processor:1.0.0-beta14"

2. Define the same module as ShowkaseRootModule
Each module can have only one Showkase root annotation.

@ShowkaseRoot
class MyRootModule: ShowkaseRootModule

3. Now provide @Previews for each of the composables you want to view in the Showkase Browser.
Showkase also has @ShowkaseComposable, which also can be used instead of @Preview.
Use group and name parameters of @Preview or @ShowkaseComposable for proper categorization of UI elements in the Showkase Browser
Eg :

@Preview(
    name = "filled",
    group = "card"
)
@Composable
fun CardFilled() {
    HealthCareTheme {
        HCard(
            title = "Here is the title",
            description = "this is description \nSecond line continued... Some text\nThird Line",
            tags = listOf("Blog", "Reports")
        )
    }
}

4. Additional Info

• If any @Preview should be skipped from Showkase browser, add @ShowkaseComposable(skip=true) to your preview composable
• @ShowkaseColor - Any Compose color can be marked with this annotation, to make it a part of Showkase browser
• @ShowkaseTypography - A typography marked with this annotation will be available in Showkase Browser
  Please see Showkase for detailed documentation

Showkase Browser

Showkase provides an intent of showkase browser, using which Showkase Browser activity can be launched,

startActivity(Showkase.getBrowserIntent(context))

Showkase in Screenshot Testing

As showkase uses @Previews or @ShowkaseComposables to construct a Showkase browser, it will help in writing screenshot tests with minimal efforts. Showkase doesn't record any screenshots. Hence, it should be used along with any other screenshot testing libraries such as shot, paparazzi etc.

In short, @Previews are used in screenshot testing.

Add Showkase test dependency

Add the following dependency to your androidTest or unitTest depending on which screenshot testing library you use.

androidTestImplementation "com.airbnb.android:showkase-screenshot-testing:1.0.0-beta13"
kaptAndroidTest "com.airbnb.android:showkase-processor:1.0.0-beta13"

Writing Tests

As shown below in the code snippet, test class must be abstract and implement ShowkaseScreenshotTest and override composeTestRule and onScreenshot method. onScreenshot will provide bitmap of each @Preview / @ShowkaseColor / @ShowkaseTypography. This can be recorded with the help of screenshot testing libraries

@ShowkaseScreenshot(rootShowkaseClass = <Showkase_Root_Provided_In_The_Module>)
abstract class TestClass : ShowkaseScreenshotTest {

    @get:Rule
    override val composeTestRule: ComposeContentTestRule = createComposeRule()

    override fun onScreenshot(
        id: String,
        name: String,
        group: String,
        styleName: String?,
        screenshotType: ShowkaseScreenshotType,
        screenshotBitmap: Bitmap
    ) {
      // Use any other screenshot testing library to capture the bitmap
    }
}

Tests can also be written without using ShowkaseScreenshotTest interface. Instead Showkase provides all the composables in a list. Which can be used along with Google's Test parameter injection to write multiple tests.

 Showkase.getMetadata().componentList
 Showkase.getMetadata().colorList
 Showkase.getMetadata().typographyList