Use global DOM types in Fantom tests (#58569)

Summary:
Pull Request resolved: #58569

Replace Fantom test imports of internal Event, EventTarget, AbortController, and feature flag modules with supported exports and global DOM APIs. Add the missing static Event phase constants to the DOM Flow declarations so constructor constants remain typed, and route trusted-event coverage through `dispatchNativeEvent`.

Changelog: [Internal]

Reviewed By: mdvacca

Differential Revision: D120528709

Author: rubennorte

packages/react-native/flow/dom.js.flow

@@ -618,7 +618,7 @@ type Event$Init = {
 
 // https://dom.spec.whatwg.org/#interface-event
 declare class Event {
-  constructor(type: string, eventInitDict?: Event$Init): void;
+  constructor(type: string, eventInitDict?: ?Event$Init): void;
   /**
    * Returns the type of event, e.g. "click", "hashchange", or "submit".
    */
@@ -711,10 +711,17 @@ declare class Event {
   /** Non-standard. See Event.prototype.composed */
   readonly scoped: boolean;
 
+  cancelBubble: boolean;
+
   /**
    * @deprecated
    */
   initEvent(type: string, bubbles: boolean, cancelable: boolean): void;
+
+  static readonly NONE: 0;
+  static readonly CAPTURING_PHASE: 1;
+  static readonly AT_TARGET: 2;
+  static readonly BUBBLING_PHASE: 3;
 }
 
 type CustomEvent$Init = {...Event$Init, detail?: any, ...};

packages/react-native/src/private/__tests__/utilities/__tests__/ShadowNodeRevisionGetter-itest.js

@@ -15,7 +15,7 @@ import {createShadowNodeReferenceGetterRef} from '../ShadowNodeRevisionGetter';
 import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
 import {ScrollView, View} from 'react-native';
-import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags';
+import {ReactNativeFeatureFlags} from 'react-native/react-private-interface';
 
 test('base case when cloning results in revision +1', () => {
   const root = Fantom.createRoot();

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

@@ -17,8 +17,7 @@ import type {NativePointerEvent, PointerEvent} from 'react-native';
 import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
 import {View} from 'react-native';
-import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags';
-import Event from 'react-native/src/private/webapis/dom/events/Event';
+import {ReactNativeFeatureFlags} from 'react-native/react-private-interface';
 
 // Temporary cast until ReadOnlyNode extends EventTarget ungated.
 function asEventTarget(node: ?interface {}): EventTarget {
@@ -1640,12 +1639,14 @@ describe('EventTarget-based Event Dispatching', () => {
   describe('direct events (rnIsDirect) — Event construction validation', () => {
     it('allows constructing a direct event that does not bubble', () => {
       const event = new Event('layout', {rnIsDirect: true});
+      // $FlowFixMe[prop-missing] React Native-specific Event field.
       expect(event.rnIsDirect).toBe(true);
       expect(event.bubbles).toBe(false);
     });
 
     it('defaults rnIsDirect to false', () => {
       const event = new Event('layout');
+      // $FlowFixMe[prop-missing] React Native-specific Event field.
       expect(event.rnIsDirect).toBe(false);
     });
 
@@ -1752,6 +1753,7 @@ describe('EventTarget-based Event Dispatching', () => {
       );
 
       expect(handler).toHaveBeenCalled();
+      // $FlowFixMe[prop-missing] Flow's global Event type omits static constants.
       expect(observedPhase).toBe(Event.AT_TARGET);
       // Event path is just the target node.
       expect(observedPathLength).toBe(1);

packages/react-native/src/private/renderer/events/dispatchNativeEvent.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type EventTarget from '../../webapis/dom/events/EventTarget';
+import type InternalEventTarget from '../../webapis/dom/events/EventTarget';
 
 import {
   customBubblingEventTypes,
@@ -41,8 +41,11 @@ export default function dispatchNativeEvent(
   type: string,
   payload: {[string]: unknown},
 ): void {
+  // $FlowFixMe[incompatible-type] The global is backed by this implementation.
+  const internalTarget = target as InternalEventTarget;
+
   // Process responder events before normal event dispatch.
-  processResponderEvent(type, target, payload);
+  processResponderEvent(type, internalTarget, payload);
 
   try {
     // Normal EventTarget dispatch
@@ -117,7 +120,7 @@ export default function dispatchNativeEvent(
       // rethrown synchronously (matching the legacy plugin path) rather than
       // deferred to a new task, keeping it catchable by React error boundaries
       // and the native event call.
-      dispatchTrustedEvent(target, syntheticEvent, true);
+      dispatchTrustedEvent(internalTarget, syntheticEvent, true);
     }
   } finally {
     // Rethrow the first error caught during responder lifecycle dispatch,

packages/react-native/src/private/setup/__tests__/setUpDefaultReactNativeEnvironment-Globals-IntersectionObserver-itest.js

@@ -12,7 +12,7 @@
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
-import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags';
+import {ReactNativeFeatureFlags} from 'react-native/react-private-interface';
 
 declare var IntersectionObserverEntry: unknown;
 

packages/react-native/src/private/setup/__tests__/setUpDefaultReactNativeEnvironment-Globals-MutationObserver-itest.js

@@ -12,7 +12,7 @@
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
-import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags';
+import {ReactNativeFeatureFlags} from 'react-native/react-private-interface';
 
 declare var MutationRecord: unknown;
 

packages/react-native/src/private/setup/__tests__/setUpDefaultReactNativeEnvironment-Globals-ResizeObserver-itest.js

@@ -12,7 +12,7 @@
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
-import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags';
+import {ReactNativeFeatureFlags} from 'react-native/react-private-interface';
 
 declare var ResizeObserverEntry: unknown;
 declare var ResizeObserverSize: unknown;

packages/react-native/src/private/webapis/dom/abort-api/__tests__/AbortController-itest.js

@@ -13,11 +13,7 @@ import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 import type {TimerMock} from '@react-native/fantom';
 
 import DOMException from '../../../errors/DOMException';
-import {AbortController} from '../AbortController';
-import {AbortSignal_public as AbortSignal} from '../AbortSignal';
 import * as Fantom from '@react-native/fantom';
-import Event from 'react-native/src/private/webapis/dom/events/Event';
-import EventTarget from 'react-native/src/private/webapis/dom/events/EventTarget';
 
 let listenerCallOrder = 0;
 

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

@@ -10,12 +10,15 @@
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
-import Event from 'react-native/src/private/webapis/dom/events/Event';
 import {
   setEventInitTimeStamp,
   setInPassiveListenerFlag,
 } from 'react-native/src/private/webapis/dom/events/internals/EventInternals';
 
+type EventOptions = Event$Init & {
+  rnIsDirect?: boolean,
+};
+
 describe('Event', () => {
   it('provides read-only constants for event phases', () => {
     'use strict';
@@ -121,13 +124,12 @@ describe('Event', () => {
     }).not.toThrow();
 
     expect(() => {
-      // $FlowExpectedError[incompatible-exact]
-      // $FlowExpectedError[prop-missing]
+      // $FlowExpectedError[incompatible-type]
       return new Event('custom', class {});
     }).not.toThrow();
 
     expect(() => {
-      // $FlowExpectedError[incompatible-exact]
+      // $FlowExpectedError[incompatible-type]
       return new Event('custom', () => {});
     }).not.toThrow();
   });
@@ -238,15 +240,15 @@ describe('Event', () => {
 
   it('should use a custom timestamp when set via setEventInitTimeStamp', () => {
     const customTimestamp = 12345.678;
-    const options = {};
+    const options: EventOptions = {};
     setEventInitTimeStamp(options, customTimestamp);
     const event = new Event('custom', options);
 
     expect(event.timeStamp).toBe(customTimestamp);
   });
 
   it('should accept zero as a valid custom timestamp', () => {
-    const options = {};
+    const options: EventOptions = {};
     setEventInitTimeStamp(options, 0);
     const event = new Event('custom', options);
 
@@ -300,6 +302,7 @@ describe('Event', () => {
 
       expect(event.defaultPrevented).toBe(false);
 
+      // $FlowFixMe[incompatible-type] The global is backed by this implementation.
       setInPassiveListenerFlag(event, true);
 
       event.preventDefault();

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

@@ -12,21 +12,21 @@
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
-import type {EventCallback} from 'react-native/src/private/webapis/dom/events/EventTarget';
-
-import Event from 'react-native/src/private/webapis/dom/events/Event';
 import {
   getEventHandlerAttribute,
   setEventHandlerAttribute,
 } from 'react-native/src/private/webapis/dom/events/EventHandlerAttributes';
-import EventTarget from 'react-native/src/private/webapis/dom/events/EventTarget';
+
+type EventCallback = (event: Event) => void;
 
 class EventTargetSubclass extends EventTarget {
   get oncustomevent(): EventCallback | null {
+    // $FlowFixMe[incompatible-type] The globals are backed by these implementations.
     return getEventHandlerAttribute(this, 'customEvent');
   }
 
   set oncustomevent(listener: ?EventCallback) {
+    // $FlowFixMe[incompatible-type] The globals are backed by these implementations.
     setEventHandlerAttribute(this, 'customEvent', listener);
   }
 }