Basic Fantom Tests for Pressable (#53181)

Summary:
Pull Request resolved: #53181

Adds basic Fantom tests for the <Pressable> React Native component.

Following T233710053, adds tests for some of the listed props and refs.

Covered props:
* children
* disabled
* onPress
* style

Ref:
* Pressable is a Native Component and has the correct tag

I did not cover the rest of the listed props due to Fantom not having suitable events to trigger to test them and/or inease of implementing functionality to do so.

## Changelog:

[Internal]

Reviewed By: andrewdacenko

Differential Revision: D79745215

fbshipit-source-id: 26caaabf72ea7ffff3e652616dfd9f0cf7fc2020

Author: CalixTang

packages/react-native/Libraries/Components/Pressable/__tests__/Pressable-itest.js

@@ -0,0 +1,186 @@
+/**
+ * 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 {HostInstance} from 'react-native';
+
+import * as Fantom from '@react-native/fantom';
+import * as React from 'react';
+import {createRef} from 'react';
+import {Pressable} from 'react-native';
+import {Text} from 'react-native';
+import ensureInstance from 'react-native/src/private/__tests__/utilities/ensureInstance';
+import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
+
+describe('<Pressable>', () => {
+  describe('props', () => {
+    describe('style', () => {
+      it('can be set with ViewStyle', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <Pressable
+              style={{
+                width: 100,
+                height: 50,
+                backgroundColor: 'blue',
+                borderColor: 'red',
+                borderWidth: 3,
+                opacity: 40,
+              }}
+            />,
+          );
+        });
+
+        expect(root.getRenderedOutput().toJSX()).toEqual(
+          <rn-view
+            accessible="true"
+            backgroundColor="rgba(0, 0, 255, 1)"
+            borderWidth="3.000000"
+            height="50.000000"
+            opacity="40"
+            width="100.000000"
+          />,
+        );
+      });
+
+      it('function that receives a boolean reflecting whether the component is currently pressed ', () => {
+        const root = Fantom.createRoot();
+        Fantom.runTask(() => {
+          root.render(
+            <Pressable
+              style={({pressed}) => ({
+                backgroundColor: pressed ? 'red' : 'gray',
+              })}
+            />,
+          );
+        });
+        expect(root.getRenderedOutput().toJSX()).toEqual(
+          <rn-view
+            accessible="true"
+            backgroundColor="rgba(128, 128, 128, 1)"
+          />,
+        );
+      });
+    });
+
+    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(
+            <Pressable
+              ref={elementRef}
+              onPress={onPressCallback}
+              style={{height: 100}}
+            />,
+          );
+        });
+
+        const element = ensureInstance(elementRef.current, ReactNativeElement);
+        Fantom.dispatchNativeEvent(element, 'click');
+
+        expect(onPressCallback).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('disabled', () => {
+      it('cannot be pressed', () => {
+        const elementRef = createRef<HostInstance>();
+
+        const root = Fantom.createRoot();
+        const onPressCallback = jest.fn();
+
+        Fantom.runTask(() => {
+          root.render(
+            <Pressable
+              ref={elementRef}
+              onPress={onPressCallback}
+              disabled={true}
+            />,
+          );
+        });
+
+        const element = ensureInstance(elementRef.current, ReactNativeElement);
+        Fantom.dispatchNativeEvent(element, 'change', {value: true});
+
+        expect(onPressCallback).toHaveBeenCalledTimes(0);
+      });
+    });
+
+    describe('children', () => {
+      it('adds children to the component', () => {
+        const elementRef = createRef<HostInstance>();
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <Pressable ref={elementRef}>
+              <Text>the quick brown fox</Text>
+            </Pressable>,
+          );
+        });
+        const element = ensureInstance(elementRef.current, ReactNativeElement);
+
+        expect(element.childNodes.length).toBe(1);
+
+        expect(root.getRenderedOutput().toJSX()).toEqual(
+          <rn-view accessible="true">
+            <rn-paragraph
+              allowFontScaling="true"
+              ellipsizeMode="tail"
+              fontSize="NaN"
+              fontSizeMultiplier="NaN"
+              foregroundColor="rgba(0, 0, 0, 0)">
+              the quick brown fox
+            </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(<Pressable ref={elementRef} />);
+        });
+
+        expect(elementRef.current).toBeInstanceOf(ReactNativeElement);
+      });
+
+      it('uses the "RN:View" tag name', () => {
+        const elementRef = createRef<HostInstance>();
+
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<Pressable ref={elementRef} />);
+        });
+
+        const element = ensureInstance(elementRef.current, ReactNativeElement);
+        // Pressable is implemented with a <View> under the hood
+        expect(element.tagName).toBe('RN:View');
+      });
+    });
+  });
+});

packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp

@@ -379,7 +379,7 @@ SharedDebugStringConvertibleList YogaStylableProps::getDebugProps() const {
               yogaStyle.border(yoga::Edge::Vertical),
               defaultYogaStyle.border(yoga::Edge::Vertical)),
           debugStringConvertibleItem(
-              "bordeWidth",
+              "borderWidth",
               yogaStyle.border(yoga::Edge::All),
               defaultYogaStyle.border(yoga::Edge::All)),
           debugStringConvertibleItem(