Fast Feedback Loops with Previews & Screenshot Tests

A short presentation about how to Use Previews and Screenshot Tests to get fast feedback loops when implementing UI with Jetpack Compose

The full recording is here
https://www.youtube.com/watch?v=SphQelcGdHk

Transcript

1. BY SERGIO SASTRE + test
2. @Gio_Sastre Screen designs Content
3. @Gio_Sastre Screen designs Loading Content
4. @Gio_Sastre Screen designs Loading Error Content
5. @Gio_Sastre Screen designs Content
6. @Gio_Sastre Content
7. @Gio_Sastre Content @Preview
8. @Gio_Sastre Content ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview @Preview
9. @Gio_Sastre Content ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview AppTheme { } @Preview
10. @Gio_Sastre Content ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview AppTheme { } fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { } @Preview
11. @Gio_Sastre Content ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview ContentSubscriptionScreen ( subscriptions ) val subscriptions = … AppTheme { } fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { } @Preview
12. @Gio_Sastre Content ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview ContentSubscriptionScreen ( subscriptions ) val subscriptions = … AppTheme { } Header ( … ) fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { } @Preview
13. @Gio_Sastre Content ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview ContentSubscriptionScreen ( subscriptions ) val subscriptions = … AppTheme { } Header ( … ) SubscriptionsLazyColumn ( items = subscriptions ) { … } fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { } @Preview
14. @Gio_Sastre Content ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview ContentSubscriptionScreen ( subscriptions ) val subscriptions = … AppTheme { } Header ( … ) SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( enabled = true ) fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { } @Preview
15. @Gio_Sastre @Preview Content ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview ContentSubscriptionScreen ( subscriptions ) val subscriptions = … AppTheme { } Header ( … ) SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( enabled = true ) fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { }
16. @Gio_Sastre @Preview Content ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview ContentSubscriptionScreen ( subscriptions ) val subscriptions = … AppTheme { }
17. @Gio_Sastre @Preview ( fontScale = 1.3f ) @Preview Content ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview ContentSubscriptionScreen ( subscriptions ) val subscriptions = … AppTheme { }
18. @Gio_Sastre @Preview ( fontScale = 1.3f ) S C R O L L A B L E @Preview Content ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview ContentSubscriptionScreen ( subscriptions ) val subscriptions = … AppTheme { }
19. @Gio_Sastre
20. @Gio_Sastre
21. @Gio_Sastre
22. @Gio_Sastre
23. @Gio_Sastre Original New
24. @Gio_Sastre Original New Diff Verify
25. How does screenshot testing @Gio_Sastre work ?
26. record AND verify @Gio_Sastre
27. CI @Gio_Sastre @Composable JVM
28. CI @Gio_Sastre + @Preview @Composable JVM
29. CI @Gio_Sastre + @Preview @Composable = test JVM
30. CI @Gio_Sastre + @Preview @Composable JVM
31. CI @Gio_Sastre + @Preview @Composable record JVM
32. CI @Gio_Sastre + @Preview @Composable record JVM
33. CI @Gio_Sastre + @Preview @Composable JVM
34. CI @Gio_Sastre + @Preview @Composable refactoring JVM
35. CI @Gio_Sastre + @Preview @Composable refactoring verify JVM
36. CI @Gio_Sastre + @Preview @Composable refactoring verify JVM
37. CI @Gio_Sastre + @Preview @Composable refactoring verify JVM
38. CI @Gio_Sastre + @Preview @Composable refactoring verify JVM
39. CI @Gio_Sastre + @Preview @Composable refactoring verify JVM
40. @Gio_Sastre + @Preview @Composable JVM refactoring verify
41. @Gio_Sastre + @Preview @Composable JVM refactoring verify
42. @Gio_Sastre + @Preview @Composable JVM refactoring verify
43. @Gio_Sastre Fast Feedback Loops Don’t write screenshot tests Auto-generate them from @Previews
44. Roborazzi Paparazzi Compose Preview @Gio_Sastre Auto-generate tests from @Previews @Previews source location
45. Roborazzi Paparazzi Compose Preview @Gio_Sastre Auto-generate tests from @Previews @Previews source location Fully automated screenshotTest only
46. Roborazzi Paparazzi Compose Preview @Gio_Sastre Auto-generate tests from @Previews @Previews source location Fully automated screenshotTest only main Fully automated screenshotTest androidTest
47. Roborazzi Paparazzi Compose Preview @Gio_Sastre Auto-generate tests from @Previews @Previews source location Fully automated screenshotTest only + main screenshotTest androidTest main Fully automated screenshotTest androidTest
48. Composable Preview Scanner https://github.com/sergio-sastre/ComposablePreviewScanner @Gio_Sastre