Composable Preview Driven Development: TDD-fying your UI with ease!

Tech-talk at Droidcon Lisbon 2024
-----------------------------------------------------------------------------------
So you're already familiar with Compose UI… but have you considered using Test-Driven Development (TDD) with Composable Previews to refactor your UI quickly and with confidence?

Allow me to introduce you to “Composable Preview Driven Development”!

In this tech talk, you will learn…
- How writing Previews first can improve your code quality
- How to effortlessly turn Previews into automated tests to reliably refactor UI
- Composable Preview tips and tricks that are not widely known

Make sure not to miss this opportunity to explore the powerful combination of Test-Driven Development and Composable Previews!

No previous TDD knowledge is required!

Transcript

1. BY SERGIO SASTRE TDD-FYING YOUR UI WITH EASE! fun Driven_Development @Composable @Preview { } /* */ TDD
2. @Gio_Sastre CPDD TDD + =
3. How screenshot testing @Gio_Sastre works ?
4. record AND verify @Gio_Sastre
5. CI @Gio_Sastre + @Preview @Composable JVM
6. CI @Gio_Sastre + @Preview @Composable = test JVM
7. CI @Gio_Sastre + @Preview @Composable record JVM
8. CI @Gio_Sastre + @Preview @Composable refactoring verify JVM
9. CI @Gio_Sastre + @Preview @Composable refactoring verify JVM
10. @Gio_Sastre + @Preview @Composable JVM refactoring verify
11. @Gio_Sastre + @Preview @Composable JVM refactoring verify
12. Roborazzi Paparazzi Compose Preview Jvm-based screenshot testing libraries @Gio_Sastre
13. Roborazzi Paparazzi Compose Preview Jvm-based screenshot testing libraries library Layoutlib Robolectric based on @Gio_Sastre
14. Jvm-based screenshot testing libraries @Gio_Sastre Paparazzi Compose Preview Roborazzi @Preview Launch Effect
15. @Gio_Sastre to CPDD ? What is TDD and how it relates
16. @Gio_Sastre TDD basics TDD R E D T E S T G R E E
 N T E S T R E F A
 C T O R I N G Write a failing test 1 Write minimal code to make the test pass 2 Refactor code Verify code changes by running tests 3
17. @Gio_Sastre CPDD basics TDD
18. @Gio_Sastre CPDD basics TDD
19. @Gio_Sastre CPDD basics CPDD TDD
20. @Gio_Sastre CPDD basics Write @Previews 1 Refactor code Verify UI screenshots 3 Write code to make the UI look as expected 2 Record UI screenshot CPDD P R E I E W V R E C O
 R D R E F A
 C T O R I N G
21. @Gio_Sastre TDD & CPDD CPDD P R E I E W V R E C O
 R D R E F A
 C T O R I N G TDD R E D T E S T G R E E
 N T E S T R E F A
 C T O R I N G
