ANDROID-13871 Add screenshot tests for all types of buttons #308

pmartinbTEF · 2023-10-23T16:09:48Z

🥅 What's the goal?

DONT PANIC 493 files are just updated pngs
Add screenshot tests for all types of Mistica Buttons

🚧 How do we do it?

Parameterized tests with all combinations of brand, button style, has icon and dark theme. These tests have been done for both xml and compose buttons

☑️ Checks

I updated the documentation, including readmes and wikis. If this is a breaking change, update UPGRADING.md to inform users how to proceed. If no updates are necessary, indicate so.
Tested with dark mode.
Tested with API 23.

🧪 How can I test this?

Modify any button of the library
Check that correspondent screenshot test fails

github-actions · 2023-10-23T16:21:56Z

📱 New catalog for testing generated: Download

github-actions · 2023-11-08T12:08:00Z

📱 New catalog for testing generated: Download

github-actions · 2023-11-13T16:39:10Z

📱 New catalog for testing generated: Download

pmartinbTEF · 2023-11-14T08:51:37Z

library/src/test/res/values/styles.xml

+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+	<attr name="defaultButtonTest_test" format="reference"/>


I need a reference of type R.attr.xxx to init the button programmatically with this style (Button(activity, null, R.attr.xxx)). Maybe there is a simpler way

jeprubio · 2023-11-14T08:58:26Z

library/src/test/AndroidManifest.xml

-				android:label="Text Input Activity"
-				android:exported="true"
-				android:theme="@style/MisticaTheme.Movistar">
+				android:label="Activity for testing Mistica xml elements"


Yup, much better

jeprubio · 2023-11-14T09:05:09Z

library/src/test/java/com/telefonica/mistica/testutils/TestUtils.kt

+    fun getAllButtonStyles() = listOf(
+        ButtonStyle.PRIMARY, ButtonStyle.PRIMARY_SMALL, ButtonStyle.SECONDARY, ButtonStyle.SECONDARY_SMALL, ButtonStyle.DANGER,
+        ButtonStyle.DANGER_SMALL, ButtonStyle.LINK, ButtonStyle.PRIMARY_INVERSE, ButtonStyle.PRIMARY_SMALL_INVERSE, ButtonStyle.SECONDARY_INVERSE,
+        ButtonStyle.SECONDARY_SMALL_INVERSE, ButtonStyle.LINK_INVERSE
+    )


I think this should be the same as: ButtonStyle.values().toList()

jeprubio · 2023-11-14T09:09:48Z

library/src/test/java/com/telefonica/mistica/testutils/ScreenshotUtils.kt

+            "dark".takeIf { darkTheme }
+        ).joinToString(separator = "_")
+
+        return """screenshots/$nonNullParams""".plus(".png").replace("\\s+".toRegex(), "")


I see no need in here for the multiline string in here and also to add the png out of the string template:

return "screenshots/$nonNullParams.png".replace("\\s+".toRegex(), "")

By the way, nice usage of listOfNotNull(), I like that 🚀

jeprubio · 2023-11-14T09:12:51Z

library/src/test/java/com/telefonica/mistica/compose/button/ButtonKtTest.kt

