Create IntersectionObserver benchmark (facebook#50023)

Summary:

Add benchmarks for Intersection Observer

Differential Revision: D66847629

Author: lunaleaps

packages/react-native/src/private/webapis/intersectionobserver/__tests__/IntersectionObserver-benchmark-itest.js

@@ -0,0 +1,304 @@
+/**
+ * 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
+ * @fantom_flags enableAccessToHostTreeInFabric:true
+ */
+
+import type IntersectionObserverType from '../IntersectionObserver';
+import type {Root} from '@react-native/fantom';
+
+import ScrollView from '../../../../../Libraries/Components/ScrollView/ScrollView';
+import View from '../../../../../Libraries/Components/View/View';
+import setUpIntersectionObserver from '../../../setup/setUpIntersectionObserver';
+import ensureInstance from '../../../utilities/ensureInstance';
+import ReactNativeElement from '../../dom/nodes/ReactNativeElement';
+import * as Fantom from '@react-native/fantom';
+import * as React from 'react';
+
+import '../../../../../Libraries/Core/InitializeCore.js';
+
+declare const IntersectionObserver: Class<IntersectionObserverType>;
+
+setUpIntersectionObserver();
+
+let maybeNode;
+let node: ReactNativeElement;
+
+let maybeScrollViewNode;
+let scrollViewNode: ReactNativeElement;
+let observer: IntersectionObserverType;
+const root = Fantom.createRoot();
+let mockCallback = jest.fn();
+let ROOT_HEIGHT = 0;
+let SCROLL_INCREMENT = 0;
+
+function setupScrollConstants(renderedRoot: Root) {
+  const {height} =
+    renderedRoot.document.documentElement.getBoundingClientRect();
+  ROOT_HEIGHT = height;
+  SCROLL_INCREMENT = ROOT_HEIGHT / 3;
+}
+
+Fantom.unstable_benchmark
+  .suite('IntersectionObserver')
+  .test(
+    'Create IntersectionObserver',
+    () => {
+      Fantom.runTask(() => {
+        observer = new IntersectionObserver(mockCallback, {});
+      });
+    },
+    {
+      beforeEach: () => {
+        mockCallback = jest.fn();
+      },
+      afterEach: () => {
+        Fantom.runTask(() => {
+          observer.disconnect();
+        });
+      },
+    },
+  )
+  .test(
+    'Observe a mounted view',
+    () => {
+      Fantom.runTask(() => {
+        observer.observe(node);
+      });
+    },
+    {
+      beforeEach: () => {
+        mockCallback = jest.fn();
+        Fantom.runTask(() => {
+          root.render(
+            <View
+              ref={receivedNode => {
+                maybeNode = receivedNode;
+              }}
+            />,
+          );
+          observer = new IntersectionObserver(mockCallback, {});
+        });
+        node = ensureInstance(maybeNode, ReactNativeElement);
+      },
+      afterEach: () => {
+        Fantom.runTask(() => {
+          observer.disconnect();
+          root.render(<></>);
+        });
+      },
+    },
+  )
+  .test(
+    'ScrollView no intersection, no observation',
+    () => {
+      for (let i = 1; i <= 3; i++) {
+        Fantom.scrollTo(scrollViewNode, {
+          x: 0,
+          y: i * SCROLL_INCREMENT,
+        });
+      }
+    },
+    {
+      beforeAll: () => {
+        Fantom.runTask(() => {
+          root.render(<></>);
+        });
+        setupScrollConstants(root);
+      },
+      beforeEach: () => {
+        Fantom.runTask(() => {
+          root.render(
+            <ScrollView
+              ref={receivedNode => {
+                maybeScrollViewNode = receivedNode;
+              }}>
+              <View style={{width: 100, height: ROOT_HEIGHT * 2}} />
+              <View style={{width: 100, height: 100}} />
+            </ScrollView>,
+          );
+        });
+        scrollViewNode = ensureInstance(
+          maybeScrollViewNode,
+          ReactNativeElement,
+        );
+      },
+      afterEach: () => {
+        Fantom.runTask(() => {
+          root.render(<></>);
+        });
+      },
+    },
+  )
+
+  .test(
+    'ScrollView intersection, no observation',
+    () => {
+      for (let i = 1; i <= 3; i++) {
+        Fantom.scrollTo(scrollViewNode, {
+          x: 0,
+          y: i * SCROLL_INCREMENT,
+        });
+      }
+    },
+    {
+      beforeAll: () => {
+        Fantom.runTask(() => {
+          root.render(<></>);
+        });
+        setupScrollConstants(root);
+      },
+      beforeEach: () => {
+        Fantom.runTask(() => {
+          root.render(
+            <ScrollView
+              ref={receivedNode => {
+                maybeScrollViewNode = receivedNode;
+              }}>
+              <View style={{width: 100, height: ROOT_HEIGHT * 1.6}} />
+              <View style={{width: 100, height: 100}} />
+            </ScrollView>,
+          );
+        });
+        scrollViewNode = ensureInstance(
+          maybeScrollViewNode,
+          ReactNativeElement,
+        );
+      },
+      afterEach: () => {
+        Fantom.runTask(() => {
+          root.render(<></>);
+        });
+      },
+    },
+  )
+  .test(
+    'ScrollView no intersection, observation',
+    () => {
+      for (let i = 1; i <= 3; i++) {
+        Fantom.scrollTo(scrollViewNode, {
+          x: 0,
+          y: i * SCROLL_INCREMENT,
+        });
+      }
+    },
+    {
+      beforeAll: () => {
+        Fantom.runTask(() => {
+          root.render(<></>);
+        });
+        setupScrollConstants(root);
+      },
+      beforeEach: () => {
+        mockCallback = jest.fn();
+
+        Fantom.runTask(() => {
+          root.render(
+            <ScrollView
+              ref={receivedNode => {
+                maybeScrollViewNode = receivedNode;
+              }}>
+              <View style={{width: 100, height: ROOT_HEIGHT * 2}} />
+              <View
+                ref={receivedNode => {
+                  maybeNode = receivedNode;
+                }}
+                style={{width: 100, height: 100}}
+              />
+            </ScrollView>,
+          );
+        });
+        scrollViewNode = ensureInstance(
+          maybeScrollViewNode,
+          ReactNativeElement,
+        );
+        node = ensureInstance(maybeNode, ReactNativeElement);
+        Fantom.runTask(() => {
+          observer = new IntersectionObserver(mockCallback, {});
+          observer.observe(node);
+        });
+      },
+      afterEach: () => {
+        expect(mockCallback.mock.calls.length).toBe(1);
+
+        const [entries] = mockCallback.mock.lastCall;
+        expect(entries.length).toBe(1);
+        expect(entries[0].isIntersecting).toBe(false);
+
+        Fantom.runTask(() => {
+          observer.disconnect();
+          root.render(<></>);
+        });
+      },
+    },
+  )
+  .test(
+    'ScrollView intersection, observation',
+    () => {
+      for (let i = 1; i <= 3; i++) {
+        Fantom.scrollTo(scrollViewNode, {
+          x: 0,
+          y: i * SCROLL_INCREMENT,
+        });
+      }
+    },
+    {
+      beforeAll: () => {
+        Fantom.runTask(() => {
+          root.render(<></>);
+        });
+        setupScrollConstants(root);
+      },
+      beforeEach: () => {
+        mockCallback = jest.fn();
+
+        Fantom.runTask(() => {
+          root.render(
+            <ScrollView
+              ref={receivedNode => {
+                maybeScrollViewNode = receivedNode;
+              }}>
+              <View style={{width: 100, height: ROOT_HEIGHT * 1.6}} />
+              <View
+                ref={receivedNode => {
+                  maybeNode = receivedNode;
+                }}
+                style={{width: 100, height: 100}}
+              />
+            </ScrollView>,
+          );
+        });
+        scrollViewNode = ensureInstance(
+          maybeScrollViewNode,
+          ReactNativeElement,
+        );
+        node = ensureInstance(maybeNode, ReactNativeElement);
+        Fantom.runTask(() => {
+          observer = new IntersectionObserver(mockCallback, {threshold: 1});
+          observer.observe(node);
+        });
+      },
+      afterEach: () => {
+        expect(mockCallback.mock.calls.length).toBe(2);
+
+        const [nonIntersectingEntries] = mockCallback.mock.calls[0];
+        expect(nonIntersectingEntries.length).toBe(1);
+        expect(nonIntersectingEntries[0].isIntersecting).toBe(false);
+
+        const [intersectingEntries] = mockCallback.mock.calls[1];
+        expect(intersectingEntries.length).toBe(1);
+        expect(intersectingEntries[0].isIntersecting).toBe(true);
+
+        Fantom.runTask(() => {
+          observer.disconnect();
+          root.render(<></>);
+        });
+      },
+    },
+  );