skiptools / skiptools/skip

Add support for Compose Preview Screenshot Testing

Open
#586 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement testing
Dominant language
Swift
Stars
3.2k
Forks
106
Avg merge
6d 13h
Merged PRs (30d)
1

Description

https://github.com/dfabulich/skipapp-compose-snapshot-sample

This is a Skip Lite dual-platform app project, written mostly in Swift that transpiles to Kotlin, demonstrating how to setup and run Compose Preview Screenshot Testing.

What's Compose Preview Screenshot Testing?

In Compose Preview Screenshot Testing, you write @Preview components (like SwiftUI #Preview, but in Jetpack Compose) and decorate them with @PreviewTest. An update build plugin captures screenshots of all of your @PreviewTest components and writes them to disk; you commit them with your code.

Later, you run your tests again in validate mode. The tests fail if any of your components render differently. You then review the updated screenshots in a generate HTML report; if you approve of all of the changes, rerun update, which wil regenerate all of the snapshots.

Example screenshot

Writing a test

@PreviewTest
@Preview(showBackground = true)
@Composable
fun WelcomeViewPreview() {
    ProcessInfo.launch(LocalContext.current)
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        WelcomeView(welcomeName = Binding.constant("Skipper"))
            .Compose(context = ComposeContext())
    }
}

Running tests

Generate screenshot test results:

gradle -p Android -Pandroid.experimental.enableScreenshotTest=true updateDebugScreenshotTest

Validate that screenshot test results are unchanged:

gradle -p Android -Pandroid.experimental.enableScreenshotTest=true valdateDebugScreenshotTest

(We have to use -P because setting this in Android/app/gradle.properties change doesn't apply to all of the projects that Skip generates; see below.)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked skipapp-compose-snapshot-sample and compare its Android project with the generated project behavior. Read Android/app/gradle.properties and run the documented updateDebugScreenshotTest and valdateDebugScreenshotTest commands to understand the required integration. Done means Skip-generated projects can configure and run Compose Preview Screenshot Testing consistently.

Written by the indexing model from the issue text.

Assessment

Tech stack
kotlin, swift
Domain
build-system, mobile-dev, testing-qa
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.