Add Fantom integration test for TouchableHighlight (facebook#55856)

Summary:
Pull Request resolved: facebook#55856

Changelog: [Internal]

TouchableHighlight was the only Touchable component without a Fantom integration test. Both TouchableOpacity and TouchableWithoutFeedback already had itests. This adds one for TouchableHighlight to complete the Fantom coverage for the Touchable family.

Tests cover: rendering, accessibility props (via accessibilityPropsSuite), style application, activeOpacity, onPress callback, disabled state, children rendering, and ref instance/tagName.

Reviewed By: sammy-SC

Differential Revision: D94915558

fbshipit-source-id: 5f8ef3039a2f8a4983ee5e26e7f300797f33d61d

Author: Laura Macaluso

packages/react-native/Libraries/Components/Touchable/__tests__/TouchableHighlight-itest.js

@@ -0,0 +1,246 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import type {AccessibilityProps, HostInstance} from 'react-native';
+
+import * as Fantom from '@react-native/fantom';
+import * as React from 'react';
+import {createRef} from 'react';
+import {Text, TouchableHighlight, View} from 'react-native';
+import accessibilityPropsSuite from 'react-native/src/private/__tests__/utilities/accessibilityPropsSuite';
+import ensureInstance from 'react-native/src/private/__tests__/utilities/ensureInstance';
+import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
+
+describe('<TouchableHighlight>', () => {
+  describe('props', () => {
+    describe('rendering', () => {
+      it('renders as a view with accessible="true"', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableHighlight>
+              <View />
+            </TouchableHighlight>,
+          );
+        });
+
+        expect(root.getRenderedOutput({props: ['accessible']}).toJSX()).toEqual(
+          <rn-view accessible="true" />,
+        );
+      });
+    });
+
+    component ComponentWithAccessibilityProps(...props: AccessibilityProps) {
+      return (
+        <TouchableHighlight {...props}>
+          <Text>Touchable</Text>
+        </TouchableHighlight>
+      );
+    }
+
+    accessibilityPropsSuite(ComponentWithAccessibilityProps);
+
+    describe('style', () => {
+      it('applies style props', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableHighlight
+              style={{
+                width: 100,
+                height: 50,
+                backgroundColor: 'blue',
+              }}>
+              <View />
+            </TouchableHighlight>,
+          );
+        });
+
+        expect(
+          root
+            .getRenderedOutput({
+              props: ['width', 'height', 'backgroundColor'],
+            })
+            .toJSX(),
+        ).toEqual(
+          <rn-view
+            backgroundColor="rgba(0, 0, 255, 1)"
+            height="50.000000"
+            width="100.000000"
+          />,
+        );
+      });
+    });
+
+    describe('activeOpacity', () => {
+      it('does not render explicit opacity when using default', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableHighlight>
+              <View />
+            </TouchableHighlight>,
+          );
+        });
+
+        expect(root.getRenderedOutput({props: ['opacity']}).toJSX()).toEqual(
+          <rn-view />,
+        );
+      });
+
+      it('renders with custom style opacity', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableHighlight style={{opacity: 0.5}}>
+              <View />
+            </TouchableHighlight>,
+          );
+        });
+
+        expect(root.getRenderedOutput({props: ['opacity']}).toJSX()).toEqual(
+          <rn-view opacity="0.5" />,
+        );
+      });
+    });
+
+    describe('onPress', () => {
+      it('triggers callback when the element is pressed', () => {
+        const elementRef = createRef<HostInstance>();
+        const onPressCallback = jest.fn();
+
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableHighlight
+              ref={elementRef}
+              onPress={onPressCallback}
+              style={{height: 100}}>
+              <View />
+            </TouchableHighlight>,
+          );
+        });
+
+        const element = ensureInstance(elementRef.current, ReactNativeElement);
+        Fantom.dispatchNativeEvent(element, 'click');
+
+        expect(onPressCallback).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('disabled', () => {
+      it('cannot be pressed when disabled', () => {
+        const elementRef = createRef<HostInstance>();
+        const onPressCallback = jest.fn();
+
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableHighlight
+              ref={elementRef}
+              onPress={onPressCallback}
+              disabled={true}>
+              <View />
+            </TouchableHighlight>,
+          );
+        });
+
+        const element = ensureInstance(elementRef.current, ReactNativeElement);
+        Fantom.dispatchNativeEvent(element, 'click');
+
+        expect(onPressCallback).toHaveBeenCalledTimes(0);
+      });
+
+      it('sets accessibilityState disabled to true', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableHighlight disabled={true}>
+              <View />
+            </TouchableHighlight>,
+          );
+        });
+
+        expect(
+          root.getRenderedOutput({props: ['accessibilityState']}).toJSX(),
+        ).toEqual(
+          <rn-view accessibilityState="{disabled:true,selected:false,checked:None,busy:false,expanded:null}" />,
+        );
+      });
+    });
+
+    describe('children', () => {
+      it('renders children inside the touchable', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableHighlight>
+              <Text>Press me</Text>
+            </TouchableHighlight>,
+          );
+        });
+
+        expect(root.getRenderedOutput({props: ['accessible']}).toJSX()).toEqual(
+          <rn-view accessible="true">
+            <rn-paragraph>Press me</rn-paragraph>
+          </rn-view>,
+        );
+      });
+    });
+  });
+
+  describe('ref', () => {
+    describe('instance', () => {
+      it('is an element node', () => {
+        const elementRef = createRef<HostInstance>();
+
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableHighlight ref={elementRef}>
+              <View />
+            </TouchableHighlight>,
+          );
+        });
+
+        expect(elementRef.current).toBeInstanceOf(ReactNativeElement);
+      });
+
+      it('uses the "RN:View" tag name', () => {
+        const elementRef = createRef<HostInstance>();
+
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TouchableHighlight ref={elementRef}>
+              <View />
+            </TouchableHighlight>,
+          );
+        });
+
+        const element = ensureInstance(elementRef.current, ReactNativeElement);
+        expect(element.tagName).toBe('RN:View');
+      });
+    });
+  });
+});