22. @Gio_Sastre @Previews last vs. @Previews first CPDD
23. @Gio_Sastre Screen designs Loading Error Content
24. @Gio_Sastre @Previews last Content
25. @Gio_Sastre @Previews last Content fun SubscriptionScreen ( @Composable } subscriptions : ImmutableList<SubscriptionItem> , ) {
26. @Gio_Sastre @Previews last Content fun SubscriptionScreen ( @Composable Header ( … ) } subscriptions : ImmutableList<SubscriptionItem> , ) {
27. @Gio_Sastre @Previews last Content fun SubscriptionScreen ( @Composable Header ( … ) } subscriptions : ImmutableList<SubscriptionItem> , SubscriptionsLazyColumn ( items = subscriptions ) { … } ) {
28. @Gio_Sastre @Previews last Content fun SubscriptionScreen ( @Composable Header ( … ) } subscriptions : ImmutableList<SubscriptionItem> , SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( enabled = ) ) { true
29. @Gio_Sastre @Previews last Content fun SubscriptionScreen ( @Composable Header ( … ) } subscriptions : ImmutableList<SubscriptionItem> , SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( enabled = ) ) { true
30. enabled = @Gio_Sastre @Previews last Loading Header ( … ) } subscriptions : ImmutableList<SubscriptionItem> , ) { SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( isLoading : Boolean , ) fun SubscriptionScreen ( @Composable true
31. enabled = @Gio_Sastre @Previews last Loading Header ( … ) } subscriptions : ImmutableList<SubscriptionItem> , ) { SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( isLoading : Boolean , ) fun SubscriptionScreen ( @Composable true
32. enabled = @Gio_Sastre @Previews last Loading Header ( … ) } subscriptions : ImmutableList<SubscriptionItem> , ) { SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( isLoading : Boolean , } else } if ( isLoading ) { ShimmerRows ( … ) ) { fun SubscriptionScreen ( @Composable true
33. enabled = @Gio_Sastre @Previews last Loading Header ( … ) } subscriptions : ImmutableList<SubscriptionItem> , ) { SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( isLoading : Boolean , } else } if ( isLoading ) { ShimmerRows ( … ) ) { fun SubscriptionScreen ( @Composable true
34. ! isLoading enabled = @Gio_Sastre @Previews last Loading Header ( … ) } subscriptions : ImmutableList<SubscriptionItem> , ) { SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( isLoading : Boolean , } else } if ( isLoading ) { ShimmerRows ( … ) ) { fun SubscriptionScreen ( @Composable
35. ! isLoading enabled = @Gio_Sastre @Previews last Loading Header ( … ) } subscriptions : ImmutableList<SubscriptionItem> , ) { SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( isLoading : Boolean , } else } if ( isLoading ) { ShimmerRows ( … ) ) { fun SubscriptionScreen ( @Composable
36. { ! isLoading @Gio_Sastre @Previews last fun SubscriptionScreen ( @Composable Header ( … ) } subscriptions : ImmutableList<SubscriptionItem> , ) { isLoading : Boolean , SubscriptionsLazyColumn ( items = subscriptions ) { … } if ( isLoading ) { } else } ShimmerRows ( … ) BuySubscriptionButton ( enabled = ) isError : Boolean , Error
37. { ! isLoading @Gio_Sastre @Previews last fun SubscriptionScreen ( @Composable Header ( … ) } subscriptions : ImmutableList<SubscriptionItem> , ) { isLoading : Boolean , SubscriptionsLazyColumn ( items = subscriptions ) { … } if ( isLoading ) { } else } ShimmerRows ( … ) BuySubscriptionButton ( enabled = ) isError : Boolean , Error
38. { if ! isLoading ( ! isError ) @Gio_Sastre @Previews last fun SubscriptionScreen ( @Composable Header ( … ) } subscriptions : ImmutableList<SubscriptionItem> , ) { isLoading : Boolean , SubscriptionsLazyColumn ( items = subscriptions ) { … } if ( isLoading ) { } else } ShimmerRows ( … ) BuySubscriptionButton ( enabled = ) isError : Boolean , Error
39. { if ! isLoading ( ! isError ) @Gio_Sastre @Previews last fun SubscriptionScreen ( @Composable Header ( … ) } subscriptions : ImmutableList<SubscriptionItem> , ) { isLoading : Boolean , SubscriptionsLazyColumn ( items = subscriptions ) { … } if ( isLoading ) { } else } ShimmerRows ( … ) BuySubscriptionButton ( enabled = ) isError : Boolean , Error
40. { if ! isLoading ( ! isError ) @Gio_Sastre @Previews last fun SubscriptionScreen ( @Composable Header ( … ) } subscriptions : ImmutableList<SubscriptionItem> , ) { isLoading : Boolean , SubscriptionsLazyColumn ( items = subscriptions ) { … } if ( isLoading ) { } else } ShimmerRows ( … ) BuySubscriptionButton ( enabled = ) isError : Boolean , ErrorButton ( ) if ( isError ) { } else { } Error
41. { if ! isLoading ( ! isError ) @Gio_Sastre @Previews last fun SubscriptionScreen ( @Composable Header ( … ) } subscriptions : ImmutableList<SubscriptionItem> , ) { isLoading : Boolean , SubscriptionsLazyColumn ( items = subscriptions ) { … } if ( isLoading ) { } else } ShimmerRows ( … ) BuySubscriptionButton ( enabled = ) isError : Boolean , ErrorButton ( ) if ( isError ) { } else { } Error
42. @Gio_Sastre - Too much logic in UI code Issues with “@Previews last” development 1 @Composables code is harder to understand 2 @Preview cannot render due to “smart @Composables” - No clear separation of UI states - Big or deeply nested objects - ViewModels i.e. those having as arguments
43. in practice CPDD @Gio_Sastre
44. @Gio_Sastre One Preview per Screen UI State One Composable per Screen UI State Don’t avoid code duplication CPDD Preview Prerecord Multi-Previews over a single Preview
45. @Gio_Sastre ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview CPDD Preview Prerecord
46. @Gio_Sastre Content ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview AppTheme { } CPDD Preview Prerecord
47. @Gio_Sastre Content ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview AppTheme { } fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { } CPDD Preview Prerecord
48. @Gio_Sastre Content ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview ContentSubscriptionScreen ( subscriptions ) val subscriptions = … AppTheme { } fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { } CPDD Preview Prerecord
49. @Gio_Sastre Content ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview ContentSubscriptionScreen ( subscriptions ) val subscriptions = … AppTheme { } Header ( … ) fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { } CPDD Preview Prerecord
50. @Gio_Sastre Content ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview ContentSubscriptionScreen ( subscriptions ) val subscriptions = … AppTheme { } Header ( … ) SubscriptionsLazyColumn ( items = subscriptions ) { … } fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { } CPDD Preview Prerecord
51. @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> , ) { } CPDD Preview Prerecord
52. @Gio_Sastre ) { @Preview fun LoadingSubscriptionScreenPreview ( @Composable } AppTheme { } Loading CPDD Preview Prerecord
53. @Gio_Sastre ) { @Preview fun LoadingSubscriptionScreenPreview ( @Composable } AppTheme { } fun LoadingSubscriptionScreen ( @Composable ) { } Loading CPDD Preview Prerecord
54. @Gio_Sastre LoadingSubscriptionScreen ( ) ) { @Preview fun LoadingSubscriptionScreenPreview ( @Composable } AppTheme { } fun LoadingSubscriptionScreen ( @Composable ) { } Loading CPDD Preview Prerecord
55. @Gio_Sastre LoadingSubscriptionScreen ( ) ) { @Preview fun LoadingSubscriptionScreenPreview ( @Composable } AppTheme { } Header ( … ) fun LoadingSubscriptionScreen ( @Composable ) { } Loading CPDD Preview Prerecord
56. @Gio_Sastre LoadingSubscriptionScreen ( ) ) { @Preview fun LoadingSubscriptionScreenPreview ( @Composable } AppTheme { } Header ( … ) fun LoadingSubscriptionScreen ( @Composable ) { } Loading ShimmerRows ( … ) CPDD Preview Prerecord
57. @Gio_Sastre LoadingSubscriptionScreen ( ) ) { @Preview fun LoadingSubscriptionScreenPreview ( @Composable } AppTheme { } Header ( … ) BuySubscriptionButton ( enabled = false ) fun LoadingSubscriptionScreen ( @Composable ) { } Loading ShimmerRows ( … ) CPDD Preview Prerecord
58. @Gio_Sastre ) { fun ErrorSubscriptionScreenPreview ( @Composable } @Preview AppTheme { } CPDD Preview Prerecord Error
59. @Gio_Sastre ) { fun ErrorSubscriptionScreenPreview ( @Composable } @Preview AppTheme { } fun ErrorSubscriptionScreen ( @Composable ) { } CPDD Preview Prerecord Error
60. @Gio_Sastre ErrorSubscriptionScreen ( ) ) { fun ErrorSubscriptionScreenPreview ( @Composable } @Preview AppTheme { } fun ErrorSubscriptionScreen ( @Composable ) { } CPDD Preview Prerecord Error
61. @Gio_Sastre ErrorSubscriptionScreen ( ) ) { fun ErrorSubscriptionScreenPreview ( @Composable } @Preview AppTheme { } Header ( … ) fun ErrorSubscriptionScreen ( @Composable ) { } CPDD Preview Prerecord Error
62. @Gio_Sastre ErrorSubscriptionScreen ( ) ) { fun ErrorSubscriptionScreenPreview ( @Composable } @Preview AppTheme { } Header ( … ) ErrorButton () fun ErrorSubscriptionScreen ( @Composable ) { } CPDD Preview Prerecord Error
63. @Gio_Sastre fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { Header ( … ) SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( } fun ErrorSubscriptionScreen ( @Composable Header ( … ) ErrorButton () } fun LoadingSubscriptionScreen ( @Composable Header ( … ) BuySubscriptionButton ( } ShimmerRows ( … ) enabled = false )
64. data class Content ( ) sealed class ScreenUiState ( subscriptions : ImmutableList<SubscriptionItem> , ) { : ScreenUiState : ScreenUiState data object Loading ( ) : ScreenUiState data object Error ( ) } @Gio_Sastre fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { Header ( … ) SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( } fun ErrorSubscriptionScreen ( @Composable Header ( … ) ErrorButton () } fun LoadingSubscriptionScreen ( @Composable Header ( … ) BuySubscriptionButton ( } ShimmerRows ( … ) enabled = false )
65. data class Content ( ) sealed class ScreenUiState ( subscriptions : ImmutableList<SubscriptionItem> , ) { : ScreenUiState : ScreenUiState data object Loading ( ) : ScreenUiState data object Error ( ) } @Gio_Sastre fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { Header ( … ) SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( } fun ErrorSubscriptionScreen ( @Composable Header ( … ) ErrorButton () } fun LoadingSubscriptionScreen ( @Composable Header ( … ) BuySubscriptionButton ( } ShimmerRows ( … ) enabled = false ) fun SubscriptionScreen () @Composable } val screenUiState = viewModel.screenUiState.collectAsState() when ( screenUiState ) { is Content -> ContentSubscriptionScreen ( screenUiState.subscriptions ) Loading -> LoadingSubscriptionScreen ( ) Error -> ErrorSubscriptionScreen ( ) }
66. data class Content ( ) sealed class ScreenUiState ( subscriptions : ImmutableList<SubscriptionItem> , ) { : ScreenUiState : ScreenUiState data object Loading ( ) : ScreenUiState data object Error ( ) } @Gio_Sastre fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { Header ( … ) SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( } fun ErrorSubscriptionScreen ( @Composable Header ( … ) ErrorButton () } fun LoadingSubscriptionScreen ( @Composable Header ( … ) BuySubscriptionButton ( } ShimmerRows ( … ) enabled = false ) fun SubscriptionScreen () @Composable } val screenUiState = viewModel.screenUiState.collectAsState() when ( screenUiState ) { is Content -> ContentSubscriptionScreen ( screenUiState.subscriptions ) Loading -> LoadingSubscriptionScreen ( ) Error -> ErrorSubscriptionScreen ( ) }
67. data class Content ( ) sealed class ScreenUiState ( subscriptions : ImmutableList<SubscriptionItem> , ) { : ScreenUiState : ScreenUiState data object Loading ( ) : ScreenUiState data object Error ( ) } @Gio_Sastre fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { Header ( … ) SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( } fun ErrorSubscriptionScreen ( @Composable Header ( … ) ErrorButton () } fun LoadingSubscriptionScreen ( @Composable Header ( … ) BuySubscriptionButton ( } ShimmerRows ( … ) enabled = false ) fun SubscriptionScreen () @Composable } val screenUiState = viewModel.screenUiState.collectAsState() when ( screenUiState ) { is Content -> ContentSubscriptionScreen ( screenUiState.subscriptions ) Loading -> LoadingSubscriptionScreen ( ) Error -> ErrorSubscriptionScreen ( ) }
68. data class Content ( ) sealed class ScreenUiState ( subscriptions : ImmutableList<SubscriptionItem> , ) { : ScreenUiState : ScreenUiState data object Loading ( ) : ScreenUiState data object Error ( ) } @Gio_Sastre fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { Header ( … ) SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( } fun ErrorSubscriptionScreen ( @Composable Header ( … ) ErrorButton () } fun LoadingSubscriptionScreen ( @Composable Header ( … ) BuySubscriptionButton ( } ShimmerRows ( … ) enabled = false ) fun SubscriptionScreen () @Composable } val screenUiState = viewModel.screenUiState.collectAsState() when ( screenUiState ) { is Content -> ContentSubscriptionScreen ( screenUiState.subscriptions ) Loading -> LoadingSubscriptionScreen ( ) Error -> ErrorSubscriptionScreen ( ) }
69. @Gio_Sastre ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview ContentSubscriptionScreen ( subscriptions ) val subscriptions = … AppTheme { } CPDD Preview Prerecord
70. @Gio_Sastre ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview ContentSubscriptionScreen ( subscriptions ) val subscriptions = … AppTheme { } @Preview ( fontScale = 1.3f ) CPDD Preview Prerecord
71. @Gio_Sastre ) { fun ContentSubscriptionScreenPreview ( @Composable } @Preview ContentSubscriptionScreen ( subscriptions ) val subscriptions = … AppTheme { } @Preview ( fontScale = 1.3f ) S C R O L L A B L E CPDD Preview Prerecord
72. @Gio_Sastre CPDD Record Don’t write screenshot tests Auto-generate them from @Previews
73. @Gio_Sastre Auto-generate tests from @Previews @Previews source location Fully automated screenshotTest only + main only main only Fully automated Roborazzi Paparazzi Compose Preview
74. Composable Preview Scanner https://github.com/sergio-sastre/ComposablePreviewScanner @Gio_Sastre Compose Multiplatform: supports @Previews in common
75. @Gio_Sastre Verify must execute fast Verify on every significant change CPDD Refactoring
76. @Gio_Sastre fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { Header ( … ) SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( } fun ErrorSubscriptionScreen ( @Composable ErrorButton () } fun LoadingSubscriptionScreen ( @Composable BuySubscriptionButton ( } ShimmerRows ( … ) enabled = false) enabled = true ) TopBar ( … ) Terms( … ) Header ( … ) Terms( … ) TopBar ( … ) Header ( … ) TopBar ( … ) Terms( … )
77. @Gio_Sastre fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { Header ( … ) SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( } fun ErrorSubscriptionScreen ( @Composable ErrorButton () } fun LoadingSubscriptionScreen ( @Composable BuySubscriptionButton ( } ShimmerRows ( … ) enabled = false) enabled = true ) TopBar ( … ) Terms( … ) Header ( … ) Terms( … ) TopBar ( … ) Header ( … ) TopBar ( … ) Terms( … )
78. @Gio_Sastre fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { Header ( … ) SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( } fun ErrorSubscriptionScreen ( @Composable ErrorButton () } fun LoadingSubscriptionScreen ( @Composable BuySubscriptionButton ( } ShimmerRows ( … ) enabled = false) enabled = true ) TopBar ( … ) Terms( … ) Header ( … ) Terms( … ) TopBar ( … ) Header ( … ) TopBar ( … ) Terms( … ) ) { fun ScaffoldSubscriptionScreen ( @Composable } Header ( … ) TopBar ( … ) Terms( … )
79. @Gio_Sastre fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { Header ( … ) SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( } fun ErrorSubscriptionScreen ( @Composable ErrorButton () } fun LoadingSubscriptionScreen ( @Composable BuySubscriptionButton ( } ShimmerRows ( … ) enabled = false) enabled = true ) TopBar ( … ) Terms( … ) Header ( … ) Terms( … ) TopBar ( … ) Header ( … ) TopBar ( … ) Terms( … ) ) { fun ScaffoldSubscriptionScreen ( @Composable } Header ( … ) TopBar ( … ) Terms( … ) @Composable subscriptionsPlaceholder : ( ) -> Unit, subscriptionsPlaceholder( )
80. @Gio_Sastre fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( } fun ErrorSubscriptionScreen ( @Composable ErrorButton () } fun LoadingSubscriptionScreen ( @Composable BuySubscriptionButton ( } ShimmerRows ( … ) enabled = false) enabled = true ) Header ( … ) Terms( … ) TopBar ( … ) Header ( … ) TopBar ( … ) Terms( … ) ) { fun ScaffoldSubscriptionScreen ( @Composable } Header ( … ) TopBar ( … ) Terms( … ) @Composable subscriptionsPlaceholder : ( ) -> Unit, subscriptionsPlaceholder( ) ScaffoldSubscriptionScreen { }
81. @Gio_Sastre fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( } fun ErrorSubscriptionScreen ( @Composable ErrorButton () } fun LoadingSubscriptionScreen ( @Composable BuySubscriptionButton ( } ShimmerRows ( … ) enabled = false) enabled = true ) Header ( … ) Terms( … ) TopBar ( … ) Header ( … ) TopBar ( … ) Terms( … ) ) { fun ScaffoldSubscriptionScreen ( @Composable } Header ( … ) TopBar ( … ) Terms( … ) @Composable subscriptionsPlaceholder : ( ) -> Unit, subscriptionsPlaceholder( ) ScaffoldSubscriptionScreen { } verify
82. @Gio_Sastre fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( } fun ErrorSubscriptionScreen ( @Composable ErrorButton () } fun LoadingSubscriptionScreen ( @Composable BuySubscriptionButton ( } ShimmerRows ( … ) enabled = false) enabled = true ) Header ( … ) Terms( … ) TopBar ( … ) Header ( … ) TopBar ( … ) Terms( … ) ) { fun ScaffoldSubscriptionScreen ( @Composable } Header ( … ) TopBar ( … ) Terms( … ) @Composable subscriptionsPlaceholder : ( ) -> Unit, subscriptionsPlaceholder( ) ScaffoldSubscriptionScreen { } verify
83. @Gio_Sastre fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( } fun ErrorSubscriptionScreen ( @Composable ErrorButton () } fun LoadingSubscriptionScreen ( @Composable BuySubscriptionButton ( } ShimmerRows ( … ) enabled = false) enabled = true ) Header ( … ) Terms( … ) TopBar ( … ) Header ( … ) TopBar ( … ) Terms( … ) ) { fun ScaffoldSubscriptionScreen ( @Composable } Header ( … ) TopBar ( … ) Terms( … ) @Composable subscriptionsPlaceholder : ( ) -> Unit, subscriptionsPlaceholder( ) ScaffoldSubscriptionScreen { } verify
84. @Gio_Sastre fun ContentSubscriptionScreen ( @Composable subscriptions : ImmutableList<SubscriptionItem> , ) { SubscriptionsLazyColumn ( items = subscriptions ) { … } BuySubscriptionButton ( } fun ErrorSubscriptionScreen ( @Composable ErrorButton () } fun LoadingSubscriptionScreen ( @Composable BuySubscriptionButton ( } ShimmerRows ( … ) enabled = false) enabled = true ) ) { fun ScaffoldSubscriptionScreen ( @Composable } Header ( … ) TopBar ( … ) Terms( … ) @Composable subscriptionsPlaceholder : ( ) -> Unit, subscriptionsPlaceholder( ) ScaffoldSubscriptionScreen { } ScaffoldSubscriptionScreen { } ScaffoldSubscriptionScreen { } verify
85. @Gio_Sastre
86. @Gio_Sastre
87. @Gio_Sastre
88. @Gio_Sastre
89. @Gio_Sastre Original New
90. @Gio_Sastre Original New Diff Verify
91. Bonus Section
92. @Gio_Sastre + CPDD TDD + CPDD TDD
93. @Gio_Sastre + CPDD TDD define UiStates assert UiStates + CPDD TDD
94. @Gio_Sastre + CPDD TDD define UiStates assert UiStates + WHEN fetching at least 1 subscription, THEN show only the first one selected CPDD TDD
95. @Gio_Sastre + CPDD TDD define UiStates assert UiStates + ScreenUiState. Content ImmutableList <SubscriptionItem> WHEN fetching at least 1 subscription, THEN show only the first one selected CPDD TDD
96. @Gio_Sastre + CPDD TDD define UiStates assert UiStates + ScreenUiState. Content ImmutableList <SubscriptionItem> WHEN fetching at least 1 subscription, THEN show only the first one selected uiState. subscriptions. fi rst ( ) . selected uiState. subscriptions. fi lter { it.selected } . size == 1 CPDD TDD
97. ). apply { CardViewHolder ( val layout = LayoutIn fl ater.from (context).in fl ate (R. card_layout, null) bind ( CardItem( ) ) }. itemView … container = layout @Gio_Sastre “Android View” Previews
98. ). apply { CardViewHolder ( val layout = LayoutIn fl ater.from (context).in fl ate (R. card_layout, null) bind ( CardItem( ) ) }. itemView … container = layout @Gio_Sastre AndroidView ( modifier = Modifier.fillMaxSize() factory = { context -> ) } private fun CardViewHolderPreview() { @Composable @Preview CardViewHolderPreview “Android View” Previews
99. ). apply { CardViewHolder ( val layout = LayoutIn fl ater.from (context).in fl ate (R. card_layout, null) bind ( CardItem( ) ) }. itemView … container = layout @Gio_Sastre AndroidView ( modifier = Modifier.fillMaxSize() factory = { context -> ) } private fun CardViewHolderPreview() { @Composable @Preview CardViewHolderPreview CardViewHolderPreview - Dark @Preview (name = “Dark”, uiMode = UI_MODE_NIGHT_YES) “Android View” Previews
100. @Gio_Sastre - Single responsibility: 1 UI State -> 1 Composable Advantages of CPDD 1 @Composables code is understandable & maintainable 3 TDD & Testing behaviour becomes more intuitive - Defines Ui states you can assert in unit tests 2 Ensure no visual regression bugs in @Composables - Screenshot tests to automatically verify ALL other screens - @Previews for instant feedback on the current screen changes
101. attention for your Thanks
102. Linkedin @SergioSastre sergio-sastre @Gio_Sastre Hashnode blogs Sergio Sastre Flórez GDE for Android Lead Android developer appdev.de Github sergio-sastre-florez