feat: add testID prop to ui components (#1444)

Co-authored-by: Fernanda Toledo <fertoledo93@gmail.com>

Author: whitestranger7

src/components/ui/autocomplete/autocomplete.component.tsx

@@ -205,13 +205,14 @@ export class Autocomplete extends React.Component<AutocompleteProps, State> {
   };
 
   public render(): PopoverElement {
-    const { placement, children, ...inputProps } = this.props;
+    const { placement, children, testID, ...inputProps } = this.props;
 
     return (
       <Popover
         ref={this.popoverRef}
         style={styles.popover}
         placement={placement}
+        testID={testID}
         visible={this.state.listVisible}
         fullWidth={true}
         anchor={() => this.renderInputElement(inputProps)}

src/components/ui/datepicker/baseDatepicker.component.tsx

@@ -229,6 +229,7 @@ export abstract class BaseDatepickerComponent<P, D = Date> extends React.Compone
     const {
       eva,
       style,
+      testID,
       backdropStyle,
       controlStyle,
       placement,
@@ -242,7 +243,9 @@ export abstract class BaseDatepickerComponent<P, D = Date> extends React.Compone
     const evaStyle = this.getComponentStyle(eva.style);
 
     return (
-      <View style={style}>
+      <View
+        style={style}
+        testID={testID}>
         <FalsyText
           style={[evaStyle.label, styles.label]}
           component={label}

src/components/ui/input/input.component.tsx

@@ -254,13 +254,15 @@ export class Input extends React.Component<InputProps> implements WebEventRespon
       caption,
       accessoryLeft,
       accessoryRight,
+      testID,
       ...textInputProps
     } = this.props;
 
     const evaStyle = this.getComponentStyle(eva.style);
 
     return (
       <TouchableWithoutFeedback
+        testID={testID}
         style={evaStyle.container}
         onPress={this.focus}>
         <FalsyText

src/components/ui/select/select.component.tsx

@@ -455,6 +455,7 @@ export class Select extends React.Component<SelectProps, State> {
 
     return (
       <TouchableWeb
+        testID={props.testID}
         style={[styles.input, evaStyle.input]}
         onPress={this.onPress}
         onMouseEnter={this.onMouseEnter}

src/components/ui/spinner/spinner.component.tsx

@@ -159,7 +159,9 @@ export class Spinner extends React.PureComponent<SpinnerProps> {
     const evaStyle = this.getComponentStyle(this.animation.toProps());
 
     return (
-      <View style={containerSize}>
+      <View
+        testID={this.props.testID}
+        style={containerSize}>
         {this.renderArcElement(evaStyle.start, containerSize)}
         {this.renderArcElement(evaStyle.end, containerSize)}
       </View>

src/components/ui/tab/tabBar.component.tsx

@@ -180,12 +180,12 @@ export class TabBar extends React.Component<TabBarProps> {
   };
 
   public render(): React.ReactElement<ViewProps> {
-    const { eva, style, indicatorStyle, selectedIndex, children, ...viewProps } = this.props;
+    const { eva, style, testID, indicatorStyle, selectedIndex, children, ...viewProps } = this.props;
     const evaStyle = this.getComponentStyle(eva.style);
     const tabElements: TabElement[] = this.renderTabElements(children);
 
     return (
-      <View>
+      <View testID={testID}>
         <View
           {...viewProps}
           style={[evaStyle.container, styles.container, style]}>

src/components/ui/toggle/toggle.component.tsx

@@ -370,11 +370,12 @@ export class Toggle extends React.Component<ToggleProps> implements PanResponder
   };
 
   public render(): React.ReactElement<ViewProps> {
-    const { eva, style, checked, children, ...touchableProps } = this.props;
+    const { eva, style, checked, children, testID, ...touchableProps } = this.props;
     const evaStyle = this.getComponentStyle(eva.style);
 
     return (
       <View
+        testID={testID}
         {...this.panResponder.panHandlers}
         style={[styles.container, style]}>
         <TouchableWeb