Merge branch 'master' of github.com:wix/react-native-ui-lib

Inbal-Tish · Inbal-Tish · commit b87a2e38d279 · 2023-03-13T10:40:39.000+02:00
diff --git a/demo/src/screens/componentScreens/TextFieldScreen.tsx b/demo/src/screens/componentScreens/TextFieldScreen.tsx
@@ -1,15 +1,15 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {TextInput, StyleSheet, ScrollView, ActivityIndicator} from 'react-native';
-import {Assets, Colors, Spacings, Typography, View, Text, Button, Keyboard, TextField, TextFieldMethods} from 'react-native-ui-lib'; //eslint-disable-line
+import {StyleSheet, ScrollView, ActivityIndicator} from 'react-native';
+import {Assets, Colors, Spacings, Typography, View, Text, Button, Keyboard, TextField, TextFieldRef} from 'react-native-ui-lib'; //eslint-disable-line
 const {KeyboardAwareInsetsView} = Keyboard;
 
 const priceFormatter = Intl.NumberFormat('en-US');
 
 export default class TextFieldScreen extends Component {
-  input = React.createRef<TextInput>();
-  input2 = React.createRef<TextInput>();
-  inputWithValidation = React.createRef<TextFieldMethods>();
+  input = React.createRef<TextFieldRef>();
+  input2 = React.createRef<TextFieldRef>();
+  inputWithValidation = React.createRef<TextFieldRef>();
   state = {
     errorPosition: TextField.validationMessagePositions.TOP,
     shouldDisable: false,
@@ -162,7 +162,6 @@ export default class TextFieldScreen extends Component {
 
           <View row top marginT-s4>
             <TextField
-              // @ts-expect-error
               ref={this.inputWithValidation}
               placeholder="Enter full name"
               validate="required"
diff --git a/src/incubator/TextField/__tests__/index.driver.spec.tsx b/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));
+    });
+  });
 });
diff --git a/src/incubator/TextField/index.tsx b/src/incubator/TextField/index.tsx
@@ -17,7 +17,8 @@ import {
   InternalTextFieldProps,
   ValidationMessagePosition,
   FieldContextType,
-  TextFieldMethods
+  TextFieldMethods,
+  TextFieldRef
 } from './types';
 import {shouldHidePlaceholder} from './Presenter';
 import Input from './Input';
@@ -218,6 +219,7 @@ export {
   FieldContextType,
   StaticMembers as TextFieldStaticMembers,
   TextFieldMethods,
+  TextFieldRef,
   ValidationMessagePosition as TextFieldValidationMessagePosition
 };
 export default asBaseComponent<TextFieldProps, StaticMembers>(forwardRef(TextField as any), {
diff --git a/src/incubator/TextField/types.ts b/src/incubator/TextField/types.ts
@@ -259,3 +259,5 @@ export interface TextFieldMethods {
   validate: () => boolean;
   isValid: () => boolean;
 }
+
+export type TextFieldRef = TextInput & TextFieldMethods;
diff --git a/src/incubator/TextField/useFieldState.ts b/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)) {
diff --git a/src/incubator/index.ts b/src/incubator/index.ts
@@ -1,7 +1,7 @@
 // export {default as Calendar} from './Calendar';
 export {default as ExpandableOverlay} from './expandableOverlay';
 // @ts-ignore
-export {default as TextField, TextFieldProps, FieldContextType, TextFieldMethods, TextFieldValidationMessagePosition} from './TextField';
+export {default as TextField, TextFieldProps, FieldContextType, TextFieldMethods, TextFieldRef, TextFieldValidationMessagePosition} from './TextField';
 export {default as Toast, ToastProps, ToastPresets} from './toast';
 export {default as TouchableOpacity, TouchableOpacityProps} from './TouchableOpacity';
 export {default as PanView, PanViewProps, PanViewDirections, PanViewDismissThreshold} from './panView';
diff --git a/src/index.ts b/src/index.ts
@@ -29,6 +29,7 @@ import * as Incubator from './incubator';
 export {
   TextFieldProps,
   TextFieldMethods,
+  TextFieldRef,
   TextFieldValidationMessagePosition,
   FieldContextType,
   ToastProps,
diff --git a/src/testkit/Component.driver.ts b/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)
diff --git a/src/testkit/UniDriver.ts b/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>;
diff --git a/src/testkit/drivers/TestingLibraryDriver.tsx b/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) {

Original file line number	Diff line number	Diff line change
`@@ -259,3 +259,5 @@ export interface TextFieldMethods {`
`259`	`259`	`validate: () => boolean;`
`260`	`260`	`isValid: () => boolean;`
`261`	`261`	`}`
	`262`	`+`
	`263`	`+export type TextFieldRef = TextInput & TextFieldMethods;`