feat: User Event type()

experiments-app/src/screens/TextInputEvents.tsx

@@ -7,7 +7,12 @@ const handlePressOut = buildEventLogger('pressOut');
 const handleFocus = buildEventLogger('focus');
 const handleBlur = buildEventLogger('blur');
 const handleChange = buildEventLogger('change');
+const handleEndEditing = buildEventLogger('endEditing');
 const handleSubmitEditing = buildEventLogger('submitEditing');
+const handleKeyPress = buildEventLogger('keyPress');
+const handleTextInput = buildEventLogger('textInput');
+const handleSelectionChange = buildEventLogger('selectionChange');
+const handleContentSizeChange = buildEventLogger('contentSizeChange');
 
 export function TextInputEvents() {
   const [value, setValue] = React.useState('');
@@ -29,7 +34,12 @@ export function TextInputEvents() {
         onFocus={handleFocus}
         onBlur={handleBlur}
         onChange={handleChange}
+        onEndEditing={handleEndEditing}
         onSubmitEditing={handleSubmitEditing}
+        onKeyPress={handleKeyPress}
+        onTextInput={handleTextInput}
+        onSelectionChange={handleSelectionChange}
+        onContentSizeChange={handleContentSizeChange}
       />
     </SafeAreaView>
   );

src/__tests__/act.test.tsx

@@ -50,3 +50,7 @@ test('should be able to await act', async () => {
   const result = await act(async () => {});
   expect(result).toBe(undefined);
 });
+
+test('should be able to await act when promise rejects', async () => {
+  await expect(act(async () => Promise.reject('error'))).rejects.toBe('error');
+});

src/fireEvent.ts

@@ -1,15 +1,11 @@
 import { ReactTestInstance } from 'react-test-renderer';
 import act from './act';
-import { isHostElement } from './helpers/component-tree';
-import { getHostComponentNames } from './helpers/host-component-names';
 import { isPointerEventEnabled } from './helpers/pointer-events';
+import { isHostElement } from './helpers/component-tree';
+import { isHostTextInput } from './helpers/host-component-names';
 
 type EventHandler = (...args: unknown[]) => unknown;
 
-const isHostTextInput = (element?: ReactTestInstance) => {
-  return element?.type === getHostComponentNames().textInput;
-};
-
 export function isTouchResponder(element: ReactTestInstance) {
   if (!isHostElement(element)) {
     return false;

src/helpers/accessiblity.ts

@@ -4,8 +4,8 @@ import {
   StyleSheet,
 } from 'react-native';
 import { ReactTestInstance } from 'react-test-renderer';
-import { getConfig } from '../config';
 import { getHostSiblings } from './component-tree';
+import { getHostComponentNames } from './host-component-names';
 
 type IsInaccessibleOptions = {
   cache?: WeakMap<ReactTestInstance, boolean>;
@@ -99,8 +99,7 @@ export function isAccessibilityElement(
     return element.props.accessible;
   }
 
-  const hostComponentNames = getConfig().hostComponentNames;
-
+  const hostComponentNames = getHostComponentNames();
   return (
     element?.type === hostComponentNames?.text ||
     element?.type === hostComponentNames?.textInput ||

src/helpers/deprecation.ts

@@ -37,7 +37,7 @@ function deprecateQuery<QueryFn extends (...args: any) => any>(
 
 const warned: { [functionName: string]: boolean } = {};
 
-// istambul ignore next: Occasionally used
+/* istanbul ignore next: occasionally used */
 export function printDeprecationWarning(functionName: string) {
   if (warned[functionName]) {
     return;

src/helpers/host-component-names.tsx

@@ -65,3 +65,11 @@ function getByTestId(instance: ReactTestInstance, testID: string) {
 
   return nodes[0];
 }
+
+export function isHostText(element?: ReactTestInstance) {
+  return element?.type === getHostComponentNames().text;
+}
+
+export function isHostTextInput(element?: ReactTestInstance) {
+  return element?.type === getHostComponentNames().textInput;
+}

src/user-event/event-builder/common.ts

@@ -1,24 +1,40 @@
+/**
+ * Experimental values:
+ * - iOS: `{"changedTouches": [[Circular]], "identifier": 1, "locationX": 253, "locationY": 30.333328247070312, "pageX": 273, "pageY": 141.3333282470703, "target": 75, "timestamp": 875928682.0450834, "touches": [[Circular]]}`
+ * - Android: `{"changedTouches": [[Circular]], "identifier": 0, "locationX": 160, "locationY": 40.3636360168457, "pageX": 180, "pageY": 140.36363220214844, "target": 53, "targetSurface": -1, "timestamp": 10290805, "touches": [[Circular]]}`
+ */
+function touch() {
+  return {
+    persist: jest.fn(),
+    currentTarget: { measure: jest.fn() },
+    nativeEvent: {
+      changedTouches: [],
+      identifier: 0,
+      locationX: 0,
+      locationY: 0,
+      pageX: 0,
+      pageY: 0,
+      target: 0,
+      timestamp: Date.now(),
+      touches: [],
+    },
+  };
+}
+
 export const CommonEventBuilder = {
-  /**
-   * Experimental values:
-   * - iOS: `{"changedTouches": [[Circular]], "identifier": 1, "locationX": 253, "locationY": 30.333328247070312, "pageX": 273, "pageY": 141.3333282470703, "target": 75, "timestamp": 875928682.0450834, "touches": [[Circular]]}`
-   * - Android: `{"changedTouches": [[Circular]], "identifier": 0, "locationX": 160, "locationY": 40.3636360168457, "pageX": 180, "pageY": 140.36363220214844, "target": 53, "targetSurface": -1, "timestamp": 10290805, "touches": [[Circular]]}`
-   */
-  touch: () => {
+  touch,
+
+  responderGrant: () => {
     return {
-      persist: jest.fn(),
-      currentTarget: { measure: jest.fn() },
-      nativeEvent: {
-        changedTouches: [],
-        identifier: 0,
-        locationX: 0,
-        locationY: 0,
-        pageX: 0,
-        pageY: 0,
-        target: 0,
-        timestamp: Date.now(),
-        touches: [],
-      },
+      ...touch(),
+      dispatchConfig: { registrationName: 'onResponderGrant' },
+    };
+  },
+
+  responderRelease: () => {
+    return {
+      ...touch(),
+      dispatchConfig: { registrationName: 'onResponderRelease' },
     };
   },
 

src/user-event/event-builder/index.ts

@@ -1,5 +1,7 @@
 import { CommonEventBuilder } from './common';
+import { TextInputEventBuilder } from './text-input';
 
 export const EventBuilder = {
   Common: CommonEventBuilder,
+  TextInput: TextInputEventBuilder,
 };

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

@@ -0,0 +1,86 @@
+import { ContentSize } from '../utils/content-size';
+import { TextRange } from '../utils/text-range';
+
+export const TextInputEventBuilder = {
+  /**
+   * Experimental values:
+   * - iOS: `{"eventCount": 4, "target": 75, "text": "Test"}`
+   * - Android: `{"eventCount": 6, "target": 53, "text": "Tes"}`
+   */
+  change: (text: string) => {
+    return {
+      nativeEvent: { text, target: 0, eventCount: 0 },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"eventCount": 3, "key": "a", "target": 75}`
+   * - Android: `{"key": "a"}`
+   */
+  keyPress: (key: string) => {
+    return {
+      nativeEvent: { key },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"eventCount": 4, "target": 75, "text": "Test"}`
+   * - Android: `{"target": 53, "text": "Test"}`
+   */
+  submitEditing: (text: string) => {
+    return {
+      nativeEvent: { text, target: 0 },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"eventCount": 4, "target": 75, "text": "Test"}`
+   * - Android: `{"target": 53, "text": "Test"}`
+   */
+  endEditing: (text: string) => {
+    return {
+      nativeEvent: { text, target: 0 },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"selection": {"end": 4, "start": 4}, "target": 75}`
+   * - Android: `{"selection": {"end": 4, "start": 4}}`
+   */
+  selectionChange: ({ start, end }: TextRange) => {
+    return {
+      nativeEvent: { selection: { start, end } },
+    };
+  },
+
+  /**
+   * 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 {
+      nativeEvent: {
+        text,
+        previousText,
+        range: { start: text.length, end: text.length },
+        target: 0,
+      },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"contentSize": {"height": 21.666666666666668, "width": 11.666666666666666}, "target": 75}`
+   * - Android: `{"contentSize": {"height": 61.45454406738281, "width": 352.7272644042969}, "target": 53}`
+   */
+  contentSizeChange: ({ width, height }: ContentSize) => {
+    return {
+      nativeEvent: { contentSize: { width, height }, target: 0 },
+    };
+  },
+};

src/user-event/index.ts

@@ -1,6 +1,7 @@
 import { ReactTestInstance } from 'react-test-renderer';
 import { setup } from './setup';
-import { PressOptions } from './press/press';
+import { PressOptions } from './press';
+import { TypeOptions } from './type';
 
 export const userEvent = {
   setup,
@@ -9,6 +10,6 @@ export const userEvent = {
   press: (element: ReactTestInstance) => setup().press(element),
   longPress: (element: ReactTestInstance, options?: PressOptions) =>
     setup().longPress(element, options),
-  type: (element: ReactTestInstance, text: string) =>
-    setup().type(element, text),
+  type: (element: ReactTestInstance, text: string, options?: TypeOptions) =>
+    setup().type(element, text, options),
 };

src/user-event/press/__tests__/longPress.real-timers.test.tsx

@@ -2,13 +2,15 @@ import React from 'react';
 import { Pressable, Text } from 'react-native';
 import { render, screen } from '../../../pure';
 import { userEvent } from '../..';
-import * as WarnAboutRealTimers from '../utils/warnAboutRealTimers';
+import * as WarnAboutRealTimers from '../../utils/warn-about-real-timers';
 
 describe('userEvent.longPress with real timers', () => {
   beforeEach(() => {
     jest.useRealTimers();
     jest.restoreAllMocks();
-    jest.spyOn(WarnAboutRealTimers, 'warnAboutRealTimers').mockImplementation();
+    jest
+      .spyOn(WarnAboutRealTimers, 'warnAboutRealTimersIfNeeded')
+      .mockImplementation();
   });
 
   test('calls onLongPress if the delayLongPress is the default one', async () => {

src/user-event/press/__tests__/press.real-timers.test.tsx

@@ -10,13 +10,15 @@ import {
 import { createEventLogger, getEventsName } from '../../../test-utils';
 import { render, screen } from '../../..';
 import { userEvent } from '../..';
-import * as WarnAboutRealTimers from '../utils/warnAboutRealTimers';
+import * as WarnAboutRealTimers from '../../utils/warn-about-real-timers';
 
 describe('userEvent.press with real timers', () => {
   beforeEach(() => {
     jest.useRealTimers();
     jest.restoreAllMocks();
-    jest.spyOn(WarnAboutRealTimers, 'warnAboutRealTimers').mockImplementation();
+    jest
+      .spyOn(WarnAboutRealTimers, 'warnAboutRealTimersIfNeeded')
+      .mockImplementation();
   });
 
   test('calls onPressIn, onPress and onPressOut prop of touchable', async () => {

src/user-event/press/index.ts

@@ -1 +1 @@
-export { press, longPress } from './press';
+export { PressOptions, press, longPress } from './press';