@testing-library/react-native 12.1.1 → 12.1.3

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

@@ -0,0 +1,157 @@
+import React from 'react';
+import { Pressable, Text } from 'react-native';
+import { render, screen } from '../../../pure';
+import { userEvent } from '../..';
+import { createEventLogger } from '../../../test-utils';
+
+describe('userEvent.longPress with fake timers', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(0);
+  });
+
+  test('calls onLongPress if the delayLongPress is the default one', async () => {
+    const { logEvent, events } = createEventLogger();
+    const user = userEvent.setup();
+
+    render(
+      <Pressable
+        onPress={logEvent('press')}
+        onLongPress={logEvent('longPress')}
+      >
+        <Text>press me</Text>
+      </Pressable>
+    );
+    await user.longPress(screen.getByText('press me'));
+
+    expect(events).toMatchInlineSnapshot(`
+      [
+        {
+          "name": "longPress",
+          "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,
+                },
+              ],
+            },
+          },
+        },
+      ]
+    `);
+  });
+
+  test('calls onLongPress when duration is greater than specified delayLongPress', async () => {
+    const mockOnLongPress = jest.fn();
+    const mockOnPress = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <Pressable
+        delayLongPress={800}
+        onLongPress={mockOnLongPress}
+        onPress={mockOnPress}
+      >
+        <Text>press me</Text>
+      </Pressable>
+    );
+
+    await user.longPress(screen.getByText('press me'), {
+      duration: 1000,
+    });
+
+    expect(mockOnLongPress).toHaveBeenCalled();
+    expect(mockOnPress).not.toHaveBeenCalled();
+  });
+
+  test('does not calls onLongPress when duration is lesser than specified delayLongPress', async () => {
+    const mockOnLongPress = jest.fn();
+    const mockOnPress = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <Pressable
+        delayLongPress={1000}
+        onLongPress={mockOnLongPress}
+        onPress={mockOnPress}
+      >
+        <Text>press me</Text>
+      </Pressable>
+    );
+    await user.longPress(screen.getByText('press me'));
+
+    expect(mockOnLongPress).not.toHaveBeenCalled();
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+  });
+
+  test('does not calls onPress when onLongPress is called', async () => {
+    const mockOnLongPress = jest.fn();
+    const mockOnPress = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <Pressable onLongPress={mockOnLongPress} onPress={mockOnPress}>
+        <Text>press me</Text>
+      </Pressable>
+    );
+    await user.longPress(screen.getByText('press me'));
+
+    expect(mockOnLongPress).toHaveBeenCalled();
+    expect(mockOnPress).not.toHaveBeenCalled();
+  });
+
+  test('longPress is accessible directly in userEvent', async () => {
+    const mockOnLongPress = jest.fn();
+
+    render(
+      <Pressable onLongPress={mockOnLongPress}>
+        <Text>press me</Text>
+      </Pressable>
+    );
+
+    await userEvent.longPress(screen.getByText('press me'));
+
+    expect(mockOnLongPress).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,318 @@
+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 '../..';
+import * as WarnAboutRealTimers from '../utils/warnAboutRealTimers';
+
+describe('userEvent.press with real timers', () => {
+  beforeEach(() => {
+    jest.useRealTimers();
+    jest.restoreAllMocks();
+    jest.spyOn(WarnAboutRealTimers, 'warnAboutRealTimers').mockImplementation();
+  });
+
+  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(getEventsName(events)).toEqual(['pressIn', 'press', 'pressOut']);
+  });
+
+  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('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('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('works on TetInput', 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('does not call onPressIn and onPressOut on non editable TetInput', 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 TetInput 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();
+  });
+});
+
+test('warns about using real timers with userEvent', async () => {
+  jest.restoreAllMocks();
+  const mockConsoleWarn = jest.spyOn(console, 'warn').mockImplementation();
+
+  render(<Pressable testID="pressable" />);
+
+  await userEvent.press(screen.getByTestId('pressable'));
+
+  expect(mockConsoleWarn.mock.calls[0][0]).toMatchInlineSnapshot(`
+    "It is recommended to use userEvent with fake timers
+    Some events involve duration so your tests may take a long time to run.
+    For instance calling userEvent.longPress with real timers will take 500 ms."
+  `);
+});