@testing-library/react-native 12.2.0 → 12.2.1

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

@@ -0,0 +1,269 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`clear() supports basic case: value: "Hello! 1`] = `
+[
+  {
+    "name": "focus",
+    "payload": {
+      "nativeEvent": {
+        "target": 0,
+      },
+    },
+  },
+  {
+    "name": "selectionChange",
+    "payload": {
+      "nativeEvent": {
+        "selection": {
+          "end": 6,
+          "start": 0,
+        },
+      },
+    },
+  },
+  {
+    "name": "keyPress",
+    "payload": {
+      "nativeEvent": {
+        "key": "Backspace",
+      },
+    },
+  },
+  {
+    "name": "change",
+    "payload": {
+      "nativeEvent": {
+        "eventCount": 0,
+        "target": 0,
+        "text": "",
+      },
+    },
+  },
+  {
+    "name": "changeText",
+    "payload": "",
+  },
+  {
+    "name": "selectionChange",
+    "payload": {
+      "nativeEvent": {
+        "selection": {
+          "end": 0,
+          "start": 0,
+        },
+      },
+    },
+  },
+  {
+    "name": "endEditing",
+    "payload": {
+      "nativeEvent": {
+        "target": 0,
+        "text": "",
+      },
+    },
+  },
+  {
+    "name": "blur",
+    "payload": {
+      "nativeEvent": {
+        "target": 0,
+      },
+    },
+  },
+]
+`;
+
+exports[`clear() supports defaultValue prop: defaultValue: "Hello Default!" 1`] = `
+[
+  {
+    "name": "focus",
+    "payload": {
+      "nativeEvent": {
+        "target": 0,
+      },
+    },
+  },
+  {
+    "name": "selectionChange",
+    "payload": {
+      "nativeEvent": {
+        "selection": {
+          "end": 14,
+          "start": 0,
+        },
+      },
+    },
+  },
+  {
+    "name": "keyPress",
+    "payload": {
+      "nativeEvent": {
+        "key": "Backspace",
+      },
+    },
+  },
+  {
+    "name": "change",
+    "payload": {
+      "nativeEvent": {
+        "eventCount": 0,
+        "target": 0,
+        "text": "",
+      },
+    },
+  },
+  {
+    "name": "changeText",
+    "payload": "",
+  },
+  {
+    "name": "selectionChange",
+    "payload": {
+      "nativeEvent": {
+        "selection": {
+          "end": 0,
+          "start": 0,
+        },
+      },
+    },
+  },
+  {
+    "name": "endEditing",
+    "payload": {
+      "nativeEvent": {
+        "target": 0,
+        "text": "",
+      },
+    },
+  },
+  {
+    "name": "blur",
+    "payload": {
+      "nativeEvent": {
+        "target": 0,
+      },
+    },
+  },
+]
+`;
+
+exports[`clear() supports multiline: value: "Hello World!
+How are you?" multiline: true, 1`] = `
+[
+  {
+    "name": "focus",
+    "payload": {
+      "nativeEvent": {
+        "target": 0,
+      },
+    },
+  },
+  {
+    "name": "selectionChange",
+    "payload": {
+      "nativeEvent": {
+        "selection": {
+          "end": 25,
+          "start": 0,
+        },
+      },
+    },
+  },
+  {
+    "name": "keyPress",
+    "payload": {
+      "nativeEvent": {
+        "key": "Backspace",
+      },
+    },
+  },
+  {
+    "name": "textInput",
+    "payload": {
+      "nativeEvent": {
+        "previousText": "Hello World!
+How are you?",
+        "range": {
+          "end": 0,
+          "start": 0,
+        },
+        "target": 0,
+        "text": "",
+      },
+    },
+  },
+  {
+    "name": "change",
+    "payload": {
+      "nativeEvent": {
+        "eventCount": 0,
+        "target": 0,
+        "text": "",
+      },
+    },
+  },
+  {
+    "name": "changeText",
+    "payload": "",
+  },
+  {
+    "name": "selectionChange",
+    "payload": {
+      "nativeEvent": {
+        "selection": {
+          "end": 0,
+          "start": 0,
+        },
+      },
+    },
+  },
+  {
+    "name": "contentSizeChange",
+    "payload": {
+      "nativeEvent": {
+        "contentSize": {
+          "height": 16,
+          "width": 0,
+        },
+        "target": 0,
+      },
+    },
+  },
+  {
+    "name": "endEditing",
+    "payload": {
+      "nativeEvent": {
+        "target": 0,
+        "text": "",
+      },
+    },
+  },
+  {
+    "name": "blur",
+    "payload": {
+      "nativeEvent": {
+        "target": 0,
+      },
+    },
+  },
+]
+`;
+
+exports[`clear() works when not all events have handlers 1`] = `
+[
+  {
+    "name": "changeText",
+    "payload": "",
+  },
+  {
+    "name": "endEditing",
+    "payload": {
+      "nativeEvent": {
+        "target": 0,
+        "text": "",
+      },
+    },
+  },
+]
+`;

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

