Do not ignore defaultValue when validating onBlur

src/incubator/TextField/__tests__/index.driver.spec.tsx

@@ -3,35 +3,28 @@ import {waitFor} from '@testing-library/react-native';
 import View from '../../../components/view';
 import {TextFieldDriver} from '../TextField.driver';
 import TextField from '../index';
-import {Validator} from '../types';
+import {TextFieldProps} from '../types';
 
 const TEXT_FIELD_TEST_ID = 'text_field_test_id';
-interface TextFieldProps {
-  value?: string;
-  placeholder?: string;
-  label?: string;
-  validationMessage?: string;
-  validate?: Validator;
-  validateOnStart?: boolean;
-  validateOnChange?: boolean;
-  enableErrors?: boolean;
-  editable?: boolean;
-  readonly?: boolean;
-  floatingPlaceholder?: boolean;
-  showCharCounter?: boolean;
-  maxLength?: number;
-}
 
 function TestCase(textFieldProps?: TextFieldProps) {
   const [value, setValue] = useState(textFieldProps?.value);
-  return (<View>
-    <TextField {...textFieldProps} testID={TEXT_FIELD_TEST_ID} value={value} onChangeText={setValue}/>
-  </View>);
+  return (
+    <View>
+      <TextField {...textFieldProps} testID={TEXT_FIELD_TEST_ID} value={value} onChangeText={setValue}/>
+    </View>
+  );
 }
 
+const validate = jest.fn((value: string) => {
+  return !!value;
+});
 
 describe('TextField', () => {
-  afterEach(() => TextFieldDriver.clear());
+  afterEach(() => {
+    TextFieldDriver.clear();
+    jest.clearAllMocks();
+  });
 
   it('should render textField', async () => {
     const component = <TestCase/>;
@@ -248,4 +241,38 @@ describe('TextField', () => {
       await waitFor(async () => expect(await textFieldDriver.getCharCounterContent()).toEqual('4/10'));
     });
   });
+
+  describe('validateOnBlur', () => {
+    it('validate is called with undefined when defaultValue is not given', async () => {
+      const component = (
+        <TestCase
+          validateOnBlur
+          validationMessage={'Not valid'}
+          validate={[validate]}
+        />
+      );
+      const textFieldDriver = new TextFieldDriver({component, testID: TEXT_FIELD_TEST_ID});
+      textFieldDriver.focus();
+      textFieldDriver.blur();
+      await waitFor(() => expect(validate).toHaveBeenCalledTimes(1));
+      await waitFor(() => expect(validate).toHaveBeenCalledWith(undefined));
+    });
+
+    it('validate is called with defaultValue when defaultValue is given', async () => {
+      const defaultValue = '1';
+      const component = (
+        <TestCase
+          validateOnBlur
+          validationMessage={'Not valid'}
+          validate={[validate]}
+          defaultValue={defaultValue}
+        />
+      );
+      const textFieldDriver = new TextFieldDriver({component, testID: TEXT_FIELD_TEST_ID});
+      textFieldDriver.focus();
+      textFieldDriver.blur();
+      await waitFor(() => expect(validate).toHaveBeenCalledTimes(1));
+      await waitFor(() => expect(validate).toHaveBeenCalledWith(defaultValue));
+    });
+  });
 });

src/incubator/TextField/useFieldState.ts

@@ -14,7 +14,8 @@ export default function useFieldState({
   onChangeValidity,
   ...props
 }: FieldStateProps) {
-  const [value, setValue] = useState(props.value ?? props.defaultValue);
+  const propsValue = props.value ?? props.defaultValue;
+  const [value, setValue] = useState(propsValue);
   const [isFocused, setIsFocused] = useState(false);
   const [isValid, setIsValid] = useState<boolean | undefined>(undefined);
   const [failingValidatorIndex, setFailingValidatorIndex] = useState<number | undefined>(undefined);
@@ -39,16 +40,16 @@ export default function useFieldState({
   }, []);
 
   useEffect(() => {
-    if (props.value !== value) {
-      setValue(props.value);
+    if (propsValue !== value) {
+      setValue(propsValue);
 
-      if (validateOnChange && (_.isUndefined(props.defaultValue) || value !== props.defaultValue)) {
-        validateField(props.value);
+      if (validateOnChange) {
+        validateField(propsValue);
       }
     }
-    /* On purpose listen only to props.value change */
+    /* On purpose listen only to propsValue change */
     /* eslint-disable-next-line react-hooks/exhaustive-deps*/
-  }, [props.value, validateOnChange]);
+  }, [propsValue, validateOnChange]);
 
   useDidUpdate(() => {
     if (!_.isUndefined(isValid)) {

src/testkit/Component.driver.ts

@@ -45,6 +45,18 @@ export class ComponentDriver {
       .then((driver) => driver.press());
   };
 
+  focus = async () => {
+    return this.uniDriver
+      .selectorByTestId(this.testID)
+      .then((driver) => driver.focus());
+  };
+
+  blur = async () => {
+    return this.uniDriver
+      .selectorByTestId(this.testID)
+      .then((driver) => driver.blur());
+  };
+
   protected getByTestId = (testID: string) => {
     return this.uniDriver
       .selectorByTestId(testID)

src/testkit/UniDriver.ts

@@ -7,6 +7,8 @@ export interface UniDriver {
   instance(): Promise<any>;
   getInstanceProps(): Promise<any>;
   press(): void;
+  focus(): void;
+  blur(): void;
   typeText(text: string): Promise<void>;
   scrollX(deltaX: number): Promise<void>;
   scrollY(deltaY: number): Promise<void>;

src/testkit/drivers/TestingLibraryDriver.tsx

@@ -85,6 +85,24 @@ export class TestingLibraryDriver implements UniDriver {
     fireEvent.press(this.reactTestInstances[0]);
   };
 
+  focus = (): void => {
+    if (!this.reactTestInstances) {
+      throw new NoSelectorException();
+    }
+    this.validateExplicitInstance();
+    this.validateSingleInstance();
+    fireEvent(this.reactTestInstances[0], 'focus');
+  };
+
+  blur = (): void => {
+    if (!this.reactTestInstances) {
+      throw new NoSelectorException();
+    }
+    this.validateExplicitInstance();
+    this.validateSingleInstance();
+    fireEvent(this.reactTestInstances[0], 'blur');
+  };
+
   typeText = async (text: string): Promise<void> => {
     console.log('this.reactTestInstances: ', this.reactTestInstances);
     if (!this.reactTestInstances) {