@widergy/mobile-ui 1.47.0 → 1.48.1

package/lib/components/UTBaseInputField/README.md

@@ -11,6 +11,7 @@
 | alwaysShowPlaceholder | bool                                                      | false       | Whether to always show the placeholder text, even when the field is focused.                    |
 | autoCapitalize        | oneOf('none','sentences','words','characters')            | 'sentences' | Defines how to automatically capitalize certain characters.                                     |
 | blurOnSubmit          | bool                                                      |             | If true, the input will be blurred when the user submits the text.                              |
+| dataTestId            | string                                                    |             | Test ID for automated testing. Enables hierarchical test ID structure.                          |
 | disabled              | bool                                                      |             | Whether the input field is disabled.                                                            |
 | editable              | bool                                                      | true        | Whether the input field is editable. If false, it behaves like a disabled field.                |
 | error                 | oneOfType([bool, string])                                 |             | Error message to display, or `true` to indicate an error state without a message.               |
@@ -33,6 +34,28 @@
 | type                  | string                                                    |             | Type of the input field (e.g., text, email, numeric, password).                                 |
 | variant               | string                                                    | 'white'     | Variant of the input field. One of: `white`, `gray`.                                            |
 
+## Test IDs
+
+When `dataTestId` is provided, the component creates a hierarchical test ID structure:
+
+| Element          | Test ID                        | Condition                         |
+| ---------------- | ------------------------------ | --------------------------------- |
+| Input field      | `${dataTestId}`                | Always when `dataTestId` provided |
+| Left adornments  | `${dataTestId}.left`           | When left adornments are present  |
+| Right adornments | `${dataTestId}.right`          | When right adornments are present |
+| Character count  | `${dataTestId}.characterCount` | When `showCharacterCount` is true |
+
+### Test ID Structure Details
+
+- **Input field**: The main TextInput element gets the base `dataTestId`
+- **Left adornments**: All left-side adornments share the `.left` test ID
+- **Right adornments**: All right-side adornments share the `.right` test ID
+- **Character count**: The character count display when enabled
+
+### Adornment Test IDs
+
+Individual adornments within the left/right containers inherit the adornment test ID and may create their own hierarchical structure based on their component type (e.g., UTIcon, UTButton, etc.).
+
 ## Input Types
 
 The `type` prop can be one of these values:
@@ -176,31 +199,30 @@ Displays a tooltip with an icon.
 <UTBaseInputField rightAdornments={[{ name: 'Tooltip', props: { tooltip: 'Tooltip Text' } }]} />
 ```
 
-### Example Usages:
+### Example with Test IDs
 
 ```javascript
-// Example of PrefixAdornment usage
-<UTBaseInputField
-  leftAdornments={[{ name: 'Prefix', props: { text: 'Prefix Text' } }]}
-/>
-
-// Example of SuffixAdornment usage
-<UTBaseInputField
-  rightAdornments={[{ name: 'Suffix', props: { text: 'Suffix Text' } }]}
-/>
-
-// Example of IconAdornment usage
+// Basic input with test ID
 <UTBaseInputField
-  rightAdornments={[{ name: 'Icon', props: { Icon: 'IconActivity', changeOnError: true } }]}
+  dataTestId="userEmail"
+  placeholder="Enter your email"
+  type="email"
 />
 
-// Example of ActionAdornment usage
+// Input with adornments and test IDs
 <UTBaseInputField
-  rightAdornments={[{ name: 'Action', props: { action: { text: 'Go', onPress: handlePress } } }]}
+  dataTestId="searchField"
+  placeholder="Search products..."
+  leftAdornments={[{ name: 'Icon', props: { Icon: 'IconSearch' } }]}
+  rightAdornments={[{ name: 'Action', props: { action: { text: 'Search', onPress: handleSearch } } }]}
+  showCharacterCount
+  maxLength={100}
 />
 
