From 8d634267f89a95c596a717da0df0860bdbb8925b Mon Sep 17 00:00:00 2001
From: Riccardo Cipolleschi <cipolleschi@meta.com>
Date: Wed, 14 May 2025 10:11:03 -0700
Subject: [PATCH] Add E2E test for FabricInteropLayer (#51269)

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

This adds an E2E Tests for the fabric interop layer in RNTester, so we can make sure that we don't break the mechanism to add children after the view is rendered

## Changelog:
[Internal] - Add E2E test for FabricInteropLayer

Reviewed By: sammy-SC

Differential Revision: D74590458

fbshipit-source-id: 9483d1ac648d923a8494d6402b9b2f971b9b2547
---
 .../FabricInteropLayer/FabricInteropLayer.js  | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/rn-tester/js/examples/FabricInteropLayer/FabricInteropLayer.js b/packages/rn-tester/js/examples/FabricInteropLayer/FabricInteropLayer.js
index 2025cadd787..7d7429ea78a 100644
--- a/packages/rn-tester/js/examples/FabricInteropLayer/FabricInteropLayer.js
+++ b/packages/rn-tester/js/examples/FabricInteropLayer/FabricInteropLayer.js
@@ -23,6 +23,7 @@ import {
 
 type SectionProps = {
   title: string,
+  testID?: string,
   children?: React.Node,
 };
 
@@ -82,13 +83,21 @@ function AddChildrenForInteropLayer() {
         backgroundColor: isDarkMode ? BLACK : WHITE,
       }}>
       <Section title="Squares">
-        <Button title="Add Marker" onPress={addMarker} />
+        <Button
+          title="Add Marker"
+          onPress={addMarker}
+          testID="add-marker-btn"
+        />
         <Text>{`Number of squares: ${squares.length}`}</Text>
       </Section>
-      <Section title="Custom native view">
+      <Section title="Custom native view" testID="interop-view-content">
         <InteropTestView style={styles.customView}>
           {squares.map((_, index) => (
-            <View key={index} style={styles.customViewChild} />
+            <View
+              key={index}
+              style={styles.customViewChild}
+              testID={`marker_${index}`}
+            />
           ))}
         </InteropTestView>
       </Section>
@@ -134,16 +143,16 @@ const styles = StyleSheet.create({
   },
 });
 
-exports.title = 'Fabric Interop Layer';
+exports.title = 'FabricInteropLayer';
 exports.category = 'UI';
 exports.description = 'A set test cases for the Fabric Interop Layer.';
 exports.examples = [
   {
     title: 'Add children to Interop Layer',
     description: 'Add children to Interop Layer',
-    name: 'Add Children to interop layer',
+    name: 'add-children',
     render(): React.Node {
-      return <AddChildrenForInteropLayer />;
+      return <AddChildrenForInteropLayer testID="add-children" />;
     },
   },
 ];