@@ -0,0 +1,217 @@
+import * as React from 'react';
+import { View, TextInput, TextInputProps } from 'react-native';
+import { createEventLogger } from '../../test-utils/events';
+import { render, userEvent } from '../..';
+
+beforeEach(() => {
+  jest.useRealTimers();
+});
+
+function renderTextInputWithToolkit(props: TextInputProps = {}) {
+  const { events, logEvent } = createEventLogger();
+
+  const screen = render(
+    <TextInput
+      testID="input"
+      onFocus={logEvent('focus')}
+      onBlur={logEvent('blur')}
+      onPressIn={logEvent('pressIn')}
+      onPressOut={logEvent('pressOut')}
+      onChange={logEvent('change')}
+      onChangeText={logEvent('changeText')}
+      onKeyPress={logEvent('keyPress')}
+      onTextInput={logEvent('textInput')}
+      onSelectionChange={logEvent('selectionChange')}
+      onSubmitEditing={logEvent('submitEditing')}
+      onEndEditing={logEvent('endEditing')}
+      onContentSizeChange={logEvent('contentSizeChange')}
+      {...props}
+    />
+  );
+
+  const textInput = screen.getByTestId('input');
+
+  return {
+    events,
+    textInput,
+  };
+}
+
+describe('clear()', () => {
+  it('supports basic case', async () => {
+    jest.spyOn(Date, 'now').mockImplementation(() => 100100100100);
+    const { textInput, events } = renderTextInputWithToolkit({
+      value: 'Hello!',
+    });
+
+    const user = userEvent.setup();
+    await user.clear(textInput);
+
+    const eventNames = events.map((e) => e.name);
+    expect(eventNames).toEqual([
+      'focus',
+      'selectionChange',
+      'keyPress',
+      'change',
+      'changeText',
+      'selectionChange',
+      'endEditing',
+      'blur',
+    ]);
+
+    expect(events).toMatchSnapshot('value: "Hello!');
+  });
+
+  it.each(['modern', 'legacy'])('works with %s fake timers', async (type) => {
+    jest.useFakeTimers({ legacyFakeTimers: type === 'legacy' });
+    const { textInput, events } = renderTextInputWithToolkit({
+      value: 'Hello!',
+    });
+
+    const user = userEvent.setup();
+    await user.clear(textInput);
+
+    const eventNames = events.map((e) => e.name);
+    expect(eventNames).toEqual([
+      'focus',
+      'selectionChange',
+      'keyPress',
+      'change',
+      'changeText',
+      'selectionChange',
+      'endEditing',
+      'blur',
+    ]);
+  });
+
+  it('supports defaultValue prop', async () => {
+    const { textInput, events } = renderTextInputWithToolkit({
+      defaultValue: 'Hello Default!',
+    });
+
+    const user = userEvent.setup();
+    await user.clear(textInput);
+
+    const eventNames = events.map((e) => e.name);
+    expect(eventNames).toEqual([
+      'focus',
+      'selectionChange',
+      'keyPress',
+      'change',
+      'changeText',
+      'selectionChange',
+      'endEditing',
+      'blur',
+    ]);
+
+    expect(events).toMatchSnapshot('defaultValue: "Hello Default!"');
+  });
+
+  it('does respect editable prop', async () => {
+    const { textInput } = renderTextInputWithToolkit({
+      value: 'Hello!',
+      editable: false,
+    });
+
+    const user = userEvent.setup();
+    user.clear(textInput);
+
+    expect(textInput.props.value).toBe('Hello!');
+  });
+
+  it('does respect pointer-events prop', async () => {
+    const { textInput } = renderTextInputWithToolkit({
+      value: 'Hello!',
+      pointerEvents: 'none',
+    });
+
+    const user = userEvent.setup();
+    user.clear(textInput);
+
+    expect(textInput.props.value).toBe('Hello!');
+  });
+
+  it('supports multiline', async () => {
+    const { textInput, events } = renderTextInputWithToolkit({
+      value: 'Hello World!\nHow are you?',
+      multiline: true,
+    });
+
+    const user = userEvent.setup();
+    await user.clear(textInput);
+
+    const eventNames = events.map((e) => e.name);
+    expect(eventNames).toEqual([
+      'focus',
+      'selectionChange',
+      'keyPress',
+      'textInput',
+      'change',
+      'changeText',
+      'selectionChange',
+      'contentSizeChange',
+      'endEditing',
+      'blur',
+    ]);
+
+    expect(events).toMatchSnapshot(
+      'value: "Hello World!\nHow are you?" multiline: true,'
+    );
+  });
+
+  it('works when not all events have handlers', async () => {
+    const { events, logEvent } = createEventLogger();
+    const screen = render(
+      <TextInput
+        testID="input"
+        onChangeText={logEvent('changeText')}
+        onEndEditing={logEvent('endEditing')}
+      />
+    );
+
+    const user = userEvent.setup();
+    await user.clear(screen.getByTestId('input'));
+
+    const eventNames = events.map((e) => e.name);
+    expect(eventNames).toEqual(['changeText', 'endEditing']);
+
+    expect(events).toMatchSnapshot();
+  });
+
+  it('does NOT work on View', async () => {
+    const screen = render(<View testID="input" />);
+
+    const user = userEvent.setup();
+    await expect(
+      user.clear(screen.getByTestId('input'))
+    ).rejects.toThrowErrorMatchingInlineSnapshot(
+      `"clear() only supports host "TextInput" elements. Passed element has type: "View"."`
+    );
+  });
+
+  // View that ignores props type checking
+  const AnyView = View as React.ComponentType<any>;
+
+  it('does NOT bubble up', async () => {
+    const parentHandler = jest.fn();
+    const screen = render(
+      <AnyView
+        onChangeText={parentHandler}
+        onChange={parentHandler}
+        onKeyPress={parentHandler}
+        onTextInput={parentHandler}
+        onFocus={parentHandler}
+        onBlur={parentHandler}
+        onEndEditing={parentHandler}
+        onPressIn={parentHandler}
+        onPressOut={parentHandler}
+      >
+        <TextInput testID="input" />
+      </AnyView>
+    );
+
+    const user = userEvent.setup();
+    await user.clear(screen.getByTestId('input'));
+    expect(parentHandler).not.toHaveBeenCalled();
+  });
+});

