Incubator.Dialog - fix test (add mocks) (#2551)

* Incubator.Dialog - fix test (add mocks)

* Change implementation of the Object.defineProperty mock

Author: M-i-k-e-l

GestureDetectorMock.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {TouchableOpacity} from 'react-native';
+
+type Props = {
+  gesture: any;
+  children: any;
+};
+
+export class GestureDetectorMock extends React.Component<Props> {
+  render() {
+    switch (this.props.gesture.type) {
+      case 'tap':
+        return (
+          <TouchableOpacity
+            onPress={() => {
+              this.props.gesture._handlers.onTouchesDown();
+              this.props.gesture._handlers.onEnd();
+              this.props.gesture._handlers.onFinalize();
+            }}
+          >
+            {this.props.children}
+          </TouchableOpacity>
+        );
+      case 'pan':
+        return (
+          <TouchableOpacity
+            onPress={() => {
+              this.props.gesture._handlers.onStart({
+                absoluteX: 0,
+                absoluteY: 0,
+                translationX: 0,
+                translationY: 0,
+                velocityX: 0,
+                velocityY: 0,
+                x: 0,
+                y: 0
+              });
+              this.props.gesture._handlers.onUpdate({
+                absoluteX: 0,
+                absoluteY: 0,
+                translationX: 0,
+                translationY: 0,
+                velocityX: 0,
+                velocityY: 0,
+                x: 0,
+                y: 0
+              });
+              this.props.gesture._handlers.onEnd({
+                absoluteX: 0,
+                absoluteY: 0,
+                translationX: 0,
+                translationY: 0,
+                velocityX: 0,
+                velocityY: 0,
+                x: 0,
+                y: 0
+              });
+            }}
+          >
+            {this.props.children}
+          </TouchableOpacity>
+        );
+      default:
+        throw new Error(`Unhandled gesture of type: ${this.props.gesture.type}`);
+    }
+  }
+}

jest-setup.js

@@ -1,4 +1,21 @@
 import {NativeModules, AccessibilityInfo, Animated} from 'react-native';
+// ========= Mock Object.defineProperty to always allow overriding =========
+const originalDefineProperty = Object.defineProperty;
+Object.defineProperty = (obj, prop, desc) => {
+  try {
+    return originalDefineProperty(obj, prop, {...desc, configurable: true});
+  } catch (e) {
+    return originalDefineProperty(obj, prop, desc);
+  }
+};
+Object.defineProperties = (obj, props) => {
+  Object.keys(props).forEach(key => {
+    Object.defineProperty(obj, key, props[key]);
+  });
+  return obj;
+};
+// =========================================================================
+
 global._UILIB_TESTING = true;
 
 NativeModules.StatusBarManager = {getHeight: jest.fn()};
@@ -21,6 +38,26 @@ jest.mock('react-native-gesture-handler',
   () => {
     jest.requireActual('react-native-gesture-handler/jestSetup');
     const GestureHandler = jest.requireActual('react-native-gesture-handler');
+    GestureHandler.Gesture.Tap = () => {
+      const TapMock = {
+        _handlers: {}
+      };
+
+      const getDefaultMockedHandler = handlerName => handler => {
+        if (typeof handler === 'function') {
+          TapMock._handlers[handlerName] = handler;
+        }
+        return TapMock;
+      };
+
+      TapMock.type = 'tap';
+      TapMock.maxDuration = getDefaultMockedHandler('maxDuration');
+      TapMock.onEnd = getDefaultMockedHandler('onEnd');
+      TapMock.onFinalize = getDefaultMockedHandler('onFinalize');
+      TapMock.onTouchesDown = getDefaultMockedHandler('onTouchesDown');
+      return TapMock;
+    };
+
     GestureHandler.Gesture.Pan = () => {
       const PanMock = {
         _handlers: {}
@@ -33,13 +70,22 @@ jest.mock('react-native-gesture-handler',
         return PanMock;
       };
 
+      PanMock.type = 'pan';
       PanMock.onStart = getDefaultMockedHandler('onStart');
       PanMock.onUpdate = getDefaultMockedHandler('onUpdate');
       PanMock.onEnd = getDefaultMockedHandler('onEnd');
-      PanMock.prepare = jest.fn();
+      PanMock.initialize = jest.fn();
+      PanMock.toGestureArray = jest.fn(() => {
+        return [PanMock];
+      });
       return PanMock;
     };
 
+    try {
+      Object.defineProperty(GestureHandler, 'GestureDetector', {
+        value: require('./GestureDetectorMock').GestureDetectorMock
+      });
+    } catch {}
     return GestureHandler;
   },
   {virtual: true});

src/incubator/Dialog/__tests__/index.spec.tsx

@@ -2,7 +2,7 @@ import React, {useCallback, useEffect, useState} from 'react';
 import Button from '../../../components/button';
 import View from '../../../components/view';
 import Dialog from '../index';
-import {/* ButtonDriver,  */ComponentDriver} from '../../../testkit';
+import {ButtonDriver, ComponentDriver} from '../../../testkit';
 
 const onDismiss = () => {};
 
@@ -49,13 +49,13 @@ describe('Incubator.Dialog', () => {
     const component = _TestCase({onDismiss});
     const dialogDriver = new ComponentDriver({component, testID: 'dialog'});
     expect(await dialogDriver.exists()).toBeFalsy();
-    // const openButtonDriver = new ButtonDriver({component, testID: 'openButton'});
-    // await openButtonDriver.press();
-    // expect(await dialogDriver.exists()).toBeTruthy();
-    // expect(onDismiss).toHaveBeenCalledTimes(0);
-    // const closeButtonDriver = new ButtonDriver({component, testID: 'closeButton'});
-    // await closeButtonDriver.press();
-    // expect(await dialogDriver.exists()).toBeFalsy();
-    // expect(onDismiss).toHaveBeenCalledTimes(1);
+    const openButtonDriver = new ButtonDriver({component, testID: 'openButton'});
+    await openButtonDriver.press();
+    expect(await dialogDriver.exists()).toBeTruthy();
+    expect(onDismiss).toHaveBeenCalledTimes(0);
+    const closeButtonDriver = new ButtonDriver({component, testID: 'closeButton'});
+    await closeButtonDriver.press();
+    expect(await dialogDriver.exists()).toBeFalsy();
+    expect(onDismiss).toHaveBeenCalledTimes(1);
   });
 });