Adds screenshot tests to :core:designsystem (#931)

* WIP: Adds screenshot tests to :core:designsystem

Change-Id: I0672845feba4064652dd8d60f07047b87864e121

* 🤖 Updates screenshots

* Creates tests for more components and cleans up

Change-Id: I61fe3ae6a4e8a41a599d520e16fc14aa6a643a22

* WIP: More cleanup and more combinations of themes

Change-Id: I34312bc7d147b31f1c638cd505a9c241f8267523

* Added the rest of the screenshot tests for designsystem

Change-Id: Ic427db5491910781c038882055524e3f3dbed194

* Some more cleanup

Change-Id: I7384e55864719af9122ad9da8e50a09cb9a60180

* Spotless

Change-Id: I22aa46e1f56b8b638c9d609ababbe49d471a26c6

* 🤖 Updates screenshots

* ScreenshotHelper cleanup

Change-Id: Ic94d41618e7850ab47f294d8022b405f18c843f0

Author: JoseAlcerreca

app/src/testDemo/java/com/google/samples/apps/nowinandroid/ui/NiaAppScreenSizesScreenshotTests.kt

@@ -1,5 +1,5 @@
 /*
- * Copyright 2022 The Android Open Source Project
+ * Copyright 2023 The Android Open Source Project
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

build-logic/convention/src/main/kotlin/AndroidLibraryComposeConventionPlugin.kt

@@ -18,7 +18,9 @@ import com.android.build.gradle.LibraryExtension
 import com.google.samples.apps.nowinandroid.configureAndroidCompose
 import org.gradle.api.Plugin
 import org.gradle.api.Project
+import org.gradle.kotlin.dsl.dependencies
 import org.gradle.kotlin.dsl.getByType
+import org.gradle.kotlin.dsl.kotlin
 
 class AndroidLibraryComposeConventionPlugin : Plugin<Project> {
     override fun apply(target: Project) {

build-logic/convention/src/main/kotlin/AndroidLibraryConventionPlugin.kt

@@ -47,9 +47,11 @@ class AndroidLibraryConventionPlugin : Plugin<Project> {
                 disableUnnecessaryAndroidTests(target)
             }
             dependencies {
-                add("androidTestImplementation", kotlin("test"))
                 add("testImplementation", kotlin("test"))
+                add("testImplementation", project(":core:testing"))
+                add("androidTestImplementation", kotlin("test"))
+                add("androidTestImplementation", project(":core:testing"))
             }
         }
     }
-}
+}

core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Button.kt

@@ -21,15 +21,20 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import com.google.samples.apps.nowinandroid.core.designsystem.icon.NiaIcons
+import com.google.samples.apps.nowinandroid.core.designsystem.theme.NiaTheme
 
 /**
  * Now in Android filled button with generic content slot. Wraps Material 3 [Button].
@@ -260,6 +265,50 @@ private fun NiaButtonContent(
     }
 }
 
+@ThemePreviews
+@Composable
+fun NiaButtonPreview() {
+    NiaTheme {
+        NiaBackground(modifier = Modifier.size(150.dp, 50.dp)) {
+            NiaButton(onClick = {}, text = { Text("Test button") })
+        }
+    }
+}
+
+@ThemePreviews
+@Composable
+fun NiaOutlinedButtonPreview() {
+    NiaTheme() {
+        NiaBackground(modifier = Modifier.size(150.dp, 50.dp)) {
+            NiaOutlinedButton(onClick = {}, text = { Text("Test button") })
+        }
+    }
+}
+
+@ThemePreviews
+@Composable
+fun NiaButtonPreview2() {
+    NiaTheme {
+        NiaBackground(modifier = Modifier.size(150.dp, 50.dp)) {
+            NiaButton(onClick = {}, text = { Text("Test button") })
+        }
+    }
+}
+
+@ThemePreviews
+@Composable
+fun NiaButtonLeadingIconPreview() {
+    NiaTheme {
+        NiaBackground(modifier = Modifier.size(150.dp, 50.dp)) {
+            NiaButton(
+                onClick = {},
+                text = { Text("Test button") },
+                leadingIcon = { Icon(imageVector = NiaIcons.Add, contentDescription = null) },
+            )
+        }
+    }
+}
+
 /**
  * Now in Android button default values.
  */

core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt

@@ -16,18 +16,21 @@
 
 package com.google.samples.apps.nowinandroid.core.designsystem.component
 
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FilterChip
 import androidx.compose.material3.FilterChipDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ProvideTextStyle
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import com.google.samples.apps.nowinandroid.core.designsystem.icon.NiaIcons
+import com.google.samples.apps.nowinandroid.core.designsystem.theme.NiaTheme
 
 /**
  * Now in Android filter chip with included leading checked icon as well as text content slot.
@@ -103,6 +106,18 @@ fun NiaFilterChip(
     )
 }
 
+@ThemePreviews
+@Composable
+fun ChipPreview() {
+    NiaTheme {
+        NiaBackground(modifier = Modifier.size(80.dp, 20.dp)) {
+            NiaFilterChip(selected = true, onSelectedChange = {}) {
+                Text("Chip")
+            }
+        }
+    }
+}
+
 /**
  * Now in Android chip default values.
  */

core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/IconButton.kt

@@ -17,12 +17,15 @@
 package com.google.samples.apps.nowinandroid.core.designsystem.component
 
 import androidx.compose.material3.FilledIconToggleButton
+import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import com.google.samples.apps.nowinandroid.core.designsystem.icon.NiaIcons
+import com.google.samples.apps.nowinandroid.core.designsystem.theme.NiaTheme
 
 /**
  * Now in Android toggle button with icon and checked icon content slots. Wraps Material 3
@@ -68,6 +71,52 @@ fun NiaIconToggleButton(
     }
 }
 
+@ThemePreviews
+@Composable
+fun IconButtonPreview() {
+    NiaTheme {
+        NiaIconToggleButton(
+            checked = true,
+            onCheckedChange = { },
+            icon = {
+                Icon(
+                    imageVector = NiaIcons.BookmarkBorder,
+                    contentDescription = null,
+                )
+            },
+            checkedIcon = {
+                Icon(
+                    imageVector = NiaIcons.Bookmark,
+                    contentDescription = null,
+                )
+            },
+        )
+    }
+}
+
+@ThemePreviews
+@Composable
+fun IconButtonPreviewUnchecked() {
+    NiaTheme {
+        NiaIconToggleButton(
+            checked = false,
+            onCheckedChange = { },
+            icon = {
+                Icon(
+                    imageVector = NiaIcons.BookmarkBorder,
+                    contentDescription = null,
+                )
+            },
+            checkedIcon = {
+                Icon(
+                    imageVector = NiaIcons.Bookmark,
+                    contentDescription = null,
+                )
+            },
+        )
+    }
+}
+
 /**
  * Now in Android icon button default values.
  */

core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/LoadingWheel.kt

@@ -88,6 +88,7 @@ fun NiaLoadingWheel(
     // Specifies the color animation for the base-to-progress line color change
     val baseLineColor = MaterialTheme.colorScheme.onBackground
     val progressLineColor = MaterialTheme.colorScheme.inversePrimary
+
     val colorAnimValues = (0 until NUM_OF_LINES).map { index ->
         infiniteTransition.animateColor(
             initialValue = baseLineColor,

core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Navigation.kt

@@ -18,17 +18,21 @@ package com.google.samples.apps.nowinandroid.core.designsystem.component
 
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.NavigationBarItemDefaults
 import androidx.compose.material3.NavigationRail
 import androidx.compose.material3.NavigationRailItem
 import androidx.compose.material3.NavigationRailItemDefaults
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
+import com.google.samples.apps.nowinandroid.core.designsystem.icon.NiaIcons
+import com.google.samples.apps.nowinandroid.core.designsystem.theme.NiaTheme
 
 /**
  * Now in Android navigation bar item with icon and label content slots. Wraps Material 3
@@ -161,6 +165,46 @@ fun NiaNavigationRail(
     )
 }
 
+@ThemePreviews
+@Composable
+fun NiaNavigationPreview() {
+    val items = listOf("For you", "Saved", "Interests")
+    val icons = listOf(
+        NiaIcons.UpcomingBorder,
+        NiaIcons.BookmarksBorder,
+        NiaIcons.Grid3x3,
+    )
+    val selectedIcons = listOf(
+        NiaIcons.Upcoming,
+        NiaIcons.Bookmarks,
+        NiaIcons.Grid3x3,
+    )
+
+    NiaTheme {
+        NiaNavigationBar {
+            items.forEachIndexed { index, item ->
+                NiaNavigationBarItem(
+                    icon = {
+                        Icon(
+                            imageVector = icons[index],
+                            contentDescription = item,
+                        )
+                    },
+                    selectedIcon = {
+                        Icon(
+                            imageVector = selectedIcons[index],
+                            contentDescription = item,
+                        )
+                    },
+                    label = { Text(item) },
+                    selected = index == 0,
+                    onClick = { },
+                )
+            }
+        }
+    }
+}
+
 /**
  * Now in Android navigation default values.
  */

core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Tabs.kt

@@ -24,11 +24,15 @@ import androidx.compose.material3.Tab
 import androidx.compose.material3.TabRow
 import androidx.compose.material3.TabRowDefaults
 import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
+import com.google.samples.apps.nowinandroid.core.designsystem.theme.NiaTheme
 
 /**
  * Now in Android tab. Wraps Material 3 [Tab] and shifts text label down.
@@ -97,6 +101,23 @@ fun NiaTabRow(
     )
 }
 
+@ThemePreviews
+@Composable
+fun TabsPreview() {
+    NiaTheme {
+        val titles = listOf("Topics", "People")
+        NiaTabRow(selectedTabIndex = 0) {
+            titles.forEachIndexed { index, title ->
+                NiaTab(
+                    selected = index == 0,
+                    onClick = { },
+                    text = { Text(text = title) },
+                )
+            }
+        }
+    }
+}
+
 object NiaTabDefaults {
     val TabTopPadding = 7.dp
 }

core/designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Tag.kt

@@ -20,10 +20,12 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ProvideTextStyle
+import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import com.google.samples.apps.nowinandroid.core.designsystem.theme.NiaTheme
 
 @Composable
 fun NiaTopicTag(
@@ -59,6 +61,16 @@ fun NiaTopicTag(
     }
 }
 
+@ThemePreviews
+@Composable
+fun TagPreview() {
+    NiaTheme {
+        NiaTopicTag(followed = true, onClick = {}) {
+            Text("Topic".uppercase())
+        }
+    }
+}
+
 /**
  * Now in Android tag default values.
  */