From 631e826042a19d9e19a51dc27c7a945de6570e61 Mon Sep 17 00:00:00 2001 From: Dimitar Nestorov <8790386+DimitarNestorov@users.noreply.github.com> Date: Mon, 15 May 2023 17:43:46 +0300 Subject: [PATCH] chore: pass gesture responder event in FAB.Group `onLongPress` (#3891) --- src/components/FAB/AnimatedFAB.tsx | 2 +- src/components/FAB/FAB.tsx | 2 +- src/components/FAB/FABGroup.tsx | 6 +- src/components/__tests__/AnimatedFAB.test.tsx | 36 +++++++++++- src/components/__tests__/FAB.test.tsx | 29 +++++++++- src/components/__tests__/FABGroup.test.tsx | 56 +++++++++++++++++++ 6 files changed, 124 insertions(+), 7 deletions(-) diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx index 8bb604c8d6..7a553cf039 100644 --- a/src/components/FAB/AnimatedFAB.tsx +++ b/src/components/FAB/AnimatedFAB.tsx @@ -78,7 +78,7 @@ export type Props = $Omit<$RemoveChildren, 'mode'> & { /** * Function to execute on long press. */ - onLongPress?: () => void; + onLongPress?: (e: GestureResponderEvent) => void; /** * The number of milliseconds a user must touch the element before executing `onLongPress`. */ diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx index 2c7e0cfd41..f12f1c0570 100644 --- a/src/components/FAB/FAB.tsx +++ b/src/components/FAB/FAB.tsx @@ -96,7 +96,7 @@ export type Props = $Omit<$RemoveChildren, 'mode'> & { /** * Function to execute on long press. */ - onLongPress?: () => void; + onLongPress?: (e: GestureResponderEvent) => void; /** * The number of milliseconds a user must touch the element before executing `onLongPress`. */ diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx index 7b1b0b6b41..e4fe3ea966 100644 --- a/src/components/FAB/FABGroup.tsx +++ b/src/components/FAB/FABGroup.tsx @@ -77,7 +77,7 @@ export type Props = { /** * Function to execute on long pressing the `FAB`. */ - onLongPress?: () => void; + onLongPress?: (e: GestureResponderEvent) => void; /** * Makes actions stack appear on long press instead of on press. */ @@ -442,9 +442,9 @@ const FABGroup = ({ toggle(); } }} - onLongPress={() => { + onLongPress={(e) => { if (!open || enableLongPressWhenStackOpened) { - onLongPress?.(); + onLongPress?.(e); if (toggleStackOnLongPress) { toggle(); } diff --git a/src/components/__tests__/AnimatedFAB.test.tsx b/src/components/__tests__/AnimatedFAB.test.tsx index e392eec3ba..77ac5cb276 100644 --- a/src/components/__tests__/AnimatedFAB.test.tsx +++ b/src/components/__tests__/AnimatedFAB.test.tsx @@ -3,7 +3,8 @@ import * as React from 'react'; import { Animated, StyleSheet } from 'react-native'; -import { render } from '@testing-library/react-native'; +import { fireEvent, render } from '@testing-library/react-native'; +import { act } from 'react-test-renderer'; import { MD3Colors } from '../../styles/themes/v3/tokens'; import AnimatedFAB from '../FAB/AnimatedFAB'; @@ -144,3 +145,36 @@ it('renders correct elevation value for shadow views', () => { elevation: 3, }); }); + +describe('AnimatedFAB events', () => { + it('onPress passes event', () => { + const onPress = jest.fn(); + const { getByTestId } = render( + + ); + + act(() => { + fireEvent(getByTestId('animated-fab'), 'onPress', { key: 'value' }); + }); + + expect(onPress).toHaveBeenCalledWith({ key: 'value' }); + }); + + it('onLongPress passes event', () => { + const onLongPress = jest.fn(); + const { getByTestId } = render( + + ); + + act(() => { + fireEvent(getByTestId('animated-fab'), 'onLongPress', { key: 'value' }); + }); + + expect(onLongPress).toHaveBeenCalledWith({ key: 'value' }); + }); +}); diff --git a/src/components/__tests__/FAB.test.tsx b/src/components/__tests__/FAB.test.tsx index 8e8dcb644d..aca4f027cb 100644 --- a/src/components/__tests__/FAB.test.tsx +++ b/src/components/__tests__/FAB.test.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { Animated, StyleSheet } from 'react-native'; -import { render } from '@testing-library/react-native'; +import { fireEvent, render } from '@testing-library/react-native'; import color from 'color'; +import { act } from 'react-test-renderer'; import { getTheme } from '../../core/theming'; import { black, white } from '../../styles/themes/v2/colors'; @@ -418,3 +419,29 @@ it('animated value changes correctly', () => { transform: [{ scale: 1.5 }], }); }); + +describe('FAB events', () => { + it('onPress passes event', () => { + const onPress = jest.fn(); + const { getByText } = render(); + + act(() => { + fireEvent(getByText('Add items'), 'onPress', { key: 'value' }); + }); + + expect(onPress).toHaveBeenCalledWith({ key: 'value' }); + }); + + it('onLongPress passes event', () => { + const onLongPress = jest.fn(); + const { getByText } = render( + + ); + + act(() => { + fireEvent(getByText('Add items'), 'onLongPress', { key: 'value' }); + }); + + expect(onLongPress).toHaveBeenCalledWith({ key: 'value' }); + }); +}); diff --git a/src/components/__tests__/FABGroup.test.tsx b/src/components/__tests__/FABGroup.test.tsx index 93b82ce0e4..68d1790df4 100644 --- a/src/components/__tests__/FABGroup.test.tsx +++ b/src/components/__tests__/FABGroup.test.tsx @@ -221,6 +221,62 @@ it('animated value changes correctly', () => { }); }); +describe('FAB.Group events', () => { + it('onPress passes event', () => { + const onPress = jest.fn(); + const { getByText } = render( + + ); + + act(() => { + fireEvent(getByText('Stack test'), 'onPress', { key: 'value' }); + }); + + expect(onPress).toHaveBeenCalledWith({ key: 'value' }); + }); + + it('onLongPress passes event', () => { + const onLongPress = jest.fn(); + const { getByText } = render( + + ); + + act(() => { + fireEvent(getByText('Stack test'), 'onLongPress', { key: 'value' }); + }); + + expect(onLongPress).toHaveBeenCalledWith({ key: 'value' }); + }); +}); + describe('Toggle Stack visibility', () => { it('toggles stack visibility on press', () => { const onStateChange = jest.fn();