package/src/user-event/clear.ts

@@ -0,0 +1,59 @@
+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 { EventBuilder } from './event-builder';
+import { UserEventInstance } from './setup';
+import { dispatchEvent, wait, isEditableTextInput } from './utils';
+import { emitTypingEvents } from './type/type';
+
+export async function clear(
+  this: UserEventInstance,
+  element: ReactTestInstance
+): Promise<void> {
+  if (!isHostTextInput(element)) {
+    throw new ErrorWithStack(
+      `clear() only supports host "TextInput" elements. Passed element has type: "${element.type}".`,
+      clear
+    );
+  }
+
+  if (!isEditableTextInput(element) || !isPointerEventEnabled(element)) {
+    return;
+  }
+
+  // 1. Enter element
+  dispatchEvent(element, 'focus', EventBuilder.Common.focus());
+
+  // 2. Select all
+  const previousText = element.props.value ?? element.props.defaultValue ?? '';
+  const selectionRange = {
+    start: 0,
+    end: previousText.length,
+  };
+  dispatchEvent(
+    element,
+    'selectionChange',
+    EventBuilder.TextInput.selectionChange(selectionRange)
+  );
+
+  // 3. Press backspace
+  const finalText = '';
+  await emitTypingEvents(
+    this.config,
+    element,
+    'Backspace',
+    finalText,
+    previousText
+  );
+
+  // 4. Exit element
+  await wait(this.config);
+  dispatchEvent(
+    element,
+    'endEditing',
+    EventBuilder.TextInput.endEditing(finalText)
+  );
+
+  dispatchEvent(element, 'blur', EventBuilder.Common.blur());
+}

package/src/user-event/index.ts

