Add FlatList Visual Snapshot Tests to E2E Tests Fabric

packages/@react-native-windows/tester/overrides.json

@@ -19,6 +19,40 @@
       "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"
+    },
     {
       "type": "patch",
       "file": "src/js/examples/ActivityIndicator/ActivityIndicatorExample.windows.js",

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<string>) => {
+  return (
+    <Pressable
+      onPressIn={() => {
+        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}>
+      <Text style={styles.title}>{item}</Text>
+    </Pressable>
+  );
+};
+
+type Props = {
+  exampleProps: Partial<React.ElementConfig<typeof FlatList>>,
+  onTest?: ?() => void,
+  testLabel?: ?string,
+  testOutput?: ?string,
+  children?: ?React.Node,
+};
+
+const BaseFlatListExample = React.forwardRef(
+  // $FlowFixMe[incompatible-call]
+  (
+    props: Props,
+    ref:
+      | ((null | FlatList<string>) => mixed)
+      | {current: null | FlatList<string>, ...},
+  ) => {
+    return (
+      <View style={styles.container}>
+        {props.testOutput != null ? (
+          <View testID="test_container" style={styles.testContainer}>
+            <Text style={styles.output} numberOfLines={1} testID="output">
+              {props.testOutput}
+            </Text>
+            {props.onTest != null ? (
+              <Button
+                testID="start_test"
+                onPress={props.onTest}
+                title={props.testLabel ?? 'Test'}
+              />
+            ) : null}
+          </View>
+        ) : null}
+        {props.children}
+        <FlatList
+          {...props.exampleProps}
+          // $FlowFixMe[incompatible-type]
+          ref={ref}
+          testID="flat_list"
+          // $FlowFixMe[incompatible-type]
+          data={DATA}
+          keyExtractor={(item, index) => item + index}
+          style={styles.list}
+          // $FlowFixMe[incompatible-type-arg]
+          renderItem={Item}
+          accessible
+        />
+      </View>
+    );
+  },
+);
+
+export default (BaseFlatListExample: React.AbstractComponent<
+  Props,
+  FlatList<string>,
+>);
+
+const ITEM_INNER_HEIGHT = 70;
+const ITEM_MARGIN = 8;
+export const ITEM_HEIGHT: number = ITEM_INNER_HEIGHT + ITEM_MARGIN * 2;
+
+const styles = StyleSheet.create({
+  item: {
+    backgroundColor: 'pink',
+    paddingHorizontal: 20,
+    height: ITEM_INNER_HEIGHT,
+    marginVertical: ITEM_MARGIN,
+    justifyContent: 'center',
+  },
+  header: {
+    fontSize: 32,
+    backgroundColor: 'white',
+  },
+  title: {
+    fontSize: 24,
+  },
+  titleContainer: {
+    position: 'absolute',
+    top: 45,
+    left: 0,
+    right: 0,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    backgroundColor: 'gray',
+    zIndex: 1,
+  },
+  titleText: {
+    fontSize: 24,
+    lineHeight: 44,
+    fontWeight: 'bold',
+  },
+  testContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: '#f2f2f7ff',
+    height: 40,
+  },
+  output: {
+    fontSize: 12,
+  },
+  separator: {
+    height: 12,
+  },
+  separatorText: {
+    fontSize: 10,
+  },
+  list: {
+    flex: 1,
+  },
+  container: {flex: 1},
+  offScreen: {
+    height: 1000,
+  },
+});