ANDROID-15325 Compose Input test ids (#396)

* ANDROID-15325 Compose Input test tags * ANDROID-15325 add label test tag * ANDROID-15325 add test tag to regular text input * ANDROID-15325 set tag to correct composable
Telefonica · Nov 15, 2024 · 0fc068f · 0fc068f
1 parent 66aa72d
commit 0fc068f
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 8 deletions.
diff --git a/library/src/main/java/com/telefonica/mistica/compose/input/CharsCounter.kt b/library/src/main/java/com/telefonica/mistica/compose/input/CharsCounter.kt
@@ -3,6 +3,7 @@ package com.telefonica.mistica.compose.input
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.text.style.TextAlign
 import com.telefonica.mistica.compose.theme.MisticaTheme
 
@@ -18,7 +19,7 @@ internal fun CharsCounter(
         color = if (isError) MisticaTheme.colors.error else MisticaTheme.colors.textSecondary,
         textAlign = TextAlign.End,
         style = MisticaTheme.typography.preset1,
-        modifier = modifier,
+        modifier = modifier.testTag(TextInputTestTags.END_HELPER_TEXT),
     )
 }
 

diff --git a/library/src/main/java/com/telefonica/mistica/compose/input/EmailInput.kt b/library/src/main/java/com/telefonica/mistica/compose/input/EmailInput.kt
@@ -24,6 +24,7 @@ fun EmailInput(
 ) {
     TextInputImpl(
         modifier = modifier,
+        testTag = TextInputTestTags.EMAIL_INPUT,
         value = value,
         onValueChange = onValueChange,
         label = label,

diff --git a/library/src/main/java/com/telefonica/mistica/compose/input/NumberInput.kt b/library/src/main/java/com/telefonica/mistica/compose/input/NumberInput.kt
@@ -25,6 +25,7 @@ fun NumberInput(
 
     TextInputImpl(
         modifier = modifier,
+        testTag = TextInputTestTags.DECIMAL_INPUT,
         value = value,
         onValueChange = onValueChange,
         label = label,

diff --git a/library/src/main/java/com/telefonica/mistica/compose/input/PasswordInput.kt b/library/src/main/java/com/telefonica/mistica/compose/input/PasswordInput.kt
@@ -37,6 +37,7 @@ fun PasswordInput(
 
     TextInputImpl(
         modifier = modifier,
+        testTag = TextInputTestTags.PASSWORD_INPUT,
         value = value,
         onValueChange = onValueChange,
         label = label,

diff --git a/library/src/main/java/com/telefonica/mistica/compose/input/PhoneInput.kt b/library/src/main/java/com/telefonica/mistica/compose/input/PhoneInput.kt
@@ -24,6 +24,7 @@ fun PhoneInput(
 ) {
     TextInputImpl(
         modifier = modifier,
+        testTag = TextInputTestTags.PHONE_NUMBER_INPUT,
         value = value,
         onValueChange = onValueChange,
         label = label,

diff --git a/library/src/main/java/com/telefonica/mistica/compose/input/SearchInput.kt b/library/src/main/java/com/telefonica/mistica/compose/input/SearchInput.kt
@@ -30,6 +30,7 @@ fun SearchInput(
 ) {
     TextInputImpl(
         modifier = modifier,
+        testTag = TextInputTestTags.SEARCH_INPUT,
         value = value,
         onValueChange = onValueChange,
         label = label,

diff --git a/library/src/main/java/com/telefonica/mistica/compose/input/TextAreaInput.kt b/library/src/main/java/com/telefonica/mistica/compose/input/TextAreaInput.kt
@@ -35,6 +35,7 @@ fun TextAreaInput(
 
     TextInputImpl(
         modifier = modifier,
+        testTag = TextInputTestTags.TEXT_INPUT,
         value = value,
         onValueChange = { newValue ->
             currentChars = doOnValueChange(maxChars, newValue, onValueChange)

diff --git a/library/src/main/java/com/telefonica/mistica/compose/input/TextInput.kt b/library/src/main/java/com/telefonica/mistica/compose/input/TextInput.kt
@@ -24,6 +24,7 @@ fun TextInput(
 ) {
     TextInputImpl(
         modifier = modifier,
+        testTag = TextInputTestTags.TEXT_INPUT,
         value = value,
         onValueChange = onValueChange,
         label = label,

diff --git a/library/src/main/java/com/telefonica/mistica/compose/input/TextInputImpl.kt b/library/src/main/java/com/telefonica/mistica/compose/input/TextInputImpl.kt
@@ -4,9 +4,11 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsFocusedAsState
 import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Text
 import androidx.compose.material.TextField
@@ -37,6 +39,7 @@ internal fun TextInputImpl(
     isInverse: Boolean,
     enabled: Boolean,
     readOnly: Boolean,
+    testTag: String,
     isTextArea: Boolean = false,
     onClick: (() -> Unit)?,
     visualTransformation: VisualTransformation,
@@ -66,7 +69,7 @@ internal fun TextInputImpl(
                     Modifier.height(152.dp)
                 } else {
                     Modifier
-                },
+                }.testTag(testTag),
             ),
         )
         Underline(
@@ -105,7 +108,6 @@ private fun TextBox(
 
     TextField(
         modifier = modifier
-            .testTag(TextInputTestTags.TEXT_INPUT)
             .fillMaxWidth()
             .border(
                 width = 1.dp,
@@ -122,6 +124,7 @@ private fun TextBox(
                     visualTransformation.filter(AnnotatedString(value))
                 }
                 TextInputLabel(
+                    modifier = Modifier.testTag(TextInputTestTags.LABEL),
                     text = it,
                     inputIsNotEmpty = transformedText.text.isNotEmpty(),
                     isFocused = interactionSource.collectIsFocusedAsState().value,
@@ -132,8 +135,28 @@ private fun TextBox(
         interactionSource = interactionSource,
         keyboardOptions = keyboardOptions,
         isError = isError,
-        leadingIcon = leadingIcon,
-        trailingIcon = trailingIcon,
+        leadingIcon = leadingIcon?.let { icon ->
+            {
+                Box(
+                    modifier = Modifier
+                        .wrapContentSize()
+                        .testTag(TextInputTestTags.START_ICON)
+                ) {
+                    icon()
+                }
+            }
+        },
+        trailingIcon = trailingIcon?.let { icon ->
+            {
+                Box(
+                    modifier = Modifier
+                        .wrapContentSize()
+                        .testTag(TextInputTestTags.END_ICON)
+                ) {
+                    icon()
+                }
+            }
+        },
         shape = RoundedCornerShape(MisticaTheme.radius.inputBorderRadius),
         colors = TextFieldDefaults.textFieldColors(
             backgroundColor = MisticaTheme.colors.backgroundContainer,
@@ -197,6 +220,7 @@ fun PreviewTextInput() {
         isInverse = false,
         enabled = true,
         readOnly = false,
+        testTag = "",
         onClick = { },
         visualTransformation = VisualTransformation.None,
         keyboardOptions = FoundationKeyboardOptions(),
@@ -218,6 +242,7 @@ fun PreviewEmptyTextInput() {
         isInverse = false,
         enabled = true,
         readOnly = false,
+        testTag = "",
         onClick = { },
         visualTransformation = VisualTransformation.None,
         keyboardOptions = FoundationKeyboardOptions(),

diff --git a/library/src/main/java/com/telefonica/mistica/compose/input/TextInputTestTags.kt b/library/src/main/java/com/telefonica/mistica/compose/input/TextInputTestTags.kt
@@ -1,7 +1,19 @@
 package com.telefonica.mistica.compose.input
 
 object TextInputTestTags {
-    const val TEXT_INPUT = "text_input"
+    const val TEXT_INPUT = "TextField"
+    const val PASSWORD_INPUT = "PasswordField"
+    const val SEARCH_INPUT = "SearchField"
+    const val PHONE_NUMBER_INPUT = "PhoneNumberField"
+    const val EMAIL_INPUT = "EmailField"
+    const val DECIMAL_INPUT = "DecimalField"
+    const val LABEL = "label"
+    const val HELPER_TEXT = "helperText"
+    const val END_HELPER_TEXT = "endHelperText"
+    const val ERROR_TEXT = "errorText"
+    const val START_ICON = "startIcon"
+    const val END_ICON = "endIcon"
+
     const val PASSWORD_VISIBILITY_TOGGLE = "password_visibility_toggle"
     const val CLEAR_SEARCH_BUTTON = "clear_search_button"
 }
diff --git a/library/src/main/java/com/telefonica/mistica/compose/input/Underline.kt b/library/src/main/java/com/telefonica/mistica/compose/input/Underline.kt
@@ -16,6 +16,7 @@ import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.telefonica.mistica.compose.theme.MisticaTheme
@@ -43,11 +44,13 @@ internal fun Underline(
         Row(modifier = Modifier.fillMaxWidth()) {
             Box {
                 UnderlineTextAnimatedVisibility(
+                    isError = isError,
                     visible = !isError && helperText != null,
                     text = helperText,
                     color = LocalUnderlineTextColors.current.helperTextColor,
                 )
                 UnderlineTextAnimatedVisibility(
+                    isError = isError,
                     visible = isError && errorText != null,
                     text = errorText,
                     color = LocalUnderlineTextColors.current.errorTextColor,
@@ -65,6 +68,7 @@ internal fun Underline(
 
 @Composable
 private fun UnderlineTextAnimatedVisibility(
+    isError: Boolean,
     visible: Boolean,
     text: String?,
     color: Color,
@@ -75,18 +79,29 @@ private fun UnderlineTextAnimatedVisibility(
         exit = fadeOut(animationSpec = tween(0)),
     ) {
         if (text != null) {
-            UnderlineText(text = text, color = color)
+            UnderlineText(
+                modifier = Modifier.testTag(
+                    if (isError) {
+                        TextInputTestTags.ERROR_TEXT
+                    } else {
+                        TextInputTestTags.HELPER_TEXT
+                    }
+                ),
+                text = text,
+                color = color,
+            )
         }
     }
 }
 
 @Composable
 private fun UnderlineText(
+    modifier: Modifier,
     text: String,
     color: Color,
 ) {
     Text(
-        modifier = Modifier.padding(top = 4.dp, start = 14.dp, end = 14.dp),
+        modifier = modifier.padding(top = 4.dp, start = 14.dp, end = 14.dp),
         text = text,
         style = MisticaTheme.typography.preset1,
         color = color,