make onPress behave more life-like

Author: Pontus Lundin

src/__tests__/fireEvent.test.js

@@ -11,9 +11,22 @@ import {
 } from 'react-native';
 import { render, fireEvent } from '..';
 
-const OnPressComponent = ({ onPress, text }) => (
+const OnPressComponent = ({
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut,
+  onFocus,
+  text,
+}) => (
   <View>
-    <TouchableOpacity onPress={onPress}>
+    <TouchableOpacity
+      onPress={onPress}
+      onLongPress={onLongPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onFocus={onFocus}
+    >
       <Text>{text}</Text>
     </TouchableOpacity>
   </View>
@@ -100,6 +113,86 @@ test('fireEvent.press', () => {
   expect(onPressMock).toHaveBeenCalled();
 });
 
+test('fireEvent.press all events', () => {
+  const callOrder = [];
+  const onPressInMock = jest.fn(() => callOrder.push('onPressIn'));
+  const onPressOutMock = jest.fn(() => callOrder.push('onPressOut'));
+  const onPressMock = jest.fn(() => callOrder.push('onPress'));
+  const onFocusMock = jest.fn(() => callOrder.push('onFocus'));
+  const onLongPressMock = jest.fn();
+  const text = 'Fireevent press';
+  const { getByText } = render(
+    <OnPressComponent
+      onPress={onPressMock}
+      onLongPress={onLongPressMock}
+      onPressIn={onPressInMock}
+      onPressOut={onPressOutMock}
+      onFocus={onFocusMock}
+      text={text}
+    />
+  );
+
+  fireEvent.press(getByText(text));
+
+  expect(onLongPressMock).not.toHaveBeenCalled();
+  expect(onPressInMock).toHaveBeenCalled();
+  expect(onPressOutMock).toHaveBeenCalled();
+  expect(onPressMock).toHaveBeenCalled();
+  expect(onFocusMock).toHaveBeenCalled();
+  expect(callOrder).toStrictEqual([
+    'onPressIn',
+    'onPressOut',
+    'onPress',
+    'onFocus',
+  ]);
+});
+
+test('fireEvent.longPress', () => {
+  const onLongPressMock = jest.fn();
+  const text = 'Fireevent longpress';
+  const { getByText } = render(
+    <OnPressComponent onLongPress={onLongPressMock} text={text} />
+  );
+
+  fireEvent.longPress(getByText(text));
+
+  expect(onLongPressMock).toHaveBeenCalled();
+});
+
+test('fireEvent.longPress all events', () => {
+  const callOrder = [];
+  const onPressInMock = jest.fn(() => callOrder.push('onPressIn'));
+  const onLongPressMock = jest.fn(() => callOrder.push('onLongPress'));
+  const onPressOutMock = jest.fn(() => callOrder.push('onPressOut'));
+  const onPressMock = jest.fn();
+  const onFocusMock = jest.fn(() => callOrder.push('onFocus'));
+  const text = 'Fireevent longpress';
+  const { getByText } = render(
+    <OnPressComponent
+      onPress={onPressMock}
+      onLongPress={onLongPressMock}
+      onPressIn={onPressInMock}
+      onPressOut={onPressOutMock}
+      onFocus={onFocusMock}
+      text={text}
+    />
+  );
+
+  fireEvent.longPress(getByText(text));
+
+  expect(onPressInMock).toHaveBeenCalled();
+  expect(onLongPressMock).toHaveBeenCalled();
+  expect(onPressOutMock).toHaveBeenCalled();
+  expect(onPressMock).not.toHaveBeenCalled();
+  expect(onFocusMock).toHaveBeenCalled();
+  expect(callOrder).toStrictEqual([
+    'onPressIn',
+    'onLongPress',
+    'onPressOut',
+    'onFocus',
+  ]);
+});
+
 test('fireEvent.scroll', () => {
   const onScrollMock = jest.fn();
   const eventData = {

src/fireEvent.js

@@ -5,6 +5,10 @@ const isHostElement = (element?: ReactTestInstance) => {
   return typeof element?.type === 'string';
 };
 
+const isFocused = (element?: ReactTestInstance) => {
+  return element?._component?.isFocused?.();
+};
+
 const isTextInput = (element?: ReactTestInstance) => {
   const { TextInput } = require('react-native');
   return element?.type === TextInput;
@@ -105,8 +109,27 @@ const invokeEvent = (
 const toEventHandlerName = (eventName: string) =>
   `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`;
 
-const pressHandler = (element: ReactTestInstance): void =>
-  invokeEvent(element, 'press', pressHandler);
+const pressHandler = (
+  element: ReactTestInstance,
+  isLongPress: boolean
+): void => {
+  invokeEvent(element, 'pressIn', pressHandler);
+  if (isLongPress) {
+    invokeEvent(element, 'longPress', pressHandler);
+    invokeEvent(element, 'pressOut', pressHandler);
+  } else {
+    invokeEvent(element, 'pressOut', pressHandler);
+    invokeEvent(element, 'press', pressHandler);
+  }
+
+  if (!isFocused(element)) {
+    invokeEvent(element, 'focus', pressHandler);
+  }
+};
+
+const longPressHandler = (element: ReactTestInstance): void =>
+  pressHandler(element, true);
+
 const changeTextHandler = (
   element: ReactTestInstance,
   ...data: Array<any>
@@ -121,6 +144,7 @@ const fireEvent = (
 ): void => invokeEvent(element, eventName, fireEvent, ...data);
 
 fireEvent.press = pressHandler;
+fireEvent.longPress = longPressHandler;
 fireEvent.changeText = changeTextHandler;
 fireEvent.scroll = scrollHandler;