From 91f8c3aba5d0509285a8d858d937bc72977a048b Mon Sep 17 00:00:00 2001 From: Bogusz Kaszowski Date: Wed, 1 Feb 2023 13:30:11 +0100 Subject: [PATCH] fix: fix overriding default props --- .../BottomNavigation/BottomNavigation.tsx | 6 +- src/components/Button/Button.tsx | 3 +- src/components/FAB/AnimatedFAB.tsx | 3 +- src/components/FAB/FAB.tsx | 3 +- src/components/__tests__/AnimatedFAB.test.tsx | 38 +++++++++++ .../__tests__/BottomNavigation.test.tsx | 66 +++++++++++++++++++ src/components/__tests__/Button.test.tsx | 26 ++++++++ src/components/__tests__/FAB.test.tsx | 30 +++++++++ .../__snapshots__/AnimatedFAB.test.tsx.snap | 3 + .../__snapshots__/Banner.test.tsx.snap | 4 ++ .../BottomNavigation.test.tsx.snap | 15 +++++ .../__snapshots__/Button.test.tsx.snap | 13 ++++ .../__snapshots__/DataTable.test.js.snap | 1 + .../__tests__/__snapshots__/FAB.test.tsx.snap | 2 + .../__snapshots__/Menu.test.tsx.snap | 3 + .../__snapshots__/Snackbar.test.tsx.snap | 1 + 16 files changed, 212 insertions(+), 5 deletions(-) diff --git a/src/components/BottomNavigation/BottomNavigation.tsx b/src/components/BottomNavigation/BottomNavigation.tsx index d1ff4da799..434fb6402d 100644 --- a/src/components/BottomNavigation/BottomNavigation.tsx +++ b/src/components/BottomNavigation/BottomNavigation.tsx @@ -397,9 +397,9 @@ const BottomNavigation = ({ const theme = useInternalTheme(themeOverrides); const { bottom, left, right } = useSafeAreaInsets(); const { scale } = theme.animation; - const compact = compactProp || !theme.isV3; + const compact = compactProp ?? !theme.isV3; let shifting = - shiftingProp || (theme.isV3 ? false : navigationState.routes.length > 3); + shiftingProp ?? (theme.isV3 ? false : navigationState.routes.length > 3); if (shifting && navigationState.routes.length < 2) { shifting = false; @@ -817,6 +817,7 @@ const BottomNavigation = ({ }, ]} accessibilityRole={'tablist'} + testID={`${testID}-bar-content-wrapper`} > {shifting ? ( ) : null} {routes.map((route, index) => { diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 219b51f1d3..36ff1d5c53 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -195,7 +195,7 @@ const Button = ({ [mode] ); const { roundness, isV3, animation } = theme; - const uppercase = uppercaseProp || !theme.isV3; + const uppercase = uppercaseProp ?? !theme.isV3; const isElevationEntitled = !disabled && (isV3 ? isMode('elevated') : isMode('contained')); @@ -351,6 +351,7 @@ const Button = ({ variant="labelLarge" selectable={false} numberOfLines={1} + testID={`${testID}-text`} style={[ styles.label, !isV3 && styles.md2Label, diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx index 5d20d505dc..cc4ec0b1bb 100644 --- a/src/components/FAB/AnimatedFAB.tsx +++ b/src/components/FAB/AnimatedFAB.tsx @@ -209,7 +209,7 @@ const AnimatedFAB = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const uppercase: boolean = uppercaseProp || !theme.isV3; + const uppercase: boolean = uppercaseProp ?? !theme.isV3; const isIOS = Platform.OS === 'ios'; const isAnimatedFromRight = animateFrom === 'right'; const isIconStatic = iconMode === 'static'; @@ -478,6 +478,7 @@ const AnimatedFAB = ({ textStyle, ]} theme={theme} + testID={`${testID}-text`} > {label} diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx index 66f3ed8f6b..7d067740f5 100644 --- a/src/components/FAB/FAB.tsx +++ b/src/components/FAB/FAB.tsx @@ -195,7 +195,7 @@ const FAB = forwardRef( ref ) => { const theme = useInternalTheme(themeOverrides); - const uppercase = uppercaseProp || !theme.isV3; + const uppercase = uppercaseProp ?? !theme.isV3; const { current: visibility } = React.useRef( new Animated.Value(visible ? 1 : 0) ); @@ -309,6 +309,7 @@ const FAB = forwardRef( { transform: [{ scale: 1.5 }], }); }); + +it('renders FAB without uppercase styling if uppercase prop is falsy', () => { + const { getByTestId } = render( + {}} + icon="plus" + testID="animated-fab" + style={styles.background} + extended={false} + uppercase={false} + /> + ); + + expect(getByTestId('animated-fab-text')).not.toHaveStyle({ + textTransform: 'uppercase', + }); +}); + +it('renders FAB with uppercase styling if uppercase prop is truthy', () => { + const { getByTestId } = render( + {}} + icon="plus" + testID="animated-fab" + style={styles.background} + extended={false} + uppercase + /> + ); + + expect(getByTestId('animated-fab-text')).toHaveStyle({ + textTransform: 'uppercase', + }); +}); diff --git a/src/components/__tests__/BottomNavigation.test.tsx b/src/components/__tests__/BottomNavigation.test.tsx index 5966a069c7..6a72e1439b 100644 --- a/src/components/__tests__/BottomNavigation.test.tsx +++ b/src/components/__tests__/BottomNavigation.test.tsx @@ -408,6 +408,72 @@ it('renders bottom navigation with getLazy', () => { expect(tree.queryByTestId('RouteScreen: 2')).toBeNull(); }); +it('applies maxTabBarWidth styling if compact prop is truthy', () => { + const { getByTestId } = render( + route.title} + getLazy={({ route }) => route.key === 'key-2'} + shifting={false} + testId="bottom-navigation" + compact + /> + ); + + expect(getByTestId('bottom-navigation-bar-content-wrapper')).toHaveStyle({ + maxWidth: 480, + }); +}); + +it('does not apply maxTabBarWidth styling if compact prop is falsy', () => { + const { getByTestId } = render( + route.title} + getLazy={({ route }) => route.key === 'key-2'} + shifting={false} + testId="bottom-navigation" + compact={false} + /> + ); + + expect(getByTestId('bottom-navigation-bar-content-wrapper')).not.toHaveStyle({ + maxWidth: 480, + }); +}); + +it('displays ripple animation view if shifting is truthy', () => { + const { getByTestId } = render( + route.title} + getLazy={({ route }) => route.key === 'key-2'} + testId="bottom-navigation" + shifting + /> + ); + + expect(getByTestId('bottom-navigation-bar-content-ripple')).toBeDefined(); +}); + +it('does not display ripple animation view if shifting is falsy', () => { + const { queryByTestId } = render( + route.title} + getLazy={({ route }) => route.key === 'key-2'} + testId="bottom-navigation" + shifting={false} + /> + ); + + expect(queryByTestId('bottom-navigation-bar-content-ripple')).toBeNull(); +}); + describe('getActiveTintColor', () => { it.each` activeColor | defaultColor | useV3 | expected diff --git a/src/components/__tests__/Button.test.tsx b/src/components/__tests__/Button.test.tsx index d8f5e61d3d..eae12e7d78 100644 --- a/src/components/__tests__/Button.test.tsx +++ b/src/components/__tests__/Button.test.tsx @@ -154,6 +154,32 @@ it('should execute onPressOut', () => { expect(onPressOutMock).toHaveBeenCalledTimes(1); }); +describe('button text styles', () => { + it('applies uppercase styles if uppercase prop is truthy', () => { + const { getByTestId } = render( + + ); + + expect(getByTestId('button-text')).toHaveStyle({ + textTransform: 'uppercase', + }); + }); + + it('does not apply uppercase styles if uppercase prop is falsy', () => { + const { getByTestId } = render( + + ); + + expect(getByTestId('button-text')).not.toHaveStyle({ + textTransform: 'uppercase', + }); + }); +}); + describe('button icon styles', () => { it('should return correct icon styles for compact text button', () => { const { getByTestId } = render( diff --git a/src/components/__tests__/FAB.test.tsx b/src/components/__tests__/FAB.test.tsx index b52ad90e73..1124ef8b32 100644 --- a/src/components/__tests__/FAB.test.tsx +++ b/src/components/__tests__/FAB.test.tsx @@ -146,6 +146,36 @@ it('renders FAB with custom border radius', () => { expect(getByTestId('fab-container')).toHaveStyle({ borderRadius: 0 }); }); +it('renders FAB without uppercase styling by default', () => { + const { getByTestId } = render( + {}} label="Add items" testID="fab" /> + ); + + expect(getByTestId('fab-text')).not.toHaveStyle({ + textTransform: 'uppercase', + }); +}); + +it('renders FAB without uppercase styling if uppercase prop is falsy', () => { + const { getByTestId } = render( + {}} label="Add items" testID="fab" uppercase={false} /> + ); + + expect(getByTestId('fab-text')).not.toHaveStyle({ + textTransform: 'uppercase', + }); +}); + +it('renders FAB with uppercase styling if uppercase prop is truthy', () => { + const { getByTestId } = render( + {}} label="Add items" testID="fab" uppercase /> + ); + + expect(getByTestId('fab-text')).toHaveStyle({ + textTransform: 'uppercase', + }); +}); + (['small', 'medium', 'large'] as const).forEach((size) => { it(`renders ${size} FAB with correct size and border radius`, () => { const { getByTestId } = render( diff --git a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap index 4f5d6f3cb3..c86a4261c6 100644 --- a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap @@ -284,6 +284,7 @@ exports[`renders animated fab 1`] = ` "writingDirection": "ltr", } } + testID="animated-fab-text" /> @@ -575,6 +576,7 @@ exports[`renders animated fab with label on the left 1`] = ` "writingDirection": "ltr", } } + testID="animated-fab-text" > text @@ -868,6 +870,7 @@ exports[`renders animated fab with label on the right by default 1`] = ` "writingDirection": "ltr", } } + testID="animated-fab-text" > text diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap index c434345296..e23ec5a8f2 100644 --- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap @@ -263,6 +263,7 @@ exports[`render visible banner, with custom theme 1`] = ` ], ] } + testID="button-text" > first @@ -706,6 +707,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` ], ] } + testID="button-text" > first @@ -985,6 +987,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` ], ] } + testID="button-text" > first @@ -1133,6 +1136,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` ], ] } + testID="button-text" > second diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap index b0048ddf73..a42403e304 100644 --- a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap @@ -142,6 +142,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` false, ] } + testID="bottom-navigation-bar-content-wrapper" > Button with accessibility hint @@ -288,6 +289,7 @@ exports[`renders button with an accessibility label 1`] = ` ], ] } + testID="button-text" > Button with accessibility label @@ -436,6 +438,7 @@ exports[`renders button with button color 1`] = ` ], ] } + testID="button-text" > Custom Button @@ -584,6 +587,7 @@ exports[`renders button with color 1`] = ` ], ] } + testID="button-text" > Custom Button @@ -732,6 +736,7 @@ exports[`renders button with custom testID 1`] = ` ], ] } + testID="custom:testID-text" > Button with custom testID @@ -936,6 +941,7 @@ exports[`renders button with icon 1`] = ` ], ] } + testID="button-text" > Icon Button @@ -1142,6 +1148,7 @@ exports[`renders button with icon in reverse order 1`] = ` ], ] } + testID="button-text" > Right Icon @@ -1291,6 +1298,7 @@ exports[`renders contained contained with mode 1`] = ` ], ] } + testID="button-text" > Contained Button @@ -1439,6 +1447,7 @@ exports[`renders disabled button 1`] = ` ], ] } + testID="button-text" > Disabled Button @@ -1795,6 +1804,7 @@ exports[`renders loading button 1`] = ` ], ] } + testID="button-text" > Loading Button @@ -1944,6 +1954,7 @@ exports[`renders outlined button with mode 1`] = ` ], ] } + testID="button-text" > Outlined Button @@ -2092,6 +2103,7 @@ exports[`renders text button by default 1`] = ` ], ] } + testID="button-text" > Text Button @@ -2240,6 +2252,7 @@ exports[`renders text button with mode 1`] = ` ], ] } + testID="button-text" > Text Button diff --git a/src/components/__tests__/__snapshots__/DataTable.test.js.snap b/src/components/__tests__/__snapshots__/DataTable.test.js.snap index 898077920c..d05e3575b1 100644 --- a/src/components/__tests__/__snapshots__/DataTable.test.js.snap +++ b/src/components/__tests__/__snapshots__/DataTable.test.js.snap @@ -1791,6 +1791,7 @@ exports[`renders data table pagination with options select 1`] = ` ], ] } + testID="button-text" > 2 diff --git a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap index 12933a2b3c..2cb7237609 100644 --- a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap @@ -928,6 +928,7 @@ exports[`renders extended FAB 1`] = ` ], ] } + testID="fab-text" > Add items @@ -1145,6 +1146,7 @@ exports[`renders extended FAB with custom size prop 1`] = ` ], ] } + testID="fab-text" > Add items diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap index 93dc3d3acb..eea5ecdb7e 100644 --- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap @@ -152,6 +152,7 @@ Array [ ], ] } + testID="button-text" > Open menu @@ -656,6 +657,7 @@ exports[`renders not visible menu 1`] = ` ], ] } + testID="button-text" > Open menu @@ -820,6 +822,7 @@ Array [ ], ] } + testID="button-text" > Open menu diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap index d1d8adb167..612c3b4333 100644 --- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap @@ -481,6 +481,7 @@ exports[`renders snackbar with action button 1`] = ` ], ] } + testID="button-text" > Undo