@testing-library/react-native 12.1.3 → 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/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' },
     };
   },
 

package/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,
 };

package/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 },
+    };
+  },
+};