@widergy/mobile-ui 2.11.0 → 2.12.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.12.0](https://github.com/widergy/mobile-ui/compare/v2.11.0...v2.12.0) (2026-04-13)
+
+
+### Features
+
+* [AUTO-208] Test id's implementation to form fields ([#492](https://github.com/widergy/mobile-ui/issues/492)) ([7ac3c8b](https://github.com/widergy/mobile-ui/commit/7ac3c8b58a46f554e9bafbd88b4fb24ac6695d50))
+
 # [2.11.0](https://github.com/widergy/mobile-ui/compare/v2.10.0...v2.11.0) (2026-04-13)
 
 

package/lib/components/FilePicker/index.js

@@ -22,6 +22,7 @@ class FilePicker extends Component {
   handleShowPicker = async () => {
     const {
       allowedTypes = DEFAULT_ALLOWED_TYPES,
+      dataTestId,
       onMaxSizeError,
       onError,
       onChange,
@@ -102,11 +103,13 @@ class FilePicker extends Component {
   };
 
   render() {
-    const { error, title, filePlaceholder, style, withMarkdownTitle, markdownStyles, disabled } = this.props;
+    const { error, title, filePlaceholder, style, withMarkdownTitle, markdownStyles, disabled, dataTestId } =
+      this.props;
     const { fileName } = this.state;
     return (
       <View style={style}>
         <Picker
+          dataTestId={dataTestId}
           icon={UPLOAD_ICON}
           error={error}
           onAdd={this.handleShowPicker}

package/lib/components/MultipleFilePicker/components/Picker/index.js

@@ -13,6 +13,7 @@ import styles from './styles';
 
 const Picker = ({
   maxFiles,
+  dataTestId,
   disabled = false,
   error,
   filePlaceholder,
@@ -32,9 +33,11 @@ const Picker = ({
       ) : (
         uploadedFiles.map((file, index) => (
           <UploadedFile
+            dataTestId={dataTestId}
             disabled={disabled}
             file={file}
             filePlaceholder={filePlaceholder}
+            index={index}
             key={file.name}
             onDelete={() => onDelete(index)}
           />
@@ -44,6 +47,7 @@ const Picker = ({
       {uploadedFiles.length < maxFiles && (
         <UTButton
           colorTheme="primary"
+          dataTestId={dataTestId ? `${dataTestId}.uploadButton` : undefined}
           disabled={disabled}
           Icon="IconUpload"
           onPress={onAdd}
@@ -72,6 +76,7 @@ const Picker = ({
 
 Picker.propTypes = {
   maxFiles: number,
+  dataTestId: string,
   disabled: bool,
   error: string,
   filePlaceholder: string,

package/lib/components/MultipleFilePicker/components/UploadedFiles/index.js

@@ -1,4 +1,4 @@
-import { string, bool, func, object } from 'prop-types';
+import { string, bool, func, number, object } from 'prop-types';
 import { View } from 'react-native';
 import React from 'react';
 
@@ -11,9 +11,16 @@ import UTLabel from '../../../UTLabel';
 import { bytesFormater } from './utils';
 import styles from './styles';
 
-const UploadedFiles = ({ disabled = false, file, filePlaceholder, onDelete }) => {
+const UploadedFiles = ({
+  dataTestId,
+  disabled = false,
+  file,
+  filePlaceholder,
+  index,
+  onDelete
+}) => {
   return (
-    <Surface style={styles.container}>
+    <Surface style={styles.container} testID={dataTestId ? `${dataTestId}.preview.${index}` : undefined}>
       <UTIcon name="IconCheck" size={32} colorTheme="accent" shade="04" />
       <View style={styles.texts}>
         <UTLabel numberOfLines={1} weight="medium">
@@ -23,15 +30,25 @@ const UploadedFiles = ({ disabled = false, file, filePlaceholder, onDelete }) =>
           {bytesFormater(file.size)}
         </UTLabel>
       </View>
-      {!disabled && <UTButton Icon="IconTrash" colorTheme="primary" variant="text" onPress={onDelete} />}
+      {!disabled && (
+        <UTButton
+          dataTestId={dataTestId ? `${dataTestId}.delete.${index}` : undefined}
+          Icon="IconTrash"
+          colorTheme="primary"
+          variant="text"
+          onPress={onDelete}
+        />
+      )}
     </Surface>
   );
 };
 
 UploadedFiles.propTypes = {
+  dataTestId: string,
   disabled: bool,
   file: object,
   filePlaceholder: string,
+  index: number,
   onDelete: func
 };
 

package/lib/components/MultipleFilePicker/index.js

@@ -29,6 +29,7 @@ import styles from './styles';
 const MultipleFilePicker = ({
   allowedPDFUploadSizes,
   allowedTypes,
+  dataTestId,
   disabled,
   enabledInputs: { camera, files, gallery } = { files: true },
   error,
@@ -401,8 +402,9 @@ const MultipleFilePicker = ({
   };
 
   return (
-    <View style={style}>
+    <View style={style} testID={dataTestId}>
       <Picker
+        dataTestId={dataTestId}
         disabled={disabled}
         error={error}
         filePlaceholder={filePlaceholder}
@@ -421,25 +423,29 @@ const MultipleFilePicker = ({
               Icon: 'IconCamera',
               onPress: onPickCamera,
               show: camera,
+              testIdModifier: 'camera',
               text: 'Cámara'
             },
             {
               Icon: 'IconPhoto',
               onPress: onPickGallery,
               show: gallery,
+              testIdModifier: 'gallery',
               text: 'Fotos'
             },
             {
               Icon: 'IconFileArrowRight',
               onPress: onPickFiles,
               show: files,
+              testIdModifier: 'files',
               text: 'Archivos'
             }
           ].map(
-            ({ Icon, onPress, show, text }) =>
+            ({ Icon, onPress, show, testIdModifier, text }) =>
               show && (
                 <UTButton
                   colorTheme="secondary"
+                  dataTestId={dataTestId ? `${dataTestId}.${testIdModifier}` : undefined}
                   Icon={Icon}
                   key={text}
                   onPress={onPress}

package/lib/components/Picker/index.js

@@ -11,6 +11,7 @@ import { withTheme, themeType } from '../../theming';
 import styles from './styles';
 
 const Picker = ({
+  dataTestId,
   icon,
   error,
   onAdd,
@@ -35,7 +36,13 @@ const Picker = ({
       </Label>
     )}
     <View style={styles.fieldInput}>
-      <Touchable borderless style={styles.touchable} disabled={disabled} onPress={onAdd}>
+      <Touchable
+        borderless
+        style={styles.touchable}
+        dataTestId={dataTestId}
+        disabled={disabled}
+        onPress={onAdd}
+      >
         <Input
           backgroundColor="transparent"
           value={fileName}
@@ -59,6 +66,7 @@ const Picker = ({
 );
 
 Picker.propTypes = {
+  dataTestId: string,
   icon: string.isRequired,
   error: oneOfType([string, bool]),
   onAdd: func.isRequired,

package/lib/components/RadioGroup/index.js

@@ -18,12 +18,12 @@ class RadioGroup extends Component {
     onOptionChange(option && option[keyField]);
   };
 
-  renderOptions = option => {
+  renderOptions = (option, index) => {
     const { selectedOption, radioProps, keyField, disabled, dataTestId } = this.props;
     return (
       <RadioButton
         style={styles.radio}
-        dataTestId={dataTestId ? `${dataTestId}.radioButton_${option.id}` : undefined}
+        dataTestId={dataTestId ? `${dataTestId}.button.${index}` : undefined}
         option={option}
         key={option.id}
         label={option.label}

package/lib/components/UTSwitch/index.js

@@ -9,6 +9,7 @@ import ownStyles from './styles';
 import switchProptypes from './proptypes';
 
 const UTSwitch = ({
+  dataTestId,
   disabled,
   style,
   onColor,
@@ -101,6 +102,7 @@ const UTSwitch = ({
       onPressIn={onClick}
       onPressOut={onClickEnd}
       hitSlop={hitSlop}
+      testID={dataTestId}
     >
       <Animated.View
         style={[

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [