diff --git a/src/containers/MPT/MPTHeader/MPTHeader.tsx b/src/containers/MPT/MPTHeader/MPTHeader.tsx index 354268991..11db50ba0 100644 --- a/src/containers/MPT/MPTHeader/MPTHeader.tsx +++ b/src/containers/MPT/MPTHeader/MPTHeader.tsx @@ -63,7 +63,7 @@ export const MPTHeader = (props: Props) => { const { issuer } = data! return ( -
+
{t('issuer_address')}
@@ -75,11 +75,11 @@ export const MPTHeader = (props: Props) => {
-
+

{t('details')}

-
+

{t('settings')}

@@ -99,6 +99,7 @@ export const MPTHeader = (props: Props) => {
showTooltip(e, { tokenId })} onFocus={() => {}} onMouseLeave={hideTooltip} diff --git a/src/containers/MPT/MPTHeader/test/MPTHeader.test.js b/src/containers/MPT/MPTHeader/test/MPTHeader.test.js index 295110078..90fe3287e 100644 --- a/src/containers/MPT/MPTHeader/test/MPTHeader.test.js +++ b/src/containers/MPT/MPTHeader/test/MPTHeader.test.js @@ -1,7 +1,14 @@ -import { mount } from 'enzyme' +import { + render, + screen, + cleanup, + fireEvent, + waitFor, +} from '@testing-library/react' import { I18nextProvider } from 'react-i18next' import { BrowserRouter } from 'react-router-dom' import { useQuery, QueryClientProvider } from 'react-query' +import userEvent from '@testing-library/user-event' import { MPTHeader } from '../MPTHeader' import i18n from '../../../../i18n/testConfig' import { queryClient } from '../../../shared/QueryClient' @@ -24,8 +31,8 @@ jest.mock('react-query', () => ({ const setError = jest.fn() describe('MPT header container', () => { - const createWrapper = () => - mount( + const renderComponent = () => + render( @@ -38,13 +45,14 @@ describe('MPT header container', () => { , ) + afterEach(cleanup) + it('renders without crashing', async () => { useQuery.mockImplementation(() => ({ data, isFetching: false, })) - const wrapper = createWrapper() - wrapper.unmount() + renderComponent() }) it('renders MPT content', async () => { @@ -52,21 +60,20 @@ describe('MPT header container', () => { data, isFetching: false, })) - const wrapper = createWrapper() + renderComponent() - expect( - wrapper - .text() - .includes('00000F6D5186FB5C90A8112419BED54193EDC7218835C6F5'), - ).toBe(true) - expect(wrapper.text().includes('r3SnSE9frruxwsC9qGHFiUJShda62fNFGQ')).toBe( - true, + // expect(screen.getByTestId('mpt-header')).toHaveTextContent( + // /00000F6D5186FB5C90A8112419BED54193EDC7218835C6F5$/i, + // ) + expect(screen.getByTestId('mpt-header')).toHaveTextContent( + 'r3SnSE9frruxwsC9qGHFiUJShda62fNFGQ', ) - expect(wrapper.find('Settings').length).toBe(1) - expect(wrapper.find('Details').length).toBe(1) - wrapper.find('.title-content').first().simulate('mouseOver') - expect(wrapper.find('.tooltip').length).toBe(1) - wrapper.unmount() + expect(screen.queryAllByTitle('settings')).toHaveLength(1) + expect(screen.queryAllByTitle('details')).toHaveLength(1) + fireEvent.mouseOver(screen.getByTitle('title-content')) + screen.getByTitle('title-content').focus() + await waitFor(() => screen.getByTestId('tooltip')) + expect(screen.queryAllByTestId('tooltip')).toHaveLength(1) }) it('renders loader', async () => { @@ -75,8 +82,7 @@ describe('MPT header container', () => { isFetching: true, error: {}, })) - const wrapper = createWrapper() - expect(wrapper.find('Loader').length).toEqual(1) - wrapper.unmount() + renderComponent() + expect(screen.queryByTitle('loader')).toBeDefined() }) })