Add Maestro test for New Arch Example (facebook#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: facebook#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
cipolleschi · Sep 18, 2024 · 7de3111 · 7de3111
1 parent 4b035d8
commit 7de3111
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 9 deletions.
diff --git a/packages/rn-tester/.maestro/new-arch-examples.yml 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
@@ -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
@@ -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
@@ -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,14 +159,17 @@ 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,
             newColor,
           );
 
           callNativeMethodToChangeBackgroundColor(legacyRef.current, newColor);
+          setCurrentBGColor(nextBGColor);
         }}
       />
       <Button