Create IntersectionObserver benchmark (#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,270 @@
+/**
+ * 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 * as Fantom from '@react-native/fantom';
+import * as React from 'react';
+import ScrollView from 'react-native/Libraries/Components/ScrollView/ScrollView';
+import View from 'react-native/Libraries/Components/View/View';
+import setUpIntersectionObserver from 'react-native/src/private/setup/setUpIntersectionObserver';
+import ensureInstance from 'react-native/src/private/utilities/ensureInstance';
+import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
+
+import 'react-native/Libraries/Core/InitializeCore';
+
+declare const IntersectionObserver: Class<IntersectionObserverType>;
+
+setUpIntersectionObserver();
+
+let maybeNode;
+let node: ReactNativeElement;
+
+let maybeScrollViewNode;
+let scrollViewNode: ReactNativeElement;
+let observer: IntersectionObserverType;
+const ROOT_HEIGHT = 1000;
+const root = Fantom.createRoot({
+  viewportHeight: ROOT_HEIGHT,
+});
+let mockCallback = jest.fn();
+
+function cleanup(renderedRoot: Root, testObserver: ?IntersectionObserverType) {
+  Fantom.runTask(() => {
+    if (testObserver != null) {
+      testObserver.disconnect();
+    }
+    root.render(<></>);
+  });
+}
+
+function scrollDown(scrollNode: ReactNativeElement) {
+  const scrollIncrement = ROOT_HEIGHT / 100;
+  for (let i = 1; i <= 100; i++) {
+    Fantom.scrollTo(scrollNode, {
+      x: 0,
+      y: i * scrollIncrement,
+    });
+  }
+}
+
+Fantom.unstable_benchmark
+  .suite('IntersectionObserver')
+  .test(
+    'Create IntersectionObserver',
+    () => {
+      Fantom.runTask(() => {
+        observer = new IntersectionObserver(mockCallback, {});
+      });
+    },
+    {
+      beforeEach: () => {
+        mockCallback = jest.fn();
+      },
+      afterEach: () => {
+        expect(mockCallback.mock.calls.length).toBe(0);
+        cleanup(root, observer);
+      },
+    },
+  )
+  .test(
+    'Observe a mounted view',
+    () => {
+      Fantom.runTask(() => {
+        observer.observe(node);
+      });
+    },
+    {
+      beforeEach: () => {
+        mockCallback = jest.fn();
+        Fantom.runTask(() => {
+          root.render(
+            <View
+              style={{width: 100, height: 100}}
+              ref={receivedNode => {
+                maybeNode = receivedNode;
+              }}
+            />,
+          );
+          observer = new IntersectionObserver(mockCallback, {});
+        });
+        node = ensureInstance(maybeNode, ReactNativeElement);
+      },
+      afterEach: () => {
+        expect(mockCallback.mock.calls.length).toBe(1);
+        const [entries] = mockCallback.mock.lastCall;
+        expect(entries.length).toBe(1);
+        expect(entries[0].isIntersecting).toBe(true);
+
+        cleanup(root, observer);
+      },
+    },
+  )
+  .test(
+    'ScrollView no intersection, no observation',
+    () => {
+      scrollDown(scrollViewNode);
+    },
+    {
+      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: () => {
+        cleanup(root, observer);
+      },
+    },
+  )
+  .test(
+    'ScrollView intersection, no observation',
+    () => {
+      scrollDown(scrollViewNode);
+    },
+    {
+      beforeEach: () => {
+        Fantom.runTask(() => {
+          root.render(
+            <ScrollView
+              ref={receivedNode => {
+                maybeScrollViewNode = receivedNode;
+              }}>
+              <View style={{width: 100, height: ROOT_HEIGHT * 0.8}} />
+              <View style={{width: 100, height: ROOT_HEIGHT * 0.5}} />
+              <View style={{width: 100, height: ROOT_HEIGHT}} />
+            </ScrollView>,
+          );
+        });
+        scrollViewNode = ensureInstance(
+          maybeScrollViewNode,
+          ReactNativeElement,
+        );
+      },
+      afterEach: () => {
+        cleanup(root);
+      },
+    },
+  )
+  .test(
+    'ScrollView no intersection, observation',
+    () => {
+      scrollDown(scrollViewNode);
+    },
+    {
+      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);
+
+        cleanup(root, observer);
+      },
+    },
+  )
+  .test(
+    'ScrollView intersection, observation',
+    () => {
+      scrollDown(scrollViewNode);
+    },
+    {
+      beforeEach: () => {
+        mockCallback = jest.fn();
+
+        Fantom.runTask(() => {
+          root.render(
+            <ScrollView
+              ref={receivedNode => {
+                maybeScrollViewNode = receivedNode;
+              }}>
+              <View style={{width: 100, height: ROOT_HEIGHT * 0.8}} />
+              <View
+                ref={receivedNode => {
+                  maybeNode = receivedNode;
+                }}
+                style={{width: 100, height: ROOT_HEIGHT * 0.5}}
+              />
+              <View style={{width: 100, height: ROOT_HEIGHT}} />
+            </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(3);
+
+        const [entries1] = mockCallback.mock.calls[0];
+        expect(entries1.length).toBe(1);
+        expect(entries1[0].isIntersecting).toBe(false);
+
+        const [entries2] = mockCallback.mock.calls[1];
+        expect(entries2.length).toBe(1);
+        expect(entries2[0].isIntersecting).toBe(true);
+
+        const [entries3] = mockCallback.mock.calls[2];
+        expect(entries3.length).toBe(1);
+        expect(entries3[0].isIntersecting).toBe(false);
+
+        cleanup(root, observer);
+      },
+    },
+  );