@@ -14,4 +14,5 @@ export const userEvent = {
     setup().longPress(element, options),
   type: (element: ReactTestInstance, text: string, options?: TypeOptions) =>
     setup().type(element, text, options),
+  clear: (element: ReactTestInstance) => setup().clear(element),
 };

package/src/user-event/press/press.ts

@@ -2,13 +2,15 @@ import { ReactTestInstance } from 'react-test-renderer';
 import act from '../../act';
 import { getHostParent } from '../../helpers/component-tree';
 import { isPointerEventEnabled } from '../../helpers/pointer-events';
-import {
-  isHostText,
-  isHostTextInput,
-} from '../../helpers/host-component-names';
+import { isHostText } from '../../helpers/host-component-names';
 import { EventBuilder } from '../event-builder';
 import { UserEventConfig, UserEventInstance } from '../setup';
-import { dispatchEvent, wait, warnAboutRealTimersIfNeeded } from '../utils';
+import {
+  dispatchEvent,
+  isEditableTextInput,
+  wait,
+  warnAboutRealTimersIfNeeded,
+} from '../utils';
 import { DEFAULT_MIN_PRESS_DURATION } from './constants';
 
 export interface PressOptions {
@@ -51,7 +53,7 @@ const basePress = async (
     return;
   }
 
-  if (isEnabledTextInput(element)) {
+  if (isEditableTextInput(element) && isPointerEventEnabled(element)) {
     await emitTextInputPressEvents(config, element, options);
     return;
   }
@@ -125,14 +127,6 @@ const isPressableText = (element: ReactTestInstance) => {
   );
 };
 
-const isEnabledTextInput = (element: ReactTestInstance) => {
-  return (
-    isHostTextInput(element) &&
-    isPointerEventEnabled(element) &&
-    element.props.editable !== false
-  );
-};
-
 /**
  * Dispatches a press event sequence for Text.
  */

package/src/user-event/setup/setup.ts

@@ -2,6 +2,7 @@ import { ReactTestInstance } from 'react-test-renderer';
 import { jestFakeTimersAreEnabled } from '../../helpers/timers';
 import { PressOptions, press, longPress } from '../press';
 import { TypeOptions, type } from '../type';
+import { clear } from '../clear';
 
 export interface UserEventSetupOptions {
   /**
@@ -84,7 +85,7 @@ export interface UserEventInstance {
   ) => Promise<void>;
 
   /**
-   * Simulate user pressing on given `TextInput` element and typing given text.
+   * Simulate user pressing on a given `TextInput` element and typing given text.
    *
    * This method will trigger the events for each character of the text:
    * `keyPress`, `change`, `changeText`, `endEditing`, etc.
@@ -92,7 +93,7 @@ export interface UserEventInstance {
    * It will also trigger events connected with entering and leaving the text
    * input.
    *
-   * The exact events sent depend on the props of TextInput (`editable`,
+   * The exact events sent depend on the props of the TextInput (`editable`,
    * `multiline`, value, defaultValue, etc) and passed options.
    *
    * @param element TextInput element to type on
@@ -108,6 +109,19 @@ export interface UserEventInstance {
     text: string,
     options?: TypeOptions
   ) => Promise<void>;
+
+  /**
+   * Simulate user clearing the text of a given `TextInput` element.
+   *
+   * This method will simulate:
+   * 1. entering TextInput
+   * 2. selecting all text
+   * 3. pressing backspace to delete all text
+   * 4. leaving TextInput
+   *
+   * @param element TextInput element to clear
+   */
+  clear: (element: ReactTestInstance) => Promise<void>;
 }
 
 function createInstance(config: UserEventConfig): UserEventInstance {
@@ -120,6 +134,7 @@ function createInstance(config: UserEventConfig): UserEventInstance {
     press: press.bind(instance),
     longPress: longPress.bind(instance),
     type: type.bind(instance),
+    clear: clear.bind(instance),
   };
 
   Object.assign(instance, api);

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

@@ -6,7 +6,6 @@ import { userEvent } from '../..';
 
 beforeEach(() => {
   jest.useRealTimers();
-  jest.clearAllMocks();
 });
 
 interface ManagedTextInputProps {

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

@@ -6,7 +6,6 @@ import { userEvent } from '../..';
 
 beforeEach(() => {
   jest.useRealTimers();
-  jest.clearAllMocks();
 });
 
 function renderTextInputWithToolkit(props: TextInputProps = {}) {