TextField - create new driver and refactor tests to it (#2890)

* TextField - create new driver and refactor tests to it

* Remove another async

* Change to sub-components

* getText to getValue

* Simplify names after renaming to getValue

* Small changes

Author: M-i-k-e-l

src/components/text/Text.driver.new.ts

@@ -5,7 +5,7 @@ import {usePressableDriver} from '../../testkit/new/usePressable.driver';
 export const TextDriver = (props: ComponentProps) => {
   const driver = usePressableDriver<TextProps>(useComponentDriver(props));
 
-  const getText = () => {
+  const getText = (): React.ReactNode | string | undefined => {
     return driver.getProps().children;
   };
 

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

@@ -0,0 +1,94 @@
+import _ from 'lodash';
+import {fireEvent} from '@testing-library/react-native';
+import {TextFieldProps} from './types';
+import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
+import {TextDriver} from '../text/Text.driver.new';
+
+export const TextFieldDriver = (props: ComponentProps) => {
+  const driver = useComponentDriver<TextFieldProps>(props);
+
+  const floatingPlaceholderDriver = TextDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.floatingPlaceholder`
+  });
+  const labelDriver = TextDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.label`
+  });
+  const validationMsgDriver = TextDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.validationMessage`
+  });
+  const charCounterDriver = TextDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.charCounter`
+  });
+
+  const getValue = (): string | undefined => {
+    return driver.getProps().value ?? driver.getProps().defaultValue;
+  };
+
+  const changeText = (text: string): void => {
+    fireEvent.changeText(driver.getElement(), text);
+  };
+
+  const focus = (): void => {
+    fireEvent(driver.getElement(), 'focus');
+  };
+
+  const blur = (): void => {
+    fireEvent(driver.getElement(), 'blur');
+  };
+
+  const isEnabled = (): boolean => {
+    return !driver.getProps().accessibilityState?.disabled;
+  };
+
+  const getPlaceholder = () => {
+    const exists = (): boolean => {
+      const hasPlaceholder = !!driver.getProps().placeholder;
+      const hasText = !!getValue();
+      return hasPlaceholder && (!hasText || (hasText && floatingPlaceholderDriver.exists()));
+    };
+    const getText = (): string | undefined => {
+      if (exists()) {
+        return driver.getProps().placeholder;
+      }
+    };
+
+    return {...floatingPlaceholderDriver, exists, getText};
+  };
+
+  const getLabel = () => {
+    const exists = (): boolean => {
+      return labelDriver.exists() && !floatingPlaceholderDriver.exists();
+    };
+
+    return {...labelDriver, exists};
+  };
+
+  const getValidationMessage = () => {
+    const exists = (): boolean => {
+      return validationMsgDriver.exists() && !_.isEmpty(validationMsgDriver.getText());
+    };
+
+    return {...validationMsgDriver, exists};
+  };
+
+  const getCharCounter = () => {
+    return charCounterDriver;
+  };
+
+  return {
+    ...driver,
+    getValue,
+    changeText,
+    focus,
+    blur,
+    isEnabled,
+    getPlaceholder,
+    getLabel,
+    getValidationMessage,
+    getCharCounter
+  };
+};