add enqueueModalSizeUpdate to Fantom (#49862)

Summary:
Pull Request resolved: #49862

changelog: [internal]

add method enqueueModalSizeUpdate to allow for setting size of Modal.

Reviewed By: rshest

Differential Revision: D70696524

fbshipit-source-id: 9e22d95e62ee52a66f888503d070fcbff1307d21

packages/react-native-fantom/src/__tests__/Fantom-itest.js

@@ -15,7 +15,7 @@ import type {Root} from '..';
 
 import Fantom from '..';
 import * as React from 'react';
-import {ScrollView, Text, TextInput, View} from 'react-native';
+import {Modal, ScrollView, Text, TextInput, View} from 'react-native';
 import NativeFantom from 'react-native/src/private/testing/fantom/specs/NativeFantom';
 import ensureInstance from 'react-native/src/private/utilities/ensureInstance';
 import ReactNativeDocument from 'react-native/src/private/webapis/dom/nodes/ReactNativeDocument';
@@ -671,4 +671,72 @@ describe('Fantom', () => {
       expect(onLayout).toHaveBeenCalledTimes(1);
     });
   });
+  describe('enqueueModalSizeUpdate', () => {
+    it('throws error if called on node that is not <Modal />', () => {
+      const root = Fantom.createRoot();
+      let maybeNode;
+
+      Fantom.runTask(() => {
+        root.render(
+          <View
+            ref={node => {
+              maybeNode = node;
+            }}
+          />,
+        );
+      });
+
+      const element = ensureInstance(maybeNode, ReactNativeElement);
+
+      expect(() => {
+        Fantom.runOnUIThread(() => {
+          Fantom.enqueueModalSizeUpdate(element, {
+            width: 200,
+            height: 100,
+          });
+        });
+      }).toThrow(
+        'Exception in HostFunction: enqueueModalSizeUpdate() can only be called on <Modal />',
+      );
+    });
+
+    it('change size of <Modal />', () => {
+      const root = Fantom.createRoot();
+      let maybeModalNode;
+      let maybeViewNode;
+
+      Fantom.runTask(() => {
+        root.render(
+          <Modal
+            ref={(node: ?React.ElementRef<typeof Modal>) => {
+              maybeModalNode = node;
+            }}>
+            <View
+              style={{width: '50%', height: '25%'}}
+              ref={node => {
+                maybeViewNode = node;
+              }}
+            />
+          </Modal>,
+        );
+      });
+
+      const modalElement = ensureInstance(maybeModalNode, ReactNativeElement);
+
+      Fantom.runOnUIThread(() => {
+        Fantom.enqueueModalSizeUpdate(modalElement, {
+          width: 100,
+          height: 100,
+        });
+      });
+
+      Fantom.runWorkLoop();
+
+      const viewElement = ensureInstance(maybeViewNode, ReactNativeElement);
+
+      const boundingClientRect = viewElement.getBoundingClientRect();
+      expect(boundingClientRect.height).toBe(25);
+      expect(boundingClientRect.width).toBe(50);
+    });
+  });
 });

packages/react-native-fantom/src/index.js

@@ -237,6 +237,14 @@ function scrollTo(
   NativeFantom.scrollTo(shadowNode, options);
 }
 
+function enqueueModalSizeUpdate(
+  node: ReactNativeElement,
+  size: {width: number, height: number},
+) {
+  const shadowNode = getNativeNodeReference(node);
+  NativeFantom.enqueueModalSizeUpdate(shadowNode, size.width, size.height);
+}
+
 export const unstable_benchmark = Benchmark;
 
 type FantomConstants = $ReadOnly<{
@@ -336,6 +344,7 @@ export default {
   dispatchNativeEvent,
   enqueueNativeEvent,
   flushAllNativeEvents,
+  enqueueModalSizeUpdate,
   unstable_benchmark: Benchmark,
   scrollTo,
   saveJSMemoryHeapSnapshot,

packages/react-native/src/private/testing/fantom/specs/NativeFantom.js

@@ -76,6 +76,11 @@ interface Spec extends TurboModule {
     shadowNode: mixed /* ShadowNode */,
     options: ScrollOptions,
   ) => void;
+  enqueueModalSizeUpdate: (
+    shadowNode: mixed /* ShadowNode */,
+    height: number,
+    width: number,
+  ) => void;
   takeMountingManagerLogs: (surfaceId: number) => Array<string>;
   flushMessageQueue: () => void;
   flushEventQueue: () => void;