From 7de3111f9b2b168ff602cbe9ba21a2b16e81e38e Mon Sep 17 00:00:00 2001
From: Riccardo Cipolleschi <cipolleschi@meta.com>
Date: Wed, 18 Sep 2024 06:15:58 -0700
Subject: [PATCH] Add Maestro test for New Arch Example (#46541)

Summary:
This change adds automated tests for the New Architecture Examples page in RNTester.
It also updates the NativeComponentExample to make sure that iOS and Android behaves in the same way and in a reliable way.

## Changelog:
[Internal] - Adds

Pull Request resolved: https://github.com/facebook/react-native/pull/46541

Test Plan:
* Android:

https://github.com/user-attachments/assets/65ead328-9c4f-4e0f-8b9b-992ffb584566

* iOS:

https://github.com/user-attachments/assets/412a4f68-c9c9-4ff2-a3e9-ae7194deef77

Reviewed By: cortinico

Differential Revision: D62879289

Pulled By: cipolleschi

fbshipit-source-id: 59e15f48f5995b18fd8b3ee24aca726b93e04d9f
---
 .../rn-tester/.maestro/new-arch-examples.yml  | 16 +++++++++++
 .../ios/RNTMyLegacyNativeViewManager.mm       |  1 -
 .../ios/RNTMyNativeViewComponentView.mm       |  1 -
 .../NativeComponentExample/js/MyNativeView.js | 27 ++++++++++++++-----
 4 files changed, 36 insertions(+), 9 deletions(-)
 create mode 100644 packages/rn-tester/.maestro/new-arch-examples.yml

diff --git a/packages/rn-tester/.maestro/new-arch-examples.yml b/packages/rn-tester/.maestro/new-arch-examples.yml
new file mode 100644
index 00000000000000..bdb02b13bafb54
--- /dev/null
+++ b/packages/rn-tester/.maestro/new-arch-examples.yml
@@ -0,0 +1,16 @@
+appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebook.react.uiapp
+---
+- launchApp
+- assertVisible: "Components"
+- scrollUntilVisible:
+    element:
+      id: "New Architecture Examples"
+    direction: DOWN
+    speed: 40
+- tapOn:
+    id: "New Architecture Examples"
+- assertVisible: "HSBA: h: 0, s: 0, b: 0, a: 0"
+- assertVisible: "Constants From Interop Layer: 3.14"
+- tapOn: "Change Background"
+- assertVisible:
+    text: "HSBA: h: 0, s: 1, b: 1, a: 255"
diff --git a/packages/rn-tester/NativeComponentExample/ios/RNTMyLegacyNativeViewManager.mm b/packages/rn-tester/NativeComponentExample/ios/RNTMyLegacyNativeViewManager.mm
index 4c6a9cefeb9c2d..d0baab512c4bca 100644
--- a/packages/rn-tester/NativeComponentExample/ios/RNTMyLegacyNativeViewManager.mm
+++ b/packages/rn-tester/NativeComponentExample/ios/RNTMyLegacyNativeViewManager.mm
@@ -78,7 +78,6 @@ + (UIView *)getViewByTag:(NSDictionary<NSNumber *, UIView *> *)viewRegistry reac
 - (UIView *)view
 {
   RNTLegacyView *view = [[RNTLegacyView alloc] init];
-  view.backgroundColor = UIColor.redColor;
   return view;
 }
 
diff --git a/packages/rn-tester/NativeComponentExample/ios/RNTMyNativeViewComponentView.mm b/packages/rn-tester/NativeComponentExample/ios/RNTMyNativeViewComponentView.mm
index 8744f6117f5e06..571dc28eaa5359 100644
--- a/packages/rn-tester/NativeComponentExample/ios/RNTMyNativeViewComponentView.mm
+++ b/packages/rn-tester/NativeComponentExample/ios/RNTMyNativeViewComponentView.mm
@@ -44,7 +44,6 @@ - (instancetype)initWithFrame:(CGRect)frame
     _props = defaultProps;
 
     _view = [[UIView alloc] init];
-    _view.backgroundColor = [UIColor redColor];
 
     self.contentView = _view;
   }
diff --git a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
index d9d166abeba120..f86134320f3fdb 100644
--- a/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
+++ b/packages/rn-tester/NativeComponentExample/js/MyNativeView.js
@@ -22,7 +22,7 @@ import RNTMyNativeView, {
 } from './MyNativeViewNativeComponent';
 import * as React from 'react';
 import {useRef, useState} from 'react';
-import {Button, Text, UIManager, View} from 'react-native';
+import {Button, Platform, Text, UIManager, View} from 'react-native';
 const colors = [
   '#0000FF',
   '#FF0000',
@@ -91,6 +91,7 @@ export default function MyNativeView(props: {}): React.Node {
   const containerRef = useRef<React.ElementRef<typeof View> | null>(null);
   const ref = useRef<React.ElementRef<MyNativeViewType> | null>(null);
   const legacyRef = useRef<React.ElementRef<MyLegacyViewType> | null>(null);
+  const [currentBGColor, setCurrentBGColor] = useState<number>(0);
   const [opacity, setOpacity] = useState(1.0);
   const [arrayValues, setArrayValues] = useState([1, 2, 3]);
   const [hsba, setHsba] = useState<HSBA>(new HSBA());
@@ -101,6 +102,7 @@ export default function MyNativeView(props: {}): React.Node {
     useState<MeasureStruct>(MeasureStructZero);
   const [legacyMeasureLayout, setLegacyMeasureLayout] =
     useState<MeasureStruct>(MeasureStructZero);
+
   return (
     <View ref={containerRef} style={{flex: 1}}>
       <Text style={{color: 'red'}}>Fabric View</Text>
@@ -128,16 +130,24 @@ export default function MyNativeView(props: {}): React.Node {
         ref={legacyRef}
         style={{flex: 1}}
         opacity={opacity}
-        onColorChanged={event =>
+        onColorChanged={event => {
+          const normalizedHue =
+            Platform.OS === 'android'
+              ? event.nativeEvent.backgroundColor.hue
+              : event.nativeEvent.backgroundColor.hue * 360;
+          const normalizedAlpha =
+            Platform.OS === 'android'
+              ? event.nativeEvent.backgroundColor.alpha
+              : event.nativeEvent.backgroundColor.alpha * 255;
           setHsba(
             new HSBA(
-              event.nativeEvent.backgroundColor.hue,
+              normalizedHue,
               event.nativeEvent.backgroundColor.saturation,
               event.nativeEvent.backgroundColor.brightness,
-              event.nativeEvent.backgroundColor.alpha,
+              normalizedAlpha,
             ),
-          )
-        }
+          );
+        }}
       />
       <Text style={{color: 'green', textAlign: 'center'}}>
         HSBA: {hsba.toString()}
@@ -149,7 +159,9 @@ export default function MyNativeView(props: {}): React.Node {
       <Button
         title="Change Background"
         onPress={() => {
-          let newColor = colors[Math.floor(Math.random() * 5)];
+          let nextBGColor =
+            currentBGColor + 1 >= colors.length ? 0 : currentBGColor + 1;
+          let newColor = colors[nextBGColor];
           RNTMyNativeViewCommands.callNativeMethodToChangeBackgroundColor(
             // $FlowFixMe[incompatible-call]
             ref.current,
@@ -157,6 +169,7 @@ export default function MyNativeView(props: {}): React.Node {
           );
 
           callNativeMethodToChangeBackgroundColor(legacyRef.current, newColor);
+          setCurrentBGColor(nextBGColor);
         }}
       />
       <Button