Reputation: 1
const TableViewComponent = ({
tableHead,
tableData,
onPressColumn,
activeTab,
verticalTestID,
horizontalTestID,
}) => {
return (
<View style={styles.container}>
{activeTab == 0 ? (
<View>
<TouchableOpacity onPress={onPressColumn} style={styles.button}>
<Column />
<Text style={{ paddingStart: 5, color: "#EF314C" }}>
Column Options
</Text>
</TouchableOpacity>
<ScrollView horizontal={true} testID={horizontalTestID} nestedScrollEnabled={true}>
<View style={styles.tableContainer}>
{tableHead?.length > 0 && (
<Table>
<Row
data={tableHead}
style={styles.header}
widthArr={Array(tableHead.length - 1).fill(130)}
textStyle={{ ...styles.text, color: "#EF314C", padding: 5 }}
borderStyle={{ borderWidth: 1, borderColor: colors.GREY }}
/>
</Table>
)}
{tableData?.length >= 0 && (
<FlatList
style={styles.dataWrapper}
contentContainerStyle={{ flexGrow: 1 }}
nestedScrollEnabled={true}
keyboardShouldPersistTaps="handled"
data={tableData}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item: rowData, index }) => (
<View style={{ borderWidth: 1, borderColor: colors.GREY }}>
<Row
key={index}
data={rowData}
widthArr={Array(rowData.length - 1).fill(130)}
style={styles.row}
textStyle={styles.text}
/>
</View>
)}
/>
)}
</View>
</ScrollView>
</View>
) : (
""
)}
</View>
);
};
TableViewComponent is a custom component. I am able to scroll horizontally but not vertically because the FlatList is wrapped inside a ScrollView.
ScrollView handles horizontal scrolling. FlatList is used for vertical scrolling. After adding testIDs: Horizontal scrolling works automatically. Vertical scrolling does not work in Detox automation testing.
How can I assign testIDs in a way that allows Detox automation testing to scroll both vertically and horizontally automatically, without modifying the rendering logic?
Upvotes: 0
Views: 12