From 5ff8a19797fdb7db28c6341b398ac59ab714e6c7 Mon Sep 17 00:00:00 2001 From: Shawn Dempsey Date: Thu, 29 Aug 2024 23:21:43 -0700 Subject: [PATCH] Migrate FlatList/SectionList from Catalyst to RNTester Summary: **Context** - RNTester can be built for ios/android on new/legacy arch - We are migrating all our catalyst rntester E2E tests to rntester standalone - [Here is a list](https://docs.google.com/document/d/16ga5R-c2kBx_l2ATTcHL7aJiSSt3eEXQV9tD4MvSb4Q) of E2E tests w/ `coverages: ["internal"]` - The FlatList/Section list tests were never run on RNTester. These were only accessible via the Catalyst E2E test landing page {F1835450142} **Change** - Migrate FlatList/SectionList from Catalyst to RNTester - Fix deeplinks for rntester (remove `viewability-` prefix) - Add a `isE2ETestCase` flag for these test cases since we don't want to show all these similar versions in the UI |without flag|with flag| |{F1835455698}| {F1835488548} | NOTE: There are some flakey rntester e2e tests. Will do my best to forward fix or disable if they cause too much churn. Differential Revision: D62002065 --- .../js/components/RNTesterModuleContainer.js | 4 +- ...> FlatList-onViewableItemsChanged-base.js} | 19 +----- ...FlatList-onViewableItemsChanged-default.js | 33 ++++++++++ ...ewableItemsChanged-horizontal-offScreen.js | 35 ++++++++++ ...msChanged-horizontal-waitForInteraction.js | 36 ++++++++++ ...tList-onViewableItemsChanged-horizontal.js | 35 ++++++++++ ...ewableItemsChanged-noWaitForInteraction.js | 34 ++++++++++ ...atList-onViewableItemsChanged-offScreen.js | 35 ++++++++++ ...ViewableItemsChanged-waitForInteraction.js | 34 ++++++++++ .../examples/FlatList/FlatListExampleIndex.js | 14 +++- ...SectionList-onViewableItemsChanged-base.js | 65 +++++++++++++++++++ ...ewableItemsChanged-horizontal-offScreen.js | 35 ++++++++++ ...msChanged-horizontal-waitForInteraction.js | 35 ++++++++++ ...nList-onViewableItemsChanged-horizontal.js | 34 ++++++++++ ...ewableItemsChanged-noWaitForInteraction.js | 32 +++++++++ ...onList-onViewableItemsChanged-offScreen.js | 34 ++++++++++ ...ViewableItemsChanged-waitForInteraction.js | 33 ++++++++++ .../SectionList-onViewableItemsChanged.js | 65 ++----------------- .../examples/SectionList/SectionListIndex.js | 12 +++- packages/rn-tester/js/types/RNTesterTypes.js | 1 + 20 files changed, 546 insertions(+), 79 deletions(-) rename packages/rn-tester/js/examples/FlatList/{FlatList-onViewableItemsChanged.js => FlatList-onViewableItemsChanged-base.js} (76%) create mode 100644 packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-default.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-horizontal.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-onViewableItemsChanged-base.js create mode 100644 packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-offScreen.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-horizontal.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.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..d6d454529f787d 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 hideE2ETestCases = (ex: RNTesterModuleExample) => + ex.isE2ETestCase !== true; const sections = [ { - data: module.examples, + data: module.examples.filter(hideE2ETestCases), title: 'EXAMPLES', key: 'e', }, diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-base.js similarity index 76% rename from packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js rename to packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-base.js index 72764795749074..c00aa37490e7a8 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js +++ b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-base.js @@ -10,7 +10,6 @@ 'use strict'; -import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import type {ViewToken} from 'react-native/Libraries/Lists/ViewabilityHelper'; import BaseFlatListExample from './BaseFlatListExample'; @@ -20,13 +19,7 @@ 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: { +export function FlatList_onViewableItemsChanged_base(props: { viewabilityConfig: ViewabilityConfig, offScreen?: ?boolean, horizontal?: ?boolean, @@ -74,13 +67,3 @@ const styles = StyleSheet.create({ height: 1000, }, }); - -export default ({ - title: 'onViewableItemsChanged', - name: 'onViewableItemsChanged', - description: - 'Scroll list to see what items are returned in `onViewableItemsChanged` callback.', - render: () => ( - - ), -}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-default.js b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-default.js new file mode 100644 index 00000000000000..eb19c02563f05f --- /dev/null +++ b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-default.js @@ -0,0 +1,33 @@ +/** + * 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_onViewableItemsChanged_base} from 'FlatList-onViewableItemsChanged-base'; +import * as React from 'react'; + +const VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION = { + minimumViewTime: 1000, + viewAreaCoveragePercentThreshold: 100, + waitForInteraction: true, +}; + +export default ({ + title: 'FlatList onViewableItemsChanged', + name: 'onViewableItemsChanged-waitForInteraction', + description: 'Test onViewableItemsChanged behavior', + 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..b7e04d990582f3 --- /dev/null +++ b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal-offScreen.js @@ -0,0 +1,35 @@ +/** + * 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_onViewableItemsChanged_base} from 'FlatList-onViewableItemsChanged-base'; +import * as React from 'react'; + +const VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION = { + minimumViewTime: 1000, + viewAreaCoveragePercentThreshold: 100, + waitForInteraction: true, +}; + +export default ({ + title: 'onViewableItemsChanged', + name: 'onViewableItemsChanged-horizontal', + description: 'E2E Testing:\nonViewableItemsChanged-horizontal', + isE2ETestCase: 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..964f276cf640fd --- /dev/null +++ b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal-waitForInteraction.js @@ -0,0 +1,36 @@ +/** + * 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_onViewableItemsChanged_base} from 'FlatList-onViewableItemsChanged-base'; +import * as React from 'react'; + +const VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION = { + minimumViewTime: 1000, + viewAreaCoveragePercentThreshold: 100, + waitForInteraction: true, +}; + +export default ({ + title: 'onViewableItemsChanged', + name: 'onViewableItemsChanged-horizontal-waitForInteraction', + description: + 'E2E Testing:\nonViewableItemsChanged-horizontal-waitForInteraction', + isE2ETestCase: true, + render: () => ( + + ), +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal.js b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal.js new file mode 100644 index 00000000000000..b7e04d990582f3 --- /dev/null +++ b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-horizontal.js @@ -0,0 +1,35 @@ +/** + * 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_onViewableItemsChanged_base} from 'FlatList-onViewableItemsChanged-base'; +import * as React from 'react'; + +const VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION = { + minimumViewTime: 1000, + viewAreaCoveragePercentThreshold: 100, + waitForInteraction: true, +}; + +export default ({ + title: 'onViewableItemsChanged', + name: 'onViewableItemsChanged-horizontal', + description: 'E2E Testing:\nonViewableItemsChanged-horizontal', + isE2ETestCase: 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..391bd2896879d9 --- /dev/null +++ b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-noWaitForInteraction.js @@ -0,0 +1,34 @@ +/** + * 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_onViewableItemsChanged_base} from 'FlatList-onViewableItemsChanged-base'; +import * as React from 'react'; + +const VIEWABILITY_CONFIG_NO_WAIT_FOR_INTERACTION = { + minimumViewTime: 1000, + viewAreaCoveragePercentThreshold: 100, + waitForInteraction: false, +}; + +export default ({ + title: 'onViewableItemsChanged', + name: 'onViewableItemsChanged_noWaitForInteraction', + description: 'E2E Testing:\nonViewableItemsChanged-noWaitForInteraction', + isE2ETestCase: 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..714a360eea5d2f --- /dev/null +++ b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-offScreen.js @@ -0,0 +1,35 @@ +/** + * 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_onViewableItemsChanged_base} from 'FlatList-onViewableItemsChanged-base'; +import * as React from 'react'; + +const VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION = { + minimumViewTime: 1000, + viewAreaCoveragePercentThreshold: 100, + waitForInteraction: true, +}; + +export default ({ + title: 'onViewableItemsChanged', + name: 'onViewableItemsChanged-offScreen', + description: 'E2E Testing:\nonViewableItemsChanged-offScreen', + isE2ETestCase: 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..93da1fcbb54564 --- /dev/null +++ b/packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged-waitForInteraction.js @@ -0,0 +1,34 @@ +/** + * 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_onViewableItemsChanged_base} from 'FlatList-onViewableItemsChanged-base'; +import * as React from 'react'; + +const VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION = { + minimumViewTime: 1000, + viewAreaCoveragePercentThreshold: 100, + waitForInteraction: true, +}; + +export default ({ + title: 'onViewableItemsChanged', + name: 'onViewableItemsChanged-waitForInteraction', + description: 'E2E Testing:\nonViewableItemsChanged-waitForInteraction', + isE2ETestCase: true, + render: () => ( + + ), +}: RNTesterModuleExample); diff --git a/packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js b/packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js index 2a64d772cdea24..762e3213237954 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js +++ b/packages/rn-tester/js/examples/FlatList/FlatListExampleIndex.js @@ -17,7 +17,13 @@ import MultiColumnExample from './FlatList-multiColumn'; import NestedExample from './FlatList-nested'; import OnEndReachedExample from './FlatList-onEndReached'; import OnStartReachedExample from './FlatList-onStartReached'; -import onViewableItemsChangedExample from './FlatList-onViewableItemsChanged'; +import onViewableItemsChangedExample from './FlatList-onViewableItemsChanged-default'; +import onViewableItemsChanged_waitForInteractionExample from './FlatList-onViewableItemsChanged-waitForInteraction'; +import onViewableItemsChanged_noWaitwaitForInteractionExample from './FlatList-onViewableItemsChanged-noWaitForInteraction'; +import onViewableItemsChanged_offScreen from './FlatList-onViewableItemsChanged-offScreen'; +import onViewableItemsChanged_horizontal from './FlatList-onViewableItemsChanged-horizontal'; +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_offScreen, + onViewableItemsChanged_horizontal, + onViewableItemsChanged_horizontal_waitForInteraction, + onViewableItemsChanged_horizontal_offScreen, ], }: RNTesterModule); diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-base.js b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-base.js new file mode 100644 index 00000000000000..382af6c1130a90 --- /dev/null +++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-base.js @@ -0,0 +1,65 @@ +/** + * 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; + +export function SectionList_onViewableItemsChanged_base(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, + }, +}); diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-offScreen.js b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-offScreen.js new file mode 100644 index 00000000000000..21ed1a0b6d7276 --- /dev/null +++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-offScreen.js @@ -0,0 +1,35 @@ +/** + * 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_onViewableItemsChanged_base} from 'SectionList-onViewableItemsChanged-base'; + +import * as React from 'react'; + +const VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION = { + minimumViewTime: 1000, + viewAreaCoveragePercentThreshold: 100, + waitForInteraction: true, +}; + +export default { + title: 'onViewableItemsChanged', + name: 'onViewableItemsChanged-horizontal-offScreen', + description: 'E2E Testing:\nonViewableItemsChanged-horizontal-offScreen', + isE2ETestCase: 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..2372204a79ae5e --- /dev/null +++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal-waitForInteraction.js @@ -0,0 +1,35 @@ +/** + * 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_onViewableItemsChanged_base} from 'SectionList-onViewableItemsChanged-base'; + +import * as React from 'react'; + +const VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION = { + minimumViewTime: 1000, + viewAreaCoveragePercentThreshold: 100, + waitForInteraction: true, +}; + +export default { + title: 'onViewableItemsChanged', + name: 'onViewableItemsChanged-horizontal-waitForInteraction', + description: + 'E2E Testing:\nonViewableItemsChanged-horizontal-waitForInteraction', + isE2ETestCase: true, + render: function (): React.MixedElement { + return ( + + ); + }, +}; diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal.js b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal.js new file mode 100644 index 00000000000000..f53e6f58caf1d5 --- /dev/null +++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-horizontal.js @@ -0,0 +1,34 @@ +/** + * 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_onViewableItemsChanged_base} from 'SectionList-onViewableItemsChanged-base'; + +import * as React from 'react'; + +const VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION = { + minimumViewTime: 1000, + viewAreaCoveragePercentThreshold: 100, + waitForInteraction: true, +}; + +export default { + title: 'onViewableItemsChanged', + name: 'onViewableItemsChanged-horizontal', + description: 'E2E Testing:\nonViewableItemsChanged-horizontal', + isE2ETestCase: 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..01d408199e5d6b --- /dev/null +++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-noWaitForInteraction.js @@ -0,0 +1,32 @@ +/** + * 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_onViewableItemsChanged_base} from 'SectionList-onViewableItemsChanged-base'; + +import * as React from 'react'; + +const VIEWABILITY_CONFIG_NO_WAIT_FOR_INTERACTION = { + minimumViewTime: 1000, + viewAreaCoveragePercentThreshold: 100, + waitForInteraction: false, +}; + +export default { + title: 'onViewableItemsChanged', + name: 'onViewableItemsChanged-noWaitForInteraction', + description: 'E2E Testing:\nonViewableItemsChanged-noWaitForInteraction', + render: function (): React.MixedElement { + return ( + + ); + }, +}; diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-offScreen.js b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-offScreen.js new file mode 100644 index 00000000000000..59c4925bf548d9 --- /dev/null +++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-offScreen.js @@ -0,0 +1,34 @@ +/** + * 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_onViewableItemsChanged_base} from 'SectionList-onViewableItemsChanged-base'; + +import * as React from 'react'; + +const VIEWABILITY_CONFIG_NO_WAIT_FOR_INTERACTION = { + minimumViewTime: 1000, + viewAreaCoveragePercentThreshold: 100, + waitForInteraction: false, +}; + +export default { + title: 'onViewableItemsChanged', + name: 'onViewableItemsChanged-offScreen', + description: 'E2E Testing:\nonViewableItemsChanged-offScreen', + isE2ETestCase: 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..99400124284a87 --- /dev/null +++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged-waitForInteraction.js @@ -0,0 +1,33 @@ +/** + * 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_onViewableItemsChanged_base} from 'SectionList-onViewableItemsChanged-base'; + +import * as React from 'react'; + +const VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION = { + minimumViewTime: 1000, + viewAreaCoveragePercentThreshold: 100, + waitForInteraction: true, +}; + +export default { + title: 'onViewableItemsChanged', + name: 'onViewableItemsChanged-waitForInteraction', + description: 'E2E Testing:\nonViewableItemsChanged-waitForInteraction', + isE2ETestCase: 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..4c5952f772a23c 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged.js +++ b/packages/rn-tester/js/examples/SectionList/SectionList-onViewableItemsChanged.js @@ -8,75 +8,24 @@ * @flow */ -import type {ViewToken} from 'react-native/Libraries/Lists/ViewabilityHelper'; +import {SectionList_onViewableItemsChanged_base} from 'SectionList-onViewableItemsChanged-base'; -import SectionListBaseExample from './SectionListBaseExample'; import * as React from 'react'; -import {SectionList, StyleSheet, View} from 'react-native'; -const VIEWABILITY_CONFIG = { +const VIEWABILITY_CONFIG_WAIT_FOR_INTERACTION = { 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/SectionListIndex.js b/packages/rn-tester/js/examples/SectionList/SectionListIndex.js index cf597b44f54cf3..7a387abbd74e22 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionListIndex.js +++ b/packages/rn-tester/js/examples/SectionList/SectionListIndex.js @@ -11,10 +11,15 @@ '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 from './SectionList-onViewableItemsChanged-horizontal'; +import onViewableItemsChanged_horizontal_offScreen from './SectionList-onViewableItemsChanged-horizontal-offScreen'; +import onViewableItemsChanged_horizontal_waitForInteraction from './SectionList-onViewableItemsChanged-horizontal-waitForInteraction'; +import onViewableItemsChanged_offScreen from './SectionList-onViewableItemsChanged-offScreen'; +import onViewableItemsChanged_waitForInteraction from './SectionList-onViewableItemsChanged-waitForInteraction'; import stickyHeadersEnabled from './SectionList-stickyHeadersEnabled'; import withSeparators from './SectionList-withSeparators'; @@ -31,4 +36,9 @@ exports.examples = [ stickyHeadersEnabled, inverted, Scrollable, + onViewableItemsChanged_waitForInteraction, + onViewableItemsChanged_offScreen, + onViewableItemsChanged_horizontal, + onViewableItemsChanged_horizontal_waitForInteraction, + onViewableItemsChanged_horizontal_offScreen, ]; diff --git a/packages/rn-tester/js/types/RNTesterTypes.js b/packages/rn-tester/js/types/RNTesterTypes.js index 93fd73bce48112..65799abec7ca9d 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, + isE2ETestCase?: boolean, render: ({testID?: ?string}) => React.Node, |}>;