Add exclusive test

Author: m-bert

apps/common-app/src/e2e_screens/relations/Exclusive.tsx

@@ -0,0 +1,83 @@
+import { useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  GestureDetector,
+  useExclusiveGestures,
+  useTapGesture,
+} from 'react-native-gesture-handler';
+
+import TestingScreen from '../TestingScreen';
+import { CallbackIDs } from '../utils';
+
+export default function ExclusiveScreen() {
+  const [text, setText] = useState('');
+
+  const tapCallbacks = useRef(new Set<string>());
+  const doubleTapCallbacks = useRef(new Set<string>());
+
+  const doubleTapGesture = useTapGesture({
+    numberOfTaps: 2,
+    onBegin: () => {
+      doubleTapCallbacks.current.add(CallbackIDs.onBegin);
+    },
+    onActivate: () => {
+      doubleTapCallbacks.current.add(CallbackIDs.onActivate);
+    },
+    onDeactivate: () => {
+      doubleTapCallbacks.current.add(CallbackIDs.onDeactivate);
+    },
+    onFinalize: () => {
+      doubleTapCallbacks.current.add(CallbackIDs.onFinalize);
+    },
+    runOnJS: true,
+  });
+
+  const tapGesture = useTapGesture({
+    onBegin: () => {
+      tapCallbacks.current.add(CallbackIDs.onBegin);
+    },
+    onActivate: () => {
+      tapCallbacks.current.add(CallbackIDs.onActivate);
+    },
+    onDeactivate: () => {
+      tapCallbacks.current.add(CallbackIDs.onDeactivate);
+    },
+    onFinalize: () => {
+      tapCallbacks.current.add(CallbackIDs.onFinalize);
+    },
+    runOnJS: true,
+  });
+
+  const g = useExclusiveGestures(doubleTapGesture, tapGesture);
+
+  return (
+    <TestingScreen
+      text={text}
+      buttonCallback={() => {
+        const tapCallbacksText = Array.from(tapCallbacks.current).join('');
+        const doubleTapCallbacksText = Array.from(
+          doubleTapCallbacks.current
+        ).join('');
+
+        setText(
+          `{DoubleTap: ${doubleTapCallbacksText}, Tap: ${tapCallbacksText}}`
+        );
+
+        tapCallbacks.current.clear();
+        doubleTapCallbacks.current.clear();
+      }}>
+      <GestureDetector gesture={g}>
+        <View style={styles.gestureBox} testID="exclusive-box" />
+      </GestureDetector>
+    </TestingScreen>
+  );
+}
+
+const styles = StyleSheet.create({
+  gestureBox: {
+    width: 120,
+    height: 120,
+    borderRadius: 20,
+    backgroundColor: '#4ecdc4',
+  },
+});

apps/common-app/src/e2e_screens/utils.ts

@@ -6,6 +6,7 @@ export const TestScreens = {
   Pinch: '[E2E] Pinch',
   Rotation: '[E2E] Rotation',
   Competing: '[E2E] Competing',
+  Exclusive: '[E2E] Exclusive',
 };
 
 export const CallbackIDs = {

apps/common-app/src/new_api/index.tsx

@@ -6,6 +6,7 @@ import PinchE2E from '../e2e_screens/gestures/Pinch';
 import RotationE2E from '../e2e_screens/gestures/Rotation';
 import TapE2E from '../e2e_screens/gestures/Tap';
 import CompetingE2E from '../e2e_screens/relations/Competing';
+import ExclusiveE2E from '../e2e_screens/relations/Exclusive';
 import { TestScreens } from '../e2e_screens/utils';
 import EmptyExample from '../empty';
 import CameraExample from './complicated/camera';
@@ -152,6 +153,7 @@ export const NEW_EXAMPLES: ExamplesSection[] = [
       { name: TestScreens.LongPress, component: LongPressE2E },
       { name: TestScreens.Fling, component: FlingE2E },
       { name: TestScreens.Competing, component: CompetingE2E },
+      { name: TestScreens.Exclusive, component: ExclusiveE2E },
     ],
   },
 ];

apps/expo-example/e2e/__tests__/all.test.ts

@@ -5,6 +5,7 @@ import { pinchTests } from '../suites/gestures/pinch';
 import { rotationTests } from '../suites/gestures/rotation';
 import { tapTests } from '../suites/gestures/tap';
 import { competingTests } from '../suites/relations/competing';
+import { exclusiveTests } from '../suites/relations/exclusive';
 
 tapTests();
 pinchTests();
@@ -13,3 +14,4 @@ longPressTests();
 rotationTests();
 panTests();
 competingTests();
+exclusiveTests();

apps/expo-example/e2e/__tests__/all_wo_argent.test.ts

@@ -3,9 +3,11 @@ import { longPressTests } from '../suites/gestures/long_press';
 import { panTests } from '../suites/gestures/pan';
 import { tapTests } from '../suites/gestures/tap';
 import { competingTests } from '../suites/relations/competing';
+import { exclusiveTests } from '../suites/relations/exclusive';
 
 tapTests();
 flingTests();
 longPressTests();
 panTests();
 competingTests();
+exclusiveTests();

apps/expo-example/e2e/__tests__/relations/exclusive.test.ts

@@ -0,0 +1,3 @@
+import { exclusiveTests } from '../../suites/relations/exclusive';
+
+exclusiveTests();

apps/expo-example/e2e/suites/relations/exclusive.ts

@@ -0,0 +1,33 @@
+// eslint-disable-next-line import-x/no-extraneous-dependencies
+import { beforeAll, describe } from '@jest/globals';
+import { by, element, expect } from 'detox';
+
+import { CB, navigateTo, TestScreens } from '../../utils';
+
+export function exclusiveTests() {
+  describe('test exclusive gestures (tap + double tap)', () => {
+    beforeAll(async () => {
+      await navigateTo(TestScreens.Exclusive);
+    });
+
+    const gestureBox = element(by.id('exclusive-box'));
+    const stateIndicator = element(by.id('state-indicator'));
+    const extractButton = element(by.id('extract-button'));
+
+    test('Should activate only tap gesture on single tap', async () => {
+      await gestureBox.tap();
+      await extractButton.tap();
+      await expect(stateIndicator).toHaveText(
+        `{DoubleTap: ${CB.B}${CB.F}, Tap: ${CB.B}${CB.A}${CB.D}${CB.F}}`
+      );
+    });
+
+    test('Should activate only double tap gesture on double tap', async () => {
+      await gestureBox.multiTap(2);
+      await extractButton.tap();
+      await expect(stateIndicator).toHaveText(
+        `{DoubleTap: ${CB.B}${CB.A}${CB.D}${CB.F}, Tap: ${CB.B}${CB.F}}`
+      );
+    });
+  });
+}