From c54282636cca13af013d2dff8e5143f4f3def09f Mon Sep 17 00:00:00 2001 From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com> Date: Fri, 22 Mar 2024 12:18:08 -0700 Subject: [PATCH 01/11] Add FlatList Tests --- .../tester/overrides.json | 37 +- .../FlatList/BaseFlatListExample.windows.js | 175 + .../FlatList/FlatList-basic.windows.js | 453 + .../FlatList/FlatList-multiColumn.windows.js | 216 + .../FlatList/FlatList-nested.windows.js | 342 + .../FlatList-stickyHeaders.windows.js | 74 + .../test/FlatListComponentTest.test.ts | 127 + .../FlatListComponentTest.test.ts.snap | 56177 ++++++++++++++++ 8 files changed, 57600 insertions(+), 1 deletion(-) create mode 100644 packages/@react-native-windows/tester/src/js/examples/FlatList/BaseFlatListExample.windows.js create mode 100644 packages/@react-native-windows/tester/src/js/examples/FlatList/FlatList-basic.windows.js create mode 100644 packages/@react-native-windows/tester/src/js/examples/FlatList/FlatList-multiColumn.windows.js create mode 100644 packages/@react-native-windows/tester/src/js/examples/FlatList/FlatList-nested.windows.js create mode 100644 packages/@react-native-windows/tester/src/js/examples/FlatList/FlatList-stickyHeaders.windows.js create mode 100644 packages/e2e-test-app-fabric/test/FlatListComponentTest.test.ts create mode 100644 packages/e2e-test-app-fabric/test/__snapshots__/FlatListComponentTest.test.ts.snap diff --git a/packages/@react-native-windows/tester/overrides.json b/packages/@react-native-windows/tester/overrides.json index cf5ced1f045..a440a365d4c 100644 --- a/packages/@react-native-windows/tester/overrides.json +++ b/packages/@react-native-windows/tester/overrides.json @@ -19,6 +19,41 @@ "baseFile": "packages/rn-tester/js/examples/Switch/SwitchExample.js", "baseHash": "fdf533bef0d75f8126faf21186b160ae7616e81f" }, + { + "type": "patch", + "file": "src/js/examples/FlatList/BaseFlatListExample.windows.js", + "baseFile": "packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js", + "baseHash": "0534172146a367964104ea45b2193cd389108b46", + "issue": 12869 + }, + { + "type": "patch", + "file": "src/js/examples/FlatList/FlatList-basic.windows.js", + "baseFile": "packages/rn-tester/js/examples/FlatList/FlatList-basic.js", + "baseHash": "5a8bd77ecd44a43f5de57cf3fcf1653ed4f85818", + "issue": 12869 + }, + { + "type": "patch", + "file": "src/js/examples/FlatList/FlatList-multiColumn.windows.js", + "baseFile": "packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js", + "baseHash": "194b5caf919b2acb35ba5e0766b8b8451345e7a8", + "issue": 12869 + }, + { + "type": "patch", + "file": "src/js/examples/FlatList/FlatList-nested.windows.js", + "baseFile": "packages/rn-tester/js/examples/FlatList/FlatList-nested.js", + "baseHash": "960b318861263f59423188b5d4f3e2de5dac4e66", + "issue": 12869 + }, + { + "type": "patch", + "file": "src/js/examples/FlatList/FlatList-stickyHeaders.windows.js", + "baseFile": "packages/rn-tester/js/examples/FlatList/FlatList-stickyHeaders.js", + "baseHash": "7d524f19d1e93ea6f15b87d6c8096e13bb015847", + "issue": 12869 + }, { "type": "platform", "file": "src/js/examples/HTTP/HTTPExample.js" @@ -67,4 +102,4 @@ "baseHash": "d22105d499212f4aa700d548c313fb15d178a890" } ] -} +} \ No newline at end of file diff --git a/packages/@react-native-windows/tester/src/js/examples/FlatList/BaseFlatListExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/FlatList/BaseFlatListExample.windows.js new file mode 100644 index 00000000000..30da1baf928 --- /dev/null +++ b/packages/@react-native-windows/tester/src/js/examples/FlatList/BaseFlatListExample.windows.js @@ -0,0 +1,175 @@ +/** + * 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 + */ + +import type {RenderItemProps} from 'react-native/Libraries/Lists/VirtualizedList'; + +import * as React from 'react'; +import { + Button, + FlatList, + Pressable, + StyleSheet, + Text, + View, +} from 'react-native'; + +const DATA = [ + 'Pizza', + 'Burger', + 'Risotto', + 'French Fries', + 'Onion Rings', + 'Fried Shrimps', + 'Water', + 'Coke', + 'Beer', + 'Cheesecake', + 'Ice Cream', +]; + +const Item = ({item, separators}: RenderItemProps) => { + return ( + { + separators.highlight(); + }} + onPress={() => { + separators.updateProps('trailing', {hasBeenHighlighted: true}); + separators.updateProps('leading', {hasBeenHighlighted: true}); + }} + onPressOut={() => { + separators.unhighlight(); + }} + style={({pressed}) => [ + styles.item, + { + backgroundColor: pressed ? 'red' : 'pink', + }, + ]} + testID={item}> + {item} + + ); +}; + +type Props = { + exampleProps: Partial>, + onTest?: ?() => void, + testLabel?: ?string, + testOutput?: ?string, + children?: ?React.Node, +}; + +const BaseFlatListExample = React.forwardRef( + // $FlowFixMe[incompatible-call] + ( + props: Props, + ref: + | ((null | FlatList) => mixed) + | {current: null | FlatList, ...}, + ) => { + return ( + + {props.testOutput != null ? ( + + + {props.testOutput} + + {props.onTest != null ? ( +