From 1da02f0953b0c6bec0a17adaff819d668edf74fe Mon Sep 17 00:00:00 2001 From: Shawn Dempsey Date: Fri, 6 Sep 2024 10:51:47 -0700 Subject: [PATCH] Migrate FlatList/SectionList E2E testss from Catalyst to RNTester (#46274) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/46274 Changelog: [RNTester][Add] - Add E2E test cases for Flat/SectionList to RNTester Reviewed By: philIip Differential Revision: D62002065 --- .../js/components/RNTesterModuleContainer.js | 4 +- .../examples/FlatList/BaseFlatListExample.js | 2 +- .../FlatList-BaseOnViewableItemsChanged.js | 78 +++++++++++++++++++ ...Changed-horizontal-noWaitForInteraction.js | 30 +++++++ ...ewableItemsChanged-horizontal-offScreen.js | 29 +++++++ ...msChanged-horizontal-waitForInteraction.js | 30 +++++++ ...ewableItemsChanged-noWaitForInteraction.js | 26 +++++++ ...atList-onViewableItemsChanged-offScreen.js | 29 +++++++ ...ViewableItemsChanged-waitForInteraction.js | 26 +++++++ .../FlatList-onViewableItemsChanged.js | 69 +--------------- .../examples/FlatList/FlatListExampleIndex.js | 12 +++ .../SectionList-BaseOnViewableItemsChanged.js | 74 ++++++++++++++++++ .../SectionList/SectionList-contentInset.js | 2 +- .../SectionList/SectionList-inverted.js | 2 +- .../SectionList/SectionList-onEndReached.js | 2 +- ...Changed-horizontal-noWaitForInteraction.js | 29 +++++++ ...rizontal-offScreen-noWaitForInteraction.js | 30 +++++++ ...msChanged-horizontal-waitForInteraction.js | 29 +++++++ ...ewableItemsChanged-noWaitForInteraction.js | 24 ++++++ ...sChanged-offScreen-noWaitForInteraction.js | 29 +++++++ ...ViewableItemsChanged-waitForInteraction.js | 23 ++++++ .../SectionList-onViewableItemsChanged.js | 69 ++-------------- .../SectionList/SectionList-scrollable.js | 2 +- .../SectionList-stickyHeadersEnabled.js | 2 +- .../SectionList/SectionList-withSeparators.js | 2 +- .../SectionList/SectionListBaseExample.js | 2 +- .../examples/SectionList/SectionListIndex.js | 14 +++- packages/rn-tester/js/types/RNTesterTypes.js | 1 + 28 files changed, 532 insertions(+), 139 deletions(-) create mode 100644 packages/rn-tester/js/examples/FlatList/FlatList-BaseOnViewableItemsChanged.js create mode 100644 packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal-noWaitForInteraction.js create mode 100644 packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal-offScreen.js create mode 100644 packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal-waitForInteraction.js create mode 100644 packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-noWaitForInteraction.js create mode 100644 packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-offScreen.js create mode 100644 packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-waitForInteraction.js create mode 100644 packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js create mode 100644 packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-noWaitForInteraction.js create mode 100644 packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-offScreen-noWaitForInteraction.js create mode 100644 packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-waitForInteraction.js create mode 100644 packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-noWaitForInteraction.js create mode 100644 packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-offScreen-noWaitForInteraction.js create mode 100644 packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-waitForInteraction.js diff --git a/packages/rn-tester/js/components/RNTesterModuleContainer.js b/packages/rn-tester/js/components/RNTesterModuleContainer.js index 6ab29649a760a2..27252d24b20155 100644 --- a/packages/rn-tester/js/components/RNTesterModuleContainer.js +++ b/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', }, diff --git a/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js b/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js index bcbd8715954a07..0ab981a233de13 100644 --- a/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js +++ b/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) => { diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-BaseOnViewableItemsChanged.js b/packages/rn-tester/js/examples/FlatList/FlatList-BaseOnViewableItemsChanged.js new file mode 100644 index 00000000000000..5e50bfa5ffbe55 --- /dev/null +++ b/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; +type ViewabilityConfig = $PropertyType; + +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, viewableItems: Array, ...}) => + 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(null); + const onTest = + useScrollRefScroll === true + ? () => { + ref?.current?.getScrollResponder()?.scrollToEnd(); + } + : null; + + return ( + + {offScreen === true ? : null} + + ); +} + +const styles = StyleSheet.create({ + offScreen: { + height: 1000, + }, +}); diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal-noWaitForInteraction.js b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal-noWaitForInteraction.js new file mode 100644 index 00000000000000..af39b08c33e2b0 --- /dev/null +++ b/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: () => ( + + ), +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal-offScreen.js b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal-offScreen.js new file mode 100644 index 00000000000000..86c11e4d7de218 --- /dev/null +++ b/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: () => ( + + ), +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal-waitForInteraction.js b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal-waitForInteraction.js new file mode 100644 index 00000000000000..bda07570a82cbf --- /dev/null +++ b/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: () => ( + + ), +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-noWaitForInteraction.js b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-noWaitForInteraction.js new file mode 100644 index 00000000000000..3983da976a406f --- /dev/null +++ b/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: () => ( + + ), +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-offScreen.js b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-offScreen.js new file mode 100644 index 00000000000000..9b77418491db91 --- /dev/null +++ b/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: () => ( + + ), +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-waitForInteraction.js b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-waitForInteraction.js new file mode 100644 index 00000000000000..bd47d13c4622a3 --- /dev/null +++ b/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: () => ( + + ), +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js index 72764795749074..3e88e89f683799 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js +++ b/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; -type ViewabilityConfig = $PropertyType; - -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, viewableItems: Array, ...}) => - 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(null); - const onTest = - useScrollRefScroll === true - ? () => { - ref?.current?.getScrollResponder()?.scrollToEnd(); - } - : null; - - return ( - - {offScreen === true ? : null} - - ); -} - -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: () => ( - + ), }: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js b/packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js index 2a64d772cdea24..f730ce117b34ed 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js +++ b/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); diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js b/packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js new file mode 100644 index 00000000000000..82675e04b68936 --- /dev/null +++ b/packages/rn-tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js @@ -0,0 +1,74 @@ +/** + * 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 + */ + +import type {ViewToken} from 'react-native/Libraries/Lists/ViewabilityHelper'; + +import SectionListBaseExample from './SectionListBaseExample'; +import * as React from 'react'; +import {SectionList, StyleSheet, View} from 'react-native'; + +type SectionListProps = React.ElementProps; +type ViewabilityConfig = $PropertyType; + +const BASE_VIEWABILITY_CONFIG = { + minimumViewTime: 1000, + viewAreaCoveragePercentThreshold: 100, +}; + +export function SectionList_BaseOnViewableItemsChanged(props: { + offScreen?: ?boolean, + horizontal?: ?boolean, + useScrollRefScroll?: ?boolean, + waitForInteraction?: ?boolean, +}): React.Node { + const {offScreen, horizontal, useScrollRefScroll, waitForInteraction} = props; + const [output, setOutput] = React.useState(''); + const viewabilityConfig: ViewabilityConfig = { + ...BASE_VIEWABILITY_CONFIG, + waitForInteraction: waitForInteraction ?? false, + }; + const exampleProps = { + onViewableItemsChanged: (info: { + changed: Array, + viewableItems: Array, + ... + }) => + setOutput( + info.viewableItems + .filter(viewToken => viewToken.index != null && viewToken.isViewable) + .map(viewToken => viewToken.item) + .join(', '), + ), + viewabilityConfig, + horizontal, + }; + const ref = React.useRef(null); + const onTest = + useScrollRefScroll === true + ? () => { + ref?.current?.getScrollResponder()?.scrollToEnd(); + } + : null; + + return ( + + {offScreen === true ? : null} + + ); +} +const styles = StyleSheet.create({ + offScreen: { + height: 1000, + }, +}); diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-contentInset.js b/packages/rn-tester/js/examples/SectionList/SectionList-contentInset.js index b71ee19aa8e1da..f0ef63e3170e84 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionList-contentInset.js +++ b/packages/rn-tester/js/examples/SectionList/SectionList-contentInset.js @@ -77,7 +77,7 @@ const styles = StyleSheet.create({ export default { title: 'SectionList Content Inset', platform: 'ios', - name: 'SectionList-contentInset', + name: 'contentInset', render: function (): React.MixedElement { return ; }, diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-inverted.js b/packages/rn-tester/js/examples/SectionList/SectionList-inverted.js index 9dbe55819c02f7..cab5d421605c39 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionList-inverted.js +++ b/packages/rn-tester/js/examples/SectionList/SectionList-inverted.js @@ -37,7 +37,7 @@ export function SectionList_inverted(): React.Node { export default { title: 'SectionList Inverted', - name: 'SectionList-inverted', + name: 'inverted', render: function (): React.MixedElement { return ; }, diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-onEndReached.js b/packages/rn-tester/js/examples/SectionList/SectionList-onEndReached.js index f1f9812b999ba8..4ca950e0d1182a 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionList-onEndReached.js +++ b/packages/rn-tester/js/examples/SectionList/SectionList-onEndReached.js @@ -39,7 +39,7 @@ export function SectionList_onEndReached(): React.Node { export default { title: 'SectionList onEndReached', - name: 'SectionList-onEndReached', + name: 'onEndReached', description: 'Test onEndReached behavior', render: function (): React.MixedElement { return ; diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-noWaitForInteraction.js b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-noWaitForInteraction.js new file mode 100644 index 00000000000000..158e884c67d389 --- /dev/null +++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-noWaitForInteraction.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 + */ + +import {SectionList_BaseOnViewableItemsChanged} from './SectionList-BaseOnViewableItemsChanged'; + +import * as React from 'react'; + +export default { + title: 'onViewableItemsChanged horizontal', + name: 'onViewableItemsChanged-horizontal-noWaitForInteraction', + description: + 'E2E Test:\nonViewableItemsChanged-horizontal-noWaitForInteraction', + hidden: true, + render: function (): React.MixedElement { + return ( + + ); + }, +}; diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-offScreen-noWaitForInteraction.js b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-offScreen-noWaitForInteraction.js new file mode 100644 index 00000000000000..af5c90df4342cc --- /dev/null +++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-offScreen-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 + */ + +import {SectionList_BaseOnViewableItemsChanged} from './SectionList-BaseOnViewableItemsChanged'; + +import * as React from 'react'; + +export default { + title: 'onViewableItemsChanged horizontal', + name: 'onViewableItemsChanged-horizontal-offScreen-noWaitForInteraction', + description: + 'E2E Test:\nonViewableItemsChanged-horizontal-offScreen-noWaitForInteraction', + hidden: true, + render: function (): React.MixedElement { + return ( + + ); + }, +}; diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-waitForInteraction.js b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-waitForInteraction.js new file mode 100644 index 00000000000000..5cf2fccfbc3581 --- /dev/null +++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-waitForInteraction.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 + */ + +import {SectionList_BaseOnViewableItemsChanged} from './SectionList-BaseOnViewableItemsChanged'; + +import * as React from 'react'; + +export default { + title: 'onViewableItemsChanged horizontal', + name: 'onViewableItemsChanged-horizontal-waitForInteraction', + description: + 'E2E Test:\nonViewableItemsChanged-horizontal-waitForInteraction', + hidden: true, + render: function (): React.MixedElement { + return ( + + ); + }, +}; diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-noWaitForInteraction.js b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-noWaitForInteraction.js new file mode 100644 index 00000000000000..0b877ef08fd4cd --- /dev/null +++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-noWaitForInteraction.js @@ -0,0 +1,24 @@ +/** + * 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 + */ + +import {SectionList_BaseOnViewableItemsChanged} from './SectionList-BaseOnViewableItemsChanged'; + +import * as React from 'react'; + +export default { + title: 'onViewableItemsChanged', + name: 'onViewableItemsChanged-noWaitForInteraction', + description: 'E2E Test:\nonViewableItemsChanged-noWaitForInteraction', + render: function (): React.MixedElement { + return ( + + ); + }, +}; diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-offScreen-noWaitForInteraction.js b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-offScreen-noWaitForInteraction.js new file mode 100644 index 00000000000000..cb123be94f2ec3 --- /dev/null +++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-offScreen-noWaitForInteraction.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 + */ + +import {SectionList_BaseOnViewableItemsChanged} from './SectionList-BaseOnViewableItemsChanged'; + +import * as React from 'react'; + +export default { + title: 'onViewableItemsChanged offScreen', + name: 'onViewableItemsChanged-offScreen-noWaitForInteraction', + description: + 'E2E Test:\nonViewableItemsChanged-offScreen-noWaitForInteraction', + hidden: true, + render: function (): React.MixedElement { + return ( + + ); + }, +}; diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-waitForInteraction.js b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-waitForInteraction.js new file mode 100644 index 00000000000000..457992dd7e1ebb --- /dev/null +++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-waitForInteraction.js @@ -0,0 +1,23 @@ +/** + * 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 + */ + +import {SectionList_BaseOnViewableItemsChanged} from './SectionList-BaseOnViewableItemsChanged'; + +import * as React from 'react'; + +export default { + title: 'onViewableItemsChanged', + name: 'onViewableItemsChanged-waitForInteraction', + description: 'E2E Test:\nonViewableItemsChanged-waitForInteraction', + hidden: true, + render: function (): React.MixedElement { + return ; + }, +}; diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged.js b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged.js index fbd5ef4dbbb41b..d0b8c352130676 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged.js +++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged.js @@ -8,76 +8,17 @@ * @flow */ -import type {ViewToken} from 'react-native/Libraries/Lists/ViewabilityHelper'; +import {SectionList_BaseOnViewableItemsChanged} from './SectionList-BaseOnViewableItemsChanged'; -import SectionListBaseExample from './SectionListBaseExample'; import * as React from 'react'; -import {SectionList, StyleSheet, View} from 'react-native'; - -const VIEWABILITY_CONFIG = { - minimumViewTime: 1000, - viewAreaCoveragePercentThreshold: 100, - waitForInteraction: true, -}; - -type SectionListProps = React.ElementProps; -type ViewabilityConfig = $PropertyType; - -export function SectionList_onViewableItemsChanged(props: { - viewabilityConfig: ViewabilityConfig, - offScreen?: ?boolean, - horizontal?: ?boolean, - useScrollRefScroll?: ?boolean, -}): React.Node { - const {viewabilityConfig, offScreen, horizontal, useScrollRefScroll} = props; - const [output, setOutput] = React.useState(''); - const exampleProps = { - onViewableItemsChanged: (info: { - changed: Array, - viewableItems: Array, - ... - }) => - setOutput( - info.viewableItems - .filter(viewToken => viewToken.index != null && viewToken.isViewable) - .map(viewToken => viewToken.item) - .join(', '), - ), - viewabilityConfig, - horizontal, - }; - const ref = React.useRef(null); - const onTest = - useScrollRefScroll === true - ? () => { - ref?.current?.getScrollResponder()?.scrollToEnd(); - } - : null; - - return ( - - {offScreen === true ? : null} - - ); -} -const styles = StyleSheet.create({ - offScreen: { - height: 1000, - }, -}); export default { - title: 'SectionList On Viewable Items Changed', - name: 'SectionList_onViewableItemsChanged', + title: 'SectionList onViewableItemsChanged', + name: 'onViewableItemsChanged', + description: 'Test onViewableItemsChanged behavior', render: function (): React.MixedElement { return ( - + ); }, }; diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js b/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js index e5198cce96adbd..cc578631d167e5 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js +++ b/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js @@ -358,7 +358,7 @@ const styles = StyleSheet.create({ export default { title: 'SectionList scrollable', - name: 'SectionList-scrollable', + name: 'scrollable', render: function (): React.MixedElement { return ; }, diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-stickyHeadersEnabled.js b/packages/rn-tester/js/examples/SectionList/SectionList-stickyHeadersEnabled.js index 8a9311c34e471f..dcd5b89aa0d917 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionList-stickyHeadersEnabled.js +++ b/packages/rn-tester/js/examples/SectionList/SectionList-stickyHeadersEnabled.js @@ -43,7 +43,7 @@ export function SectionList_stickySectionHeadersEnabled(): React.Node { export default { title: 'SectionList Sticky Headers Enabled', - name: 'SectionList-stickyHeadersEnabled', + name: 'stickyHeadersEnabled', description: 'Toggle sticky headers on/off', render: function (): React.MixedElement { return ; diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-withSeparators.js b/packages/rn-tester/js/examples/SectionList/SectionList-withSeparators.js index ad35234d9b004d..80358011cc9fff 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionList-withSeparators.js +++ b/packages/rn-tester/js/examples/SectionList/SectionList-withSeparators.js @@ -53,7 +53,7 @@ const styles = StyleSheet.create({ export default { title: 'SectionList With Separators', - name: 'SectionList-withSeparators', + name: 'withSeparators', render: function (): React.MixedElement { return ; }, diff --git a/packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js b/packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js index 1503cd6796bcc8..fdca0dd80b89aa 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js +++ b/packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js @@ -33,7 +33,7 @@ const DATA = [ }, { title: 'Desserts', - data: ['Cheesecake', 'Ice Cream'], + data: ['Cheesecake', 'Brownie'], }, ]; diff --git a/packages/rn-tester/js/examples/SectionList/SectionListIndex.js b/packages/rn-tester/js/examples/SectionList/SectionListIndex.js index cf597b44f54cf3..767d8823d49a9d 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionListIndex.js +++ b/packages/rn-tester/js/examples/SectionList/SectionListIndex.js @@ -11,10 +11,16 @@ 'use strict'; import ContentInset from './SectionList-contentInset'; +import Scrollable from './SectionList-scrollable'; import inverted from './SectionList-inverted'; import onEndReached from './SectionList-onEndReached'; import onViewableItemsChanged from './SectionList-onViewableItemsChanged'; -import Scrollable from './SectionList-scrollable'; +import onViewableItemsChanged_horizontal_noWaitForInteraction from './SectionList-onViewableItemsChanged-horizontal-noWaitForInteraction'; +import onViewableItemsChanged_horizontal_offScreen_noWaitForInteraction from './SectionList-onViewableItemsChanged-horizontal-offScreen-noWaitForInteraction'; +import onViewableItemsChanged_horizontal_waitForInteraction from './SectionList-onViewableItemsChanged-horizontal-waitForInteraction'; +import onViewableItemsChanged_noWaitForInteraction from './SectionList-onViewableItemsChanged-noWaitForInteraction'; +import onViewableItemsChanged_offScreen_noWaitForInteraction from './SectionList-onViewableItemsChanged-offScreen-noWaitForInteraction'; +import onViewableItemsChanged_waitForInteraction from './SectionList-onViewableItemsChanged-waitForInteraction'; import stickyHeadersEnabled from './SectionList-stickyHeadersEnabled'; import withSeparators from './SectionList-withSeparators'; @@ -31,4 +37,10 @@ exports.examples = [ stickyHeadersEnabled, inverted, Scrollable, + onViewableItemsChanged_noWaitForInteraction, + onViewableItemsChanged_waitForInteraction, + onViewableItemsChanged_horizontal_noWaitForInteraction, + onViewableItemsChanged_horizontal_waitForInteraction, + onViewableItemsChanged_horizontal_offScreen_noWaitForInteraction, + onViewableItemsChanged_offScreen_noWaitForInteraction, ]; diff --git a/packages/rn-tester/js/types/RNTesterTypes.js b/packages/rn-tester/js/types/RNTesterTypes.js index 93fd73bce48112..53500cc1fa04f6 100644 --- a/packages/rn-tester/js/types/RNTesterTypes.js +++ b/packages/rn-tester/js/types/RNTesterTypes.js @@ -16,6 +16,7 @@ export type RNTesterModuleExample = $ReadOnly<{| platform?: 'ios' | 'android', description?: string, expect?: string, + hidden?: boolean, render: ({testID?: ?string}) => React.Node, |}>;