diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx index ba6a83465c..08fe106d8e 100644 --- a/src/components/Appbar/AppbarContent.tsx +++ b/src/components/Appbar/AppbarContent.tsx @@ -140,7 +140,6 @@ const AppbarContent = ({ numberOfLines={1} accessible role={onPress ? 'none' : 'heading'} - testID={`${testID}-title-text`} maxFontSizeMultiplier={titleMaxFontSizeMultiplier} > {title} diff --git a/src/components/Appbar/AppbarHeader.tsx b/src/components/Appbar/AppbarHeader.tsx index d869242046..ba072e0c44 100644 --- a/src/components/Appbar/AppbarHeader.tsx +++ b/src/components/Appbar/AppbarHeader.tsx @@ -124,7 +124,6 @@ const AppbarHeader = ({ return ( ({ safeAreaInsets={safeAreaInsets} labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier} compact={compact} - testID={`${testID}-bar`} theme={theme} /> diff --git a/src/components/BottomNavigation/BottomNavigationBar.tsx b/src/components/BottomNavigation/BottomNavigationBar.tsx index f25bcf0170..ac92b2ebd1 100644 --- a/src/components/BottomNavigation/BottomNavigationBar.tsx +++ b/src/components/BottomNavigation/BottomNavigationBar.tsx @@ -494,10 +494,7 @@ const BottomNavigationBar = ({ onLayout={onLayout} container > - + ({ }, ]} role={'tablist'} - testID={`${testID}-content-wrapper`} > {routes.map((route, index) => { const focused = navigationState.index === index; diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 53d61a2d6f..f122eff310 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -319,7 +319,6 @@ const Button = ({ {icon && loading !== true ? ( - + {isMode('outlined') && ( diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 1b09c327a8..025c2b3cae 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -292,7 +292,6 @@ const Chip = ({ ]} elevation={elevationStyle} {...rest} - testID={`${testID}-container`} theme={theme} container > diff --git a/src/components/CrossFadeIcon.tsx b/src/components/CrossFadeIcon.tsx index db1fd244d8..e5189d9f81 100644 --- a/src/components/CrossFadeIcon.tsx +++ b/src/components/CrossFadeIcon.tsx @@ -87,6 +87,7 @@ const CrossFadeIcon = ({ return ( @@ -117,7 +117,6 @@ const CrossFadeIcon = ({ transform: [{ rotate: rotateNext }], }, ]} - testID={`${testID}-current`} > diff --git a/src/components/DataTable/DataTableCell.tsx b/src/components/DataTable/DataTableCell.tsx index ce59206af6..f8a53345ef 100644 --- a/src/components/DataTable/DataTableCell.tsx +++ b/src/components/DataTable/DataTableCell.tsx @@ -81,7 +81,6 @@ const DataTableCell = ({ > {children} @@ -94,11 +93,7 @@ const CellContent = ({ children, textStyle, maxFontSizeMultiplier, - testID, -}: Pick< - Props, - 'children' | 'textStyle' | 'testID' | 'maxFontSizeMultiplier' ->) => { +}: Pick) => { if (React.isValidElement(children)) { return children; } @@ -108,7 +103,6 @@ const CellContent = ({ style={textStyle} numberOfLines={1} maxFontSizeMultiplier={maxFontSizeMultiplier} - testID={`${testID}-text-container`} > {children} diff --git a/src/components/Drawer/DrawerCollapsedItem.tsx b/src/components/Drawer/DrawerCollapsedItem.tsx index 6e4fdebaa6..6646d602c6 100644 --- a/src/components/Drawer/DrawerCollapsedItem.tsx +++ b/src/components/Drawer/DrawerCollapsedItem.tsx @@ -189,13 +189,9 @@ const DrawerCollapsedItem = ({ }, style, ]} - testID={`${testID}-outline`} /> - + {badge !== false && ( {typeof badge === 'boolean' ? ( diff --git a/src/components/FAB/Content.tsx b/src/components/FAB/Content.tsx index 0e5728c2e3..4cf1598905 100644 --- a/src/components/FAB/Content.tsx +++ b/src/components/FAB/Content.tsx @@ -27,7 +27,6 @@ export type ContentProps = { labelAnimatedStyle?: StyleProp>; labelNumberOfLines?: number; labelEllipsisMode?: 'clip' | 'tail' | 'head' | 'middle'; - testID?: string; }; /** @@ -50,7 +49,6 @@ const Content = ({ labelAnimatedStyle, labelNumberOfLines, labelEllipsisMode, - testID, }: ContentProps) => { const hasLabel = label !== undefined && label !== ''; const colorStyle = { color: contentColor }; @@ -86,7 +84,6 @@ const Content = ({ ellipsizeMode={labelEllipsisMode} maxFontSizeMultiplier={labelMaxFontSizeMultiplier} style={colorStyle} - testID={testID ? `${testID}-text` : undefined} > {label} diff --git a/src/components/FAB/Menu.tsx b/src/components/FAB/Menu.tsx index 58a75291cf..e52e5f0419 100644 --- a/src/components/FAB/Menu.tsx +++ b/src/components/FAB/Menu.tsx @@ -284,7 +284,6 @@ const MenuItem = ({ leading={leading} trailing={trailing} iconLabelGap={iconLabelGap} - testID={testID} /> diff --git a/src/components/FAB/Shell.tsx b/src/components/FAB/Shell.tsx index 2d2d60e4cd..bb91fc662e 100644 --- a/src/components/FAB/Shell.tsx +++ b/src/components/FAB/Shell.tsx @@ -295,7 +295,6 @@ const Shell = ({ shadowStyle, visible ? styles.pointerEventsAuto : styles.pointerEventsNone, ]} - testID={`${testID}-container`} > {overlay} @@ -332,7 +331,6 @@ const Shell = ({ labelAnimatedStyle={labelAnimatedStyle} labelNumberOfLines={labelAnimatedStyle ? 1 : undefined} labelEllipsisMode={labelAnimatedStyle ? 'clip' : undefined} - testID={testID} /> )} diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx index 52a64e98d0..3eaf951628 100644 --- a/src/components/IconButton/IconButton.tsx +++ b/src/components/IconButton/IconButton.tsx @@ -161,7 +161,6 @@ const IconButton = ({ return ( + {renderTitle()} {description diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index ca6e849e3d..e45f31ba2c 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -655,7 +655,6 @@ const Menu = ({ style={[styles.wrapper, positionStyle, style]} pointerEvents={pointerEvents} onAccessibilityEscape={onDismiss} - testID={`${testID}-view`} > diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 945c12794b..a5e202444c 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -220,7 +220,6 @@ const MenuItem = ({ variant="bodyLarge" selectable={false} numberOfLines={1} - testID={`${testID}-title`} style={[titleTextStyle, titleStyle]} maxFontSizeMultiplier={titleMaxFontSizeMultiplier} > diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 3c66c885b3..1b50a166f2 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -204,7 +204,6 @@ function Modal({ }), }, ]} - testID={`${testID}-backdrop`} /> {width ? ( )) } - testID={`${testID}-clear-icon`} role="button" theme={theme} /> @@ -336,7 +332,6 @@ const Searchbar = ({ iconColor={traileringIconColor || colors.onSurfaceVariant} icon={traileringIcon} aria-label={traileringIconAccessibilityLabel} - testID={`${testID}-trailering-icon`} /> ) : null} {isBarMode && @@ -350,7 +345,6 @@ const Searchbar = ({ backgroundColor: colors.outline, }, ]} - testID={`${testID}-divider`} /> )} diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx index 4f701f0b48..c2586b4ef8 100644 --- a/src/components/SegmentedButtons/SegmentedButtonItem.tsx +++ b/src/components/SegmentedButtons/SegmentedButtonItem.tsx @@ -211,14 +211,13 @@ const SegmentedButtonItem = ({ > {showCheckedIcon ? ( ) : null} {showIcon ? ( - + ) : null} @@ -228,7 +227,6 @@ const SegmentedButtonItem = ({ selectable={false} numberOfLines={1} maxFontSizeMultiplier={labelMaxFontSizeMultiplier} - testID={`${testID}-label`} > {label} diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx index 04502eb7de..ed29faad8b 100644 --- a/src/components/Snackbar.tsx +++ b/src/components/Snackbar.tsx @@ -351,7 +351,6 @@ const Snackbar = ({ } aria-label={iconAccessibilityLabel} style={styles.icon} - testID={`${testID}-icon`} /> ) : null} diff --git a/src/components/Surface.tsx b/src/components/Surface.tsx index 5966469df9..a17768747a 100644 --- a/src/components/Surface.tsx +++ b/src/components/Surface.tsx @@ -182,11 +182,7 @@ const SurfaceIOS = ({ }, [style, elevation, backgroundColor, shadowColor, mode, container]); return ( - + {children} diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx index 8738f71e37..5fd05600cf 100644 --- a/src/components/__tests__/Appbar/Appbar.test.tsx +++ b/src/components/__tests__/Appbar/Appbar.test.tsx @@ -192,57 +192,39 @@ describe('renderAppbarContent', () => { describe('AppbarAction', () => { it('should be rendered with default theme color', async () => { - await render( + const { toJSON } = await render( ); - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - const appbarActionIcon = screen.getByTestId('cross-fade-icon-current').props - .children; - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - expect(appbarActionIcon.props.color).toBe( - getTheme().colors.onSurfaceVariant - ); + expect(toJSON()).toMatchSnapshot(); }); it('should be rendered with specific theme color if is leading', async () => { - await render( + const { toJSON } = await render( ); - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - const appbarActionIcon = screen.getByTestId('cross-fade-icon-current').props - .children; - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - expect(appbarActionIcon.props.color).toBe(getTheme().colors.onSurface); + expect(toJSON()).toMatchSnapshot(); }); it('should be rendered with custom color', async () => { - await render( + const { toJSON } = await render( ); - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - const appbarActionIcon = screen.getByTestId('cross-fade-icon-current').props - .children; - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - expect(appbarActionIcon.props.color).toBe('purple'); + expect(toJSON()).toMatchSnapshot(); }); it('should render AppbarBackAction with custom color', async () => { - await render( + const { toJSON } = await render( ); - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - const appbarBackActionIcon = screen.getByTestId('cross-fade-icon-current') - .props.children; - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - expect(appbarBackActionIcon.props.color).toBe('purple'); + expect(toJSON()).toMatchSnapshot(); }); }); @@ -255,7 +237,7 @@ describe('AppbarContent', () => { ); - expect(screen.getByTestId('appbar-content-title-text')).toHaveStyle( + expect(screen.getByText('Title')).toHaveStyle( getTheme().fonts[modeTextVariant[mode]] ); }) @@ -304,14 +286,12 @@ describe('getAppbarColors', () => { describe('animated value changes correctly', () => { it('appbar animated value changes correctly', async () => { const value = new Animated.Value(1); - await render( + const { toJSON } = await render( ); - expect(screen.getByTestId('appbar-outer-layer')).toHaveStyle({ - transform: [{ scale: 1 }], - }); + expect(toJSON()).toMatchSnapshot(); Animated.timing(value, { toValue: 1.5, @@ -323,14 +303,12 @@ describe('animated value changes correctly', () => { jest.advanceTimersByTime(200); }); - expect(screen.getByTestId('appbar-outer-layer')).toHaveStyle({ - transform: [{ scale: 1.5 }], - }); + expect(toJSON()).toMatchSnapshot(); }); it('action animated value changes correctly', async () => { const value = new Animated.Value(1); - await render( + const { toJSON } = await render( { /> ); - expect( - screen.getByTestId('appbar-action-container-outer-layer') - ).toHaveStyle({ - transform: [{ scale: 1 }], - }); + expect(toJSON()).toMatchSnapshot(); Animated.timing(value, { toValue: 1.5, @@ -355,16 +329,12 @@ describe('animated value changes correctly', () => { jest.advanceTimersByTime(200); }); - expect( - screen.getByTestId('appbar-action-container-outer-layer') - ).toHaveStyle({ - transform: [{ scale: 1.5 }], - }); + expect(toJSON()).toMatchSnapshot(); }); it('back action animated value changes correctly', async () => { const value = new Animated.Value(1); - await render( + const { toJSON } = await render( { /> ); - expect( - screen.getByTestId('appbar-back-action-container-outer-layer') - ).toHaveStyle({ - transform: [{ scale: 1 }], - }); + expect(toJSON()).toMatchSnapshot(); Animated.timing(value, { toValue: 1.5, @@ -388,16 +354,12 @@ describe('animated value changes correctly', () => { jest.advanceTimersByTime(200); }); - expect( - screen.getByTestId('appbar-back-action-container-outer-layer') - ).toHaveStyle({ - transform: [{ scale: 1.5 }], - }); + expect(toJSON()).toMatchSnapshot(); }); it('header animated value changes correctly', async () => { const value = new Animated.Value(1); - await render( + const { toJSON } = await render( { ); - expect(screen.getByTestId('appbar-header-outer-layer')).toHaveStyle({ - transform: [{ scale: 1 }], - }); + expect(toJSON()).toMatchSnapshot(); Animated.timing(value, { toValue: 1.5, @@ -421,9 +381,7 @@ describe('animated value changes correctly', () => { jest.advanceTimersByTime(200); }); - expect(screen.getByTestId('appbar-header-outer-layer')).toHaveStyle({ - transform: [{ scale: 1.5 }], - }); + expect(toJSON()).toMatchSnapshot(); }); it('header bottom border radius applied correctly', async () => { @@ -436,7 +394,7 @@ describe('animated value changes correctly', () => { ); - expect(screen.getByTestId('appbar-header-root-layer')).toHaveStyle(style); + expect(screen.getByTestId('appbar-header')).toHaveStyle(style); }); describe('getAppbarBorders', () => { diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap index a5d9d95766..2032928081 100644 --- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap +++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap @@ -16,7 +16,6 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` "shadowRadius": 0, } } - testID="surface-outer-layer" > Examples @@ -720,7 +712,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A "width": 40, } } - testID="icon-button-container-outer-layer" > `; + +exports[`AppbarAction should be rendered with custom color 1`] = ` + + + + + + + + + + menu + + + + + + + + + +`; + +exports[`AppbarAction should be rendered with default theme color 1`] = ` + + + + + + + + + + menu + + + + + + + + + +`; + +exports[`AppbarAction should be rendered with specific theme color if is leading 1`] = ` + + + + + + + + + + menu + + + + + + + + + +`; + +exports[`AppbarAction should render AppbarBackAction with custom color 1`] = ` + + + + + + + + + + + + + + + + + + + +`; + +exports[`animated value changes correctly action animated value changes correctly 1`] = ` + + + + + + + + + + menu + + + + + + + + + +`; + +exports[`animated value changes correctly action animated value changes correctly 2`] = ` + + + + + + + + + + menu + + + + + + + + + +`; + +exports[`animated value changes correctly appbar animated value changes correctly 1`] = ` + + + + + + + + + + menu + + + + + + + + + +`; + +exports[`animated value changes correctly appbar animated value changes correctly 2`] = ` + + + + + + + + + + menu + + + + + + + + + +`; + +exports[`animated value changes correctly back action animated value changes correctly 1`] = ` + + + + + + + + + + + + + + + + + + + +`; + +exports[`animated value changes correctly back action animated value changes correctly 2`] = ` + + + + + + + + + + + + + + + + + + + +`; + +exports[`animated value changes correctly header animated value changes correctly 1`] = ` + + + + + +`; + +exports[`animated value changes correctly header animated value changes correctly 2`] = ` + + + + + +`; diff --git a/src/components/__tests__/Banner.test.tsx b/src/components/__tests__/Banner.test.tsx index 80bd3e9017..cd8926a72d 100644 --- a/src/components/__tests__/Banner.test.tsx +++ b/src/components/__tests__/Banner.test.tsx @@ -11,7 +11,7 @@ import { } from '@jest/globals'; import { act } from '@testing-library/react-native'; -import { render, screen } from '../../test-utils'; +import { render } from '../../test-utils'; import Banner from '../Banner'; it('renders hidden banner, without action buttons and without image', async () => { @@ -359,7 +359,7 @@ describe('animations', () => { it('animated value changes correctly', async () => { const value = new Animated.Value(1); - await render( + const { toJSON } = await render( { Banner ); - expect(screen.getByTestId('banner-outer-layer')).toHaveStyle({ - transform: [{ scale: 1 }], - }); + expect(toJSON()).toMatchSnapshot(); Animated.timing(value, { toValue: 1.5, @@ -382,8 +380,6 @@ describe('animations', () => { jest.runAllTimers(); }); - expect(screen.getByTestId('banner-outer-layer')).toHaveStyle({ - transform: [{ scale: 1.5 }], - }); + expect(toJSON()).toMatchSnapshot(); }); }); diff --git a/src/components/__tests__/BottomNavigation.test.tsx b/src/components/__tests__/BottomNavigation.test.tsx index 21e495742a..2e914e2367 100644 --- a/src/components/__tests__/BottomNavigation.test.tsx +++ b/src/components/__tests__/BottomNavigation.test.tsx @@ -415,7 +415,7 @@ it('should have labelMaxFontSizeMultiplier passed to label', async () => { }); it('renders custom background color passed to barStyle property', async () => { - await render( + const { toJSON } = await render( { /> ); - const wrapper = screen.getByTestId('bottom-navigation-bar-content'); - expect(wrapper).toHaveStyle({ backgroundColor: Palette.error60 }); + expect(toJSON()).toMatchSnapshot(); }); it('renders a single tab', async () => { @@ -461,7 +460,7 @@ it('renders bottom navigation with getLazy', async () => { }); it('applies maxTabBarWidth styling if compact prop is truthy', async () => { - await render( + const { toJSON } = await render( { /> ); - expect( - screen.getByTestId('bottom-navigation-bar-content-wrapper') - ).toHaveStyle({ - maxWidth: 480, - }); + expect(toJSON()).toMatchSnapshot(); }); it('does not apply maxTabBarWidth styling if compact prop is falsy', async () => { - await render( + const { toJSON } = await render( /> ); - expect( - screen.getByTestId('bottom-navigation-bar-content-wrapper') - ).not.toHaveStyle({ - maxWidth: 480, - }); -}); - -it('renders bar content when shifting is enabled', async () => { - await render( - route.key === 'key-2'} - testID="bottom-navigation" - shifting - /> - ); - - expect(screen.getByTestId('bottom-navigation-bar-content')).toBeOnTheScreen(); -}); - -it('does not render legacy ripple overlay when shifting is disabled', async () => { - await render( - route.key === 'key-2'} - testID="bottom-navigation" - shifting={false} - /> - ); - - expect( - screen.queryByTestId('bottom-navigation-bar-content-ripple') - ).not.toBeOnTheScreen(); + expect(toJSON()).toMatchSnapshot(); }); describe('getActiveTintColor', () => { @@ -592,7 +551,7 @@ describe('getLabelColor', () => { it('barStyle animated value changes correctly', async () => { const value = new Animated.Value(1); - await render( + const { toJSON } = await render( {}} @@ -601,9 +560,7 @@ it('barStyle animated value changes correctly', async () => { barStyle={[{ transform: [{ scale: value }] }]} /> ); - expect(screen.getByTestId('bottom-navigation-bar-outer-layer')).toHaveStyle({ - transform: [{ scale: 1 }], - }); + expect(toJSON()).toMatchSnapshot(); Animated.timing(value, { toValue: 1.5, @@ -614,9 +571,7 @@ it('barStyle animated value changes correctly', async () => { await act(() => { jest.advanceTimersByTime(200); }); - expect(screen.getByTestId('bottom-navigation-bar-outer-layer')).toHaveStyle({ - transform: [{ scale: 1.5 }], - }); + expect(toJSON()).toMatchSnapshot(); }); it("allows customizing Route's type via generics", async () => { diff --git a/src/components/__tests__/Button.test.tsx b/src/components/__tests__/Button.test.tsx index 4da466837a..709d4d6f61 100644 --- a/src/components/__tests__/Button.test.tsx +++ b/src/components/__tests__/Button.test.tsx @@ -162,9 +162,6 @@ it('renders button with custom border radius', async () => { ); - expect(screen.getByTestId('custom-radius-container')).toHaveStyle( - styles.customRadius - ); expect(screen.getByTestId('custom-radius')).toHaveStyle(styles.customRadius); }); @@ -179,9 +176,6 @@ it('renders outlined button with custom border radius', async () => { ); - expect(screen.getByTestId('custom-radius-container')).toHaveStyle( - styles.customRadius - ); expect(screen.getByTestId('custom-radius')).toHaveStyle({ borderTopLeftRadius: 15, // styles.customRadius - 1px outline borderTopRightRadius: 0, @@ -197,9 +191,6 @@ it('renders button without border radius', async () => { ); - expect(screen.getByTestId('custom-radius-container')).toHaveStyle( - styles.noRadius - ); expect(screen.getByTestId('custom-radius')).toHaveStyle(styles.noRadius); }); @@ -237,7 +228,7 @@ describe('button text styles', () => { ); - expect(screen.getByTestId('button-text')).toHaveStyle({ + expect(screen.getByText('Test')).toHaveStyle({ textTransform: 'uppercase', }); }); @@ -249,7 +240,7 @@ describe('button text styles', () => { ); - expect(screen.getByTestId('button-text')).not.toHaveStyle({ + expect(screen.getByText('Test')).not.toHaveStyle({ textTransform: 'uppercase', }); }); @@ -257,60 +248,44 @@ describe('button text styles', () => { describe('button icon styles', () => { it('should return correct icon styles for compact text button', async () => { - await render( + const { toJSON } = await render( ); - expect(screen.getByTestId('compact-button-icon-container')).toHaveStyle({ - marginLeft: 6, - marginRight: 0, - }); + expect(toJSON()).toMatchSnapshot(); }); (['outlined', 'contained', 'contained-tonal', 'elevated'] as const).forEach( (mode) => it(`should return correct icon styles for compact ${mode} button`, async () => { - await render( + const { toJSON } = await render( ); - expect(screen.getByTestId('compact-button-icon-container')).toHaveStyle( - { - marginLeft: 8, - marginRight: 0, - } - ); + expect(toJSON()).toMatchSnapshot(); }) ); it('should return correct icon styles for text button', async () => { - await render( + const { toJSON } = await render( ); - expect(screen.getByTestId('compact-button-icon-container')).toHaveStyle({ - marginLeft: 12, - marginRight: -8, - }); + expect(toJSON()).toMatchSnapshot(); }); (['outlined', 'contained', 'contained-tonal', 'elevated'] as const).forEach( (mode) => it(`should return correct icon styles for compact ${mode} button`, async () => { - await render( + const { toJSON } = await render( ); - expect(screen.getByTestId('compact-button-icon-container')).toHaveStyle( - { - marginLeft: 16, - marginRight: -16, - } - ); + expect(toJSON()).toMatchSnapshot(); }) ); }); @@ -712,7 +687,7 @@ describe('getButtonColors - border width', () => { it('animated value changes correctly', async () => { const value = new Animated.Value(1); - await render( + const { toJSON } = await render( ); - expect(screen.getByTestId('button-container-outer-layer')).toHaveStyle({ - transform: [{ scale: 1 }], - }); + expect(toJSON()).toMatchSnapshot(); Animated.timing(value, { toValue: 1.5, @@ -735,7 +708,5 @@ it('animated value changes correctly', async () => { await act(() => { jest.advanceTimersByTime(200); }); - expect(screen.getByTestId('button-container-outer-layer')).toHaveStyle({ - transform: [{ scale: 1.5 }], - }); + expect(toJSON()).toMatchSnapshot(); }); diff --git a/src/components/__tests__/Card/Card.test.tsx b/src/components/__tests__/Card/Card.test.tsx index 61659c8a24..0af10d83d8 100644 --- a/src/components/__tests__/Card/Card.test.tsx +++ b/src/components/__tests__/Card/Card.test.tsx @@ -33,7 +33,7 @@ describe('Card', () => { }); it('renders an outlined card with custom border radius and color', async () => { - await render( + const { toJSON } = await render( { ); - expect(screen.getByTestId('card-outline')).toHaveStyle({ - borderRadius: 32, - borderColor: 'purple', - }); + expect(toJSON()).toMatchSnapshot(); }); it('renders an outlined card with custom border color', async () => { @@ -226,7 +223,7 @@ describe('getCardCoverStyle - border radius', () => { it('animated value changes correctly', async () => { const value = new Animated.Value(1); - await render( + const { toJSON } = await render( { {null} ); - expect(screen.getByTestId('card-container-outer-layer')).toHaveStyle({ - transform: [{ scale: 1 }], - }); + expect(toJSON()).toMatchSnapshot(); Animated.timing(value, { toValue: 1.5, @@ -248,7 +243,5 @@ it('animated value changes correctly', async () => { await act(() => { jest.advanceTimersByTime(200); }); - expect(screen.getByTestId('card-container-outer-layer')).toHaveStyle({ - transform: [{ scale: 1.5 }], - }); + expect(toJSON()).toMatchSnapshot(); }); diff --git a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap index d1492cc475..d43c6c6686 100644 --- a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap +++ b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap @@ -16,7 +16,6 @@ exports[`Card renders an outlined card 1`] = ` "shadowRadius": 0, } } - testID="card-container-outer-layer" > + + + + +`; + +exports[`Card renders an outlined card with custom border radius and color 1`] = ` + + + + + + +`; + +exports[`animated value changes correctly 1`] = ` + + + + + + +`; + +exports[`animated value changes correctly 2`] = ` + + { }); it('should have maxFontSizeMultiplier set to 1.5 by default', async () => { - await render( - - ); - const checkboxItemText = screen.getByTestId('checkbox-item-text', { - includeHiddenElements: true, - }); - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - expect(checkboxItemText.props.maxFontSizeMultiplier).toBe(1.5); + const tree = ( + await render( + + ) + ).toJSON(); + + expect(tree).toMatchSnapshot(); }); it('should execute onLongPress', async () => { diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap index 0f7f92073b..316fd1e8ab 100644 --- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap +++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap @@ -270,7 +270,6 @@ exports[`can render leading checkbox control 1`] = ` ], ] } - testID="undefined-text" > Default with leading control @@ -368,7 +367,6 @@ exports[`renders unchecked 1`] = ` ], ] } - testID="undefined-text" > Unchecked Button @@ -555,3 +553,279 @@ exports[`renders unchecked 1`] = ` `; + +exports[`should have maxFontSizeMultiplier set to 1.5 by default 1`] = ` + + + + + + + + + + + + + + + + + + +`; diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx index 644906ae33..a20dbc0a4c 100644 --- a/src/components/__tests__/Chip.test.tsx +++ b/src/components/__tests__/Chip.test.tsx @@ -376,7 +376,7 @@ describe('getChipColor - border color', () => { it('animated value changes correctly', async () => { const value = new Animated.Value(1); - await render( + const { toJSON } = await render( {}} testID="chip" @@ -385,9 +385,7 @@ it('animated value changes correctly', async () => { Example Chip ); - expect(screen.getByTestId('chip-container-outer-layer')).toHaveStyle({ - transform: [{ scale: 1 }], - }); + expect(toJSON()).toMatchSnapshot(); Animated.timing(value, { toValue: 1.5, @@ -398,7 +396,5 @@ it('animated value changes correctly', async () => { await act(() => { jest.advanceTimersByTime(200); }); - expect(screen.getByTestId('chip-container-outer-layer')).toHaveStyle({ - transform: [{ scale: 1.5 }], - }); + expect(toJSON()).toMatchSnapshot(); }); diff --git a/src/components/__tests__/DataTable.test.tsx b/src/components/__tests__/DataTable.test.tsx index 49f863720a..7a29a72800 100644 --- a/src/components/__tests__/DataTable.test.tsx +++ b/src/components/__tests__/DataTable.test.tsx @@ -66,25 +66,28 @@ describe('DataTable.Cell', () => { expect(tree).toMatchSnapshot(); }); - it('renders data table cell with text container', async () => { - await render( - Table cell - ); + it('renders data table cell with text content', async () => { + const tree = ( + await render( + Table cell + ) + ).toJSON(); expect(screen.getByText('Table cell')).toBeOnTheScreen(); - expect(screen.getByTestId('table-cell-text-container')).toBeOnTheScreen(); + expect(tree).toMatchSnapshot(); }); - it('renders data table cell children without text container', async () => { - await render( - - - - ); + it('renders data table cell children without wrapping text component', async () => { + const tree = ( + await render( + + + + ) + ).toJSON(); - expect( - screen.queryByTestId('table-cell-text-container') - ).not.toBeOnTheScreen(); + expect(screen.getByTestId('table-cell-checkbox')).toBeOnTheScreen(); + expect(tree).toMatchSnapshot(); }); }); diff --git a/src/components/__tests__/Dialog.test.tsx b/src/components/__tests__/Dialog.test.tsx index 59785c52cf..e9f0d2e0f6 100644 --- a/src/components/__tests__/Dialog.test.tsx +++ b/src/components/__tests__/Dialog.test.tsx @@ -40,7 +40,7 @@ describe('Dialog', () => { ); - await userEvent.press(screen.getByTestId('dialog-backdrop')); + await userEvent.press(screen.getByLabelText('Close modal')); await act(() => { jest.runAllTimers(); @@ -56,7 +56,7 @@ describe('Dialog', () => { ); - await userEvent.press(screen.getByTestId('dialog-backdrop')); + await userEvent.press(screen.getByLabelText('Close modal')); await act(() => { jest.runAllTimers(); @@ -79,7 +79,7 @@ describe('Dialog', () => { ); - await userEvent.press(screen.getByTestId('dialog-backdrop')); + await userEvent.press(screen.getByLabelText('Close modal')); await act(() => { jest.runAllTimers(); diff --git a/src/components/__tests__/Drawer/DrawerCollapsedItem.test.tsx b/src/components/__tests__/Drawer/DrawerCollapsedItem.test.tsx index 3df20be862..b301d39062 100644 --- a/src/components/__tests__/Drawer/DrawerCollapsedItem.test.tsx +++ b/src/components/__tests__/Drawer/DrawerCollapsedItem.test.tsx @@ -1,68 +1,62 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../test-utils'; +import { render } from '../../../test-utils'; import DrawerCollapsedItem from '../../Drawer/DrawerCollapsedItem'; describe('DrawerCollapsedItem', () => { it('should have regular outline if label is specified', async () => { - await render( - - ); - - expect(screen.getByTestId('drawer-collapsed-item-outline')).toHaveStyle({ - height: 32, - }); + const tree = ( + await render( + + ) + ).toJSON(); + + expect(tree).toMatchSnapshot(); }); it('should have rounded outline if label is not specified', async () => { - await render( - - ); + const tree = ( + await render( + + ) + ).toJSON(); - expect(screen.getByTestId('drawer-collapsed-item-outline')).toHaveStyle({ - height: 56, - }); + expect(tree).toMatchSnapshot(); }); it('should display unfocused icon in inactive state, if unfocused icon is specified', async () => { - await render( - - ); + const tree = ( + await render( + + ) + ).toJSON(); - expect( - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - screen.getByTestId('drawer-collapsed-item-container').props.children[1] - .props.source - ).toBe('star-outline'); + expect(tree).toMatchSnapshot(); }); it('should display focused icon in inactive state, if unfocused icon is not specified', async () => { - await render(); + const tree = ( + await render() + ).toJSON(); - expect( - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - screen.getByTestId('drawer-collapsed-item-container').props.children[1] - .props.source - ).toBe('star'); + expect(tree).toMatchSnapshot(); }); it('should display focused icon in active state', async () => { - await render( - - ); - - expect( - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - screen.getByTestId('drawer-collapsed-item-container').props.children[1] - .props.source - ).toBe('star'); + const tree = ( + await render( + + ) + ).toJSON(); + + expect(tree).toMatchSnapshot(); }); }); diff --git a/src/components/__tests__/Drawer/__snapshots__/DrawerCollapsedItem.test.tsx.snap b/src/components/__tests__/Drawer/__snapshots__/DrawerCollapsedItem.test.tsx.snap new file mode 100644 index 0000000000..678ebce0da --- /dev/null +++ b/src/components/__tests__/Drawer/__snapshots__/DrawerCollapsedItem.test.tsx.snap @@ -0,0 +1,594 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DrawerCollapsedItem should display focused icon in active state 1`] = ` + + + + + + + star + + + + + +`; + +exports[`DrawerCollapsedItem should display focused icon in inactive state, if unfocused icon is not specified 1`] = ` + + + + + + + star + + + + + +`; + +exports[`DrawerCollapsedItem should display unfocused icon in inactive state, if unfocused icon is specified 1`] = ` + + + + + + + star-outline + + + + + +`; + +exports[`DrawerCollapsedItem should have regular outline if label is specified 1`] = ` + + + + + + + star-outline + + + + starred + + + + +`; + +exports[`DrawerCollapsedItem should have rounded outline if label is not specified 1`] = ` + + + + + + + star-outline + + + + + +`; diff --git a/src/components/__tests__/IconButton.test.tsx b/src/components/__tests__/IconButton.test.tsx index b28456c5ce..408874d43f 100644 --- a/src/components/__tests__/IconButton.test.tsx +++ b/src/components/__tests__/IconButton.test.tsx @@ -4,7 +4,7 @@ import { describe, expect, it, jest } from '@jest/globals'; import { act } from '@testing-library/react-native'; import { getTheme } from '../../core/theming'; -import { render, screen } from '../../test-utils'; +import { render } from '../../test-utils'; import { pink500 } from '../../theme/colors'; import { tokens } from '../../theme/tokens'; import IconButton from '../IconButton/IconButton'; @@ -54,7 +54,7 @@ it('renders icon change animated', async () => { }); it('renders icon button with custom border radius', async () => { - await render( + const { toJSON } = await render( { /> ); - expect(screen.getByTestId('icon-button-container')).toHaveStyle({ - borderRadius: 0, - }); + expect(toJSON()).toMatchSnapshot(); }); it('renders icon button with small border radius', async () => { - await render( + const { toJSON } = await render( { /> ); - expect(screen.getByTestId('icon-button-container')).toHaveStyle({ - borderRadius: 4, - }); + expect(toJSON()).toMatchSnapshot(); }); describe('getIconButtonColor - icon color', () => { @@ -321,16 +317,14 @@ describe('getIconButtonColor - border color', () => { it('action animated value changes correctly', async () => { const value = new Animated.Value(1); - await render( + const { toJSON } = await render( ); - expect(screen.getByTestId('icon-button-container-outer-layer')).toHaveStyle({ - transform: [{ scale: 1 }], - }); + expect(toJSON()).toMatchSnapshot(); Animated.timing(value, { toValue: 1.5, @@ -341,7 +335,5 @@ it('action animated value changes correctly', async () => { await act(() => { jest.advanceTimersByTime(200); }); - expect(screen.getByTestId('icon-button-container-outer-layer')).toHaveStyle({ - transform: [{ scale: 1.5 }], - }); + expect(toJSON()).toMatchSnapshot(); }); diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx index b50f4e7d3f..af08f3f194 100644 --- a/src/components/__tests__/ListItem.test.tsx +++ b/src/components/__tests__/ListItem.test.tsx @@ -164,7 +164,7 @@ it('calling onPress on ListItem right component', async () => { }); it('renders list item with custom content style', async () => { - await render( + const { toJSON } = await render( { /> ); - expect(screen.getByTestId('list-item-content')).toHaveStyle(styles.content); + expect(toJSON()).toMatchSnapshot(); }); diff --git a/src/components/__tests__/Menu.test.tsx b/src/components/__tests__/Menu.test.tsx index 128fb87cdb..984f0c3828 100644 --- a/src/components/__tests__/Menu.test.tsx +++ b/src/components/__tests__/Menu.test.tsx @@ -5,6 +5,7 @@ import { act, screen, waitFor } from '@testing-library/react-native'; import { getTheme } from '../../core/theming'; import { render } from '../../test-utils'; +import { shadowLayers } from '../../theme/tokens/sys/elevation'; import type { Elevation } from '../../types'; import Button from '../Button/Button'; import Menu from '../Menu/Menu'; @@ -93,7 +94,7 @@ it('renders menu with content styles', async () => { ); - expect(screen.getByTestId('menu-surface')).toHaveStyle({ + expect(screen.getByTestId('menu')).toHaveStyle({ backgroundColor: theme.colors.elevation[`level${elevation}`], }); }) @@ -130,7 +131,7 @@ it('uses the default anchorPosition of top', async () => { ); } - const { rerender } = await render(makeMenu(false)); + const { rerender, toJSON } = await render(makeMenu(false)); // You must update instead of creating directly and using it because // componentDidUpdate isn't called by default in jest. Forcing the update @@ -143,14 +144,13 @@ it('uses the default anchorPosition of top', async () => { }); await waitFor(() => { - const menu = screen.getByTestId('menu-view'); - expect(menu).toHaveStyle({ - position: 'absolute', - left: 100, - top: 100, - }); + const json = JSON.stringify(toJSON()); + expect(json).toContain('"left":100'); + expect(json).toContain('"top":100'); }); + expect(toJSON()).toMatchSnapshot(); + measureSpy.mockRestore(); dimensionsSpy.mockRestore(); }); @@ -187,7 +187,7 @@ it('respects anchorPosition bottom', async () => { ); } - const { rerender } = await render(makeMenu(false)); + const { rerender, toJSON } = await render(makeMenu(false)); await act(async () => { await rerender(makeMenu(true)); @@ -196,21 +196,20 @@ it('respects anchorPosition bottom', async () => { }); await waitFor(() => { - const menu = screen.getByTestId('menu-view'); - expect(menu).toHaveStyle({ - position: 'absolute', - left: 100, - top: 132, - }); + const json = JSON.stringify(toJSON()); + expect(json).toContain('"left":100'); + expect(json).toContain('"top":132'); }); + expect(toJSON()).toMatchSnapshot(); + measureSpy.mockRestore(); dimensionsSpy.mockRestore(); }); it('animated value changes correctly', async () => { const value = new Animated.Value(1); - await render( + const { toJSON } = await render( { ); - expect(screen.getByTestId('menu-surface-outer-layer')).toHaveStyle({ - transform: [{ scale: 1 }], - }); + expect(toJSON()).toMatchSnapshot(); Animated.timing(value, { toValue: 1.5, @@ -236,11 +233,16 @@ it('animated value changes correctly', async () => { await act(() => { jest.advanceTimersByTime(200); }); - expect(screen.getByTestId('menu-surface-outer-layer')).toHaveStyle({ - transform: [{ scale: 1.5 }], - }); + expect(toJSON()).toMatchSnapshot(); }); +const menuContentShadow = { + shadowColor: getTheme().colors.shadow, + shadowOpacity: shadowLayers[1].shadowOpacity, + shadowOffset: { width: 0, height: shadowLayers[1].height[2] }, + shadowRadius: shadowLayers[1].shadowRadius[2], +}; + it('renders menu with mode "elevated"', async () => { await render( @@ -256,14 +258,7 @@ it('renders menu with mode "elevated"', async () => { ); - const menuSurface = screen.getByTestId('menu-surface'); - - // Get flattened styles - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - const styles = StyleSheet.flatten(menuSurface.props.style); - - expect(styles).toHaveProperty('shadowColor'); - expect(styles).toHaveProperty('shadowOpacity'); + expect(screen.getByTestId('menu')).toHaveStyle(menuContentShadow); }); it('renders menu with mode "flat"', async () => { @@ -281,12 +276,5 @@ it('renders menu with mode "flat"', async () => { ); - const menuSurface = screen.getByTestId('menu-surface'); - - // Get flattened styles - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - const styles = StyleSheet.flatten(menuSurface.props.style); - - expect(styles).not.toHaveProperty('shadowColor'); - expect(styles).not.toHaveProperty('shadowOpacity'); + expect(screen.getByTestId('menu')).not.toHaveStyle(menuContentShadow); }); diff --git a/src/components/__tests__/MenuItem.test.tsx b/src/components/__tests__/MenuItem.test.tsx index ba66e705a7..a283c333b1 100644 --- a/src/components/__tests__/MenuItem.test.tsx +++ b/src/components/__tests__/MenuItem.test.tsx @@ -47,10 +47,10 @@ describe('Menu Item', () => { /> ); - expect( - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - screen.getByTestId('menu-item-title').props.maxFontSizeMultiplier - ).toBe(labelMaxFontSizeMultiplier); + expect(screen.getByText('Cut')).toHaveProp( + 'maxFontSizeMultiplier', + labelMaxFontSizeMultiplier + ); }); it('accepts aria-checked prop', async () => { diff --git a/src/components/__tests__/Modal.test.tsx b/src/components/__tests__/Modal.test.tsx index 2009f3d444..b0b88e7aea 100644 --- a/src/components/__tests__/Modal.test.tsx +++ b/src/components/__tests__/Modal.test.tsx @@ -54,7 +54,7 @@ describe('Modal', () => { ); - expect(screen.getByTestId('modal-backdrop')).toHaveStyle({ + expect(screen.getByLabelText('Close modal')).toHaveStyle({ backgroundColor: LightTheme.colors.scrim, }); }); @@ -74,29 +74,26 @@ describe('Modal', () => { ); - expect(screen.getByTestId('modal-backdrop')).toHaveStyle({ + expect(screen.getByLabelText('Close modal')).toHaveStyle({ backgroundColor: 'transparent', }); }); it('should receive appropriate top and bottom insets', async () => { - await render( + const { toJSON } = await render( {null} ); - expect(screen.getByTestId('modal-wrapper')).toHaveStyle({ - marginTop: 37, - marginBottom: 44, - }); + expect(toJSON()).toMatchSnapshot(); }); }); describe('when open', () => { describe('if backdrop touched', () => { it('should invoke the onDismiss function immediately', async () => { const onDismiss = jest.fn(); - await render( + const { toJSON } = await render( {null} @@ -104,42 +101,36 @@ describe('Modal', () => { expect(onDismiss).not.toHaveBeenCalled(); - await userEvent.press(screen.getByTestId('modal-backdrop')); + await userEvent.press(screen.getByLabelText('Close modal')); expect(onDismiss).toHaveBeenCalled(); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); await act(() => { jest.runAllTimers(); }); - expect(screen.getByTestId('modal-backdrop')).toHaveStyle({ + expect(screen.getByLabelText('Close modal')).toHaveStyle({ opacity: scrimAlpha, }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); expect(onDismiss).toHaveBeenCalledTimes(1); }); }); it('runs the closing animation if visible toggled', async () => { - const { rerender } = await render( + const { rerender, toJSON } = await render( {}}> {null} ); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); - await userEvent.press(screen.getByTestId('modal-backdrop')); + await userEvent.press(screen.getByLabelText('Close modal')); await rerender( {}}> @@ -147,61 +138,47 @@ describe('Modal', () => { ); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); - expect(screen.getByTestId('modal-backdrop')).toHaveStyle({ + expect(screen.getByLabelText('Close modal')).toHaveStyle({ opacity: scrimAlpha, }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); await act(() => { jest.runAllTimers(); }); - expect( - screen.queryByTestId('modal-surface-outer-layer') - ).not.toBeOnTheScreen(); - - expect(screen.queryByTestId('modal-backdrop')).not.toBeOnTheScreen(); + expect(toJSON()).toBeNull(); }); describe('if closed via Android back button', () => { it('invokes onDismiss', async () => { const onDismiss = jest.fn(); - await render( + const { toJSON } = await render( {null} ); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); await act(() => { BackHandler.mockPressBack(); }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); await act(() => { jest.runAllTimers(); }); - expect(screen.getByTestId('modal-backdrop')).toHaveStyle({ + expect(screen.getByLabelText('Close modal')).toHaveStyle({ opacity: scrimAlpha, }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); expect(onDismiss).toHaveBeenCalledTimes(1); }); @@ -211,7 +188,7 @@ describe('Modal', () => { describe('when open as non-dismissible modal', () => { describe('if closed via touching backdrop', () => { it('will run the animation but not fade out', async () => { - await render( + const { toJSON } = await render( { ); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); - await userEvent.press(screen.getByTestId('modal-backdrop')); + await userEvent.press(screen.getByLabelText('Close modal')); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); await act(() => { jest.runAllTimers(); }); - expect(screen.getByTestId('modal-backdrop')).toHaveStyle({ + expect(screen.getByLabelText('Close modal')).toHaveStyle({ opacity: scrimAlpha, }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); }); it('should not invoke onDismiss', async () => { @@ -260,7 +231,7 @@ describe('Modal', () => { expect(onDismiss).not.toHaveBeenCalled(); - await userEvent.press(screen.getByTestId('modal-backdrop')); + await userEvent.press(screen.getByLabelText('Close modal')); expect(onDismiss).not.toHaveBeenCalled(); @@ -274,7 +245,7 @@ describe('Modal', () => { describe('if closed via Android back button', () => { it('will run the animation but not fade out', async () => { - await render( + const { toJSON } = await render( { ); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); await act(() => { BackHandler.mockPressBack(); }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); await act(() => { jest.runAllTimers(); }); - expect(screen.getByTestId('modal-backdrop')).toHaveStyle({ + expect(screen.getByLabelText('Close modal')).toHaveStyle({ opacity: scrimAlpha, }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); }); it('should not invoke onDismiss', async () => { @@ -344,7 +309,7 @@ describe('Modal', () => { describe('when visible prop changes', () => { describe('from false to true (closed to open)', () => { it('should run fade-in animation on opening', async () => { - const { rerender } = await render( + const { rerender, toJSON } = await render( {null} @@ -358,40 +323,34 @@ describe('Modal', () => { ); - expect(screen.getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 0, - }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ + expect(screen.getByLabelText('Close modal')).toHaveStyle({ opacity: 0, }); + expect(toJSON()).toMatchSnapshot(); await act(() => { jest.runAllTimers(); }); - expect(screen.getByTestId('modal-backdrop')).toHaveStyle({ + expect(screen.getByLabelText('Close modal')).toHaveStyle({ opacity: scrimAlpha, }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); }); }); describe('from true to false (open to closed)', () => { it('should run fade-out animation on closing', async () => { - const { rerender } = await render( + const { rerender, toJSON } = await render( {null} ); - expect(screen.getByTestId('modal-backdrop')).toHaveStyle({ + expect(screen.getByLabelText('Close modal')).toHaveStyle({ opacity: scrimAlpha, }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); await rerender( @@ -399,12 +358,10 @@ describe('Modal', () => { ); - expect(screen.getByTestId('modal-backdrop')).toHaveStyle({ + expect(screen.getByLabelText('Close modal')).toHaveStyle({ opacity: scrimAlpha, }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); await act(() => { jest.runAllTimers(); @@ -440,18 +397,16 @@ describe('Modal', () => { }); it('should close even if the dialog is not dismissible', async () => { - const { rerender } = await render( + const { rerender, toJSON } = await render( {null} ); - expect(screen.getByTestId('modal-backdrop')).toHaveStyle({ + expect(screen.getByLabelText('Close modal')).toHaveStyle({ opacity: scrimAlpha, }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); await rerender( @@ -459,12 +414,10 @@ describe('Modal', () => { ); - expect(screen.getByTestId('modal-backdrop')).toHaveStyle({ + expect(screen.getByLabelText('Close modal')).toHaveStyle({ opacity: scrimAlpha, }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); await act(() => { jest.runAllTimers(); @@ -478,18 +431,16 @@ describe('Modal', () => { describe('when visible prop changes again during the open/close animation', () => { describe('while closing, back to true (visible)', () => { it('should keep the modal open', async () => { - const { rerender } = await render( + const { rerender, toJSON } = await render( {null} ); - expect(screen.getByTestId('modal-backdrop')).toHaveStyle({ + expect(screen.getByLabelText('Close modal')).toHaveStyle({ opacity: scrimAlpha, }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); await rerender( @@ -497,12 +448,10 @@ describe('Modal', () => { ); - expect(screen.getByTestId('modal-backdrop')).toHaveStyle({ + expect(screen.getByLabelText('Close modal')).toHaveStyle({ opacity: scrimAlpha, }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); await act(() => { // Not a real seconds, this depends on how frequently @@ -520,24 +469,22 @@ describe('Modal', () => { jest.runAllTimers(); }); - expect(screen.getByTestId('modal-backdrop')).toHaveStyle({ + expect(screen.getByLabelText('Close modal')).toHaveStyle({ opacity: scrimAlpha, }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - opacity: 1, - }); + expect(toJSON()).toMatchSnapshot(); }); }); describe('while opening, back to false (hidden)', () => { it('should keep the modal closed', async () => { - const { rerender } = await render( + const { rerender, toJSON } = await render( {null} ); - expect(screen.queryByTestId('modal-backdrop')).not.toBeOnTheScreen(); + expect(screen.queryByLabelText('Close modal')).not.toBeOnTheScreen(); await rerender( @@ -545,12 +492,10 @@ describe('Modal', () => { ); - expect(screen.getByTestId('modal-backdrop')).toHaveStyle({ - opacity: 0, - }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ + expect(screen.getByLabelText('Close modal')).toHaveStyle({ opacity: 0, }); + expect(toJSON()).toMatchSnapshot(); await act(() => { // Not a real seconds, this depends on how frequently @@ -558,7 +503,7 @@ describe('Modal', () => { jest.advanceTimersToNextTimer(1000); }); - expect(screen.getByTestId('modal-backdrop')).toBeOnTheScreen(); + expect(screen.getByLabelText('Close modal')).toBeOnTheScreen(); await rerender( @@ -570,14 +515,14 @@ describe('Modal', () => { jest.runAllTimers(); }); - expect(screen.queryByTestId('modal-backdrop')).not.toBeOnTheScreen(); + expect(screen.queryByLabelText('Close modal')).not.toBeOnTheScreen(); }); }); }); it('animated value changes correctly', async () => { const value = new Animated.Value(1); - await render( + const { toJSON } = await render( { {null} ); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - transform: [{ scale: 1 }], - }); + expect(toJSON()).toMatchSnapshot(); Animated.timing(value, { toValue: 1.5, @@ -600,8 +543,6 @@ describe('Modal', () => { jest.runAllTimers(); }); - expect(screen.getByTestId('modal-surface-outer-layer')).toHaveStyle({ - transform: [{ scale: 1.5 }], - }); + expect(toJSON()).toMatchSnapshot(); }); }); diff --git a/src/components/__tests__/ProgressBar.test.tsx b/src/components/__tests__/ProgressBar.test.tsx index 4939f25c4c..8e0e8cf111 100644 --- a/src/components/__tests__/ProgressBar.test.tsx +++ b/src/components/__tests__/ProgressBar.test.tsx @@ -93,12 +93,10 @@ it('has progressbar role', async () => { }); it('renders progress bar with custom style of filled part', async () => { - await render( + const view = await render( ); await triggerLayout(); - expect(screen.getByTestId('progress-bar-fill')).toHaveStyle({ - borderRadius: 4, - }); + expect(view.toJSON()).toMatchSnapshot(); }); diff --git a/src/components/__tests__/Searchbar.test.tsx b/src/components/__tests__/Searchbar.test.tsx index 0671263277..e21ac39c99 100644 --- a/src/components/__tests__/Searchbar.test.tsx +++ b/src/components/__tests__/Searchbar.test.tsx @@ -46,20 +46,17 @@ it('renders clear icon with custom color', async () => { ); - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - const iconComponent = screen.getByTestId('search-bar-icon-wrapper').props - .children; - - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - expect(iconComponent.props.iconColor).toBe('purple'); + expect( + screen.getByText('close', { includeHiddenElements: true }) + ).toHaveStyle({ color: 'purple' }); }); it('renders clear icon wrapper, which can be the target of touch events, if search has value', async () => { await render(); expect( - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - screen.getByTestId('search-bar-icon-wrapper').props.pointerEvents + // eslint-disable-next-line no-restricted-syntax + screen.getByLabelText('clear').parent?.parent?.parent?.props.pointerEvents ).toBe('auto'); }); @@ -67,8 +64,8 @@ it('renders clear icon wrapper, which is never target of touch events, if search await render(); expect( - // eslint-disable-next-line no-restricted-syntax -- TODO: replace TestInstance props access with a user-visible assertion. - screen.getByTestId('search-bar-icon-wrapper').props.pointerEvents + // eslint-disable-next-line no-restricted-syntax + screen.getByLabelText('clear').parent?.parent?.parent?.props.pointerEvents ).toBe('none'); }); @@ -81,7 +78,8 @@ it('animated value changes correctly', async () => { style={[{ transform: [{ scale: value }] }]} /> ); - expect(screen.getByTestId('search-bar-container-outer-layer')).toHaveStyle({ + + expect(screen.getByTestId('search-bar').parent?.parent).toHaveStyle({ transform: [{ scale: 1 }], }); @@ -94,7 +92,7 @@ it('animated value changes correctly', async () => { await act(() => { jest.advanceTimersByTime(200); }); - expect(screen.getByTestId('search-bar-container-outer-layer')).toHaveStyle({ + expect(screen.getByTestId('search-bar').parent?.parent).toHaveStyle({ transform: [{ scale: 1.5 }], }); }); @@ -108,14 +106,14 @@ it('defines onClearIconPress action and checks if it is called when close button onClearIconPress={onClearIconPressMock} /> ); - await userEvent.press(screen.getByTestId('search-bar-clear-icon')); + await userEvent.press(screen.getByLabelText('clear')); expect(onClearIconPressMock).toHaveBeenCalledTimes(1); }); it('renders clear icon wrapper, with appropriate style for v3', async () => { const { rerender } = await render(); - expect(screen.getByTestId('search-bar-icon-wrapper')).toHaveStyle({ + expect(screen.getByLabelText('clear').parent?.parent?.parent).toHaveStyle({ position: 'absolute', right: 0, marginLeft: 16, @@ -130,9 +128,8 @@ it('renders clear icon wrapper, with appropriate style for v3', async () => { ); expect( - screen.getByTestId('search-bar-icon-wrapper', { - includeHiddenElements: true, - }) + screen.getByLabelText('clear', { includeHiddenElements: true }).parent + ?.parent?.parent ).toHaveStyle({ display: 'none' }); }); @@ -142,11 +139,12 @@ it('renders trailering icon when mode is set to "bar"', async () => { testID="search-bar" value={''} traileringIcon={'microphone'} + traileringIconAccessibilityLabel="microphone" mode="bar" /> ); - expect(screen.getByTestId('search-bar-trailering-icon')).toBeOnTheScreen(); + expect(screen.getByLabelText('microphone')).toBeOnTheScreen(); }); it('renders trailering icon with press functionality', async () => { @@ -157,12 +155,13 @@ it('renders trailering icon with press functionality', async () => { testID="search-bar" value={''} traileringIcon={'microphone'} + traileringIconAccessibilityLabel="microphone" onTraileringIconPress={onTraileringIconPressMock} mode="bar" /> ); - await userEvent.press(screen.getByTestId('search-bar-trailering-icon')); + await userEvent.press(screen.getByLabelText('microphone')); expect(onTraileringIconPressMock).toHaveBeenCalledTimes(1); }); @@ -172,31 +171,31 @@ it('renders clear icon instead of trailering icon', async () => { testID="search-bar" value={''} traileringIcon={'microphone'} + traileringIconAccessibilityLabel="microphone" mode="bar" /> ); - expect(screen.getByTestId('search-bar-trailering-icon')).toBeOnTheScreen(); + expect(screen.getByLabelText('microphone')).toBeOnTheScreen(); await rerender( ); - expect( - screen.queryByTestId('search-bar-trailering-icon') - ).not.toBeOnTheScreen(); - expect(screen.getByTestId('search-bar-icon-wrapper')).toBeOnTheScreen(); + expect(screen.queryByLabelText('microphone')).not.toBeOnTheScreen(); + expect(screen.getByLabelText('clear')).toBeOnTheScreen(); }); it('renders searchbar in "view" mode', async () => { await render(); - expect(screen.getByTestId('search-bar-container')).toHaveStyle({ + expect(screen.getByTestId('search-bar').parent).toHaveStyle({ borderRadius: 0, }); }); diff --git a/src/components/__tests__/SegmentedButton.test.tsx b/src/components/__tests__/SegmentedButton.test.tsx index ce950f671f..4bef0a414d 100644 --- a/src/components/__tests__/SegmentedButton.test.tsx +++ b/src/components/__tests__/SegmentedButton.test.tsx @@ -273,134 +273,138 @@ describe('getDisabledSegmentedButtonBorderWidth', () => { describe('should render icon when', () => { it('icon prop is passed', async () => { - await render( - {}} - /> - ); + const tree = ( + await render( + {}} + /> + ) + ).toJSON(); - expect(screen.getByTestId('walking-button-icon')).toBeOnTheScreen(); - expect(screen.getByTestId('driving-button-icon')).toBeOnTheScreen(); + expect(tree).toMatchSnapshot(); }); it('icon prop is passed along with label, no matter if button is checked', async () => { - await render( - {}} - /> - ); + const tree = ( + await render( + {}} + /> + ) + ).toJSON(); - expect(screen.getByTestId('walking-button-icon')).toBeOnTheScreen(); - expect(screen.getByTestId('driving-button-icon')).toBeOnTheScreen(); + expect(tree).toMatchSnapshot(); }); it('icon prop is passed along with label, button is checked, showSelectedCheck is false', async () => { - await render( - {}} - /> - ); + const tree = ( + await render( + {}} + /> + ) + ).toJSON(); - expect(screen.getByTestId('walking-button-icon')).toBeOnTheScreen(); - expect(screen.getByTestId('driving-button-icon')).toBeOnTheScreen(); + expect(tree).toMatchSnapshot(); }); }); describe('should not render icon when', () => { it('icon prop is not passed', async () => { - await render( - {}} - /> - ); + const tree = ( + await render( + {}} + /> + ) + ).toJSON(); - expect(screen.queryByTestId('walking-button-icon')).not.toBeOnTheScreen(); - expect(screen.queryByTestId('driving-button-icon')).not.toBeOnTheScreen(); + expect(tree).toMatchSnapshot(); }); it('icon prop is passed along with label, button is checked, showSelectedCheck is true', async () => { - await render( - {}} - /> - ); + const tree = ( + await render( + {}} + /> + ) + ).toJSON(); - expect(screen.queryByTestId('walking-button-icon')).not.toBeOnTheScreen(); - expect(screen.getByTestId('walking-button-check-icon')).toBeOnTheScreen(); - expect(screen.getByTestId('driving-button-icon')).toBeOnTheScreen(); + expect(tree).toMatchSnapshot(); }); }); @@ -439,25 +443,26 @@ describe('should have `accessibilityState={ checked: true }` when selected', () it('show selected check icon should be shown', async () => { const onValueChange = jest.fn(); - await render( - - multiSelect - value={['walk', 'transit']} - buttons={[ - { - value: 'walk', - label: 'Walking', - showSelectedCheck: true, - testID: 'walking-check-icon', - }, - { value: 'transit', label: 'Transit' }, - { value: 'drive', label: 'Driving' }, - ]} - onValueChange={onValueChange} - /> - ); + const tree = ( + await render( + + multiSelect + value={['walk', 'transit']} + buttons={[ + { + value: 'walk', + label: 'Walking', + showSelectedCheck: true, + }, + { value: 'transit', label: 'Transit' }, + { value: 'drive', label: 'Driving' }, + ]} + onValueChange={onValueChange} + /> + ) + ).toJSON(); - expect(screen.getByTestId('walking-check-icon')).toBeOnTheScreen(); + expect(tree).toMatchSnapshot(); }); }); @@ -484,10 +489,10 @@ describe('labelStyle is handled', () => { /> ); - expect(screen.getByTestId('walking-button-label')).toHaveStyle({ + expect(screen.getByText('Walking')).toHaveStyle({ fontSize: 10, }); - expect(screen.getByTestId('driving-button-label')).toHaveStyle({ + expect(screen.getByText('Driving')).toHaveStyle({ fontSize: 12, }); }); @@ -507,7 +512,7 @@ describe('labelStyle is handled', () => { /> ); - expect(screen.getByTestId('walking-button-label')).toHaveStyle({ + expect(screen.getByText('Walking')).toHaveStyle({ fontSize: 14, }); }); diff --git a/src/components/__tests__/Snackbar.test.tsx b/src/components/__tests__/Snackbar.test.tsx index 16b118da09..d8eb2f9547 100644 --- a/src/components/__tests__/Snackbar.test.tsx +++ b/src/components/__tests__/Snackbar.test.tsx @@ -3,7 +3,7 @@ import { Animated, StyleSheet, Text, View } from 'react-native'; import { expect, it, jest } from '@jest/globals'; import { act } from '@testing-library/react-native'; -import { render, screen } from '../../test-utils'; +import { render } from '../../test-utils'; import { red200, white } from '../../theme/colors'; import Snackbar from '../Snackbar'; @@ -95,7 +95,7 @@ it('renders snackbar with View & Text as a child', async () => { it('animated value changes correctly', async () => { const value = new Animated.Value(1); - await render( + const { toJSON } = await render( { Snackbar content ); - expect(screen.getByTestId('snack-bar-outer-layer')).toHaveStyle({ - transform: [{ scale: 1 }], - }); + expect(toJSON()).toMatchSnapshot(); Animated.timing(value, { toValue: 1.5, @@ -118,7 +116,5 @@ it('animated value changes correctly', async () => { await act(() => { jest.advanceTimersByTime(200); }); - expect(screen.getByTestId('snack-bar-outer-layer')).toHaveStyle({ - transform: [{ scale: 1.5 }], - }); + expect(toJSON()).toMatchSnapshot(); }); diff --git a/src/components/__tests__/Surface.test.tsx b/src/components/__tests__/Surface.test.tsx index 1a9ebc8a45..5c4782ef15 100644 --- a/src/components/__tests__/Surface.test.tsx +++ b/src/components/__tests__/Surface.test.tsx @@ -48,7 +48,7 @@ describe('Surface', () => { }); it('should render Surface with appropriate bg color but without shadow, if mode is set to "flat"', async () => { - await render( + const { toJSON } = await render( { shadowOffset: { width: 0, height: 4 }, shadowRadius: 4, }); - expect(screen.getByTestId('surface-test-outer-layer')).not.toHaveStyle({ - shadowColor: '#000', - shadowOpacity: 0.15, - shadowOffset: { width: 0, height: 8 }, - shadowRadius: 12, - }); expect(screen.getByTestId('surface-test')).toHaveStyle({ backgroundColor: getTheme().colors.surfaceContainerHighest, }); + expect(toJSON()).toMatchSnapshot(); }); it.each([ @@ -102,16 +97,14 @@ describe('Surface', () => { async ({ property, value }) => { const style = { [property]: value }; - await render( + const { toJSON } = await render( {null} ); - expect(screen.getByTestId('surface-test-outer-layer')).toHaveStyle( - style - ); expect(screen.getByTestId('surface-test')).not.toHaveStyle(style); + expect(toJSON()).toMatchSnapshot(); } ); @@ -130,16 +123,14 @@ describe('Surface', () => { async ({ property, value }) => { const style = { [property]: value }; - await render( + const { toJSON } = await render( {null} ); - expect(screen.getByTestId('surface-test-outer-layer')).not.toHaveStyle( - style - ); expect(screen.getByTestId('surface-test')).toHaveStyle(style); + expect(toJSON()).toMatchSnapshot(); } ); @@ -155,16 +146,14 @@ describe('Surface', () => { async ({ property, value }) => { const style = { [property]: value }; - await render( + const { toJSON } = await render( {null} ); - expect(screen.getByTestId('surface-test-outer-layer')).toHaveStyle( - style - ); expect(screen.getByTestId('surface-test')).toHaveStyle(style); + expect(toJSON()).toMatchSnapshot(); } ); @@ -172,43 +161,25 @@ describe('Surface', () => { it('should not render rest style', async () => { const testID = 'surface-test'; - await render( + const { toJSON } = await render( {null} ); - expect(screen.getByTestId(`${testID}-outer-layer`)).not.toHaveStyle( - styles.restStyle - ); + expect(toJSON()).toMatchSnapshot(); }); it('should render absolute position properties on outer layer', async () => { const testID = 'surface-test'; - await render( + const { toJSON } = await render( {null} ); - expect(screen.getByTestId(`${testID}-outer-layer`)).toHaveStyle( - styles.absoluteStyles - ); - }); - - it('should render absolute position properties on the outer layer', async () => { - const testID = 'surface-test'; - - await render( - - {null} - - ); - - expect(screen.getByTestId(`${testID}-outer-layer`)).toHaveStyle( - styles.absoluteStyles - ); + expect(toJSON()).toMatchSnapshot(); }); }); @@ -230,7 +201,7 @@ describe('Surface', () => { it('applies backgroundColor to every layer', async () => { const backgroundColor = 'rgb(1, 2, 3)'; - await render( + const { toJSON } = await render( { ); - const style = { backgroundColor }; - expect(screen.getByTestId('surface-test-outer-layer')).toHaveStyle(style); - expect(screen.getByTestId('surface-test')).toHaveStyle(style); + expect(screen.getByTestId('surface-test')).toHaveStyle({ + backgroundColor, + }); + expect(toJSON()).toMatchSnapshot(); }); describe('children wrapper', () => { diff --git a/src/components/__tests__/ToggleButton.test.tsx b/src/components/__tests__/ToggleButton.test.tsx index 1ea9e20bae..63b17dce97 100644 --- a/src/components/__tests__/ToggleButton.test.tsx +++ b/src/components/__tests__/ToggleButton.test.tsx @@ -4,7 +4,7 @@ import { describe, expect, it, jest } from '@jest/globals'; import { act } from '@testing-library/react-native'; import { getTheme } from '../../core/theming'; -import { render, screen } from '../../test-utils'; +import { render } from '../../test-utils'; import ToggleButton from '../ToggleButton'; import { getToggleButtonColor } from '../ToggleButton/utils'; @@ -58,7 +58,7 @@ describe('getToggleButtonColor', () => { it('animated value changes correctly', async () => { const value = new Animated.Value(1); - await render( + const { toJSON } = await render( { style={[{ transform: [{ scale: value }] }]} /> ); - expect(screen.getByTestId('toggle-button-container-outer-layer')).toHaveStyle( - { - transform: [{ scale: 1 }], - } - ); + expect(toJSON()).toMatchSnapshot(); Animated.timing(value, { toValue: 1.5, @@ -82,9 +78,5 @@ it('animated value changes correctly', async () => { await act(() => { jest.advanceTimersByTime(200); }); - expect(screen.getByTestId('toggle-button-container-outer-layer')).toHaveStyle( - { - transform: [{ scale: 1.5 }], - } - ); + expect(toJSON()).toMatchSnapshot(); }); diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap index a6fb8c8dee..76630120e6 100644 --- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap @@ -1,5 +1,259 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`animations animated value changes correctly 1`] = ` + + + + + + + + Banner + + + + + + + +`; + +exports[`animations animated value changes correctly 2`] = ` + + + + + + + + Banner + + + + + + + +`; + exports[`render visible banner, with custom theme 1`] = ` first @@ -292,7 +543,6 @@ exports[`renders hidden banner, without action buttons and without image 1`] = ` "shadowRadius": 3, } } - testID="surface-outer-layer" > first @@ -725,7 +972,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "shadowRadius": 3, } } - testID="surface-outer-layer" > first @@ -994,7 +1238,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` "shadowRadius": 0, } } - testID="button-container-outer-layer" > second @@ -1153,7 +1395,6 @@ exports[`renders visible banner, without action buttons and with image 1`] = ` "shadowRadius": 3, } } - testID="surface-outer-layer" > `; -exports[`hides labels in non-shifting bottom navigation 1`] = ` +exports[`applies maxTabBarWidth styling if compact prop is truthy 1`] = ` + + + + Route: 1 + + + + + + + Route: 3 + + + + + + + Route: 4 + + + @@ -1036,72 +1169,12 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` /> - - - - @@ -1109,132 +1182,112 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` collapsable={false} style={ { - "alignItems": "center", "bottom": 0, "left": 0, - "opacity": 0, + "opacity": 1, "position": "absolute", "right": 0, - "top": 4, + "top": 0, } } > - camera - - - - - camera + Route: 0 + > + Route: 0 + @@ -1286,9 +1339,8 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` pointerEvents="none" style={ { - "alignItems": "center", - "height": 80, - "justifyContent": "center", + "paddingBottom": 16, + "paddingTop": 12, } } > @@ -1347,7 +1399,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = ` ] } > - inbox + camera - inbox + camera + + + + Route: 1 + + + + + Route: 1 + + + - - - - - -`; - -exports[`hides labels in shifting bottom navigation 1`] = ` - - - - - - Route: 0 - - - - - - - - @@ -1651,23 +1679,6 @@ exports[`hides labels in shifting bottom navigation 1`] = ` } } > - - magnify + inbox - magnify + inbox - - - - @@ -1873,133 +1824,113 @@ exports[`hides labels in shifting bottom navigation 1`] = ` collapsable={false} style={ { - "alignItems": "center", "bottom": 0, "left": 0, "opacity": 0, "position": "absolute", "right": 0, - "top": 4, + "top": 0, } } > - camera + Route: 2 - camera + Route: 2 - - - @@ -2050,9 +1981,8 @@ exports[`hides labels in shifting bottom navigation 1`] = ` pointerEvents="none" style={ { - "alignItems": "center", - "height": 80, - "justifyContent": "center", + "paddingBottom": 16, + "paddingTop": 12, } } > @@ -2111,7 +2041,7 @@ exports[`hides labels in shifting bottom navigation 1`] = ` ] } > - inbox + heart - inbox + heart + + + + Route: 3 + + + + + Route: 3 + + + - - - - - -`; - -exports[`renders bottom navigation with getLazy 1`] = ` - - - - - - Route: 0 - - - - - - - Route: 1 - - - - - - - Route: 3 - - - - - - - Route: 4 - - - - - - - + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={true} + collapsable={false} + focusable={true} + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + role="button" + style={ + [ + { + "flex": 1, + "paddingVertical": 6, + }, + { + "paddingVertical": 0, + }, + ] + } + > + + + + + shopping-music + + + + + shopping-music + + + + + + + + + + Route: 4 + + + + + Route: 4 + + + + + + + + + + +`; + +exports[`barStyle animated value changes correctly 1`] = ` + + + + + + Route: 0 + + + + + + + + + + + + + + + magnify + + + + + magnify + + + + + + + + + + Route: 0 + + + + + Route: 0 + + + + + + + + + + +`; + +exports[`barStyle animated value changes correctly 2`] = ` + + + + + + Route: 0 + + + + + + + + + + + + + + + magnify + + + + + magnify + + + + + + + + + + Route: 0 + + + + + Route: 0 + + + + + + + + + + +`; + +exports[`does not apply maxTabBarWidth styling if compact prop is falsy 1`] = ` + + + + + + Route: 0 + + + + + + + Route: 1 + + + + + + + Route: 3 + + + + + + + Route: 4 + + + + + + + + + + + + + + + magnify + + + + + magnify + + + + + + + + + + Route: 0 + + + + + Route: 0 + + + + + + + + + + + camera + + + + + camera + + + + + + + + + + Route: 1 + + + + + Route: 1 + + + + + + + + + + + inbox + + + + + inbox + + + + + + + + + + Route: 2 + + + + + Route: 2 + + + + + + + + + + + heart + + + + + heart + + + + + + + + + + Route: 3 + + + + + Route: 3 + + + + + + + + + + + shopping-music + + + + + shopping-music + + + + + + + + + + Route: 4 + + + + + Route: 4 + + + + + + + + + + +`; + +exports[`hides labels in non-shifting bottom navigation 1`] = ` + + + + + + Route: 0 + + + + + + + + + + + + + + + magnify + + + + + magnify + + + + + + + + + + + + + + camera + + + + + camera + + + + + + + + + + + + + + inbox + + + + + inbox + + + + + + + + + + + + + +`; + +exports[`hides labels in shifting bottom navigation 1`] = ` + + + + + + Route: 0 + + + + + + + + + + + + + + + magnify + + + + + magnify + + + + + + + + + + + + + + camera + + + + + camera + + + + + + + + + + + + + + inbox + + + + + inbox + + + + + + + + + + + + + +`; + +exports[`renders bottom navigation with getLazy 1`] = ` + + + + + + Route: 0 + + + + + + + Route: 1 + + + + + + + Route: 3 + + + + + + + Route: 4 + + + + + + + + + + + + + + magnify + + + + + magnify + + + + + + + + + + Route: 0 + + + + + Route: 0 + + + + + + + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={true} + collapsable={false} + focusable={true} + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + role="button" + style={ + [ + { + "flex": 1, + "paddingVertical": 6, + }, + { + "paddingVertical": 0, + }, + ] + } + > + + + + + camera + + + + + camera + + + + + + + + + + Route: 1 + + + + + Route: 1 + + + + + - - magnify + inbox - magnify + inbox - Route: 0 + Route: 2 - Route: 0 + Route: 2 @@ -2931,7 +8333,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` ] } > - camera + heart - camera + heart - Route: 1 + Route: 3 - Route: 1 + Route: 3 @@ -3252,7 +8654,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` ] } > - inbox + shopping-music - inbox + shopping-music - Route: 2 + Route: 4 - Route: 2 + Route: 4 + + + + + +`; + +exports[`renders bottom navigation with scene animation 1`] = ` + + + + + + Route: 0 + + + + + + + + + - heart + magnify - heart + magnify - - - Route: 3 - - - Route: 3 + Route: 0 @@ -3849,6 +9358,11 @@ exports[`renders bottom navigation with getLazy 1`] = ` "marginBottom": 4, "marginHorizontal": 12, "marginTop": 0, + "transform": [ + { + "translateY": 7, + }, + ], "width": 32, } } @@ -3894,7 +9408,7 @@ exports[`renders bottom navigation with getLazy 1`] = ` ] } > - shopping-music + camera - shopping-music + camera + + + Route: 1 + + + + + + + + @@ -3998,260 +9641,201 @@ exports[`renders bottom navigation with getLazy 1`] = ` collapsable={false} style={ { + "alignItems": "center", "bottom": 0, "left": 0, "opacity": 0, "position": "absolute", "right": 0, - "top": 0, + "top": 4, } } > - Route: 4 + inbox - Route: 4 + inbox - - - - - - - - -`; - -exports[`renders bottom navigation with scene animation 1`] = ` - - - - - - Route: 0 - - - - - - - - + + + + + + + + Route: 2 + + + + + - - magnify + heart - magnify + heart - Route: 0 + Route: 3 @@ -4651,7 +10218,7 @@ exports[`renders bottom navigation with scene animation 1`] = ` ] } > - camera + shopping-music - camera + shopping-music - Route: 1 + Route: 4 + + + + + +`; + +exports[`renders custom background color passed to barStyle property 1`] = ` + + + + + + Route: 0 + + + + + + + + + - inbox + magnify - inbox + magnify + + + Route: 0 + + - Route: 2 + Route: 0 @@ -5141,11 +10917,6 @@ exports[`renders bottom navigation with scene animation 1`] = ` "marginBottom": 4, "marginHorizontal": 12, "marginTop": 0, - "transform": [ - { - "translateY": 7, - }, - ], "width": 32, } } @@ -5191,7 +10962,7 @@ exports[`renders bottom navigation with scene animation 1`] = ` ] } > - heart + camera - heart + camera - Route: 3 + Route: 1 + + + + + Route: 1 @@ -5411,11 +11238,6 @@ exports[`renders bottom navigation with scene animation 1`] = ` "marginBottom": 4, "marginHorizontal": 12, "marginTop": 0, - "transform": [ - { - "translateY": 7, - }, - ], "width": 32, } } @@ -5461,7 +11283,7 @@ exports[`renders bottom navigation with scene animation 1`] = ` ] } > - shopping-music + inbox - shopping-music + inbox - Route: 4 + Route: 2 + + + + + Route: 2 @@ -5715,7 +11593,6 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = ` "shadowRadius": 0, } } - testID="bottom-navigation-bar-outer-layer" > + + + + + + camera + + + + Compact button + + + + + +`; + +exports[`animated value changes correctly 2`] = ` + + + + + + + camera + + + + Compact button + + + + + +`; + +exports[`button icon styles should return correct icon styles for compact contained button 1`] = ` + + + + + + + camera + + + + Compact + contained + button + + + + + +`; + +exports[`button icon styles should return correct icon styles for compact contained button 2`] = ` + + + + + + + camera + + + + contained + button + + + + + +`; + +exports[`button icon styles should return correct icon styles for compact contained-tonal button 1`] = ` + + + + + + + camera + + + + Compact + contained-tonal + button + + + + + +`; + +exports[`button icon styles should return correct icon styles for compact contained-tonal button 2`] = ` + + + + + + + camera + + + + contained-tonal + button + + + + + +`; + +exports[`button icon styles should return correct icon styles for compact elevated button 1`] = ` + + + + + + + camera + + + + Compact + elevated + button + + + + + +`; + +exports[`button icon styles should return correct icon styles for compact elevated button 2`] = ` + + + + + + + camera + + + + elevated + button + + + + + +`; + +exports[`button icon styles should return correct icon styles for compact outlined button 1`] = ` + + + + + + + camera + + + + Compact + outlined + button + + + + + +`; + +exports[`button icon styles should return correct icon styles for compact outlined button 2`] = ` + + + + + + + camera + + + + outlined + button + + + + + +`; + +exports[`button icon styles should return correct icon styles for compact text button 1`] = ` + + + + + + + camera + + + + Compact text button + + + + + +`; + +exports[`button icon styles should return correct icon styles for text button 1`] = ` + + + + + + + camera + + + + text button + + + + + +`; + exports[`renders button with an accessibility hint 1`] = ` Button with accessibility hint @@ -169,7 +2559,6 @@ exports[`renders button with an accessibility label 1`] = ` "shadowRadius": 0, } } - testID="button-container-outer-layer" > Button with accessibility label @@ -322,7 +2710,6 @@ exports[`renders button with button color 1`] = ` "shadowRadius": 0, } } - testID="button-container-outer-layer" > Custom Button @@ -474,7 +2860,6 @@ exports[`renders button with color 1`] = ` "shadowRadius": 0, } } - testID="button-container-outer-layer" > Custom Button @@ -626,7 +3010,6 @@ exports[`renders button with custom testID 1`] = ` "shadowRadius": 0, } } - testID="custom:testID-container-outer-layer" > Button with custom testID @@ -778,7 +3160,6 @@ exports[`renders button with icon 1`] = ` "shadowRadius": 0, } } - testID="button-container-outer-layer" > Icon Button @@ -979,7 +3358,6 @@ exports[`renders button with icon in reverse order 1`] = ` "shadowRadius": 0, } } - testID="button-container-outer-layer" > Right Icon @@ -1182,7 +3558,6 @@ exports[`renders contained contained with mode 1`] = ` "shadowRadius": 0, } } - testID="button-container-outer-layer" > Contained Button @@ -1335,7 +3709,6 @@ exports[`renders disabled button 1`] = ` "shadowRadius": 0, } } - testID="button-container-outer-layer" > Disabled Button @@ -1487,7 +3859,6 @@ exports[`renders loading button 1`] = ` "shadowRadius": 0, } } - testID="button-container-outer-layer" > Loading Button @@ -1843,7 +4213,6 @@ exports[`renders outlined button with mode 1`] = ` "shadowRadius": 0, } } - testID="button-container-outer-layer" > Outlined Button @@ -1996,7 +4364,6 @@ exports[`renders text button by default 1`] = ` "shadowRadius": 0, } } - testID="button-container-outer-layer" > Text Button @@ -2148,7 +4514,6 @@ exports[`renders text button with mode 1`] = ` "shadowRadius": 0, } } - testID="button-container-outer-layer" > Text Button diff --git a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap index 7bf18dde0e..0cd252b2c4 100644 --- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap @@ -1,5 +1,333 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`animated value changes correctly 1`] = ` + + + + + + Example Chip + + + + + +`; + +exports[`animated value changes correctly 2`] = ` + + + + + + Example Chip + + + + + +`; + exports[`renders chip with close button 1`] = ` Cupcake `; +exports[`DataTable.Cell renders data table cell children without wrapping text component 1`] = ` + + + + + + + + + + + + + + + +`; + +exports[`DataTable.Cell renders data table cell with text content 1`] = ` + + + Table cell + + +`; + exports[`DataTable.Cell renders right aligned data table cell 1`] = ` 356 @@ -397,7 +700,6 @@ exports[`DataTable.Pagination renders data table pagination 1`] = ` "width": 40, } } - testID="icon-button-container-outer-layer" > 2 @@ -1939,7 +2231,6 @@ exports[`DataTable.Pagination renders data table pagination with options select "width": 40, } } - testID="icon-button-container-outer-layer" > New message @@ -274,7 +272,6 @@ exports[`renders extended FAB expanded 1`] = ` }, ] } - testID="extended-floating-action-button-container" > New message @@ -513,7 +509,6 @@ exports[`renders extended FAB large size 1`] = ` }, ] } - testID="extended-floating-action-button-container" > New message @@ -752,7 +746,6 @@ exports[`renders extended FAB medium size 1`] = ` }, ] } - testID="extended-floating-action-button-container" > New message @@ -991,7 +983,6 @@ exports[`renders extended FAB not visible 1`] = ` }, ] } - testID="extended-floating-action-button-container" > New message @@ -1230,7 +1220,6 @@ exports[`renders extended FAB transitioning to collapsed 1`] = ` }, ] } - testID="extended-floating-action-button-container" > New message diff --git a/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap b/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap index 726f4ef1b2..24fb383f32 100644 --- a/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap @@ -187,7 +187,6 @@ exports[`renders FAB.Menu closed 1`] = ` "writingDirection": "ltr", } } - testID="item-0-text" > Send email @@ -352,7 +351,6 @@ exports[`renders FAB.Menu closed 1`] = ` "writingDirection": "ltr", } } - testID="item-1-text" > Set reminder @@ -435,7 +433,6 @@ exports[`renders FAB.Menu closed 1`] = ` }, ] } - testID="fab-shell-container" > Send email @@ -1037,7 +1033,6 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = ` "writingDirection": "ltr", } } - testID="item-1-text" > Set reminder @@ -1120,7 +1115,6 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = ` }, ] } - testID="fab-shell-container" > Send email @@ -1722,7 +1715,6 @@ exports[`renders FAB.Menu open 1`] = ` "writingDirection": "ltr", } } - testID="item-1-text" > Set reminder @@ -1805,7 +1797,6 @@ exports[`renders FAB.Menu open 1`] = ` }, ] } - testID="fab-shell-container" > Item 1 @@ -2407,7 +2397,6 @@ exports[`renders FAB.Menu with 6 items 1`] = ` "writingDirection": "ltr", } } - testID="item-1-text" > Item 2 @@ -2572,7 +2561,6 @@ exports[`renders FAB.Menu with 6 items 1`] = ` "writingDirection": "ltr", } } - testID="item-2-text" > Item 3 @@ -2737,7 +2725,6 @@ exports[`renders FAB.Menu with 6 items 1`] = ` "writingDirection": "ltr", } } - testID="item-3-text" > Item 4 @@ -2902,7 +2889,6 @@ exports[`renders FAB.Menu with 6 items 1`] = ` "writingDirection": "ltr", } } - testID="item-4-text" > Item 5 @@ -3067,7 +3053,6 @@ exports[`renders FAB.Menu with 6 items 1`] = ` "writingDirection": "ltr", } } - testID="item-5-text" > Item 6 @@ -3150,7 +3135,6 @@ exports[`renders FAB.Menu with 6 items 1`] = ` }, ] } - testID="fab-shell-container" > Send email @@ -3753,7 +3736,6 @@ exports[`renders FAB.Menu with center alignment 1`] = ` "writingDirection": "ltr", } } - testID="item-1-text" > Set reminder @@ -3836,7 +3818,6 @@ exports[`renders FAB.Menu with center alignment 1`] = ` }, ] } - testID="fab-shell-container" > Send email @@ -5181,7 +5160,6 @@ exports[`renders FAB.Menu with start alignment 1`] = ` "writingDirection": "ltr", } } - testID="item-1-text" > Set reminder @@ -5264,7 +5242,6 @@ exports[`renders FAB.Menu with start alignment 1`] = ` }, ] } - testID="fab-shell-container" > + + + + + menu + + + + + +`; + +exports[`action animated value changes correctly 2`] = ` + + + + + + menu + + + + + +`; + exports[`renders disabled icon button 1`] = ` + + + + camera + + + + + +`; + +exports[`renders icon button by default 1`] = ` + + @@ -115,7 +547,7 @@ exports[`renders disabled icon button 1`] = ` style={ [ { - "color": "rgba(29, 27, 32, 1)", + "color": "rgba(73, 69, 79, 1)", "fontSize": 24, }, [ @@ -142,7 +574,7 @@ exports[`renders disabled icon button 1`] = ` `; -exports[`renders icon button by default 1`] = ` +exports[`renders icon button with color 1`] = ` `; -exports[`renders icon button with color 1`] = ` +exports[`renders icon button with custom border radius 1`] = ` `; +exports[`renders icon button with small border radius 1`] = ` + + + + + + camera + + + + + +`; + exports[`renders icon change animated 1`] = ` + + + + First Item + + + Item description + + + + +`; + exports[`renders list item with custom description 1`] = ` + + + + + + + + Open menu + + + + + + + + + + + + + + + + + + Test + + + + + + + + + + +`; + +exports[`animated value changes correctly 2`] = ` +<> + + + + + + + + Open menu + + + + + + + + + + + + + + + + + + Test + + + + + + + + + + +`; + exports[`renders menu with content styles 1`] = ` <> + + + + Open menu + + + + + + + + + + + + + + + + + + Undo + + + + + + + + + Redo + + + + + + + + + + +`; + +exports[`renders not visible menu 1`] = ` + + + + + + + + Open menu + + + + + + + +`; + +exports[`renders visible menu 1`] = ` +<> + + + + + + + + Open menu + + + + + + + + + + + + + + + + + + Undo + + + + + + + + + Redo + + + + + + + + + + +`; + +exports[`respects anchorPosition bottom 1`] = ` +<> + + + + Open menu @@ -234,13 +2365,12 @@ exports[`renders menu with content styles 1`] = ` "position": "absolute", }, { - "left": 8, - "top": 8, + "left": 100, + "top": 132, }, undefined, ] } - testID="menu-view" > Undo @@ -549,7 +2677,6 @@ exports[`renders menu with content styles 1`] = ` ], ] } - testID="menu-item-title" > Redo @@ -564,174 +2691,7 @@ exports[`renders menu with content styles 1`] = ` `; -exports[`renders not visible menu 1`] = ` - - - - - - - - Open menu - - - - - - - -`; - -exports[`renders visible menu 1`] = ` +exports[`uses the default anchorPosition of top 1`] = ` <> Open menu @@ -965,13 +2923,12 @@ exports[`renders visible menu 1`] = ` "position": "absolute", }, { - "left": 8, - "top": 8, + "left": 100, + "top": 100, }, undefined, ] } - testID="menu-view" > Undo @@ -1276,7 +3235,6 @@ exports[`renders visible menu 1`] = ` ], ] } - testID="menu-item-title" > Redo diff --git a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap index 6977abf932..6bfa13f961 100644 --- a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap @@ -159,7 +159,6 @@ exports[`Menu Item renders menu item 1`] = ` ], ] } - testID="menu-item-title" > Redo @@ -323,7 +322,6 @@ exports[`Menu Item renders menu item 1`] = ` ], ] } - testID="menu-item-title" > Undo @@ -487,7 +485,6 @@ exports[`Menu Item renders menu item 1`] = ` ], ] } - testID="menu-item-title" > Cut @@ -651,7 +648,6 @@ exports[`Menu Item renders menu item 1`] = ` ], ] } - testID="menu-item-title" > Copy @@ -775,7 +771,6 @@ exports[`Menu Item renders menu item 1`] = ` ], ] } - testID="menu-item-title" > Paste diff --git a/src/components/__tests__/__snapshots__/Modal.test.tsx.snap b/src/components/__tests__/__snapshots__/Modal.test.tsx.snap new file mode 100644 index 0000000000..d2e3cbdbe8 --- /dev/null +++ b/src/components/__tests__/__snapshots__/Modal.test.tsx.snap @@ -0,0 +1,3197 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Modal animated value changes correctly 1`] = ` + + + + + + + + +`; + +exports[`Modal animated value changes correctly 2`] = ` + + + + + + + + +`; + +exports[`Modal by default should receive appropriate top and bottom insets 1`] = ` + + + + + + + + +`; + +exports[`Modal when open as non-dismissible modal if closed via Android back button will run the animation but not fade out 1`] = ` + + + + + + + + +`; + +exports[`Modal when open as non-dismissible modal if closed via Android back button will run the animation but not fade out 2`] = ` + + + + + + + + +`; + +exports[`Modal when open as non-dismissible modal if closed via Android back button will run the animation but not fade out 3`] = ` + + + + + + + + +`; + +exports[`Modal when open as non-dismissible modal if closed via touching backdrop will run the animation but not fade out 1`] = ` + + + + + + + + +`; + +exports[`Modal when open as non-dismissible modal if closed via touching backdrop will run the animation but not fade out 2`] = ` + + + + + + + + +`; + +exports[`Modal when open as non-dismissible modal if closed via touching backdrop will run the animation but not fade out 3`] = ` + + + + + + + + +`; + +exports[`Modal when open if backdrop touched should invoke the onDismiss function immediately 1`] = ` + + + + + + + + +`; + +exports[`Modal when open if backdrop touched should invoke the onDismiss function immediately 2`] = ` + + + + + + + + +`; + +exports[`Modal when open if closed via Android back button invokes onDismiss 1`] = ` + + + + + + + + +`; + +exports[`Modal when open if closed via Android back button invokes onDismiss 2`] = ` + + + + + + + + +`; + +exports[`Modal when open if closed via Android back button invokes onDismiss 3`] = ` + + + + + + + + +`; + +exports[`Modal when open runs the closing animation if visible toggled 1`] = ` + + + + + + + + +`; + +exports[`Modal when open runs the closing animation if visible toggled 2`] = ` + + + + + + + + +`; + +exports[`Modal when open runs the closing animation if visible toggled 3`] = ` + + + + + + + + +`; + +exports[`Modal when visible prop changes again during the open/close animation while closing, back to true (visible) should keep the modal open 1`] = ` + + + + + + + + +`; + +exports[`Modal when visible prop changes again during the open/close animation while closing, back to true (visible) should keep the modal open 2`] = ` + + + + + + + + +`; + +exports[`Modal when visible prop changes again during the open/close animation while closing, back to true (visible) should keep the modal open 3`] = ` + + + + + + + + +`; + +exports[`Modal when visible prop changes again during the open/close animation while opening, back to false (hidden) should keep the modal closed 1`] = ` + + + + + + + + +`; + +exports[`Modal when visible prop changes from false to true (closed to open) should run fade-in animation on opening 1`] = ` + + + + + + + + +`; + +exports[`Modal when visible prop changes from false to true (closed to open) should run fade-in animation on opening 2`] = ` + + + + + + + + +`; + +exports[`Modal when visible prop changes from true to false (open to closed) should close even if the dialog is not dismissible 1`] = ` + + + + + + + + +`; + +exports[`Modal when visible prop changes from true to false (open to closed) should close even if the dialog is not dismissible 2`] = ` + + + + + + + + +`; + +exports[`Modal when visible prop changes from true to false (open to closed) should run fade-out animation on closing 1`] = ` + + + + + + + + +`; + +exports[`Modal when visible prop changes from true to false (open to closed) should run fade-out animation on closing 2`] = ` + + + + + + + + +`; diff --git a/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap index 22fa984fd8..fa12773cbd 100644 --- a/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap @@ -40,7 +40,6 @@ exports[`renders colored progress bar 1`] = ` "width": 100, } } - testID="progress-bar-fill" /> @@ -86,7 +85,6 @@ exports[`renders hidden progress bar 1`] = ` "width": 100, } } - testID="progress-bar-fill" /> @@ -129,7 +127,52 @@ exports[`renders indeterminate progress bar 1`] = ` "width": 100, } } - testID="progress-bar-fill" + /> + + +`; + +exports[`renders progress bar with custom style of filled part 1`] = ` + + + @@ -175,7 +218,6 @@ exports[`renders progress bar with specific progress 1`] = ` "width": 100, } } - testID="progress-bar-fill" /> diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap index 29b660cbd9..b0dd788f59 100644 --- a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap @@ -16,7 +16,6 @@ exports[`activity indicator snapshot test 1`] = ` "shadowRadius": 0, } } - testID="search-bar-container-outer-layer" > @@ -260,10 +259,2133 @@ exports[`renders segmented button 1`] = ` ], ] } - testID="undefined-label" /> `; + +exports[`should have \`accessibilityState={ checked: true }\` when selected show selected check icon should be shown 1`] = ` + + + + + + + check + + + + Walking + + + + + + + + + Transit + + + + + + + + + Driving + + + + + +`; + +exports[`should not render icon when icon prop is not passed 1`] = ` + + + + + + + + + + + + + + + + +`; + +exports[`should not render icon when icon prop is passed along with label, button is checked, showSelectedCheck is true 1`] = ` + + + + + + + check + + + + Walking + + + + + + + + + + car + + + + Driving + + + + + +`; + +exports[`should render icon when icon prop is passed 1`] = ` + + + + + + + walk + + + + + + + + + + + + car + + + + + + + +`; + +exports[`should render icon when icon prop is passed along with label, button is checked, showSelectedCheck is false 1`] = ` + + + + + + + walk + + + + Walking + + + + + + + + + + car + + + + Driving + + + + + +`; + +exports[`should render icon when icon prop is passed along with label, no matter if button is checked 1`] = ` + + + + + + + walk + + + + Walking + + + + + + + + + + car + + + + Driving + + + + + +`; diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap index 4857580e83..c1256986cd 100644 --- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap @@ -1,5 +1,211 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`animated value changes correctly 1`] = ` + + + + + Snackbar content + + + + +`; + +exports[`animated value changes correctly 2`] = ` + + + + + Snackbar content + + + + +`; + exports[`renders not visible snackbar with content wrapper but no actual content 1`] = `null`; exports[`renders snackbar with Text as a child 1`] = ` @@ -42,7 +248,6 @@ exports[`renders snackbar with Text as a child 1`] = ` ], } } - testID="surface-outer-layer" > Undo @@ -515,7 +716,6 @@ exports[`renders snackbar with content 1`] = ` ], } } - testID="surface-outer-layer" > + + +`; + +exports[`Surface on iOS applies backgroundColor to every layer 1`] = ` + + + +`; + +exports[`Surface on iOS applies backgroundColor to every layer 2`] = ` + + + +`; + +exports[`Surface on iOS applies borderBottomLeftRadius to every layer 1`] = ` + + + +`; + +exports[`Surface on iOS applies borderBottomRightRadius to every layer 1`] = ` + + + +`; + +exports[`Surface on iOS applies borderColor to inner layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies borderRadius to every layer 1`] = ` + + + +`; + +exports[`Surface on iOS applies borderTopLeftRadius to every layer 1`] = ` + + + +`; + +exports[`Surface on iOS applies borderTopRightRadius to every layer 1`] = ` + + + +`; + +exports[`Surface on iOS applies borderWidth to inner layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies bottom to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies end to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies flex to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies height to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies left to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies margin to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies marginBottom to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies marginHorizontal to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies marginLeft to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies marginRight to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies marginTop to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies marginVertical to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies opacity to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies padding to inner layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies paddingBottom to inner layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies paddingHorizontal to inner layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies paddingLeft to inner layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies paddingRight to inner layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies paddingTop to inner layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies paddingVertical to inner layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies position to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies right to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies start to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies top to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies transform to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS applies width to outer layer only 1`] = ` + + + +`; + +exports[`Surface on iOS outer layer should not render rest style 1`] = ` + + + +`; + +exports[`Surface on iOS outer layer should render absolute position properties on outer layer 1`] = ` + + + +`; + +exports[`Surface on iOS should render Surface with appropriate bg color but without shadow, if mode is set to "flat" 1`] = ` + + + +`; diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap index c955c943e2..eb2d5e15d5 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -161,7 +161,6 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = ` "width": 24, } } - testID="icon-button-container-outer-layer" > + + + + + heart + + + + + +`; + +exports[`animated value changes correctly 2`] = ` + + + + + + heart + + + + + +`; + exports[`renders disabled toggle button 1`] = `