-// Example of TooltipAdornment usage
-<UTBaseInputField
-  rightAdornments={[{ name: 'Tooltip', props: { tooltip: 'Tooltip Text' } }]}
-/>
+// Generated test IDs:
+// userEmail (input field)
+// searchField (input field)
+// searchField.left (left adornments container)
+// searchField.right (right adornments container)
+// searchField.characterCount (character count display)
 ```

package/lib/components/UTBaseInputField/components/ActionAdornment/index.js

@@ -1,14 +1,20 @@
 import React from 'react';
-import { bool, object, shape } from 'prop-types';
+import { bool, object, shape, string } from 'prop-types';
 
 import UTButton from '../../../UTButton';
 import { propTypes as utbuttonProptypes } from '../../../UTButton/proptypes';
 
-const ActionAdornment = ({ action, disabled, actionStyle }) => {
+const ActionAdornment = ({ action, dataTestId, disabled, actionStyle }) => {
   if (!action) return null;
 
   return (
-    <UTButton disabled={disabled} style={actionStyle} variant="text" {...action}>
+    <UTButton
+      dataTestId={dataTestId ? `${dataTestId}.actionAdornment` : undefined}
+      disabled={disabled}
+      style={actionStyle}
+      variant="text"
+      {...action}
+    >
       {action.text}
     </UTButton>
   );
@@ -21,6 +27,7 @@ ActionAdornment.propTypes = {
     icon: object,
     root: object
   }),
+  dataTestId: string,
   disabled: bool
 };
 

package/lib/components/UTBaseInputField/components/BadgeAdornment/index.js

@@ -3,10 +3,15 @@ import { number, oneOfType, string } from 'prop-types';
 
 import UTBadge from '../../../UTBadge';
 
-const BadgeAdornment = ({ text, colorTheme }) => <UTBadge colorTheme={colorTheme}>{text}</UTBadge>;
+const BadgeAdornment = ({ dataTestId, text, colorTheme }) => (
+  <UTBadge dataTestId={dataTestId ? `${dataTestId}.badgeAdornment` : undefined} colorTheme={colorTheme}>
+    {text}
+  </UTBadge>
+);
 
 BadgeAdornment.propTypes = {
   colorTheme: string,
+  dataTestId: string,
   text: oneOfType([string, number])
 };
 

package/lib/components/UTBaseInputField/components/IconAdornment/index.js

@@ -12,6 +12,7 @@ const IconAdornment = ({
   changeOnError,
   changeOnFocus,
   colorTheme,
+  dataTestId,
   error,
   focused,
   Icon,
@@ -23,12 +24,17 @@ const IconAdornment = ({
 
   return isUTIcon(IconToRender) ? (
     <UTIcon
+      dataTestId={dataTestId ? `${dataTestId}.iconAdornment` : undefined}
       name={IconToRender}
       size={ICON_SIZE}
       {...getIconColorProps(changeOnError, changeOnFocus, colorTheme, error, focused, shade)}
     />
   ) : (
-    <Icon size={ICON_SIZE} fill={inputStyle.root.color} />
+    <Icon
+      testID={dataTestId ? `${dataTestId}.iconAdornment` : undefined}
+      size={ICON_SIZE}
+      fill={inputStyle.root.color}
+    />
   );
 };
 
@@ -36,6 +42,7 @@ IconAdornment.propTypes = {
   changeOnError: bool,
   changeOnFocus: bool,
   colorTheme: string,
+  dataTestId: string,
   error: oneOfType([bool, string]),
   focused: bool,
   Icon: elementType,

package/lib/components/UTBaseInputField/components/PrefixAdornment/index.js

@@ -3,13 +3,19 @@ import { string } from 'prop-types';
 
 import UTLabel from '../../../UTLabel';
 
-const PrefixAdornment = ({ text }) => (
-  <UTLabel colorTheme="gray" variant="small" weight="medium">
+const PrefixAdornment = ({ dataTestId, text }) => (
+  <UTLabel
+    dataTestId={dataTestId ? `${dataTestId}.prefixAdornment` : undefined}
+    colorTheme="gray"
+    variant="small"
+    weight="medium"
+  >
     {text}
   </UTLabel>
 );
 
 PrefixAdornment.propTypes = {
+  dataTestId: string,
   text: string
 };
 

package/lib/components/UTBaseInputField/components/SuffixAdornment/index.js

@@ -3,9 +3,14 @@ import { string } from 'prop-types';
 
 import UTLabel from '../../../UTLabel';
 
-const SuffixAdornment = ({ text }) => <UTLabel colorTheme="gray">{text}</UTLabel>;
+const SuffixAdornment = ({ dataTestId, text }) => (
+  <UTLabel dataTestId={dataTestId ? `${dataTestId}.suffixAdornment` : undefined} colorTheme="gray">
+    {text}
+  </UTLabel>
+);
 
 SuffixAdornment.propTypes = {
+  dataTestId: string,
   text: string
 };
 

package/lib/components/UTBaseInputField/components/TooltipAdornment/index.js

@@ -5,19 +5,32 @@ import UTTooltip from '../../../UTTooltip';
 import UTIcon from '../../../UTIcon';
 import UTLabel from '../../../UTLabel';
 
-const TooltipAdornment = ({ tooltip, tooltipProps }) => {
+const TooltipAdornment = ({ dataTestId, tooltip, tooltipProps }) => {
   const { tooltip: tooltipStyles, arrowTouchable, labelProps } = tooltipProps || {};
   return tooltip ? (
     <UTTooltip
+      dataTestId={dataTestId ? `${dataTestId}.tooltipAdornment` : undefined}
       styles={{ tooltip: tooltipStyles, arrow: arrowTouchable }}
-      content={<UTLabel {...labelProps}>{tooltip}</UTLabel>}
+      content={
+        <UTLabel
+          dataTestId={dataTestId ? `${dataTestId}.tooltipAdornment.content` : undefined}
+          {...labelProps}
+        >
+          {tooltip}
+        </UTLabel>
+      }
     >
-      <UTIcon name="IconInfoCircle" colorTheme="gray" />
+      <UTIcon
+        dataTestId={dataTestId ? `${dataTestId}.tooltipAdornment.icon` : undefined}
+        name="IconInfoCircle"
+        colorTheme="gray"
+      />
     </UTTooltip>
   ) : undefined;
 };
 
 TooltipAdornment.propTypes = {
+  dataTestId: string,
   tooltip: string,
   tooltipProps: shape({
     tooltip: object,

package/lib/components/UTBaseInputField/index.js

@@ -14,11 +14,14 @@ import { arrayOf, bool, func, number, object, oneOfType, shape, string } from 'p
 
 import { useTheme } from '../../theming';
 import UTLabel from '../UTLabel';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import { COMPONENTS_MAPPER, DEBOUNCE_CONFIG, DEBOUNCE_DELAY } from './constants';
 import { getPropsByType } from './utils';
 import { CONTAINER, LINE_HEIGHT, retrieveStyle } from './theme';
 
+const { characterCount } = TEST_ID_CONSTANTS;
+
 const UTBaseInputField = forwardRef(
   (
     {
@@ -26,6 +29,7 @@ const UTBaseInputField = forwardRef(
       autoCapitalize: autoCapitalize_,
       blurOnSubmit,
       disabled,
+      dataTestId,
       editable = true,
       error,
       id,
@@ -153,10 +157,11 @@ const UTBaseInputField = forwardRef(
     }));
 
     const renderElement = useCallback(
-      element => {
+      (element, adornmentSide) => {
         const Component = COMPONENTS_MAPPER[element.name];
         return Component ? (
           <Component
+            dataTestId={dataTestId ? `${dataTestId}.${adornmentSide}` : undefined}
             actionStyle={actionStyle}
             disabled={disabled}
             error={error}
@@ -179,11 +184,12 @@ const UTBaseInputField = forwardRef(
     return (
       <View style={[containerStyle, { minHeight }]}>
         <View style={inputRowStyle}>
-          {leftAdornments.map(renderElement)}
+          {leftAdornments.map(element => renderElement(element, 'left'))}
           <TextInput
             autoCapitalize={autoCapitalize}
             autoCorrect={false}
             cursorColor={inputStyle.cursorColor}
+            testID={dataTestId}
             defaultValue={value}
             editable={!disabled && !readOnly && editable}
             id={id ? `${id}` : undefined}
@@ -206,11 +212,15 @@ const UTBaseInputField = forwardRef(
             style={inputStyle.root}
             type={type}
           />
-          {rightAdornments.map(renderElement)}
+          {rightAdornments.map(element => renderElement(element, 'right'))}
         </View>
         {hasCharactersCount && (
           <View style={textLengthRowStyle}>
-            <UTLabel colorTheme="gray" variant="small">
+            <UTLabel
+              dataTestId={dataTestId ? `${dataTestId}.${characterCount}` : undefined}
+              colorTheme="gray"
+              variant="small"
+            >
               {value?.length || 0}/{maxLength}
             </UTLabel>
           </View>
@@ -226,6 +236,7 @@ UTBaseInputField.propTypes = {
   alwaysShowPlaceholder: bool,
   autoCapitalize: string,
   blurOnSubmit: bool,
+  dataTestId: string,
   disabled: bool,
   editable: bool,
   error: oneOfType([bool, string]),

package/lib/components/UTBottomSheet/README.md

@@ -6,29 +6,30 @@
 
 ## Props
 
-| Name                      | Type     | Default     | Description                                                                 |
-| ------------------------- | -------- | ----------- | --------------------------------------------------------------------------- |
-| `actionAlignment`         | `string` |             | Aligns the actions.                                                         |
-| `adjustableHeight`        | `bool`   | `false`     | If true the height of the component adjusts to the content.                 |
-| `buttonText`              | `string` |             | Text for the button that appears in the top right corner of the header.     |
-| `description`             | `string` |             | Description that appears below the title in the header.                     |
-| `onClose`                 | `func`   |             | Function called when the bottom sheet is closed.                            |
-| `onCloseProps`            | `object` |             | Additional props passed to the `onClose` function (optional).               |
-| `primaryAction`           | `func`   |             | Callback for the primary action button.                                     |
-| `primaryActionProps`      | `object` |             | Props for the primary action button.                                        |
-| `primaryActionText`       | `string` |             | Text for the primary action button.                                         |
-| `required`                | `bool`   |             | Indicates if the field is required, showing an asterisk in the title.       |
-| `scrolleable`             | `bool`   | `false`     | Determines if the content inside the bottom sheet should be scrollable.     |
-| `secondaryAction`         | `func`   |             | Callback for the secondary action button.                                   |
-| `secondaryActionProps`    | `object` |             | Props for the secondary action button.                                      |
-| `secondaryActionText`     | `string` |             | Text for the secondary action button.                                       |
-| `tertiaryAction`          | `func`   |             | Callback for the tertiary action button.                                    |
-| `tertiaryActionProps`     | `object` |             | Props for the tertiary action button .                                      |
-| `tertiaryActionText`      | `string` |             | Text for the tertiary action button.                                        |
-| `title`                   | `string` |             | Title that appears in the bottom sheet header.                              |
-| `titleProps`              | `object` |             | Props for the title label                                                   |
-| `visible`                 | `bool`   |             | Controls the visibility of the bottom sheet.                                |
-| `withBodyPadding`         | `bool`   | `true`      | Controls the visibility of the bottom sheet.                                |
+| Name                   | Type     | Default | Description                                                             |
+| ---------------------- | -------- | ------- | ----------------------------------------------------------------------- |
+| `actionAlignment`      | `string` |         | Aligns the actions.                                                     |
+| `adjustableHeight`     | `bool`   | `false` | If true the height of the component adjusts to the content.             |
+| `buttonText`           | `string` |         | Text for the button that appears in the top right corner of the header. |
+| `dataTestId`           | `string` |         | Test ID for automated testing. Enables hierarchical test ID structure.  |
+| `description`          | `string` |         | Description that appears below the title in the header.                 |
+| `onClose`              | `func`   |         | Function called when the bottom sheet is closed.                        |
+| `onCloseProps`         | `object` |         | Additional props passed to the `onClose` function (optional).           |
+| `primaryAction`        | `func`   |         | Callback for the primary action button.                                 |
+| `primaryActionProps`   | `object` |         | Props for the primary action button.                                    |
+| `primaryActionText`    | `string` |         | Text for the primary action button.                                     |
+| `required`             | `bool`   |         | Indicates if the field is required, showing an asterisk in the title.   |
+| `scrolleable`          | `bool`   | `false` | Determines if the content inside the bottom sheet should be scrollable. |
+| `secondaryAction`      | `func`   |         | Callback for the secondary action button.                               |
+| `secondaryActionProps` | `object` |         | Props for the secondary action button.                                  |
+| `secondaryActionText`  | `string` |         | Text for the secondary action button.                                   |
+| `tertiaryAction`       | `func`   |         | Callback for the tertiary action button.                                |
+| `tertiaryActionProps`  | `object` |         | Props for the tertiary action button .                                  |
+| `tertiaryActionText`   | `string` |         | Text for the tertiary action button.                                    |
+| `title`                | `string` |         | Title that appears in the bottom sheet header.                          |
+| `titleProps`           | `object` |         | Props for the title label                                               |
+| `visible`              | `bool`   |         | Controls the visibility of the bottom sheet.                            |
+| `withBodyPadding`      | `bool`   | `true`  | Controls the visibility of the bottom sheet.                            |
 
 ### actionAlignment
 
@@ -39,8 +40,35 @@ The value of `actionAlignment` must be one of the following:
 
 By default, actions are aligned horizontally if there are two, and vertically otherwise.
 
+## Test IDs
+
+When `dataTestId` is provided, the component creates a hierarchical test ID structure:
+
+| Element          | Test ID                         | Condition                               |
+| ---------------- | ------------------------------- | --------------------------------------- |
+| Modal container  | `${dataTestId}`                 | Always when `dataTestId` provided       |
+| Title            | `${dataTestId}.title`           | When `title` prop is provided           |
+| Description      | `${dataTestId}.description`     | When `description` prop is provided     |
+| Close button     | `${dataTestId}.closeButton`     | When `buttonText` prop is provided      |
+| Primary action   | `${dataTestId}.primaryAction`   | When `primaryAction` prop is provided   |
+| Secondary action | `${dataTestId}.secondaryAction` | When `secondaryAction` prop is provided |
+| Tertiary action  | `${dataTestId}.tertiaryAction`  | When `tertiaryAction` prop is provided  |
+
+### Action Button Test IDs
+
+Action buttons inherit test IDs from `UTButton` component:
+
+- Each action gets its specific test ID (e.g., `${dataTestId}.primaryAction`)
+- UTButton creates its own hierarchy for internal elements
+
+### Children Test IDs
+
+The content area (children) does not receive a test ID automatically. Developers should add test IDs directly to their children components as needed.
+
 ## Example
 
+### Basic Usage
+
 ```jsx
 import React, { useState } from 'react';
 import { View, Button, Text } from 'react-native';
