Incubator.Dialog - allow headless testing mocking (#2443)

* Incubator.Dialog - allow headless testing mocking

* Rename

Author: M-i-k-e-l

jest-setup.js

@@ -1,4 +1,5 @@
 import {NativeModules, AccessibilityInfo} from 'react-native';
+global._UILIB_TESTING = true;
 
 NativeModules.StatusBarManager = {getHeight: jest.fn()};
 jest.spyOn(AccessibilityInfo, 'isScreenReaderEnabled').mockImplementation(() => new Promise.resolve(false));
@@ -17,9 +18,30 @@ jest.mock('react-native-reanimated', () => {
 });
 global.__reanimatedWorkletInit = jest.fn();
 jest.mock('react-native-gesture-handler',
-  () => ({
-    FlatList: require('react-native').FlatList
-  }),
+  () => {
+    jest.requireActual('react-native-gesture-handler/jestSetup');
+    const GestureHandler = jest.requireActual('react-native-gesture-handler');
+    GestureHandler.Gesture.Pan = () => {
+      const PanMock = {
+        _handlers: {}
+      };
+
+      const getDefaultMockedHandler = handlerName => handler => {
+        if (typeof handler === 'function') {
+          PanMock._handlers[handlerName] = handler;
+        }
+        return PanMock;
+      };
+
+      PanMock.onStart = getDefaultMockedHandler('onStart');
+      PanMock.onUpdate = getDefaultMockedHandler('onUpdate');
+      PanMock.onEnd = getDefaultMockedHandler('onEnd');
+      PanMock.prepare = jest.fn();
+      return PanMock;
+    };
+
+    return GestureHandler;
+  },
   {virtual: true});
 jest.mock('@react-native-picker/picker', () => ({Picker: {Item: {}}}));
 jest.mock('react-native', () => {

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

@@ -0,0 +1,61 @@
+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';
+
+const onDismiss = () => {};
+
+const defaultProps = {
+  testID: 'dialog',
+  useSafeArea: true,
+  onDismiss,
+  bottom: true,
+  centerH: true
+};
+
+const TestCase = props => {
+  const [visible, setVisible] = useState(props.visible);
+
+  useEffect(() => {
+    setVisible(props.visible);
+  }, [props.visible]);
+
+  const openDialog = useCallback(() => {
+    setVisible(true);
+  }, []);
+
+  const closeDialog = useCallback(() => {
+    setVisible(false);
+  }, []);
+
+  return (
+    <View>
+      <Dialog {...defaultProps} {...props} visible={visible}>
+        <View height={300}>
+          <Button testID={'closeButton'} flex onPress={closeDialog}/>
+        </View>
+      </Dialog>
+      <Button testID={'openButton'} flex onPress={openDialog}/>
+    </View>
+  );
+};
+
+const _TestCase = props => <TestCase {...props}/>;
+
+describe('Incubator.Dialog', () => {
+  it('Incubator.Dialog should exist only if visible', async () => {
+    const onDismiss = jest.fn();
+    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);
+  });
+});

src/incubator/Dialog/index.tsx

@@ -17,6 +17,7 @@ import {
   PanGestureHandlerEventPayload
 } from 'react-native-gesture-handler';
 import {Spacings, Colors, BorderRadiuses} from '../../style';
+import {useDidUpdate} from '../../hooks';
 import {asBaseComponent} from '../../commons/new';
 import View from '../../components/view';
 import Modal from '../../components/modal';
@@ -108,7 +109,7 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible, wasMeasured]);
 
-  useEffect(() => {
+  useDidUpdate(() => {
     if (wasMeasured) {
       if (modalVisibility) {
         open();
@@ -216,6 +217,10 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     <View testID={`${testID}.overlayFadingBackground`} absF reanimated style={overlayStyle} pointerEvents="none"/>
   );
 
+  if (!modalVisibility) {
+    return null;
+  }
+
   return (
     <Modal
       transparent

src/incubator/hooks/useHiddenLocation.ts

@@ -10,13 +10,16 @@ export interface HiddenLocation extends HiddenLocationRecord {
   wasMeasured: boolean;
 }
 
+// Adding this for headless tests that are not triggering onLayout
+const wasMeasuredDefaultValue = global._UILIB_TESTING ?? false;
+
 export default function useHiddenLocation<T extends View>() {
   const getHiddenLocation = ({
     x = 0,
     y = 0,
     width = Constants.screenWidth,
     height = Constants.windowHeight,
-    wasMeasured = false
+    wasMeasured = wasMeasuredDefaultValue
   }): HiddenLocation => {
     return {
       up: -y - height,
@@ -30,7 +33,7 @@ export default function useHiddenLocation<T extends View>() {
   const [hiddenLocation, setHiddenLocation] = useState<HiddenLocation>(getHiddenLocation({}));
   const ref = useRef<T>();
   const layoutData = useRef<LayoutRectangle>();
-  const wasMeasured = useRef(false);
+  const wasMeasured = useRef(wasMeasuredDefaultValue);
 
   const measure = useCallback(() => {
     if (ref.current && layoutData.current && layoutData.current.width > 0 && layoutData.current.height > 0) {

src/testkit/drivers/TestingLibraryDriver.tsx

@@ -33,10 +33,12 @@ export class TestingLibraryDriver implements UniDriver {
     if (!this.renderAPI) {
       throw new SelectorChainingException();
     }
-    const instances = await this.renderAPI
-      .findAllByTestId(testId)
-      .catch(() => []);
-    return new TestingLibraryDriver(instances);
+    const instances = await this.renderAPI.queryAllByTestId(testId);
+    if (instances) {
+      return Promise.resolve(new TestingLibraryDriver(instances));
+    } else {
+      return Promise.reject(new NoSelectorException());
+    }
   };
 
   selectorByText = async (text: string): Promise<UniDriver> => {

typings/global.d.ts

@@ -0,0 +1,4 @@
+declare namespace globalThis {
+  // eslint-disable-next-line no-var
+  var _UILIB_TESTING: boolean;
+}