Use public APIs in Fantom tests (#58567)

Summary:

Replace eligible React Native deep imports in Fantom tests with package exports, Fantom APIs, DOM globals, and types derived from exported symbols. Keep implementation-specific imports where the public surface does not expose equivalent behavior or compatible Flow types.

Changelog: [Internal]

___

Reviewed By: cipolleschi

Differential Revision: D120517166

Author: rubennorte

packages/react-native/Libraries/Components/View/__tests__/View-nativeCSSParsing-itest.js

@@ -11,12 +11,12 @@
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
-import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
-
 import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
 import {View} from 'react-native';
 
+type ViewStyleProp = NonNullable<React.PropOf<View, 'style'>>;
+
 // These tests render <View> with string-valued CSS properties. With
 // `enableNativeCSSParsing` forced on, the strings are parsed by the C++ CSS
 // parsers (color functions, transforms, filters, box shadows, gradients), and

packages/react-native/Libraries/Lists/__tests__/FlatList-itest.js

@@ -9,7 +9,7 @@
  */
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
-import type {FlatListProps} from 'react-native/Libraries/Lists/FlatList';
+import type {FlatListProps} from 'react-native';
 
 import * as Fantom from '@react-native/fantom';
 import nullthrows from 'nullthrows';

packages/react-native/Libraries/Lists/__tests__/SectionList-itest.js

@@ -10,7 +10,7 @@
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
-import type {SectionBase} from 'react-native/Libraries/Lists/SectionList';
+import type {SectionBase} from 'react-native';
 
 import * as Fantom from '@react-native/fantom';
 import nullthrows from 'nullthrows';

packages/react-native/Libraries/ReactNative/__tests__/StaleEventHandlersFromInterruptedRender-itest.js

@@ -17,7 +17,6 @@ import nullthrows from 'nullthrows';
 import * as React from 'react';
 import {createRef, startTransition, useDeferredValue, useState} from 'react';
 import {View} from 'react-native';
-import {NativeEventCategory} from 'react-native/src/private/testing/fantom/specs/NativeFantom';
 
 describe('stale event handlers from interrupted render', () => {
   // This test demonstrates a bug where canonical.currentProps (which stores
@@ -80,7 +79,7 @@ describe('stale event handlers from interrupted render', () => {
           'onPointerUp',
           {x: 0, y: 0},
           {
-            category: NativeEventCategory.Discrete,
+            category: Fantom.NativeEventCategory.Discrete,
           },
         );
       }

packages/react-native/Libraries/Text/__tests__/Text-itest.js

@@ -23,8 +23,6 @@ import accessibilityPropsSuite, {
   rolePropSuite,
 } from 'react-native/src/private/__tests__/utilities/accessibilityPropsSuite';
 import {testIDPropSuite} from 'react-native/src/private/__tests__/utilities/commonPropsSuite';
-import ReadOnlyElement from 'react-native/src/private/webapis/dom/nodes/ReadOnlyElement';
-import ReadOnlyText from 'react-native/src/private/webapis/dom/nodes/ReadOnlyText';
 
 const TEST_TEXT = 'the text';
 
@@ -661,7 +659,7 @@ describe('<Text>', () => {
       const element = nullthrows(elementRef.current);
       expect(element.childNodes.length).toBe(1);
 
-      const textChild = ensureInstance(element.childNodes[0], ReadOnlyText);
+      const textChild = ensureInstance(element.childNodes[0], globalThis.Text);
       expect(textChild.textContent).toBe(TEST_TEXT);
     });
 
@@ -681,19 +679,16 @@ describe('<Text>', () => {
       const element = nullthrows(elementRef.current);
       expect(element.childNodes.length).toBe(2);
 
-      const firstChild = ensureInstance(element.childNodes[0], ReadOnlyText);
+      const firstChild = ensureInstance(element.childNodes[0], globalThis.Text);
       expect(firstChild.textContent).toBe('Some text ');
 
-      const secondChild = ensureInstance(
-        element.childNodes[1],
-        ReadOnlyElement,
-      );
+      const secondChild = ensureInstance(element.childNodes[1], Element);
       expect(secondChild.tagName).toBe('RN:Text');
       expect(secondChild.childNodes.length).toBe(1);
 
       const secondChildText = ensureInstance(
         secondChild.childNodes[0],
-        ReadOnlyText,
+        globalThis.Text,
       );
       expect(secondChildText.textContent).toBe('also in bold');
     });

packages/react-native/Libraries/Utilities/__tests__/BackHandler-itest.js

@@ -10,12 +10,12 @@
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
-import type {HardwareBackPressEvent} from 'react-native/Libraries/Utilities/BackHandler';
-
-import RCTDeviceEventEmitter from 'react-native/Libraries/EventEmitter/RCTDeviceEventEmitter';
-import BackHandler from 'react-native/Libraries/Utilities/BackHandler';
+import {BackHandler, DeviceEventEmitter} from 'react-native';
 import {HardwareBackPressEvent as HardwareBackPressEventClass} from 'react-native/Libraries/Utilities/HardwareBackPressEvent';
 
+type BackPressHandler = Parameters<typeof BackHandler.addEventListener>[1];
+type HardwareBackPressEvent = Parameters<BackPressHandler>[0];
+
 describe('BackHandler', () => {
   const subscriptions: Array<{remove: () => void, ...}> = [];
 
@@ -44,7 +44,7 @@ describe('BackHandler', () => {
       BackHandler.addEventListener('hardwareBackPress', handler2),
     );
 
-    RCTDeviceEventEmitter.emit('hardwareBackPress', {timeStamp: 100});
+    DeviceEventEmitter.emit('hardwareBackPress', {timeStamp: 100});
 
     expect(callOrder).toEqual(['second']);
   });
@@ -67,7 +67,7 @@ describe('BackHandler', () => {
       BackHandler.addEventListener('hardwareBackPress', handler2),
     );
 
-    RCTDeviceEventEmitter.emit('hardwareBackPress', {timeStamp: 100});
+    DeviceEventEmitter.emit('hardwareBackPress', {timeStamp: 100});
 
     expect(callOrder).toEqual(['second', 'first']);
   });
@@ -83,7 +83,7 @@ describe('BackHandler', () => {
       BackHandler.addEventListener('hardwareBackPress', handler),
     );
 
-    RCTDeviceEventEmitter.emit('hardwareBackPress', {timeStamp: 42});
+    DeviceEventEmitter.emit('hardwareBackPress', {timeStamp: 42});
 
     expect(receivedEvent).toBeInstanceOf(HardwareBackPressEventClass);
   });
@@ -99,7 +99,7 @@ describe('BackHandler', () => {
       BackHandler.addEventListener('hardwareBackPress', handler),
     );
 
-    RCTDeviceEventEmitter.emit('hardwareBackPress', {timeStamp: 42});
+    DeviceEventEmitter.emit('hardwareBackPress', {timeStamp: 42});
 
     expect(receivedEvent?.timeStamp).toBe(42);
   });
@@ -116,7 +116,7 @@ describe('BackHandler', () => {
     );
 
     const before = performance.now();
-    RCTDeviceEventEmitter.emit('hardwareBackPress', null);
+    DeviceEventEmitter.emit('hardwareBackPress', null);
     const after = performance.now();
 
     const timeStamp = receivedEvent?.timeStamp;
@@ -137,7 +137,7 @@ describe('BackHandler', () => {
     const sub = BackHandler.addEventListener('hardwareBackPress', handler);
     sub.remove();
 
-    RCTDeviceEventEmitter.emit('hardwareBackPress', {timeStamp: 100});
+    DeviceEventEmitter.emit('hardwareBackPress', {timeStamp: 100});
 
     expect(called).toBe(false);
   });

packages/react-native/Libraries/Utilities/__tests__/HardwareBackPressEvent-itest.js

@@ -11,7 +11,6 @@
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
 import {HardwareBackPressEvent} from 'react-native/Libraries/Utilities/HardwareBackPressEvent';
-import Event from 'react-native/src/private/webapis/dom/events/Event';
 import {setEventInitTimeStamp} from 'react-native/src/private/webapis/dom/events/internals/EventInternals';
 
 describe('HardwareBackPressEvent', () => {

packages/react-native/src/private/renderer/core/__tests__/EventTargetDispatching-itest.js

@@ -12,11 +12,7 @@
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
-import type {
-  NativePointerEvent,
-  PointerEvent,
-} from 'react-native/Libraries/Types/CoreEventTypes';
-import type {ReadOnlyNodeWithEventTarget} from 'react-native/src/private/webapis/dom/nodes/ReadOnlyNode';
+import type {NativePointerEvent, PointerEvent} from 'react-native';
 
 import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
@@ -25,7 +21,7 @@ import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/
 import Event from 'react-native/src/private/webapis/dom/events/Event';
 
 // Temporary cast until ReadOnlyNode extends EventTarget ungated.
-function asEventTarget(node: ?interface {}): ReadOnlyNodeWithEventTarget {
+function asEventTarget(node: ?interface {}): EventTarget {
   if (node == null) {
     throw new Error('Expected non-null node');
   }

packages/react-native/src/private/webapis/dom/events/__tests__/CustomEvent-itest.js

@@ -10,15 +10,13 @@
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
-import CustomEvent from 'react-native/src/private/webapis/dom/events/CustomEvent';
-import Event from 'react-native/src/private/webapis/dom/events/Event';
-
 describe('CustomEvent', () => {
   it('extends Event', () => {
     const event = new CustomEvent('foo', {
       bubbles: true,
       cancelable: true,
       composed: true,
+      detail: null,
     });
 
     expect(event.type).toBe('foo');

packages/react-native/src/private/webapis/dom/nodes/__tests__/ReactNativeDocument-itest.js

@@ -21,7 +21,6 @@ import {createRef} from 'react';
 import {View} from 'react-native';
 import ReactNativeDocument from 'react-native/src/private/webapis/dom/nodes/ReactNativeDocument';
 import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
-import ReadOnlyNode from 'react-native/src/private/webapis/dom/nodes/ReadOnlyNode';
 
 describe('ReactNativeDocument', () => {
   it('is connected until the surface is destroyed', () => {
@@ -99,7 +98,7 @@ describe('ReactNativeDocument', () => {
     const document = ensureInstance(element.ownerDocument, ReactNativeDocument);
 
     expect(document.nodeName).toBe('#document');
-    expect(document.nodeType).toBe(ReadOnlyNode.DOCUMENT_NODE);
+    expect(document.nodeType).toBe(Node.DOCUMENT_NODE);
     expect(document.nodeValue).toBe(null);
     expect(document.textContent).toBe(null);
   });
@@ -155,28 +154,22 @@ describe('ReactNativeDocument', () => {
     ).toBe(0);
 
     expect(document.compareDocumentPosition(documentElement)).toBe(
-      ReadOnlyNode.DOCUMENT_POSITION_CONTAINED_BY |
-        ReadOnlyNode.DOCUMENT_POSITION_FOLLOWING,
+      Node.DOCUMENT_POSITION_CONTAINED_BY | Node.DOCUMENT_POSITION_FOLLOWING,
     );
     expect(document.compareDocumentPosition(element)).toBe(
-      ReadOnlyNode.DOCUMENT_POSITION_CONTAINED_BY |
-        ReadOnlyNode.DOCUMENT_POSITION_FOLLOWING,
+      Node.DOCUMENT_POSITION_CONTAINED_BY | Node.DOCUMENT_POSITION_FOLLOWING,
     );
     expect(documentElement.compareDocumentPosition(document)).toBe(
-      ReadOnlyNode.DOCUMENT_POSITION_CONTAINS |
-        ReadOnlyNode.DOCUMENT_POSITION_PRECEDING,
+      Node.DOCUMENT_POSITION_CONTAINS | Node.DOCUMENT_POSITION_PRECEDING,
     );
     expect(documentElement.compareDocumentPosition(element)).toBe(
-      ReadOnlyNode.DOCUMENT_POSITION_CONTAINED_BY |
-        ReadOnlyNode.DOCUMENT_POSITION_FOLLOWING,
+      Node.DOCUMENT_POSITION_CONTAINED_BY | Node.DOCUMENT_POSITION_FOLLOWING,
     );
     expect(element.compareDocumentPosition(document)).toBe(
-      ReadOnlyNode.DOCUMENT_POSITION_CONTAINS |
-        ReadOnlyNode.DOCUMENT_POSITION_PRECEDING,
+      Node.DOCUMENT_POSITION_CONTAINS | Node.DOCUMENT_POSITION_PRECEDING,
     );
     expect(element.compareDocumentPosition(documentElement)).toBe(
-      ReadOnlyNode.DOCUMENT_POSITION_CONTAINS |
-        ReadOnlyNode.DOCUMENT_POSITION_PRECEDING,
+      Node.DOCUMENT_POSITION_CONTAINS | Node.DOCUMENT_POSITION_PRECEDING,
     );
   });