Unify buttons id

catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/common/ComponentComposeFragment.kt

@@ -4,20 +4,32 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.compose.material.Surface
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTagsAsResourceId
 import androidx.fragment.app.Fragment
 import com.telefonica.mistica.compose.theme.MisticaTheme
 import com.telefonica.mistica.compose.theme.brand.Brand
 
+@OptIn(ExperimentalComposeUiApi::class)
 class ComponentComposeFragment(private val theme: Brand, private val component: @Composable () -> Unit) : Fragment() {
     override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
         return ComposeView(requireContext()).apply {
             setContent {
                 MisticaTheme(theme) {
-                    component()
+                    Surface(
+                        modifier = Modifier.semantics {
+                            testTagsAsResourceId = true
+                        }
+                    ) {
+                        component()
+                    }
                 }
             }
         }
     }
-}
+}

library/src/main/java/com/telefonica/mistica/compose/button/Button.kt

@@ -36,6 +36,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
@@ -77,6 +78,7 @@ fun Button(
     CompositionLocalProvider(LocalRippleTheme provides style.rippleTheme) {
         androidx.compose.material.Button(
             modifier = modifier
+                .testTag(ButtonTestTag.BUTTON)
                 .defaultMinSize(size.minWidth, size.height)
                 .onGloballyPositioned {
                     if (originalWidth == null) {
@@ -117,6 +119,7 @@ private fun LoadingContent(
         Row {
             CircularProgressIndicator(
                 modifier = Modifier
+                    .testTag(ButtonTestTag.BUTTON_PROGRESS)
                     .size(size.progressBarSize)
                     .align(Alignment.CenterVertically),
                 color = textColor,
@@ -125,7 +128,9 @@ private fun LoadingContent(
             loadingText.takeIf { it.isNotEmpty() }?.let {
                 Spacer(modifier = Modifier.width(iconSpacing))
                 Text(
-                    modifier = Modifier.align(Alignment.CenterVertically),
+                    modifier = Modifier
+                        .testTag(ButtonTestTag.BUTTON_TEXT_LOADING)
+                        .align(Alignment.CenterVertically),
                     text = it,
                     color = textColor,
                     style = size.textStyle,
@@ -162,6 +167,7 @@ private fun ButtonContent(
                     painterResource(id = it),
                     null,
                     modifier = Modifier
+                        .testTag(ButtonTestTag.BUTTON_ICON)
                         .size(size.iconSize)
                         .align(Alignment.CenterVertically),
                     colorFilter = ColorFilter.tint(style.textColor)
@@ -170,6 +176,7 @@ private fun ButtonContent(
             }
             Text(
                 modifier = Modifier
+                    .testTag(ButtonTestTag.BUTTON_TEXT)
                     .align(Alignment.CenterVertically)
                     .onGloballyPositioned {
                         textHeight = with(density) {
@@ -205,6 +212,15 @@ private fun ButtonContent(
 private fun Modifier.applyWidth(originalWidth: Dp?): Modifier =
     originalWidth?.let { width(it) } ?: this
 
+
+object ButtonTestTag {
+    const val BUTTON = "button"
+    const val BUTTON_TEXT = "button_text"
+    const val BUTTON_TEXT_LOADING = "button_text_loading"
+    const val BUTTON_ICON = "button_icon"
+    const val BUTTON_PROGRESS = "button_progress"
+}
+
 enum class ButtonStyle {
     PRIMARY,
     PRIMARY_SMALL,
@@ -275,4 +291,4 @@ fun LinkWithChevronPreview() {
 
 class PreviewBooleanProvider : PreviewParameterProvider<Boolean> {
     override val values = sequenceOf(false, true)
-}
+}

library/src/main/java/com/telefonica/mistica/compose/composeview/AbstractMisticaComposeView.kt

@@ -3,8 +3,14 @@ package com.telefonica.mistica.compose.composeview
 import android.content.Context
 import android.util.AttributeSet
 import androidx.annotation.IntDef
+import androidx.compose.material.Surface
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.AbstractComposeView
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTagsAsResourceId
 import com.telefonica.mistica.R
 import com.telefonica.mistica.compose.composeview.AbstractMisticaComposeView.Companion.BRAND_VALUE_BLAU
 import com.telefonica.mistica.compose.composeview.AbstractMisticaComposeView.Companion.BRAND_VALUE_MOVISTAR
@@ -53,10 +59,18 @@ abstract class AbstractMisticaComposeView @JvmOverloads constructor(
         }
     }
 
+    @OptIn(ExperimentalComposeUiApi::class)
     @Composable
     open fun Theme(brand: Brand = calculateBrand(), body: @Composable () -> Unit) {
         MisticaTheme(brand) {
-            body()
+            Surface(
+                color = Color.Transparent,
+                modifier = Modifier.semantics {
+                    testTagsAsResourceId = true
+                }
+            ) {
+                body()
+            }
         }
     }
 
@@ -80,4 +94,4 @@ fun Int.mapToComposeBrand(): Brand = when (this) {
     BRAND_VALUE_BLAU -> BlauBrand
     BRAND_VALUE_VIVO_NEW -> VivoNewBrand
     else -> TelefonicaBrand
-}
+}