From fee5a570d1ce83db88c92da88634473db6e6e653 Mon Sep 17 00:00:00 2001
From: David Vacca <dvacca@meta.com>
Date: Thu, 13 Feb 2025 20:54:12 -0800
Subject: [PATCH] Create fantom benchmarking test to verify impact of props
 parsing (#49417)

Summary:

In this diff I'm introducing a fantom benchmarking test to verify impact of props parsing in Fabric (testing for 100, 1000 and 1500 nested views)

changelog: [internal] internal

Reviewed By: lenaic

Differential Revision: D69624243
---
 .../View/__tests__/View-benchmark-itest.js    | 109 ++++++++++++++++++
 1 file changed, 109 insertions(+)

diff --git a/packages/react-native/Libraries/Components/View/__tests__/View-benchmark-itest.js b/packages/react-native/Libraries/Components/View/__tests__/View-benchmark-itest.js
index 4304ab042c94..7d49355a402f 100644
--- a/packages/react-native/Libraries/Components/View/__tests__/View-benchmark-itest.js
+++ b/packages/react-native/Libraries/Components/View/__tests__/View-benchmark-itest.js
@@ -18,6 +18,61 @@ import * as React from 'react';
 
 let root;
 let thousandViews: React.MixedElement;
+function createViewsWithLargeAmountOfPropsAndStyles(count: number): React.Node {
+  let views: React.Node = null;
+  for (let i = 0; i < count; i++) {
+    views = (
+      <View
+        accessibilityLabelledBy={'test ${i}'}
+        accessibilityLiveRegion={'polite'}
+        aria-labelledby={'test ${i}'}
+        aria-live={'polite'}
+        collapsable={false}
+        focusable={i % 2 === 0}
+        hasTVPreferredFocus={i % 2 === 0}
+        id={String(i)}
+        importantForAccessibility={'no-hide-descendants'}
+        nativeID={String(i)}
+        nextFocusDown={i}
+        nextFocusForward={i + 1}
+        nextFocusLeft={i + 2}
+        nextFocusRight={i + 3}
+        nextFocusUp={i + 4}
+        renderToHardwareTextureAndroid={true}
+        style={{
+          width: i + 1,
+          height: i + 1,
+          backgroundColor: 'blue',
+          borderCurve: 'circular',
+          borderBottomWidth: i % 2 === 0 ? 0 : 1,
+          borderWidth: i % 2 === 0 ? 0 : 1,
+          borderEndWidth: i % 2 === 0 ? 0 : 1,
+          borderLeftWidth: i % 2 === 0 ? 0 : 1,
+          borderRightWidth: i % 2 === 0 ? 0 : 1,
+          borderStartWidth: i % 2 === 0 ? 0 : 1,
+          borderTopWidth: i % 2 === 0 ? 0 : 1,
+          borderBottomColor: i % 2 === 0 ? 'blue' : 'red',
+          borderEndColor: i % 2 === 0 ? 'blue' : 'red',
+          borderStartColor: i % 2 === 0 ? 'blue' : 'red',
+          borderTopColor: i % 2 === 0 ? 'blue' : 'red',
+          borderRightColor: i % 2 === 0 ? 'blue' : 'red',
+          borderLeftColor: i % 2 === 0 ? 'blue' : 'red',
+          opacity: i % 2 === 0 ? 0 : 1,
+          elevation: i % 2 === 0 ? 0 : 1,
+          pointerEvents: 'auto',
+          boxShadow: '0 0 0 1px blue',
+          isolation: 'isolate',
+          cursor: 'pointer',
+          backfaceVisibility: 'visible',
+          mixBlendMode: 'multiply',
+        }}
+        tabIndex={i % 2 === 0 ? 0 : undefined}>
+        {views}
+      </View>
+    );
+  }
+  return views;
+}
 
 Fantom.unstable_benchmark
   .suite('View')
@@ -80,4 +135,58 @@ Fantom.unstable_benchmark
         root.destroy();
       },
     },
+  )
+  .test(
+    'render 100 views with large amount of props and styles',
+    () => {
+      Fantom.runTask(() => root.render(thousandViews));
+    },
+    {
+      beforeAll: () => {
+        // $FlowExpectedError[incompatible-type]
+        thousandViews = createViewsWithLargeAmountOfPropsAndStyles(100);
+      },
+      beforeEach: () => {
+        root = Fantom.createRoot();
+      },
+      afterEach: () => {
+        root.destroy();
+      },
+    },
+  )
+  .test(
+    'render 1000 views with large amount of props and styles',
+    () => {
+      Fantom.runTask(() => root.render(thousandViews));
+    },
+    {
+      beforeAll: () => {
+        // $FlowExpectedError[incompatible-type]
+        thousandViews = createViewsWithLargeAmountOfPropsAndStyles(1000);
+      },
+      beforeEach: () => {
+        root = Fantom.createRoot();
+      },
+      afterEach: () => {
+        root.destroy();
+      },
+    },
+  )
+  .test(
+    'render 1500 views with large amount of props and styles',
+    () => {
+      Fantom.runTask(() => root.render(thousandViews));
+    },
+    {
+      beforeAll: () => {
+        // $FlowExpectedError[incompatible-type]
+        thousandViews = createViewsWithLargeAmountOfPropsAndStyles(1500);
+      },
+      beforeEach: () => {
+        root = Fantom.createRoot();
+      },
+      afterEach: () => {
+        root.destroy();
+      },
+    },
   );