@testing-library/react-native 12.2.1 → 12.3.0

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

@@ -1,457 +0,0 @@
-import * as React from 'react';
-import {
-  Pressable,
-  Text,
-  TextInput,
-  TouchableHighlight,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import { createEventLogger, getEventsName } from '../../../test-utils';
-import { render, screen } from '../../..';
-import { userEvent } from '../..';
-
-describe('userEvent.press with fake timers', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-    jest.setSystemTime(0);
-  });
-
-  test('calls onPressIn, onPress and onPressOut prop of touchable', async () => {
-    const { events, logEvent } = createEventLogger();
-    const user = userEvent.setup();
-
-    render(
-      <Pressable
-        onPress={logEvent('press')}
-        onPressIn={logEvent('pressIn')}
-        onPressOut={logEvent('pressOut')}
-        onLongPress={logEvent('longPress')}
-        testID="pressable"
-      />
-    );
-    await user.press(screen.getByTestId('pressable'));
-
-    expect(events).toMatchInlineSnapshot(`
-      [
-        {
-          "name": "pressIn",
-          "payload": {
-            "currentTarget": {
-              "measure": [MockFunction] {
-                "calls": [
-                  [
-                    [Function],
-                  ],
-                  [
-                    [Function],
-                  ],
-                ],
-                "results": [
-                  {
-                    "type": "return",
-                    "value": undefined,
-                  },
-                  {
-                    "type": "return",
-                    "value": undefined,
-                  },
-                ],
-              },
-            },
-            "dispatchConfig": {
-              "registrationName": "onResponderGrant",
-            },
-            "nativeEvent": {
-              "changedTouches": [],
-              "identifier": 0,
-              "locationX": 0,
-              "locationY": 0,
-              "pageX": 0,
-              "pageY": 0,
-              "target": 0,
-              "timestamp": 0,
-              "touches": [],
-            },
-            "persist": [MockFunction] {
-              "calls": [
-                [],
-              ],
-              "results": [
-                {
-                  "type": "return",
-                  "value": undefined,
-                },
-              ],
-            },
-          },
-        },
-        {
-          "name": "press",
-          "payload": {
-            "currentTarget": {
-              "measure": [MockFunction],
-            },
-            "dispatchConfig": {
-              "registrationName": "onResponderRelease",
-            },
-            "nativeEvent": {
-              "changedTouches": [],
-              "identifier": 0,
-              "locationX": 0,
-              "locationY": 0,
-              "pageX": 0,
-              "pageY": 0,
-              "target": 0,
-              "timestamp": 0,
-              "touches": [],
-            },
-            "persist": [MockFunction] {
-              "calls": [
-                [],
-              ],
-              "results": [
-                {
-                  "type": "return",
-                  "value": undefined,
-                },
-              ],
-            },
-          },
-        },
-        {
-          "name": "pressOut",
-          "payload": {
-            "currentTarget": {
-              "measure": [MockFunction],
-            },
-            "dispatchConfig": {
-              "registrationName": "onResponderRelease",
-            },
-            "nativeEvent": {
-              "changedTouches": [],
-              "identifier": 0,
-              "locationX": 0,
-              "locationY": 0,
-              "pageX": 0,
-              "pageY": 0,
-              "target": 0,
-              "timestamp": 0,
-              "touches": [],
-            },
-            "persist": [MockFunction] {
-              "calls": [
-                [],
-              ],
-              "results": [
-                {
-                  "type": "return",
-                  "value": undefined,
-                },
-              ],
-            },
-          },
-        },
-      ]
-    `);
-  });
-
-  test('does not trigger event when pressable is disabled', async () => {
-    const { events, logEvent } = createEventLogger();
-    const user = userEvent.setup();
-
-    render(
-      <Pressable
-        disabled
-        onPress={logEvent('press')}
-        onPressIn={logEvent('pressIn')}
-        onPressOut={logEvent('pressOut')}
-        onLongPress={logEvent('longPress')}
-        testID="pressable"
-      />
-    );
-    await user.press(screen.getByTestId('pressable'));
-
-    expect(events).toEqual([]);
-  });
-
-  test('does not call press when pointer events is none', async () => {
-    const { events, logEvent } = createEventLogger();
-    const user = userEvent.setup();
-
-    render(
-      <Pressable
-        onPress={logEvent('press')}
-        onPressIn={logEvent('pressIn')}
-        onPressOut={logEvent('pressOut')}
-        onLongPress={logEvent('longPress')}
-        testID="pressable"
-        pointerEvents="none"
-      />
-    );
-    await user.press(screen.getByTestId('pressable'));
-
-    expect(events).toEqual([]);
-  });
-
-  test('does not call press when pointer events is box-none', async () => {
-    const { events, logEvent } = createEventLogger();
-    const user = userEvent.setup();
-
-    render(
-      <Pressable
-        onPress={logEvent('press')}
-        onPressIn={logEvent('pressIn')}
-        onPressOut={logEvent('pressOut')}
-        onLongPress={logEvent('longPress')}
-        testID="pressable"
-        pointerEvents="box-none"
-      />
-    );
-    await user.press(screen.getByTestId('pressable'));
-
-    expect(events).toEqual([]);
-  });
-
-  test('does not call press when parent has pointer events box-only', async () => {
-    const { events, logEvent } = createEventLogger();
-    const user = userEvent.setup();
-
-    render(
-      <View pointerEvents="box-only">
-        <Pressable
-          onPress={logEvent('press')}
-          onPressIn={logEvent('pressIn')}
-          onPressOut={logEvent('pressOut')}
-          onLongPress={logEvent('longPress')}
-          testID="pressable"
-        />
-      </View>
-    );
-    await user.press(screen.getByTestId('pressable'));
-
-    expect(events).toEqual([]);
-  });
-
-  test('calls press when pressable has pointer events box-only', async () => {
-    const { events, logEvent } = createEventLogger();
-    const user = userEvent.setup();
-
-    render(
-      <Pressable
-        onPress={logEvent('press')}
-        onPressIn={logEvent('pressIn')}
-        onPressOut={logEvent('pressOut')}
-        onLongPress={logEvent('longPress')}
-        testID="pressable"
-        pointerEvents="box-only"
-      />
-    );
-    await user.press(screen.getByTestId('pressable'));
-
-    expect(getEventsName(events)).toEqual(['pressIn', 'press', 'pressOut']);
-  });
-
-  test('crawls up in the tree to find an element that responds to touch events', async () => {
-    const mockOnPress = jest.fn();
-
-    render(
-      <Pressable onPress={mockOnPress}>
-        <Text>press me</Text>
-      </Pressable>
-    );
-    await userEvent.press(screen.getByText('press me'));
-
-    expect(mockOnPress).toHaveBeenCalled();
-  });
-
-  test('does not call onLongPress', async () => {
-    const mockOnLongPress = jest.fn();
-
-    render(
-      <Pressable onLongPress={mockOnLongPress}>
-        <Text>press me</Text>
-      </Pressable>
-    );
-    await userEvent.press(screen.getByText('press me'));
-
-    expect(mockOnLongPress).not.toHaveBeenCalled();
-  });
-
-  test('works on TouchableOpacity', async () => {
-    const mockOnPress = jest.fn();
-
-    render(
-      <TouchableOpacity onPress={mockOnPress}>
-        <Text>press me</Text>
-      </TouchableOpacity>
-    );
-    await userEvent.press(screen.getByText('press me'));
-
-    expect(mockOnPress).toHaveBeenCalled();
-  });
-
-  test('works on TouchableHighlight', async () => {
-    const mockOnPress = jest.fn();
-
-    render(
-      <TouchableHighlight onPress={mockOnPress}>
-        <Text>press me</Text>
-      </TouchableHighlight>
-    );
-    await userEvent.press(screen.getByText('press me'));
-
-    expect(mockOnPress).toHaveBeenCalled();
-  });
-
-  test('press works on Text', async () => {
-    const { events, logEvent } = createEventLogger();
-
-    render(
-      <Text
-        onPress={logEvent('press')}
-        onPressIn={logEvent('pressIn')}
-        onPressOut={logEvent('pressOut')}
-        onLongPress={logEvent('longPress')}
-      >
-        press me
-      </Text>
-    );
-
-    await userEvent.press(screen.getByText('press me'));
-    expect(getEventsName(events)).toEqual(['pressIn', 'press', 'pressOut']);
-  });
-
-  test('longPress works Text', async () => {
-    const { events, logEvent } = createEventLogger();
-
-    render(
-      <Text
-        onPress={logEvent('press')}
-        onPressIn={logEvent('pressIn')}
-        onPressOut={logEvent('pressOut')}
-        onLongPress={logEvent('longPress')}
-      >
-        press me
-      </Text>
-    );
-
-    await userEvent.longPress(screen.getByText('press me'));
-    expect(getEventsName(events)).toEqual(['pressIn', 'longPress', 'pressOut']);
-  });
-
-  test('doesnt trigger on disabled Text', async () => {
-    const { events, logEvent } = createEventLogger();
-
-    render(
-      <Text
-        onPress={logEvent('press')}
-        onPressIn={logEvent('pressIn')}
-        onPressOut={logEvent('pressOut')}
-        onLongPress={logEvent('longPress')}
-        disabled
-      >
-        press me
-      </Text>
-    );
-    await userEvent.press(screen.getByText('press me'));
-
-    expect(events).toEqual([]);
-  });
-
-  test('doesnt trigger on Text with disabled pointer events', async () => {
-    const { events, logEvent } = createEventLogger();
-
-    render(
-      <View pointerEvents="box-only">
-        <Text
-          onPress={logEvent('press')}
-          onPressIn={logEvent('pressIn')}
-          onPressOut={logEvent('pressOut')}
-          onLongPress={logEvent('longPress')}
-        >
-          press me
-        </Text>
-      </View>
-    );
-    await userEvent.press(screen.getByText('press me'));
-
-    expect(events).toEqual([]);
-  });
-
-  test('press works on TextInput', async () => {
-    const { events, logEvent } = createEventLogger();
-
-    render(
-      <TextInput
-        placeholder="email"
-        onPressIn={logEvent('pressIn')}
-        onPressOut={logEvent('pressOut')}
-      />
-    );
-
-    await userEvent.press(screen.getByPlaceholderText('email'));
-    expect(getEventsName(events)).toEqual(['pressIn', 'pressOut']);
-  });
-
-  test('longPress works on TextInput', async () => {
-    const { events, logEvent } = createEventLogger();
-
-    render(
-      <TextInput
-        placeholder="email"
-        onPressIn={logEvent('pressIn')}
-        onPressOut={logEvent('pressOut')}
-      />
-    );
-
-    await userEvent.longPress(screen.getByPlaceholderText('email'));
-    expect(getEventsName(events)).toEqual(['pressIn', 'pressOut']);
-  });
-
-  test('does not call onPressIn and onPressOut on non editable TextInput', async () => {
-    const { events, logEvent } = createEventLogger();
-
-    render(
-      <TextInput
-        placeholder="email"
-        editable={false}
-        onPressIn={logEvent('pressIn')}
-        onPressOut={logEvent('pressOut')}
-      />
-    );
-
-    await userEvent.press(screen.getByPlaceholderText('email'));
-    expect(events).toEqual([]);
-  });
-
-  test('does not call onPressIn and onPressOut on TextInput with pointer events disabled', async () => {
-    const { events, logEvent } = createEventLogger();
-
-    render(
-      <TextInput
-        placeholder="email"
-        pointerEvents="box-none"
-        onPressIn={logEvent('pressIn')}
-        onPressOut={logEvent('pressOut')}
-      />
-    );
-
-    await userEvent.press(screen.getByPlaceholderText('email'));
-    expect(events).toEqual([]);
-  });
-
-  test('press is accessible directly in userEvent', async () => {
-    const mockOnPress = jest.fn();
-
-    render(
-      <Pressable onPress={mockOnPress}>
-        <Text>press me</Text>
-      </Pressable>
-    );
-
-    await userEvent.press(screen.getByText('press me'));
-
-    expect(mockOnPress).toHaveBeenCalled();
-  });
-});

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