@@ -74,3 +102,46 @@ const Example = () => {
 
 export default Example;
 ```
+
+### With Test IDs
+
+```jsx
+import React, { useState } from 'react';
+import { View, Button, Text } from 'react-native';
+import UTBottomSheet from './UTBottomSheet';
+
+const TestableExample = () => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Button title="Show Bottom Sheet" onPress={() => setVisible(true)} />
+      <UTBottomSheet
+        dataTestId="settingsSheet"
+        title="Settings"
+        description="Configure your preferences"
+        buttonText="Done"
+        visible={visible}
+        onClose={() => setVisible(false)}
+        primaryAction={() => console.log('Save')}
+        primaryActionText="Save Changes"
+        secondaryAction={() => console.log('Cancel')}
+        secondaryActionText="Cancel"
+        tertiaryAction={() => console.log('Reset')}
+        tertiaryActionText="Reset to Default"
+      >
+        <Text>Settings content goes here</Text>
+      </UTBottomSheet>
+    </View>
+  );
+};
+
+// Generated test IDs:
+// settingsSheet
+// settingsSheet.title
+// settingsSheet.description
+// settingsSheet.closeButton
+// settingsSheet.primaryAction
+// settingsSheet.secondaryAction
+// settingsSheet.tertiaryAction
+```

package/lib/components/UTBottomSheet/index.js

@@ -8,10 +8,20 @@ import UTButton from '../UTButton';
 import UTFieldLabel from '../UTFieldLabel';
 import UTLabel from '../UTLabel';
 import { IS_IOS } from '../../utils/platformUtils/constants';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import styles from './styles';
 import { ACTION_ALIGNMENTS } from './constants';
 
+const {
+  title: titleTestId,
+  closeButton,
+  description: descriptionTestId,
+  primaryAction: primaryActionTestId,
+  secondaryAction: secondaryActionTestId,
+  tertiaryAction: tertiaryActionTestId
+} = TEST_ID_CONSTANTS;
+
 const screenHeight = Dimensions.get('window').height;
 
 const UTBottomSheet = ({
@@ -36,7 +46,8 @@ const UTBottomSheet = ({
   title,
   titleProps = {},
   visible,
-  withBodyPadding = true
+  withBodyPadding = true,
+  dataTestId
 }) => {
   const [height, setHeight] = useState('70%');
   const [modalHeight, setModalHeight] = useState(height);
@@ -94,6 +105,7 @@ const UTBottomSheet = ({
       propagateSwipe
       style={styles.modal}
       swipeDirection="down"
+      testID={dataTestId}
     >
       <Animated.View style={[styles.animatedContainer(theme), { height: modalHeight }, pan.getLayout()]}>
         <SafeAreaView onLayout={onLayout} style={styles.content(adjustableHeight)}>
@@ -108,6 +120,7 @@ const UTBottomSheet = ({
                   style={styles.title}
                   variant="subtitle1"
                   weight="medium"
+                  dataTestId={dataTestId ? `${dataTestId}.${titleTestId}` : undefined}
                   {...titleProps}
                 >
                   {title}
@@ -117,6 +130,7 @@ const UTBottomSheet = ({
                     colorTheme="primary"
                     onPress={onClose}
                     variant="semitransparent"
+                    dataTestId={dataTestId ? `${dataTestId}.${closeButton}` : undefined}
                     {...onCloseProps}
                   >
                     {buttonText}
@@ -124,7 +138,11 @@ const UTBottomSheet = ({
                 )}
               </View>
               {description && (
-                <UTLabel colorTheme="gray" variant="small">
+                <UTLabel
+                  colorTheme="gray"
+                  variant="small"
+                  dataTestId={dataTestId ? `${dataTestId}.${descriptionTestId}` : undefined}
+                >
                   {description}
                 </UTLabel>
               )}
@@ -142,12 +160,14 @@ const UTBottomSheet = ({
                   variant: 'semitransparent',
                   onPress: primaryAction,
                   text: primaryActionText,
+                  dataTestId: dataTestId ? `${dataTestId}.${primaryActionTestId}` : undefined,
                   ...primaryActionProps
                 },
                 {
                   key: 'secondaryAction',
                   onPress: secondaryAction,
                   text: secondaryActionText,
+                  dataTestId: dataTestId ? `${dataTestId}.${secondaryActionTestId}` : undefined,
                   ...secondaryActionProps
                 },
                 {
@@ -155,16 +175,18 @@ const UTBottomSheet = ({
                   onPress: tertiaryAction,
                   text: tertiaryActionText,
                   variant: 'text',
+                  dataTestId: dataTestId ? `${dataTestId}.${tertiaryActionTestId}` : undefined,
                   ...tertiaryActionProps
                 }
               ].map(
-                ({ text, key, onPress, ...actionProps }) =>
+                ({ text, key, onPress, dataTestId: actionDataTestId, ...actionProps }) =>
                   onPress && (
                     <UTButton
                       key={key}
                       onPress={onPress}
                       size="large"
                       style={styles.action(actionAlignment)}
+                      dataTestId={actionDataTestId}
                       {...actionProps}
                     >
                       {text}
@@ -204,7 +226,8 @@ UTBottomSheet.propTypes = {
   title: string,
   titleProps: object,
   visible: bool,
-  withBodyPadding: bool
+  withBodyPadding: bool,
+  dataTestId: string
 };
 
 export default UTBottomSheet;

package/lib/components/UTButton/index.js

@@ -8,15 +8,19 @@ import UTBadge from '../UTBadge';
 import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
 import UTLoading from '../UTLoading';
+import { TEST_ID_CONSTANTS } from '../../constants/testIds';
 
 import { COLORS_MAPPER, ICON_PLACEMENTS, VARIANTS_NAMES } from './constants';
 import { defaultProps, propTypes } from './proptypes';
 import { retrieveStyle } from './theme';
 
+const { icon, badge, label: labelTestId } = TEST_ID_CONSTANTS;
+
 const UTButton = ({
   children,
   colorTheme,
   count,
+  dataTestId,
   disabled,
   Icon,
   iconPlacement,
@@ -67,6 +71,7 @@ const UTButton = ({
         return (
           <UTIcon
             colorTheme={textStyles.colorTheme}
+            dataTestId={`${dataTestId}.${icon}`}
             name={Icon}
             size={iconSize}
             style={remainingIconStyles}
@@ -74,15 +79,24 @@ const UTButton = ({
         );
       })()
     ) : (
-      <Icon style={iconStyles} fill={iconStyles.color} />
+      <Icon testID={`${dataTestId}.${icon}`} style={iconStyles} fill={iconStyles.color} />
     ));
 
   const RenderedChildren = (
     <View style={themeChildrenContainerStyles}>
-      {count && <UTBadge colorTheme={counterColorTheme}>{count}</UTBadge>}
+      {count && (
+        <UTBadge colorTheme={counterColorTheme} dataTestId={`${dataTestId}.${badge}`}>
+          {count}
+        </UTBadge>
+      )}
       {iconPlacement === ICON_PLACEMENTS.LEFT && IconToShow}
       {children && (
-        <UTLabel colorTheme={textStyles.colorTheme} variant={textStyles.variant} weight={textStyles.weight}>
+        <UTLabel
+          colorTheme={textStyles.colorTheme}
+          dataTestId={`${dataTestId}.${labelTestId}`}
+          variant={textStyles.variant}
+          weight={textStyles.weight}
+        >
           {children}
         </UTLabel>
       )}
@@ -91,7 +105,7 @@ const UTButton = ({
   );
 
   return (
-    <Pressable disabled={disabled || loading} onPress={onPress} style={buttonStyles}>
+    <Pressable testID={dataTestId} disabled={disabled || loading} onPress={onPress} style={buttonStyles}>
       <UTLoading color={iconStyles.color} loading={loading} size={24} thickness={2}>
         {RenderedChildren}
       </UTLoading>

package/lib/components/UTButton/proptypes.js

@@ -15,6 +15,7 @@ export const propTypes = {
   colorTheme: string,
   count: number,
   disabled: bool,
+  dataTestId: string,
   Icon: elementType,
   iconPlacement: string,
   loading: bool,