pass testID to TextField validation message

Author: ethanshar

generatedTypes/src/incubator/TextField/ValidationMessage.d.ts

@@ -16,9 +16,10 @@ export interface ValidationMessageProps {
     validationMessageStyle?: TextStyle;
     retainSpace?: boolean;
     validate?: FieldStateProps['validate'];
+    testID?: string;
 }
 declare const ValidationMessage: {
-    ({ validationMessage, enableErrors, validationMessageStyle, retainSpace, validate }: ValidationMessageProps): JSX.Element | null;
+    ({ validationMessage, enableErrors, validationMessageStyle, retainSpace, validate, testID }: ValidationMessageProps): JSX.Element | null;
     displayName: string;
 };
 export default ValidationMessage;

src/incubator/TextField/ValidationMessage.tsx

@@ -20,14 +20,16 @@ export interface ValidationMessageProps {
   validationMessageStyle?: TextStyle;
   retainSpace?: boolean;
   validate?: FieldStateProps['validate'];
+  testID?: string;
 }
 
 const ValidationMessage = ({
   validationMessage,
   enableErrors,
   validationMessageStyle,
   retainSpace,
-  validate
+  validate,
+  testID
 }: ValidationMessageProps) => {
   const context = useContext(FieldContext);
 
@@ -39,7 +41,7 @@ const ValidationMessage = ({
   const showValidationMessage = !context.isValid || (!validate && !!validationMessage);
 
   return (
-    <Text red30 style={[styles.validationMessage, validationMessageStyle]}>
+    <Text testID={testID} red30 style={[styles.validationMessage, validationMessageStyle]}>
       {showValidationMessage ? relevantValidationMessage : ''}
     </Text>
   );

src/incubator/TextField/index.tsx

@@ -181,6 +181,7 @@ const TextField = (props: InternalTextFieldProps) => {
             validate={others.validate}
             validationMessage={others.validationMessage}
             validationMessageStyle={validationMessageStyle}
+            testID={`${props.testID}.validationMessage`}
           />
         )}
         <View style={[paddings, fieldStyle]}>
@@ -220,6 +221,7 @@ const TextField = (props: InternalTextFieldProps) => {
               validationMessage={others.validationMessage}
               validationMessageStyle={validationMessageStyle}
               retainSpace
+              testID={`${props.testID}.validationMessage`}
             />
           )}
           {showCharCounter && <CharCounter maxLength={others.maxLength} charCounterStyle={charCounterStyle}/>}