diff --git a/app/component-library/components/Badges/Badge/foundation/BadgeBase/BadgeBase.test.tsx b/app/component-library/components/Badges/Badge/foundation/BadgeBase/BadgeBase.test.tsx index 97e01db987a..a79a940e655 100644 --- a/app/component-library/components/Badges/Badge/foundation/BadgeBase/BadgeBase.test.tsx +++ b/app/component-library/components/Badges/Badge/foundation/BadgeBase/BadgeBase.test.tsx @@ -1,6 +1,7 @@ // Third party dependencies. import React from 'react'; -import { shallow } from 'enzyme'; +import { StyleSheet } from 'react-native'; +import { render, screen } from '@testing-library/react-native'; // External dependencies. import Tag from '../../../../Tags/Tag'; @@ -9,28 +10,45 @@ import Tag from '../../../../Tags/Tag'; import BadgeBase from './BadgeBase'; import { BADGE_BASE_TEST_ID } from './BadgeBase.constants'; +const styles = StyleSheet.create({ + badgeBase: { position: 'absolute', zIndex: 1 }, +}); + describe('BadgeBase - snapshots', () => { it('should render badge correctly', () => { - const wrapper = shallow( + const { toJSON } = render( , ); - expect(wrapper).toMatchSnapshot(); + expect(toJSON()).toMatchSnapshot(); }); }); describe('BadgeBase', () => { it('should render badge with the given content', () => { - const wrapper = shallow( - + render( + , ); - const contentElement = wrapper.findWhere( - (node) => node.prop('testID') === BADGE_BASE_TEST_ID, + const contentElement = screen.getByTestId(BADGE_BASE_TEST_ID); + expect(contentElement).toBeTruthy(); + + // Check if the BadgeBase contains the Tag component + const tagElement = screen.getByText('Children'); + expect(tagElement).toBeTruthy(); + + // Check that the BadgeBase does not have a specific accessibility role set + expect(contentElement.props.accessibilityRole).toBeUndefined(); + + // Check if the BadgeBase has the expected style properties + expect(contentElement.props.style).toEqual( + expect.objectContaining({ + position: 'absolute', + zIndex: 1, + }), ); - expect(contentElement.exists()).toBe(true); }); -}); +}); \ No newline at end of file diff --git a/app/component-library/components/Sheet/SheetHeader/SheetHeader.test.tsx b/app/component-library/components/Sheet/SheetHeader/SheetHeader.test.tsx index eb3bda148dc..233a3ab30fc 100644 --- a/app/component-library/components/Sheet/SheetHeader/SheetHeader.test.tsx +++ b/app/component-library/components/Sheet/SheetHeader/SheetHeader.test.tsx @@ -1,6 +1,7 @@ // Third party dependencies. import React from 'react'; -import { shallow } from 'enzyme'; +import { render, screen } from '@testing-library/react-native'; +import userEvent from '@testing-library/user-event'; // Internal dependencies. import SheetHeader from './SheetHeader'; @@ -11,28 +12,40 @@ import { describe('SheetHeader', () => { it('should render correctly', () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + const { toJSON } = render(); + expect(toJSON()).toMatchSnapshot(); }); - it('should render back button', () => { - const wrapper = shallow(); - const backButton = wrapper.findWhere( - (node) => node.prop('testID') === SHEET_HEADER_BACK_BUTTON_ID, - ); - expect(backButton.exists()).toBe(true); + it('should render back button and title', () => { + render(); + const backButton = screen.getByTestId(SHEET_HEADER_BACK_BUTTON_ID); + expect(backButton).toBeTruthy(); + expect(backButton.props.accessibilityRole).toBe('button'); + expect(screen.getByText('Title')).toBeTruthy(); }); - it('should render action button', () => { - const wrapper = shallow( + it('should render action button and title', async () => { + const onPressMock = jest.fn(); + render( , ); - const actionButton = wrapper.findWhere( - (node) => node.prop('testID') === SHEET_HEADER_ACTION_BUTTON_ID, - ); - expect(actionButton.exists()).toBe(true); + const actionButton = screen.getByTestId(SHEET_HEADER_ACTION_BUTTON_ID); + expect(actionButton).toBeTruthy(); + expect(screen.getByText('Action')).toBeTruthy(); + expect(screen.getByText('Title')).toBeTruthy(); + + const user = userEvent.setup(); + await user.click(actionButton); + expect(onPressMock).toHaveBeenCalled(); + }); + + it('should render correctly without back button or action button', () => { + render(); + expect(screen.getByText('Title')).toBeTruthy(); + expect(screen.queryByTestId(SHEET_HEADER_BACK_BUTTON_ID)).toBeNull(); + expect(screen.queryByTestId(SHEET_HEADER_ACTION_BUTTON_ID)).toBeNull(); }); });