Microsoft/react-native-windows

Add E2E Snapshot Tests for FlatList

Open

#11277 opened on Feb 23, 2023

View on GitHub
 (1 comment) (0 reactions) (0 assignees)C# (6,114 stars) (544 forks)batch import
Area: FabricArea: FlatListArea: TestsNew ArchitectureWorkstream: Test Coverageenhancementgood first issue

Description

Add E2E Jest Snapshot Tests for FlatList. Tests should exist as samples within RNTester.

STATUS TYPES

Status Description
Not Implemented Prop is not implemented for given architecture.
Not Completed No test or sample exists for the prop.
Sample Completed Sample exists for the prop, but sample is not run in a Jest Snapshot Test.
Completed Sample and Snapshot test exists for the prop.

PROPS STATUS FOR FLATLIST

Test Description Status (Paper) Status (Fabric) Notes
Default [x] Sample Completed – RNTester [x] Completed
AccessibilityHint [ ] Not Completed [ ] Not Completed
AccessibilityLabel [ ] Not Completed [ ] Not Completed
AccessibilityActions [ ] Not Completed [ ] Not Completed
AccessibilityRole [ ] Not Completed [x] Completed
AccessibilityValue [ ] Not Completed [ ] Not Completed
ImportantforAccessibility – no-hide-descendants [ ] Not Completed [ ] Not Completed
testID [x] Sample Completed - RN Tester [x] Completed
Style – backgroundColor [ ] Not Completed [x] Completed
Style – borderBottomColor Not Implemented [ ] Not Completed
Style – borderBottomEndRadius [ ] Not Completed [ ] Not Completed
Style –borderBottomLeftRadius [ ] Not Completed [ ] Not Completed
Style – borderBottomRightRadius [ ] Not Completed [ ] Not Completed
Style – borderBottomStartRadius [ ] Not Completed [ ] Not Completed
Style – borderBottomWidth [ ] Not Completed [ ] Not Completed
Style – borderColor [ ] Not Completed [ ] Not Completed
Style – borderEndColor Not Implemented [ ] Not Completed
Style – borderLeftColor Not Implemented [ ] Not Completed
Style – borderLeftWidth [ ] Not Completed [ ] Not Completed
Style – borderRadius [ ] Not Completed [ ] Not Completed
Style – borderRightColor Not Implemented [ ] Not Completed
Style – borderStartColor Not Implemented [ ] Not Completed
Style – borderStyle Not Implemented [ ] Not Completed
Style – borderTopColor Not Implemented [ ] Not Completed
Style – borderTopEndRadius [ ] Not Completed [ ] Not Completed
Style – borderTopLeftRadius [ ] Not Completed [ ] Not Completed
Style – borderTopRightRadius [ ] Not Completed [ ] Not Completed
Style – borderTopStartRadius [ ] Not Completed [ ] Not Completed
Style – borderTopWidth [ ] Not Completed [ ] Not Completed
Style – borderWidth [ ] Not Completed [ ] Not Completed
Style – elevation Not Implemented [ ] Not Completed
Style – opacity [ ] Not Completed [ ] Not Completed
Accessible [ ] Not Completed [ ] Not Completed
Focusable [ ] Not Completed [ ] Not Completed
HitSlop [ ] Not Completed [ ] Not Completed
NativeID [ ] Not Completed [ ] Not Completed
NextFocus* [ ] Not Completed [ ] Not Completed
onAccessibilityAction [ ] Not Completed [ ] Not Completed
onAccessibilityTab [ ] Not Completed [ ] Not Completed
onAccessibilityEscape [ ] Not Completed [ ] Not Completed
onLayout [ ] Not Completed [ ] Not Completed
onMoveShoudlSetResponder [ ] Not Completed [ ] Not Completed
onMoveShouldSetResponderCapture [ ] Not Completed [ ] Not Completed
onResponderGrant [ ] Not Completed [ ] Not Completed
onResponderMove [ ] Not Completed [ ] Not Completed
onResponserReject [ ] Not Completed [ ] Not Completed
onResponderRelease [ ] Not Completed [ ] Not Completed
onResponderTerminate [ ] Not Completed [ ] Not Completed
onResponderTerminationRequest [ ] Not Completed [ ] Not Completed
onStartShouldSetResponder [ ] Not Completed [ ] Not Completed
onStartShouldSetResponderCatpure [ ] Not Completed [ ] Not Completed
pointerEvents [ ] Not Completed [ ] Not Completed
removeClippedSubviews [ ] Not Completed [ ] Not Completed
ItemSeperatorComponent [x] Sample Completed - RN Tester [x] Completed
ListEmptyComponent [x] Sample Completed - RN Tester [x] Completed
ListItemComponent [x] Sample Completed - RN Tester [x] Completed
ListFooterComponent [x] Sample Completed - RN Tester [x] Completed
ListFooterComponentStyle [ ] Not Completed [ ] Not Completed
ListHeaderComponent [ ] Not Completed [x] Completed
ListHeaderComponentStyle [ ] Not Completed [ ] Not Completed
contentContainerStyle [ ] Not Completed [x] Completed
columnWrapperStyle [ ] Not Completed [ ] Not Completed
extraData [ ] Not Completed [ ] Not Completed
getItemLayout [x] Sample Completed - RN Tester [x] Completed
Horizontal [ ] Not Completed [x] Completed
initialNumToRender [ ] Not Completed [ ] Not Completed
initialScrollIndex [ ] Not Completed [x] Completed
Inverted [ ] Not Completed [x] Completed
keyExtractor [x] Sample Completed - RN Tester [x Completed
numColumns [x] Sample Completed - RN Tester [x] Completed
onStartReached [ ] Not Completed [x] Completed
onEndReached [ ] Not Completed [x] Completed
onEndReachedThreshold [ ] Not Completed [ ] Not Completed
onRefresh [x] Sample Completed - RN Tester [x] Completed
onScroll [x] Sample Completed - RN Tester [x] Completed
onScrollToIndexFailed [x] Sample Completed - RN Tester [x] Completed
onViewableItemsChanged [ ] Not Completed [x] Completed
progressViewOffset [ ] Not Completed [ ] Not Completed
Refreshing [x] Sample Completed - RN Tester [x] Completed
viewabilityConfig [ ] Not Completed [x] Completed
viewabilityConfigCallbackPairs [ ] Not Completed [ ] Not Completed
flashScrollIndicators() [ ] Not Completed [ ] Not Completed
getNativeScrollRef() [ ] Not Completed [ ] Not Completed
getScrollResponder() [ ] Not Completed [ ] Not Completed
getScrollableNode() [ ] Not Completed [ ] Not Completed
recordInteraction() [ ] Not Completed [ ] Not Completed
scrollToEnd() [ ] Not Completed [ ] Not Completed
scrollToIndex() [ ] Not Completed [ ] Not Completed
scrollToItem() [ ] Not Completed [ ] Not Completed
scrollToOffset() [ ] Not Completed [ ] Not Completed
disableVirtualization [ ] Not Completed [x] Completed
maintainVisibleContentPostion [ ] Not Completed [x] Completed

Contributor guide

Tech stack
reacttypescriptjest
Domain
testing
Issue type
test
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React Native basicsJest testingRNTester codebase
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
First, examine existing snapshot tests in the RNTester directory (e.g., `packages/rntester/js/examples/` and ` tests `). Understand the pattern used for other components like ScrollView or Text. Then identify the props listed in the issue that are marked as 'Not Completed' and create corresponding test cases. For each prop, add a sample in the FlatList example file and then write a Jest snapshot test that renders the FlatList with that prop. Ensure tests cover both Paper and Fabric architectures if applicable. Check if any linked PRs or comments provide additional context.