-    private fun `then screenshot is OK`(brand: Brand, darkTheme: Boolean) {
-        compareScreenshot(composeTestRule.onRoot(), brand, darkTheme)
+    private fun `then screenshot is OK`(brand: Brand, style: ButtonStyle, icon: Boolean, darkTheme: Boolean) {
+        val iconSuffix = if(icon) {


jepLint: a space is needed before the rounded brackets: if (icon) {

jeprubio · 2023-11-14T09:19:30Z

library/src/test/java/com/telefonica/mistica/button/ButtonTest.kt

+    fun getStyleResFromButtonStyle(style: ButtonStyle) = when(style) {
+        ButtonStyle.PRIMARY -> R.style.AppTheme_Button_DefaultButton
+        ButtonStyle.PRIMARY_SMALL -> R.style.AppTheme_Button_DefaultButton_Small
+        ButtonStyle.SECONDARY -> R.style.AppTheme_Button_SecondaryButton
+        ButtonStyle.SECONDARY_SMALL -> R.style.AppTheme_Button_SecondaryButton_Small
+        ButtonStyle.DANGER -> R.style.AppTheme_Button_DangerButton
+        ButtonStyle.DANGER_SMALL -> R.style.AppTheme_Button_DangerButton_Small
+        ButtonStyle.LINK -> R.style.AppTheme_Button_LinkButton
+        ButtonStyle.PRIMARY_INVERSE -> R.style.AppTheme_Button_PrimaryButtonInverse
+        ButtonStyle.PRIMARY_SMALL_INVERSE -> R.style.AppTheme_Button_PrimaryButtonInverse_Small
+        ButtonStyle.SECONDARY_INVERSE -> R.style.AppTheme_Button_SecondaryButtonInverse
+        ButtonStyle.SECONDARY_SMALL_INVERSE -> R.style.AppTheme_Button_SecondaryButtonInverse_Small
+        ButtonStyle.LINK_INVERSE -> R.style.AppTheme_Button_LinkButtonInverse
+    }


I would consider doing this as an extension funciton:
fun ButtonStyle.getStyleResFromButtonStyle() = when(this) {

Where is this used? It could be removed in case it's not used.

It was not used. Removed!

jeprubio · 2023-11-14T09:40:10Z

library/src/test/java/com/telefonica/mistica/button/ButtonTest.kt

+        @ParameterizedRobolectricTestRunner.Parameters(name = "ButtonXML {1} {0} icon={2}")
+        fun brands(): List<Array<Any>> {
+            val allBrands = getAllBrands()
+            val buttonStyles = getAllButtonStyles()


or: val buttonStyles = ButtonStyle.values().toList()

pmartinbTEF · 2023-11-14T11:05:28Z

library/src/test/java/com/telefonica/mistica/button/ButtonTest.kt

                button.setIconResource(android.R.drawable.ic_lock_power_off)
                iconSuffix = "icon"
            }
+            if (style.isInverse()) {


Set background color for inverse buttons like in Catalog app to avoid white screenshots (white button over white background)

Some images from the baseline probably will have to be updated after this change.

github-actions · 2023-11-14T11:09:32Z

📱 New catalog for testing generated: Download

github-actions · 2023-11-14T11:30:36Z

📱 New catalog for testing generated: Download

jeprubio

Nice job. I would have left the button xml out of this as they are supposed to be removed some day but I guess we can remove all as well then.

yamal-alm

awesome job 👏

github-actions · 2023-11-17T10:52:57Z

📱 New catalog for testing generated: Download

github-actions · 2023-11-17T11:20:51Z

📱 New catalog for testing generated: Download

github-actions · 2023-11-17T11:49:07Z

📱 New catalog for testing generated: Download

jeprubio · 2023-11-17T13:01:20Z

library/src/test/java/com/telefonica/mistica/compose/button/ButtonKtTest.kt

    @Test
    fun `check the button screenshot`() {


I'm thinking, we might want to also test a button with a very large text in it (with and without icon) but these 2 tests not by brand as I don't think having it for each brand gives more value. And perhaps also not needed in light and dark mode. What do you think about this? Should we also check multiline text?

Maybe for a future PR

ANDROID-13871 Add screenshot tests for all types of buttons

a7713f2

Name of the parameterized test

d4dbef6

Screenshot tests for XML buttons

fd64578

Updated screenshots baseline

013c986

pmartinbTEF commented Nov 14, 2023

View reviewed changes

pmartinbTEF requested a review from jeprubio November 14, 2023 08:53

jeprubio reviewed Nov 14, 2023

View reviewed changes

set background color for inverse buttons

b3c6b88

pmartinbTEF commented Nov 14, 2023

View reviewed changes

minor comments

7054585

Updated screenshots baseline

30aefa4

pmartinbTEF requested review from jeprubio and yamal-alm November 14, 2023 11:48

pmartinbTEF marked this pull request as ready for review November 14, 2023 11:51

jeprubio approved these changes Nov 14, 2023

View reviewed changes

yamal-alm approved these changes Nov 15, 2023

View reviewed changes

Check job time with two brands

ce9227d

check job time with 4 brands

aaf41b7

set all 5 brands

642cef3

jeprubio reviewed Nov 17, 2023

View reviewed changes

pmartinbTEF merged commit facc07c into main Nov 20, 2023
4 of 5 checks passed

pmartinbTEF deleted the ANDROID-13871-Screenshot_tests_for_all_buttons branch November 20, 2023 10:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ANDROID-13871 Add screenshot tests for all types of buttons #308

ANDROID-13871 Add screenshot tests for all types of buttons #308

pmartinbTEF commented Oct 23, 2023 •

edited

Loading

github-actions bot commented Oct 23, 2023

github-actions bot commented Nov 8, 2023

github-actions bot commented Nov 13, 2023

pmartinbTEF Nov 14, 2023

jeprubio Nov 14, 2023

jeprubio Nov 14, 2023

pmartinbTEF Nov 14, 2023

jeprubio Nov 14, 2023 •

edited

Loading

pmartinbTEF Nov 14, 2023

jeprubio Nov 14, 2023 •

edited

Loading

pmartinbTEF Nov 14, 2023

jeprubio Nov 14, 2023 •

edited

Loading

pmartinbTEF Nov 14, 2023

jeprubio Nov 14, 2023

pmartinbTEF Nov 14, 2023

pmartinbTEF Nov 14, 2023

jeprubio Nov 14, 2023

github-actions bot commented Nov 14, 2023

github-actions bot commented Nov 14, 2023

jeprubio left a comment

yamal-alm left a comment

github-actions bot commented Nov 17, 2023

github-actions bot commented Nov 17, 2023

github-actions bot commented Nov 17, 2023

jeprubio Nov 17, 2023 •

edited

Loading

pmartinbTEF Nov 20, 2023

ANDROID-13871 Add screenshot tests for all types of buttons #308

ANDROID-13871 Add screenshot tests for all types of buttons #308

Conversation

pmartinbTEF commented Oct 23, 2023 • edited Loading

🥅 What's the goal?

🚧 How do we do it?

☑️ Checks

🧪 How can I test this?

github-actions bot commented Oct 23, 2023

github-actions bot commented Nov 8, 2023

github-actions bot commented Nov 13, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeprubio Nov 14, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeprubio Nov 14, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeprubio Nov 14, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Nov 14, 2023

github-actions bot commented Nov 14, 2023

jeprubio left a comment

Choose a reason for hiding this comment

yamal-alm left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 17, 2023

github-actions bot commented Nov 17, 2023

github-actions bot commented Nov 17, 2023

jeprubio Nov 17, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pmartinbTEF commented Oct 23, 2023 •

edited

Loading

jeprubio Nov 14, 2023 •

edited

Loading

jeprubio Nov 14, 2023 •

edited

Loading

jeprubio Nov 14, 2023 •

edited

Loading

jeprubio Nov 17, 2023 •

edited

Loading