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);