From 0d318f0869aa16eb3ed3a3b311100f450b85d86f Mon Sep 17 00:00:00 2001
From: Cyril Moreau <cyril@MacBookPro.lan>
Date: Sat, 16 May 2026 10:49:30 +0100
Subject: [PATCH] feat: add testID prop for E2E testing

Adds an optional `testID` prop to GooglePlacesTextInput that is propagated
as a suffix to all internal components (container, input wrapper, text input,
clear button, loading indicator, suggestions container, suggestions list,
and individual suggestion items), enabling reliable selection in E2E tests
such as Maestro and Detox.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/ClearButtonAndSpinner.tsx |  4 ++++
 src/GooglePlacesTextInput.tsx | 31 ++++++++++++++++++++++++++++---
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/ClearButtonAndSpinner.tsx b/src/ClearButtonAndSpinner.tsx
index 81e3327..cfe8509 100644
--- a/src/ClearButtonAndSpinner.tsx
+++ b/src/ClearButtonAndSpinner.tsx
@@ -21,6 +21,7 @@ interface ClearButtonAndSpinnerProps
   isInputEmpty: boolean;
   isLoading: boolean;
   onPress: () => void;
+  testIDSuffix?: string;
 }
 
 const ClearButtonAndSpinner: React.FC<ClearButtonAndSpinnerProps> = ({
@@ -32,6 +33,7 @@ const ClearButtonAndSpinner: React.FC<ClearButtonAndSpinnerProps> = ({
   isInputEmpty,
   onPress,
   clearElement,
+  testIDSuffix = '',
 }) => {
   // Loading indicator
   if (isLoading) {
@@ -39,6 +41,7 @@ const ClearButtonAndSpinner: React.FC<ClearButtonAndSpinnerProps> = ({
 
     return (
       <ActivityIndicator
+        testID={`loading-indicator${testIDSuffix}`}
         style={[styles.loadingIndicator]}
         size={'small'}
         color={style.loadingIndicator?.color || '#000000'}
@@ -57,6 +60,7 @@ const ClearButtonAndSpinner: React.FC<ClearButtonAndSpinnerProps> = ({
   // Clear button
   return (
     <TouchableOpacity
+      testID={`clear-button${testIDSuffix}`}
       style={[styles.clearButton]}
       onPress={onPress}
       accessibilityRole="button"
diff --git a/src/GooglePlacesTextInput.tsx b/src/GooglePlacesTextInput.tsx
index d2900db..c50672b 100644
--- a/src/GooglePlacesTextInput.tsx
+++ b/src/GooglePlacesTextInput.tsx
@@ -154,6 +154,11 @@ interface GooglePlacesTextInputProps
   enableDebug?: boolean;
   accessibilityLabels?: GooglePlacesAccessibilityLabels;
   suggestionTextProps?: SuggestionTextProps;
+  /**
+   * Test ID prefix for all internal components (for E2E testing)
+   * Components will be prefixed: textinput-{testID}, suggestion-touchableopacity-{index}-{testID}, etc.
+   */
+  testID?: string;
 }
 
 interface GooglePlacesTextInputRef {
@@ -202,9 +207,13 @@ const GooglePlacesTextInput = forwardRef<
     onBlur,
     accessibilityLabels = {},
     suggestionTextProps = {},
+    testID,
     ...restTextInputProps
   } = props;
 
+  // Test ID suffix for all components
+  const testIDSuffix = testID ? `-${testID}` : '';
+
   const [predictions, setPredictions] = useState<PredictionItem[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const [inputText, setInputText] = useState<string>(value || '');
@@ -527,6 +536,7 @@ const GooglePlacesTextInput = forwardRef<
 
     return (
       <TouchableOpacity
+        testID={`suggestion-touchableopacity-${index}${testIDSuffix}`}
         accessibilityRole="button"
         accessibilityLabel={accessibilityLabel}
         accessibilityHint="Double tap to select this place"
@@ -552,6 +562,7 @@ const GooglePlacesTextInput = forwardRef<
           } as any))}
       >
         <Text
+          testID={`suggestion-text-${index}${testIDSuffix}`}
           style={[styles.mainText, style.suggestionText?.main, getTextAlign()]}
           numberOfLines={suggestionTextProps.mainTextNumberOfLines}
           ellipsizeMode={suggestionTextProps.ellipsizeMode || 'tail'}
@@ -560,6 +571,7 @@ const GooglePlacesTextInput = forwardRef<
         </Text>
         {secondaryText && (
           <Text
+            testID={`suggestion-secondarytext-${index}${testIDSuffix}`}
             style={[
               styles.secondaryText,
               style.suggestionText?.secondary,
@@ -613,8 +625,14 @@ const GooglePlacesTextInput = forwardRef<
   }, []);
 
   return (
-    <View style={[styles.container, style.container]}>
-      <View style={[styles.inputContainer, style.inputContainer]}>
+    <View
+      testID={`container${testIDSuffix}`}
+      style={[styles.container, style.container]}
+    >
+      <View
+        testID={`input-wrapper${testIDSuffix}`}
+        style={[styles.inputContainer, style.inputContainer]}
+      >
         {/* Render Button and Loader here if is forced RTL */}
         {isRTL !== isDeviceRTL && (
           <ClearButtonAndSpinner
@@ -622,11 +640,13 @@ const GooglePlacesTextInput = forwardRef<
             isLoading={loading || detailsLoading}
             onPress={handleClearPress}
             isInputEmpty={inputText.length === 0}
+            testIDSuffix={testIDSuffix}
           />
         )}
 
         <TextInput
           {...restTextInputProps}
+          testID={`textinput${testIDSuffix}`}
           ref={inputRef}
           style={[styles.input, style.input, getTextAlign()]}
           placeholder={placeHolderText}
@@ -646,14 +666,19 @@ const GooglePlacesTextInput = forwardRef<
             isLoading={loading || detailsLoading}
             onPress={handleClearPress}
             isInputEmpty={inputText.length === 0}
+            testIDSuffix={testIDSuffix}
           />
         )}
       </View>
 
       {/* Suggestions */}
       {showSuggestions && predictions.length > 0 && (
-        <View style={[styles.suggestionsContainer, style.suggestionsContainer]}>
+        <View
+          testID={`suggestions-container${testIDSuffix}`}
+          style={[styles.suggestionsContainer, style.suggestionsContainer]}
+        >
           <FlatList
+            testID={`suggestions-list${testIDSuffix}`}
             data={predictions}
             renderItem={renderSuggestion}
             keyExtractor={(item) => item.placePrediction.placeId}