@@ -1,7 +0,0 @@
-// These are constants defined in the React Native repo
-
-// Used to define the delay before calling onPressOut after a press
-export const DEFAULT_MIN_PRESS_DURATION = 130;
-
-// Default minimum press duration to trigger a long press
-export const DEFAULT_LONG_PRESS_DELAY_MS = 500;

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

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

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

@@ -1,163 +0,0 @@
-import { ReactTestInstance } from 'react-test-renderer';
-import act from '../../act';
-import { getHostParent } from '../../helpers/component-tree';
-import { isPointerEventEnabled } from '../../helpers/pointer-events';
-import { isHostText } from '../../helpers/host-component-names';
-import { EventBuilder } from '../event-builder';
-import { UserEventConfig, UserEventInstance } from '../setup';
-import {
-  dispatchEvent,
-  isEditableTextInput,
-  wait,
-  warnAboutRealTimersIfNeeded,
-} from '../utils';
-import { DEFAULT_MIN_PRESS_DURATION } from './constants';
-
-export interface PressOptions {
-  duration?: number;
-}
-
-export async function press(
-  this: UserEventInstance,
-  element: ReactTestInstance
-): Promise<void> {
-  await basePress(this.config, element, {
-    type: 'press',
-    duration: 0,
-  });
-}
-
-export async function longPress(
-  this: UserEventInstance,
-  element: ReactTestInstance,
-  options?: PressOptions
-): Promise<void> {
-  await basePress(this.config, element, {
-    type: 'longPress',
-    duration: options?.duration ?? 500,
-  });
-}
-
-interface BasePressOptions {
-  type: 'press' | 'longPress';
-  duration: number;
-}
-
-const basePress = async (
-  config: UserEventConfig,
-  element: ReactTestInstance,
-  options: BasePressOptions
-): Promise<void> => {
-  if (isPressableText(element)) {
-    await emitTextPressEvents(config, element, options);
-    return;
-  }
-
-  if (isEditableTextInput(element) && isPointerEventEnabled(element)) {
-    await emitTextInputPressEvents(config, element, options);
-    return;
-  }
-
-  if (isEnabledTouchResponder(element)) {
-    await emitPressablePressEvents(config, element, options);
-    return;
-  }
-
-  const hostParentElement = getHostParent(element);
-  if (!hostParentElement) {
-    return;
-  }
-
-  await basePress(config, hostParentElement, options);
-};
-
-const emitPressablePressEvents = async (
-  config: UserEventConfig,
-  element: ReactTestInstance,
-  options: BasePressOptions
-) => {
-  warnAboutRealTimersIfNeeded();
-
-  await wait(config);
-
-  await act(async () => {
-    dispatchEvent(
-      element,
-      'responderGrant',
-      EventBuilder.Common.responderGrant()
-    );
-
-    await wait(config, options.duration);
-
-    dispatchEvent(
-      element,
-      'responderRelease',
-      EventBuilder.Common.responderRelease()
-    );
-
-    // React Native will wait for minimal delay of DEFAULT_MIN_PRESS_DURATION
-    // before emitting the `pressOut` event. We need to wait here, so that
-    // `press()` function does not return before that.
-    if (DEFAULT_MIN_PRESS_DURATION - options.duration > 0) {
-      await wait(config, DEFAULT_MIN_PRESS_DURATION - options.duration);
-    }
-  });
-};
-
-const isEnabledTouchResponder = (element: ReactTestInstance) => {
-  return (
-    isPointerEventEnabled(element) &&
-    element.props.onStartShouldSetResponder?.()
-  );
-};
-
-const isPressableText = (element: ReactTestInstance) => {
-  const hasPressEventHandler = Boolean(
-    element.props.onPress ||
-      element.props.onLongPress ||
-      element.props.onPressIn ||
-      element.props.onPressOut
-  );
-
-  return (
-    isHostText(element) &&
-    isPointerEventEnabled(element) &&
-    !element.props.disabled &&
-    hasPressEventHandler
-  );
-};
-
-/**
- * Dispatches a press event sequence for Text.
- */
-async function emitTextPressEvents(
-  config: UserEventConfig,
-  element: ReactTestInstance,
-  options: BasePressOptions
-) {
-  await wait(config);
-  dispatchEvent(element, 'pressIn', EventBuilder.Common.touch());
-
-  // Emit either `press` or `longPress`.
-  dispatchEvent(element, options.type, EventBuilder.Common.touch());
-
-  await wait(config, options.duration);
-  dispatchEvent(element, 'pressOut', EventBuilder.Common.touch());
-}
-
-/**
- * Dispatches a press event sequence for TextInput.
- */
-async function emitTextInputPressEvents(
-  config: UserEventConfig,
-  element: ReactTestInstance,
-  options: BasePressOptions
-) {
-  await wait(config);
-  dispatchEvent(element, 'pressIn', EventBuilder.Common.touch());
-
-  // Note: TextInput does not have `onPress`/`onLongPress` props.
-
-  await wait(config, options.duration);
-  dispatchEvent(element, 'pressOut', EventBuilder.Common.touch());
-}

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

@@ -1,2 +0,0 @@
-export type { UserEventConfig, UserEventInstance } from './setup';
-export { setup } from './setup';