Migrate FlatList/SectionList E2E testss from Catalyst to RNTester (#4…

…6274)

Summary:
Pull Request resolved: #46274

changelog: [General][Add] - Add E2E test cases for Flat/SectionList to RNTester

Reviewed By: philIip

Differential Revision: D62002065

packages/rn-tester/js/components/RNTesterModuleContainer.js

@@ -77,9 +77,11 @@ export default function RNTesterModuleContainer(props: Props): React.Node {
   const filter = ({example: e, filterRegex}: $FlowFixMe) =>
     filterRegex.test(e.title);
 
+  const removeHiddenExamples = (ex: RNTesterModuleExample) =>
+    ex.hidden !== true;
   const sections = [
     {
-      data: module.examples,
+      data: module.examples.filter(removeHiddenExamples),
       title: 'EXAMPLES',
       key: 'e',
     },

packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js

@@ -31,7 +31,7 @@ const DATA = [
   'Coke',
   'Beer',
   'Cheesecake',
-  'Ice Cream',
+  'Brownie',
 ];
 
 const Item = ({item, separators}: RenderItemProps<string>) => {

packages/rn-tester/js/examples/FlatList/FlatList-BaseOnViewableItemsChanged.js

@@ -0,0 +1,78 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import type {ViewToken} from 'react-native/Libraries/Lists/ViewabilityHelper';
+
+import BaseFlatListExample from './BaseFlatListExample';
+import * as React from 'react';
+import {FlatList, StyleSheet, View} from 'react-native';
+
+type FlatListProps = React.ElementProps<typeof FlatList>;
+type ViewabilityConfig = $PropertyType<FlatListProps, 'viewabilityConfig'>;
+
+const BASE_VIEWABILITY_CONFIG = {
+  minimumViewTime: 1000,
+  viewAreaCoveragePercentThreshold: 100,
+};
+
+export function FlatList_BaseOnViewableItemsChanged(props: {
+  offScreen?: ?boolean,
+  horizontal?: ?boolean,
+  useScrollRefScroll?: ?boolean,
+  waitForInteraction?: ?boolean,
+}): React.Node {
+  const {offScreen, horizontal, useScrollRefScroll, waitForInteraction} = props;
+  const [output, setOutput] = React.useState('');
+  const onViewableItemsChanged = React.useCallback(
+    (info: {changed: Array<ViewToken>, viewableItems: Array<ViewToken>, ...}) =>
+      setOutput(
+        info.viewableItems
+          .filter(viewToken => viewToken.index != null && viewToken.isViewable)
+          .map(viewToken => viewToken.item)
+          .join(', '),
+      ),
+    [setOutput],
+  );
+  const viewabilityConfig: ViewabilityConfig = {
+    ...BASE_VIEWABILITY_CONFIG,
+    waitForInteraction: waitForInteraction ?? false,
+  };
+  const exampleProps = {
+    onViewableItemsChanged,
+    viewabilityConfig,
+    horizontal,
+  };
+
+  const ref = React.useRef<any>(null);
+  const onTest =
+    useScrollRefScroll === true
+      ? () => {
+          ref?.current?.getScrollResponder()?.scrollToEnd();
+        }
+      : null;
+
+  return (
+    <BaseFlatListExample
+      ref={ref}
+      exampleProps={exampleProps}
+      onTest={onTest}
+      testOutput={output}>
+      {offScreen === true ? <View style={styles.offScreen} /> : null}
+    </BaseFlatListExample>
+  );
+}
+
+const styles = StyleSheet.create({
+  offScreen: {
+    height: 1000,
+  },
+});

packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal-noWaitForInteraction.js

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+import {FlatList_BaseOnViewableItemsChanged} from './FlatList-BaseOnViewableItemsChanged';
+import * as React from 'react';
+
+export default ({
+  title: 'onViewableItemsChanged horizontal',
+  name: 'onViewableItemsChanged-horizontal-noWaitForInteraction',
+  description:
+    'E2E Test:\nonViewableItemsChanged-horizontal-noWaitForInteraction',
+  hidden: true,
+  render: () => (
+    <FlatList_BaseOnViewableItemsChanged
+      horizontal={true}
+      waitForInteraction={false}
+    />
+  ),
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal-offScreen.js

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+import {FlatList_BaseOnViewableItemsChanged} from './FlatList-BaseOnViewableItemsChanged';
+import * as React from 'react';
+
+export default ({
+  title: 'onViewableItemsChanged horizontal',
+  name: 'onViewableItemsChanged-horizontal-offScreen',
+  description: 'E2E Test:\nonViewableItemsChanged-horizontal-offScreen',
+  hidden: true,
+  render: () => (
+    <FlatList_BaseOnViewableItemsChanged
+      horizontal={true}
+      waitForInteraction={true}
+    />
+  ),
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal-waitForInteraction.js

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+import {FlatList_BaseOnViewableItemsChanged} from './FlatList-BaseOnViewableItemsChanged';
+import * as React from 'react';
+
+export default ({
+  title: 'onViewableItemsChanged horizontal',
+  name: 'onViewableItemsChanged-horizontal-waitForInteraction',
+  description:
+    'E2E Test:\nonViewableItemsChanged-horizontal-waitForInteraction',
+  hidden: true,
+  render: () => (
+    <FlatList_BaseOnViewableItemsChanged
+      horizontal={true}
+      waitForInteraction={true}
+    />
+  ),
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-noWaitForInteraction.js

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+import {FlatList_BaseOnViewableItemsChanged} from './FlatList-BaseOnViewableItemsChanged';
+import * as React from 'react';
+
+export default ({
+  title: 'onViewableItemsChanged',
+  name: 'onViewableItemsChanged_noWaitForInteraction',
+  description: 'E2E Test:\nonViewableItemsChanged-noWaitForInteraction',
+  hidden: true,
+  render: () => (
+    <FlatList_BaseOnViewableItemsChanged waitForInteraction={false} />
+  ),
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-offScreen.js

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+import {FlatList_BaseOnViewableItemsChanged} from './FlatList-BaseOnViewableItemsChanged';
+import * as React from 'react';
+
+export default ({
+  title: 'onViewableItemsChanged offScreen',
+  name: 'onViewableItemsChanged-offScreen',
+  description: 'E2E Test:\nonViewableItemsChanged-offScreen',
+  hidden: true,
+  render: () => (
+    <FlatList_BaseOnViewableItemsChanged
+      offScreen={true}
+      waitForInteraction={true}
+    />
+  ),
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-waitForInteraction.js

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+import {FlatList_BaseOnViewableItemsChanged} from './FlatList-BaseOnViewableItemsChanged';
+import * as React from 'react';
+
+export default ({
+  title: 'onViewableItemsChanged',
+  name: 'onViewableItemsChanged-waitForInteraction',
+  description: 'E2E Test:\nonViewableItemsChanged-waitForInteraction',
+  hidden: true,
+  render: () => (
+    <FlatList_BaseOnViewableItemsChanged waitForInteraction={true} />
+  ),
+}: RNTesterModuleExample);

packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js

@@ -11,76 +11,15 @@
 'use strict';
 
 import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
-import type {ViewToken} from 'react-native/Libraries/Lists/ViewabilityHelper';
 
-import BaseFlatListExample from './BaseFlatListExample';
+import {FlatList_BaseOnViewableItemsChanged} from './FlatList-BaseOnViewableItemsChanged';
 import * as React from 'react';
-import {FlatList, StyleSheet, View} from 'react-native';
-
-type FlatListProps = React.ElementProps<typeof FlatList>;
-type ViewabilityConfig = $PropertyType<FlatListProps, 'viewabilityConfig'>;
-
-const VIEWABILITY_CONFIG = {
-  minimumViewTime: 1000,
-  viewAreaCoveragePercentThreshold: 100,
-  waitForInteraction: true,
-};
-
-export function FlatList_onViewableItemsChanged(props: {
-  viewabilityConfig: ViewabilityConfig,
-  offScreen?: ?boolean,
-  horizontal?: ?boolean,
-  useScrollRefScroll?: ?boolean,
-}): React.Node {
-  const {viewabilityConfig, offScreen, horizontal, useScrollRefScroll} = props;
-  const [output, setOutput] = React.useState('');
-  const onViewableItemsChanged = React.useCallback(
-    (info: {changed: Array<ViewToken>, viewableItems: Array<ViewToken>, ...}) =>
-      setOutput(
-        info.viewableItems
-          .filter(viewToken => viewToken.index != null && viewToken.isViewable)
-          .map(viewToken => viewToken.item)
-          .join(', '),
-      ),
-    [setOutput],
-  );
-  const exampleProps = {
-    onViewableItemsChanged,
-    viewabilityConfig,
-    horizontal,
-  };
-
-  const ref = React.useRef<any>(null);
-  const onTest =
-    useScrollRefScroll === true
-      ? () => {
-          ref?.current?.getScrollResponder()?.scrollToEnd();
-        }
-      : null;
-
-  return (
-    <BaseFlatListExample
-      ref={ref}
-      exampleProps={exampleProps}
-      onTest={onTest}
-      testOutput={output}>
-      {offScreen === true ? <View style={styles.offScreen} /> : null}
-    </BaseFlatListExample>
-  );
-}
-
-const styles = StyleSheet.create({
-  offScreen: {
-    height: 1000,
-  },
-});
 
 export default ({
-  title: 'onViewableItemsChanged',
+  title: 'FlatList onViewableItemsChanged',
   name: 'onViewableItemsChanged',
-  description:
-    'Scroll list to see what items are returned in `onViewableItemsChanged` callback.',
+  description: 'Test onViewableItemsChanged behavior',
   render: () => (
-    <FlatList_onViewableItemsChanged viewabilityConfig={VIEWABILITY_CONFIG} />
+    <FlatList_BaseOnViewableItemsChanged waitForInteraction={true} />
   ),
 }: RNTesterModuleExample);

packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js

@@ -18,6 +18,12 @@ import NestedExample from './FlatList-nested';
 import OnEndReachedExample from './FlatList-onEndReached';
 import OnStartReachedExample from './FlatList-onStartReached';
 import onViewableItemsChangedExample from './FlatList-onViewableItemsChanged';
+import onViewableItemsChanged_waitForInteractionExample from './FlatList-onViewableItemsChanged-waitForInteraction';
+import onViewableItemsChanged_noWaitwaitForInteractionExample from './FlatList-onViewableItemsChanged-noWaitForInteraction';
+import onViewableItemsChanged_offScreen from './FlatList-onViewableItemsChanged-offScreen';
+import onViewableItemsChanged_horizontal_noWaitForInteraction from './FlatList-onViewableItemsChanged-horizontal-noWaitForInteraction';
+import onViewableItemsChanged_horizontal_waitForInteraction from './FlatList-onViewableItemsChanged-horizontal-waitForInteraction';
+import onViewableItemsChanged_horizontal_offScreen from './FlatList-onViewableItemsChanged-horizontal-offScreen';
 import StickyHeadersExample from './FlatList-stickyHeaders';
 import WithSeparatorsExample from './FlatList-withSeparators';
 
@@ -39,5 +45,11 @@ export default ({
     MultiColumnExample,
     StickyHeadersExample,
     NestedExample,
+    onViewableItemsChanged_waitForInteractionExample,
+    onViewableItemsChanged_noWaitwaitForInteractionExample,
+    onViewableItemsChanged_horizontal_waitForInteraction,
+    onViewableItemsChanged_horizontal_noWaitForInteraction,
+    onViewableItemsChanged_offScreen,
+    onViewableItemsChanged_horizontal_offScreen,
   ],
 }: RNTesterModule);