feat: remove 'textInput' event from UserEvent type() (#1645)

Author: mdjastrzebski

src/user-event/__tests__/__snapshots__/clear.test.tsx.snap

@@ -331,30 +331,6 @@ How are you?" multiline: true, 1`] = `
       "timeStamp": 0,
     },
   },
-  {
-    "name": "textInput",
-    "payload": {
-      "currentTarget": {},
-      "isDefaultPrevented": [Function],
-      "isPersistent": [Function],
-      "isPropagationStopped": [Function],
-      "nativeEvent": {
-        "previousText": "Hello World!
-How are you?",
-        "range": {
-          "end": 0,
-          "start": 0,
-        },
-        "target": 0,
-        "text": "",
-      },
-      "persist": [Function],
-      "preventDefault": [Function],
-      "stopPropagation": [Function],
-      "target": {},
-      "timeStamp": 0,
-    },
-  },
   {
     "name": "change",
     "payload": {

src/user-event/__tests__/clear.test.tsx

@@ -20,8 +20,6 @@ function renderTextInputWithToolkit(props: TextInputProps = {}) {
       onChange={logEvent('change')}
       onChangeText={logEvent('changeText')}
       onKeyPress={logEvent('keyPress')}
-      /** @ts-expect-error property typedef removed in RN 0.75 */
-      onTextInput={logEvent('textInput')}
       onSelectionChange={logEvent('selectionChange')}
       onSubmitEditing={logEvent('submitEditing')}
       onEndEditing={logEvent('endEditing')}
@@ -142,7 +140,6 @@ describe('clear()', () => {
       'focus',
       'selectionChange',
       'keyPress',
-      'textInput',
       'change',
       'changeText',
       'selectionChange',

src/user-event/clear.ts

@@ -24,25 +24,23 @@ export async function clear(this: UserEventInstance, element: ReactTestInstance)
   dispatchEvent(element, 'focus', EventBuilder.Common.focus());
 
   // 2. Select all
-  const previousText = element.props.value ?? element.props.defaultValue ?? '';
+  const textToClear = element.props.value ?? element.props.defaultValue ?? '';
   const selectionRange = {
     start: 0,
-    end: previousText.length,
+    end: textToClear.length,
   };
   dispatchEvent(element, 'selectionChange', EventBuilder.TextInput.selectionChange(selectionRange));
 
   // 3. Press backspace with selected text
-  const finalText = '';
+  const emptyText = '';
   await emitTypingEvents(element, {
     config: this.config,
     key: 'Backspace',
-    text: finalText,
-    previousText,
+    text: emptyText,
   });
 
   // 4. Exit element
   await wait(this.config);
-  dispatchEvent(element, 'endEditing', EventBuilder.TextInput.endEditing(finalText));
-
+  dispatchEvent(element, 'endEditing', EventBuilder.TextInput.endEditing(emptyText));
   dispatchEvent(element, 'blur', EventBuilder.Common.blur());
 }

src/user-event/event-builder/text-input.ts

@@ -63,23 +63,6 @@ export const TextInputEventBuilder = {
     };
   },
 
-  /**
-   * Experimental values:
-   * - iOS: `{"eventCount": 2, "previousText": "Te", "range": {"end": 2, "start": 2}, "target": 75, "text": "s"}`
-   * - Android: `{"previousText": "Te", "range": {"end": 2, "start": 0}, "target": 53, "text": "Tes"}`
-   */
-  textInput: (text: string, previousText: string) => {
-    return {
-      ...baseSyntheticEvent(),
-      nativeEvent: {
-        text,
-        previousText,
-        range: { start: text.length, end: text.length },
-        target: 0,
-      },
-    };
-  },
-
   /**
    * Experimental values:
    * - iOS: `{"contentSize": {"height": 21.666666666666668, "width": 11.666666666666666}, "target": 75}`

src/user-event/type/__tests__/__snapshots__/type.test.tsx.snap

@@ -843,30 +843,6 @@ exports[`type() supports multiline: input: "{Enter}\\n", multiline: true 1`] = `
       "timeStamp": 0,
     },
   },
-  {
-    "name": "textInput",
-    "payload": {
-      "currentTarget": {},
-      "isDefaultPrevented": [Function],
-      "isPersistent": [Function],
-      "isPropagationStopped": [Function],
-      "nativeEvent": {
-        "previousText": "",
-        "range": {
-          "end": 1,
-          "start": 1,
-        },
-        "target": 0,
-        "text": "
-",
-      },
-      "persist": [Function],
-      "preventDefault": [Function],
-      "stopPropagation": [Function],
-      "target": {},
-      "timeStamp": 0,
-    },
-  },
   {
     "name": "change",
     "payload": {
@@ -950,32 +926,6 @@ exports[`type() supports multiline: input: "{Enter}\\n", multiline: true 1`] = `
       "timeStamp": 0,
     },
   },
-  {
-    "name": "textInput",
-    "payload": {
-      "currentTarget": {},
-      "isDefaultPrevented": [Function],
-      "isPersistent": [Function],
-      "isPropagationStopped": [Function],
-      "nativeEvent": {
-        "previousText": "
-",
-        "range": {
-          "end": 2,
-          "start": 2,
-        },
-        "target": 0,
-        "text": "
-
-",
-      },
-      "persist": [Function],
-      "preventDefault": [Function],
-      "stopPropagation": [Function],
-      "target": {},
-      "timeStamp": 0,
-    },
-  },
   {
     "name": "change",
     "payload": {

src/user-event/type/__tests__/type-managed.test.tsx

@@ -38,8 +38,6 @@ function ManagedTextInput({
       onPressOut={logEvent('pressOut')}
       onChange={logEvent('change')}
       onKeyPress={logEvent('keyPress')}
-      /** @ts-expect-error property typedef removed in RN 0.75 */
-      onTextInput={logEvent('textInput')}
       onSelectionChange={logEvent('selectionChange')}
       onSubmitEditing={logEvent('submitEditing')}
       onEndEditing={logEvent('endEditing')}

src/user-event/type/__tests__/type.test.tsx

@@ -21,8 +21,6 @@ function renderTextInputWithToolkit(props: TextInputProps = {}) {
       onChange={logEvent('change')}
       onChangeText={logEvent('changeText')}
       onKeyPress={logEvent('keyPress')}
-      /** @ts-expect-error property typedef removed in RN 0.75 */
-      onTextInput={logEvent('textInput')}
       onSelectionChange={logEvent('selectionChange')}
       onSubmitEditing={logEvent('submitEditing')}
       onEndEditing={logEvent('endEditing')}
@@ -173,13 +171,11 @@ describe('type()', () => {
       'focus',
       'pressOut',
       'keyPress',
-      'textInput',
       'change',
       'changeText',
       'selectionChange',
       'contentSizeChange',
       'keyPress',
-      'textInput',
       'change',
       'changeText',
       'selectionChange',

src/user-event/type/type.ts

@@ -55,7 +55,6 @@ export async function type(
       config: this.config,
       key,
       text: currentText,
-      previousText,
       isAccepted,
     });
   }
@@ -76,13 +75,12 @@ type EmitTypingEventsContext = {
   config: UserEventConfig;
   key: string;
   text: string;
-  previousText: string;
   isAccepted?: boolean;
 };
 
 export async function emitTypingEvents(
   element: ReactTestInstance,
-  { config, key, text, previousText, isAccepted }: EmitTypingEventsContext,
+  { config, key, text, isAccepted }: EmitTypingEventsContext,
 ) {
   const isMultiline = element.props.multiline === true;
 
@@ -96,12 +94,6 @@ export async function emitTypingEvents(
     return;
   }
 
-  // According to the docs only multiline TextInput emits textInput event
-  // @see: https://github.com/facebook/react-native/blob/42a2898617da1d7a98ef574a5b9e500681c8f738/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts#L754
-  if (isMultiline) {
-    dispatchEvent(element, 'textInput', EventBuilder.TextInput.textInput(text, previousText));
-  }
-
   dispatchEvent(element, 'change', EventBuilder.TextInput.change(text));
   dispatchEvent(element, 'changeText', text);