TextField - test new features and presets (#3125)

* TextField - add clear button

* demo

* adding 'topTrailingAccessory' prop and fix assets

* replacing icon

* fix validationIcon with no validation massage

* fix topmargin

* revert

* fix master merge

* Delete demo/src/assets/Assets.ts

remove Demo/Assets

* add preset

* add icons

* adding size

* add testIDs

* remove console

* pr comments fixes

* fix testID

* TextField - test new features (helperText, validationIcon, clearButton)

* add ClearButton container testID

* Test with presets

Author: Inbal-Tish

src/components/textField/ClearButton.tsx

@@ -50,7 +50,7 @@ const ClearButton = ({testID, onClear, onChangeText}: Pick<TextFieldProps, 'onCl
 
   return (
     //@ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
-    <View reanimated style={style}>
+    <View reanimated style={style} testID={`${testID}.container`}>
       <Button
         link
         iconSource={Assets.icons.xFlat}

src/components/textField/TextField.driver.new.ts

@@ -1,8 +1,12 @@
 import _ from 'lodash';
+import {StyleSheet} from 'react-native';
 import {fireEvent} from '@testing-library/react-native';
 import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
-import {TextDriver} from '../text/Text.driver.new';
 import {usePressableDriver} from '../../testkit/new/usePressable.driver';
+import {TextDriver} from '../text/Text.driver.new';
+import {ImageDriver} from '../image/Image.driver.new';
+import {ButtonDriver} from '../button/Button.driver.new';
+import {ViewDriver} from '../view/View.driver.new';
 
 export const TextFieldDriver = (props: ComponentProps) => {
   const driver = usePressableDriver(useComponentDriver(props));
@@ -23,6 +27,22 @@ export const TextFieldDriver = (props: ComponentProps) => {
     renderTree: props.renderTree,
     testID: `${props.testID}.charCounter`
   });
+  const helperTextDriver = TextDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.helperText`
+  });
+  const validationIconDriver = ImageDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.validationMessage.icon`
+  });
+  const clearButtonDriver = ButtonDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.clearButton`
+  });
+  const clearButtonContainerDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.clearButton.container`
+  });
 
   const getValue = (): string | undefined => {
     return driver.getElement().props.value ?? driver.getElement().props.defaultValue;
@@ -79,6 +99,24 @@ export const TextFieldDriver = (props: ComponentProps) => {
     return charCounterDriver;
   };
 
+  const getHelperText = () => {
+    return helperTextDriver;
+  };
+
+  const getValidationIcon = () => {
+    return validationIconDriver;
+  };
+
+  const getClearButton = () => {
+    const visible = (): boolean => {
+      const transform = StyleSheet.flatten(clearButtonContainerDriver.getStyle()).transform;
+      const translate = StyleSheet.flatten(transform);
+      const translateX = translate.translateX;
+      return translateX === 0;
+    };
+    return {...clearButtonDriver, visible};
+  };
+
   return {
     ...driver,
     getValue,
@@ -89,6 +127,9 @@ export const TextFieldDriver = (props: ComponentProps) => {
     getPlaceholder,
     getLabel,
     getValidationMessage,
-    getCharCounter
+    getCharCounter,
+    getHelperText,
+    getValidationIcon,
+    getClearButton
   };
 };