diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index 9f9425cfc4..154a053a38 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -66,6 +66,10 @@ export type Props = $RemoveChildren & { * Style that is passed to the wrapping TouchableRipple element. */ style?: StyleProp; + /** + * Style that is passed to the container wrapping title and descripton. + */ + contentStyle?: StyleProp; /** * Style that is passed to Title element. */ @@ -104,6 +108,10 @@ export type Props = $RemoveChildren & { * Specifies the largest possible scale a description font can reach. */ descriptionMaxFontSizeMultiplier?: number; + /** + * TestID used for testing purposes + */ + testID?: string; }; /** @@ -136,6 +144,7 @@ const ListItem = ( onPress, theme: themeOverrides, style, + contentStyle, titleStyle, titleNumberOfLines = 1, descriptionNumberOfLines = 2, @@ -144,6 +153,7 @@ const ListItem = ( descriptionStyle, descriptionMaxFontSizeMultiplier, titleMaxFontSizeMultiplier, + testID, ...rest }: Props, ref: React.ForwardedRef @@ -226,6 +236,7 @@ const ListItem = ( style={[theme.isV3 ? styles.containerV3 : styles.container, style]} onPress={onPress} theme={theme} + testID={testID} > {left @@ -235,7 +246,12 @@ const ListItem = ( }) : null} {renderTitle()} diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx index ed2aa07b55..036697f9ec 100644 --- a/src/components/__tests__/ListItem.test.tsx +++ b/src/components/__tests__/ListItem.test.tsx @@ -17,11 +17,20 @@ const styles = StyleSheet.create({ description: { color: red500, }, + content: { + paddingLeft: 0, + }, }); +const testID = 'list-item'; + it('renders list item with title and description', () => { const tree = render( - + ).toJSON(); expect(tree).toMatchSnapshot(); @@ -31,6 +40,7 @@ it('renders list item with left item', () => { const tree = render( } /> ).toJSON(); @@ -40,7 +50,11 @@ it('renders list item with left item', () => { it('renders list item with right item', () => { const tree = render( - GG} /> + GG} + /> ).toJSON(); expect(tree).toMatchSnapshot(); @@ -51,6 +65,7 @@ it('renders list item with left and right items', () => { GG} right={(props) => } /> @@ -64,6 +79,7 @@ it('renders list item with custom title and description styles', () => { @@ -93,6 +109,7 @@ it('renders list item with custom description', () => { )} + testID={testID} /> ).toJSON(); @@ -106,6 +123,7 @@ it('renders with a description with typeof number', () => { description={123} titleStyle={styles.title} descriptionStyle={styles.description} + testID={testID} /> ).toJSON(); @@ -120,6 +138,7 @@ it('calling onPress on ListItem right component', () => { } /> ); @@ -127,3 +146,16 @@ it('calling onPress on ListItem right component', () => { fireEvent(getByTestId('icon-button'), 'onPress'); expect(onPress).toHaveBeenCalledTimes(1); }); + +it('renders list item with custom content style', () => { + const { getByTestId } = render( + + ); + + expect(getByTestId('list-item-content')).toHaveStyle(styles.content); +}); diff --git a/src/components/__tests__/ListSection.test.tsx b/src/components/__tests__/ListSection.test.tsx index 7e90e791af..8cc1578b8f 100644 --- a/src/components/__tests__/ListSection.test.tsx +++ b/src/components/__tests__/ListSection.test.tsx @@ -15,15 +15,19 @@ const styles = StyleSheet.create({ }, }); +const testID = 'list-item'; + it('renders list section without subheader', () => { const tree = render( } /> } /> @@ -38,10 +42,12 @@ it('renders list section with subheader', () => { Some title } /> } /> @@ -55,10 +61,12 @@ it('renders list section with custom title style', () => { } /> } /> diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap index aaf6304a24..c828bdc743 100644 --- a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap @@ -223,8 +223,10 @@ exports[`renders expanded accordion 1`] = ` "flexShrink": 1, "justifyContent": "center", }, + undefined, ] } + testID="undefined-content" >