diff --git a/experiments-app/src/experiments.ts b/experiments-app/src/experiments.ts index fdd485148..af889cfb1 100644 --- a/experiments-app/src/experiments.ts +++ b/experiments-app/src/experiments.ts @@ -1,4 +1,5 @@ import { AccessibilityScreen } from './screens/Accessibility'; +import { PressEvents } from './screens/PressEvents'; import { TextInputEventPropagation } from './screens/TextInputEventPropagation'; import { TextInputEvents } from './screens/TextInputEvents'; import { ScrollViewEvents } from './screens/ScrollViewEvents'; @@ -13,6 +14,11 @@ export const experiments = [ title: 'Accessibility', component: AccessibilityScreen, }, + { + key: 'PressEvents', + title: 'Press Events', + component: PressEvents, + }, { key: 'TextInputEvents', title: 'TextInput Events', diff --git a/experiments-app/src/screens/PressEvents.tsx b/experiments-app/src/screens/PressEvents.tsx new file mode 100644 index 000000000..a8ba3edcc --- /dev/null +++ b/experiments-app/src/screens/PressEvents.tsx @@ -0,0 +1,82 @@ +import * as React from 'react'; +import { + StyleSheet, + SafeAreaView, + Text, + TextInput, + View, + Pressable, + TouchableOpacity, +} from 'react-native'; +import { nativeEventLogger, logEvent } from '../utils/helpers'; + +export function PressEvents() { + const [value, setValue] = React.useState(''); + + const handleChangeText = (value: string) => { + setValue(value); + logEvent('changeText', value); + }; + + return ( + + + + + + + Text + + + + + Pressable + + + + + Pressable + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + wrapper: { + padding: 20, + backgroundColor: 'yellow', + }, + textInput: { + backgroundColor: 'white', + margin: 20, + padding: 8, + fontSize: 18, + borderWidth: 1, + borderColor: 'grey', + }, +}); diff --git a/experiments-app/src/utils/helpers.ts b/experiments-app/src/utils/helpers.ts index 5993a46c4..1366177b7 100644 --- a/experiments-app/src/utils/helpers.ts +++ b/experiments-app/src/utils/helpers.ts @@ -1,5 +1,7 @@ import { NativeSyntheticEvent } from 'react-native/types'; +let lastEventTimeStamp: number | null = null; + export function nativeEventLogger(name: string) { return (event: NativeSyntheticEvent) => { logEvent(name, event?.nativeEvent); @@ -14,5 +16,6 @@ export function customEventLogger(name: string) { export function logEvent(name: string, ...args: unknown[]) { // eslint-disable-next-line no-console - console.log(`Event: ${name}`, ...args); + console.log(`[${Date.now() - (lastEventTimeStamp ?? Date.now())}ms] Event: ${name}`, ...args); + lastEventTimeStamp = Date.now(); } diff --git a/src/__tests__/render.test.tsx b/src/__tests__/render.test.tsx index 3127963d7..fae79012b 100644 --- a/src/__tests__/render.test.tsx +++ b/src/__tests__/render.test.tsx @@ -249,5 +249,5 @@ test('supports legacy rendering', () => { test('supports concurrent rendering', () => { render(, { concurrentRoot: true }); - expect(screen.root).toBeDefined(); + expect(screen.root).toBeOnTheScreen(); }); diff --git a/src/fire-event.ts b/src/fire-event.ts index 98c7745a3..0f0287f5e 100644 --- a/src/fire-event.ts +++ b/src/fire-event.ts @@ -7,7 +7,7 @@ import { ScrollViewProps, } from 'react-native'; import act from './act'; -import { isHostElement } from './helpers/component-tree'; +import { isElementMounted, isHostElement } from './helpers/component-tree'; import { isHostScrollView, isHostTextInput } from './helpers/host-component-names'; import { isPointerEventEnabled } from './helpers/pointer-events'; import { isTextInputEditable } from './helpers/text-input'; @@ -121,6 +121,10 @@ type EventName = StringWithAutocomplete< >; function fireEvent(element: ReactTestInstance, eventName: EventName, ...data: unknown[]) { + if (!isElementMounted(element)) { + return; + } + setNativeStateIfNeeded(element, eventName, data[0]); const handler = findEventHandler(element, eventName); diff --git a/src/helpers/component-tree.ts b/src/helpers/component-tree.ts index 8387278b5..4a4a00897 100644 --- a/src/helpers/component-tree.ts +++ b/src/helpers/component-tree.ts @@ -1,5 +1,5 @@ import { ReactTestInstance } from 'react-test-renderer'; - +import { screen } from '../screen'; /** * ReactTestInstance referring to host element. */ @@ -13,6 +13,10 @@ export function isHostElement(element?: ReactTestInstance | null): element is Ho return typeof element?.type === 'string'; } +export function isElementMounted(element: ReactTestInstance | null) { + return getUnsafeRootElement(element) === screen.UNSAFE_root; +} + /** * Returns first host ancestor for given element. * @param element The element start traversing from. diff --git a/src/user-event/press/__tests__/__snapshots__/longPress.test.tsx.snap b/src/user-event/press/__tests__/__snapshots__/longPress.test.tsx.snap index fa31b7a34..b1c8a3fb2 100644 --- a/src/user-event/press/__tests__/__snapshots__/longPress.test.tsx.snap +++ b/src/user-event/press/__tests__/__snapshots__/longPress.test.tsx.snap @@ -34,3 +34,98 @@ exports[`userEvent.longPress with fake timers calls onLongPress if the delayLong }, ] `; + +exports[`userEvent.longPress with fake timers works on Pressable 1`] = ` +[ + { + "name": "pressIn", + "payload": { + "currentTarget": { + "measure": [Function], + }, + "dispatchConfig": { + "registrationName": "onResponderGrant", + }, + "isDefaultPrevented": [Function], + "isPersistent": [Function], + "isPropagationStopped": [Function], + "nativeEvent": { + "changedTouches": [], + "identifier": 0, + "locationX": 0, + "locationY": 0, + "pageX": 0, + "pageY": 0, + "target": 0, + "timestamp": 0, + "touches": [], + }, + "persist": [Function], + "preventDefault": [Function], + "stopPropagation": [Function], + "target": {}, + "timeStamp": 0, + }, + }, + { + "name": "longPress", + "payload": { + "currentTarget": { + "measure": [Function], + }, + "dispatchConfig": { + "registrationName": "onResponderGrant", + }, + "isDefaultPrevented": [Function], + "isPersistent": [Function], + "isPropagationStopped": [Function], + "nativeEvent": { + "changedTouches": [], + "identifier": 0, + "locationX": 0, + "locationY": 0, + "pageX": 0, + "pageY": 0, + "target": 0, + "timestamp": 0, + "touches": [], + }, + "persist": [Function], + "preventDefault": [Function], + "stopPropagation": [Function], + "target": {}, + "timeStamp": 0, + }, + }, + { + "name": "pressOut", + "payload": { + "currentTarget": { + "measure": [Function], + }, + "dispatchConfig": { + "registrationName": "onResponderRelease", + }, + "isDefaultPrevented": [Function], + "isPersistent": [Function], + "isPropagationStopped": [Function], + "nativeEvent": { + "changedTouches": [], + "identifier": 0, + "locationX": 0, + "locationY": 0, + "pageX": 0, + "pageY": 0, + "target": 0, + "timestamp": 500, + "touches": [], + }, + "persist": [Function], + "preventDefault": [Function], + "stopPropagation": [Function], + "target": {}, + "timeStamp": 0, + }, + }, +] +`; diff --git a/src/user-event/press/__tests__/__snapshots__/press.test.tsx.snap b/src/user-event/press/__tests__/__snapshots__/press.test.tsx.snap index ceb2803f3..d4dc3df36 100644 --- a/src/user-event/press/__tests__/__snapshots__/press.test.tsx.snap +++ b/src/user-event/press/__tests__/__snapshots__/press.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOut prop of touchable 1`] = ` +exports[`userEvent.press with fake timers works on Pressable 1`] = ` [ { "name": "pressIn", @@ -33,7 +33,7 @@ exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOu }, }, { - "name": "press", + "name": "pressOut", "payload": { "currentTarget": { "measure": [Function], @@ -52,7 +52,7 @@ exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOu "pageX": 0, "pageY": 0, "target": 0, - "timestamp": 0, + "timestamp": 130, "touches": [], }, "persist": [Function], @@ -63,7 +63,7 @@ exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOu }, }, { - "name": "pressOut", + "name": "press", "payload": { "currentTarget": { "measure": [Function], @@ -82,7 +82,7 @@ exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOu "pageX": 0, "pageY": 0, "target": 0, - "timestamp": 0, + "timestamp": 130, "touches": [], }, "persist": [Function], diff --git a/src/user-event/press/__tests__/longPress.real-timers.test.tsx b/src/user-event/press/__tests__/longPress.real-timers.test.tsx index 928e5b6d3..4c693830c 100644 --- a/src/user-event/press/__tests__/longPress.real-timers.test.tsx +++ b/src/user-event/press/__tests__/longPress.real-timers.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { Pressable, Text } from 'react-native'; -import { render, screen } from '../../../pure'; +import { Pressable, Text, TouchableHighlight, TouchableOpacity } from 'react-native'; +import { createEventLogger, getEventsNames } from '../../../test-utils'; +import { render, screen } from '../../..'; import { userEvent } from '../..'; describe('userEvent.longPress with real timers', () => { @@ -9,6 +10,68 @@ describe('userEvent.longPress with real timers', () => { jest.restoreAllMocks(); }); + test('works on Pressable', async () => { + const { events, logEvent } = createEventLogger(); + const user = userEvent.setup(); + + render( + , + ); + + await user.longPress(screen.getByTestId('pressable')); + expect(getEventsNames(events)).toEqual(['pressIn', 'longPress', 'pressOut']); + }); + + test('works on TouchableOpacity', async () => { + const mockOnPress = jest.fn(); + + render( + + press me + , + ); + + await userEvent.longPress(screen.getByText('press me')); + expect(mockOnPress).toHaveBeenCalled(); + }); + + test('works on TouchableHighlight', async () => { + const mockOnPress = jest.fn(); + + render( + + press me + , + ); + + await userEvent.longPress(screen.getByText('press me')); + expect(mockOnPress).toHaveBeenCalled(); + }); + + test('works on Text', async () => { + const { events, logEvent } = createEventLogger(); + + render( + + press me + , + ); + + await userEvent.longPress(screen.getByText('press me')); + expect(getEventsNames(events)).toEqual(['pressIn', 'longPress', 'pressOut']); + }); + test('calls onLongPress if the delayLongPress is the default one', async () => { const mockOnLongPress = jest.fn(); const user = userEvent.setup(); diff --git a/src/user-event/press/__tests__/longPress.test.tsx b/src/user-event/press/__tests__/longPress.test.tsx index 3716446e7..bbf5d0582 100644 --- a/src/user-event/press/__tests__/longPress.test.tsx +++ b/src/user-event/press/__tests__/longPress.test.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { Pressable, Text } from 'react-native'; -import { render, screen } from '../../../pure'; +import { Pressable, Text, TouchableHighlight, TouchableOpacity } from 'react-native'; +import { createEventLogger, getEventsNames } from '../../../test-utils'; +import { render, screen } from '../../..'; import { userEvent } from '../..'; -import { createEventLogger } from '../../../test-utils'; describe('userEvent.longPress with fake timers', () => { beforeEach(() => { @@ -10,6 +10,69 @@ describe('userEvent.longPress with fake timers', () => { jest.setSystemTime(0); }); + test('works on Pressable', async () => { + const { events, logEvent } = createEventLogger(); + const user = userEvent.setup(); + + render( + , + ); + + await user.longPress(screen.getByTestId('pressable')); + expect(getEventsNames(events)).toEqual(['pressIn', 'longPress', 'pressOut']); + expect(events).toMatchSnapshot(); + }); + + test('works on TouchableOpacity', async () => { + const mockOnPress = jest.fn(); + + render( + + press me + , + ); + + await userEvent.longPress(screen.getByText('press me')); + expect(mockOnPress).toHaveBeenCalled(); + }); + + test('works on TouchableHighlight', async () => { + const mockOnPress = jest.fn(); + + render( + + press me + , + ); + + await userEvent.longPress(screen.getByText('press me')); + expect(mockOnPress).toHaveBeenCalled(); + }); + + test('works on Text', async () => { + const { events, logEvent } = createEventLogger(); + + render( + + press me + , + ); + + await userEvent.longPress(screen.getByText('press me')); + expect(getEventsNames(events)).toEqual(['pressIn', 'longPress', 'pressOut']); + }); + test('calls onLongPress if the delayLongPress is the default one', async () => { const { logEvent, events } = createEventLogger(); const user = userEvent.setup(); diff --git a/src/user-event/press/__tests__/press.real-timers.test.tsx b/src/user-event/press/__tests__/press.real-timers.test.tsx index 1ba53c27e..042b9eded 100644 --- a/src/user-event/press/__tests__/press.real-timers.test.tsx +++ b/src/user-event/press/__tests__/press.real-timers.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { + Button, Pressable, Text, TextInput, @@ -17,7 +18,7 @@ describe('userEvent.press with real timers', () => { jest.restoreAllMocks(); }); - test('calls onPressIn, onPress and onPressOut prop of touchable', async () => { + test('works on Pressable', async () => { const { events, logEvent } = createEventLogger(); const user = userEvent.setup(); @@ -30,9 +31,77 @@ describe('userEvent.press with real timers', () => { testID="pressable" />, ); + await user.press(screen.getByTestId('pressable')); + expect(getEventsNames(events)).toEqual(['pressIn', 'pressOut', 'press']); + }); + + test('works on TouchableOpacity', async () => { + const mockOnPress = jest.fn(); + + render( + + press me + , + ); - expect(getEventsNames(events)).toEqual(['pressIn', 'press', 'pressOut']); + await userEvent.press(screen.getByText('press me')); + expect(mockOnPress).toHaveBeenCalled(); + }); + + test('works on TouchableHighlight', async () => { + const mockOnPress = jest.fn(); + + render( + + press me + , + ); + + await userEvent.press(screen.getByText('press me')); + expect(mockOnPress).toHaveBeenCalled(); + }); + + test('works on Text', async () => { + const { events, logEvent } = createEventLogger(); + + render( + + press me + , + ); + + await userEvent.press(screen.getByText('press me')); + expect(getEventsNames(events)).toEqual(['pressIn', 'pressOut', 'press']); + }); + + test('works on TextInput', async () => { + const { events, logEvent } = createEventLogger(); + + render( + , + ); + + await userEvent.press(screen.getByPlaceholderText('email')); + expect(getEventsNames(events)).toEqual(['pressIn', 'pressOut']); + }); + + test('works on Button', async () => { + const { events, logEvent } = createEventLogger(); + + render(