feat: basic paste() implementation

Author: mdjastrzebski

src/user-event/index.ts

@@ -16,6 +16,7 @@ export const userEvent = {
   type: (element: ReactTestInstance, text: string, options?: TypeOptions) =>
     setup().type(element, text, options),
   clear: (element: ReactTestInstance) => setup().clear(element),
+  paste: (element: ReactTestInstance, text: string) => setup().paste(element, text),
   scrollTo: (element: ReactTestInstance, options: ScrollToOptions) =>
     setup().scrollTo(element, options),
 };

src/user-event/paste.ts

@@ -0,0 +1,57 @@
+import { ReactTestInstance } from 'react-test-renderer';
+import { ErrorWithStack } from '../helpers/errors';
+import { isHostTextInput } from '../helpers/host-component-names';
+import { isPointerEventEnabled } from '../helpers/pointer-events';
+import { isTextInputEditable } from '../helpers/text-input';
+import { EventBuilder } from './event-builder';
+import { UserEventInstance } from './setup';
+import { dispatchEvent, getTextContentSize, wait } from './utils';
+
+export async function paste(
+  this: UserEventInstance,
+  element: ReactTestInstance,
+  text: string,
+): Promise<void> {
+  if (!isHostTextInput(element)) {
+    throw new ErrorWithStack(
+      `paste() only supports host "TextInput" elements. Passed element has type: "${element.type}".`,
+      paste,
+    );
+  }
+
+  if (!isTextInputEditable(element) || !isPointerEventEnabled(element)) {
+    return;
+  }
+
+  // 1. Enter element
+  dispatchEvent(element, 'focus', EventBuilder.Common.focus());
+
+  // 2. Select all
+  const textToClear = element.props.value ?? element.props.defaultValue ?? '';
+  const rangeToClear = { start: 0, end: textToClear.length };
+  dispatchEvent(element, 'selectionChange', EventBuilder.TextInput.selectionChange(rangeToClear));
+
+  // 3. Paste the text
+  dispatchEvent(element, 'change', EventBuilder.TextInput.change(text));
+  dispatchEvent(element, 'changeText', text);
+
+  const rangeAfter = { start: text.length, end: text.length };
+  dispatchEvent(element, 'selectionChange', EventBuilder.TextInput.selectionChange(rangeAfter));
+
+  // According to the docs only multiline TextInput emits contentSizeChange event
+  // @see: https://reactnative.dev/docs/textinput#oncontentsizechange
+  const isMultiline = element.props.multiline === true;
+  if (isMultiline) {
+    const contentSize = getTextContentSize(text);
+    dispatchEvent(
+      element,
+      'contentSizeChange',
+      EventBuilder.TextInput.contentSizeChange(contentSize),
+    );
+  }
+
+  // 4. Exit element
+  await wait(this.config);
+  dispatchEvent(element, 'endEditing', EventBuilder.TextInput.endEditing(text));
+  dispatchEvent(element, 'blur', EventBuilder.Common.blur());
+}

src/user-event/setup/setup.ts

@@ -2,6 +2,7 @@ import { ReactTestInstance } from 'react-test-renderer';
 import { jestFakeTimersAreEnabled } from '../../helpers/timers';
 import { wrapAsync } from '../../helpers/wrap-async';
 import { clear } from '../clear';
+import { paste } from '../paste';
 import { PressOptions, press, longPress } from '../press';
 import { ScrollToOptions, scrollTo } from '../scroll';
 import { TypeOptions, type } from '../type';
@@ -139,6 +140,7 @@ function createInstance(config: UserEventConfig): UserEventInstance {
     longPress: wrapAndBindImpl(instance, longPress),
     type: wrapAndBindImpl(instance, type),
     clear: wrapAndBindImpl(instance, clear),
+    paste: wrapAndBindImpl(instance, paste),
     scrollTo: wrapAndBindImpl(instance, scrollTo),
   };