From cb13e82b9c06d11ebe436db498717123fad39c13 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 9 Jul 2022 22:37:26 +0200 Subject: [PATCH 1/3] Migrated ShortUrlsList test to react testing library --- test/short-urls/ShortUrlsList.test.tsx | 111 ++++++++++--------------- 1 file changed, 45 insertions(+), 66 deletions(-) diff --git a/test/short-urls/ShortUrlsList.test.tsx b/test/short-urls/ShortUrlsList.test.tsx index fa314655..ab911250 100644 --- a/test/short-urls/ShortUrlsList.test.tsx +++ b/test/short-urls/ShortUrlsList.test.tsx @@ -1,26 +1,25 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { ReactElement } from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { FC } from 'react'; import { Mock } from 'ts-mockery'; -import { useNavigate } from 'react-router-dom'; +import { MemoryRouter, useNavigate } from 'react-router-dom'; import { ShortUrlsList as createShortUrlsList } from '../../src/short-urls/ShortUrlsList'; -import { ShortUrlsOrderableFields, ShortUrl, ShortUrlsOrder } from '../../src/short-urls/data'; +import { ShortUrl, ShortUrlsOrder } from '../../src/short-urls/data'; import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub'; import { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reducers/shortUrlsList'; -import { Paginator } from '../../src/short-urls/Paginator'; import { ReachableServer } from '../../src/servers/data'; import { Settings } from '../../src/settings/reducers/settings'; +import { ShortUrlsTableProps } from '../../src/short-urls/ShortUrlsTable'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn().mockReturnValue(jest.fn()), - useParams: jest.fn().mockReturnValue({}), useLocation: jest.fn().mockReturnValue({ search: '?tags=test%20tag&search=example.com' }), })); describe('', () => { - let wrapper: ShallowWrapper; - const ShortUrlsTable = () => null; - const ShortUrlsFilteringBar = () => null; + const ShortUrlsTable: FC = ({ onTagClick }) => onTagClick?.('foo')}>ShortUrlsTable; + const ShortUrlsFilteringBar = () => ShortUrlsFilteringBar; const listShortUrlsMock = jest.fn(); const navigate = jest.fn(); const shortUrlsList = Mock.of({ @@ -33,85 +32,65 @@ describe('', () => { tags: ['test tag'], }), ], - pagination: {}, + pagination: { pagesCount: 3 }, }, }); const ShortUrlsList = createShortUrlsList(ShortUrlsTable, ShortUrlsFilteringBar); - const createWrapper = (defaultOrdering: ShortUrlsOrder = {}) => shallow( - ({ mercureInfo: { loading: true } })} - listShortUrls={listShortUrlsMock} - shortUrlsList={shortUrlsList} - selectedServer={Mock.of({ id: '1' })} - settings={Mock.of({ shortUrlsList: { defaultOrdering } })} - />, - ).dive(); // Dive is needed as this component is wrapped in a HOC + const setUp = (defaultOrdering: ShortUrlsOrder = {}) => ({ + user: userEvent.setup(), + ...render( + + ({ mercureInfo: { loading: true } })} + listShortUrls={listShortUrlsMock} + shortUrlsList={shortUrlsList} + selectedServer={Mock.of({ id: '1' })} + settings={Mock.of({ shortUrlsList: { defaultOrdering } })} + /> + , + ), + }); beforeEach(() => { (useNavigate as any).mockReturnValue(navigate); - - wrapper = createWrapper(); }); afterEach(jest.clearAllMocks); - afterEach(() => wrapper?.unmount()); it('wraps expected components', () => { - expect(wrapper.find(ShortUrlsTable)).toHaveLength(1); - expect(wrapper.find(Paginator)).toHaveLength(1); - expect(wrapper.find(ShortUrlsFilteringBar)).toHaveLength(1); + setUp(); + + expect(screen.getByText('ShortUrlsTable')).toBeInTheDocument(); + expect(screen.getByText('ShortUrlsFilteringBar')).toBeInTheDocument(); }); it('passes current query to paginator', () => { - expect(wrapper.find(Paginator).prop('currentQueryString')).toEqual('?tags=test%20tag&search=example.com'); + setUp(); + + const links = screen.getAllByRole('link'); + + expect(links.length > 0).toEqual(true); + links.forEach( + (link) => expect(link).toHaveAttribute('href', expect.stringContaining('?tags=test%20tag&search=example.com')), + ); }); - it('gets list refreshed every time a tag is clicked', () => { - wrapper.find(ShortUrlsTable).simulate('tagClick', 'foo'); - wrapper.find(ShortUrlsTable).simulate('tagClick', 'bar'); - wrapper.find(ShortUrlsTable).simulate('tagClick', 'baz'); + it('gets list refreshed every time a tag is clicked', async () => { + const { user } = setUp(); - expect(navigate).toHaveBeenCalledTimes(3); - expect(navigate).toHaveBeenNthCalledWith(1, expect.stringContaining(`tags=${encodeURIComponent('test tag,foo')}`)); - expect(navigate).toHaveBeenNthCalledWith(2, expect.stringContaining(`tags=${encodeURIComponent('test tag,bar')}`)); - expect(navigate).toHaveBeenNthCalledWith(3, expect.stringContaining(`tags=${encodeURIComponent('test tag,baz')}`)); - }); - - it('invokes order icon rendering', () => { - const renderIcon = (field: ShortUrlsOrderableFields) => - (wrapper.find(ShortUrlsTable).prop('renderOrderIcon') as (field: ShortUrlsOrderableFields) => ReactElement)(field); - - expect(renderIcon('visits').props.currentOrder).toEqual({}); - - (wrapper.find(ShortUrlsFilteringBar).prop('handleOrderBy') as Function)('visits'); - expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits' }); - - (wrapper.find(ShortUrlsFilteringBar).prop('handleOrderBy') as Function)('visits', 'ASC'); - expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits', dir: 'ASC' }); - }); - - it('handles order through table', () => { - const orderByColumn: (field: ShortUrlsOrderableFields) => Function = wrapper.find(ShortUrlsTable).prop('orderByColumn'); - - expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({}); - - orderByColumn('visits')(); - expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); - - orderByColumn('title')(); - expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'title', dir: 'ASC' }); - - orderByColumn('shortCode')(); - expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' }); + expect(navigate).not.toHaveBeenCalled(); + await user.click(screen.getByText('ShortUrlsTable')); + expect(navigate).toHaveBeenCalledWith(expect.stringContaining(`tags=${encodeURIComponent('test tag,foo')}`)); }); it.each([ [Mock.of({ field: 'visits', dir: 'ASC' }), 'visits', 'ASC'], [Mock.of({ field: 'title', dir: 'DESC' }), 'title', 'DESC'], [Mock.of(), undefined, undefined], - ])('has expected initial ordering', (initialOrderBy, field, dir) => { - const wrapper = createWrapper(initialOrderBy); - - expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field, dir }); + ])('has expected initial ordering based on settings', (initialOrderBy, field, dir) => { + setUp(initialOrderBy); + expect(listShortUrlsMock).toHaveBeenCalledWith(expect.objectContaining({ + orderBy: { field, dir }, + })); }); }); From d07f7e757e71b94bc0de33aa06023021950e2871 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 9 Jul 2022 23:03:21 +0200 Subject: [PATCH 2/3] Moved common test set-up code to helper function --- .../{setUpCanvas.ts => setUpTest.ts} | 6 ++++ test/common/AppUpdateBanner.test.tsx | 9 ++--- test/common/ErrorHandler.test.tsx | 5 ++- test/common/MainHeader.test.tsx | 9 ++--- test/domains/DomainSelector.test.tsx | 11 +++--- test/domains/ManageDomains.test.tsx | 27 +++++++------- test/domains/helpers/DomainDropdown.test.tsx | 25 ++++++------- .../domains/helpers/DomainStatusIcon.test.tsx | 11 +++--- .../helpers/EditDomainRedirectsModal.test.tsx | 13 +++---- test/servers/CreateServer.test.tsx | 9 ++--- test/servers/DeleteServerButton.test.tsx | 13 +++---- test/servers/DeleteServerModal.test.tsx | 23 ++++++------ test/servers/EditServer.test.tsx | 11 +++--- test/servers/ManageServers.test.tsx | 11 +++--- .../servers/ManageServersRowDropdown.test.tsx | 17 ++++----- test/servers/ServersDropdown.test.tsx | 11 +++--- .../helpers/DuplicatedServersModal.test.tsx | 13 +++---- .../servers/helpers/ImportServersBtn.test.tsx | 23 ++++++------ .../settings/RealTimeUpdatesSettings.test.tsx | 21 +++++------ .../ShortUrlCreationSettings.test.tsx | 19 +++++----- test/settings/ShortUrlsListSettings.test.tsx | 13 +++---- test/settings/TagsSettings.test.tsx | 11 +++--- test/settings/UserInterfaceSettings.test.tsx | 11 +++--- test/settings/VisitsSettings.test.tsx | 11 +++--- test/short-urls/ShortUrlForm.test.tsx | 12 +++---- .../short-urls/ShortUrlsFilteringBar.test.tsx | 25 ++++++------- test/short-urls/ShortUrlsList.test.tsx | 29 +++++++-------- test/short-urls/ShortUrlsTable.test.tsx | 13 +++---- .../UseExistingIfFoundInfoIcon.test.tsx | 7 ++-- .../helpers/CreateShortUrlResult.test.tsx | 11 +++--- .../helpers/ExportShortUrlsBtn.test.tsx | 17 ++++----- .../QrErrorCorrectionDropdown.test.tsx | 13 +++---- .../qr-codes/QrFormatDropdown.test.tsx | 9 ++--- test/tags/TagCard.test.tsx | 27 +++++++------- test/tags/TagsCards.test.tsx | 11 +++--- test/tags/TagsList.test.tsx | 27 +++++++------- test/tags/TagsModeDropdown.test.tsx | 9 ++--- .../helpers/DeleteTagConfirmModal.test.tsx | 16 +++++++-- test/tags/helpers/Tag.test.tsx | 17 ++++----- test/utils/Checkbox.test.tsx | 5 ++- test/utils/CopyToClipboardIcon.test.tsx | 8 ++--- test/utils/DateInput.test.tsx | 11 +++--- test/utils/InfoTooltip.test.tsx | 11 +++--- test/utils/OrderingDropdown.test.tsx | 11 +++--- .../dates/DateIntervalDropdownItems.test.tsx | 7 ++-- .../utils/dates/DateIntervalSelector.test.tsx | 11 +++--- test/visits/DomainVisits.test.tsx | 31 ++++++++-------- test/visits/NonOrphanVisits.test.tsx | 31 ++++++++-------- test/visits/OrphanVisits.test.tsx | 31 ++++++++-------- test/visits/ShortUrlVisits.test.tsx | 35 +++++++++---------- test/visits/ShortUrlVisitsHeader.test.tsx | 13 +++---- test/visits/TagVisits.test.tsx | 31 ++++++++-------- test/visits/charts/DoughnutChart.test.tsx | 2 +- .../visits/charts/HorizontalBarChart.test.tsx | 2 +- test/visits/charts/LineChartCard.test.tsx | 2 +- test/visits/helpers/OpenMapModalBtn.test.tsx | 11 +++--- .../helpers/VisitsFilterDropdown.test.tsx | 23 ++++++------ 57 files changed, 376 insertions(+), 476 deletions(-) rename test/__mocks__/{setUpCanvas.ts => setUpTest.ts} (70%) diff --git a/test/__mocks__/setUpCanvas.ts b/test/__mocks__/setUpTest.ts similarity index 70% rename from test/__mocks__/setUpCanvas.ts rename to test/__mocks__/setUpTest.ts index 66c32b3b..210a88ff 100644 --- a/test/__mocks__/setUpCanvas.ts +++ b/test/__mocks__/setUpTest.ts @@ -1,5 +1,6 @@ import { ReactElement } from 'react'; import { render } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; export const setUpCanvas = (element: ReactElement) => { const result = render(element); @@ -8,3 +9,8 @@ export const setUpCanvas = (element: ReactElement) => { return { ...result, events: getEvents(), getEvents }; }; + +export const renderWithEvents = (element: ReactElement) => ({ + user: userEvent.setup(), + ...render(element), +}); diff --git a/test/common/AppUpdateBanner.test.tsx b/test/common/AppUpdateBanner.test.tsx index 5e9d8d83..0dfa0e14 100644 --- a/test/common/AppUpdateBanner.test.tsx +++ b/test/common/AppUpdateBanner.test.tsx @@ -1,14 +1,11 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { AppUpdateBanner } from '../../src/common/AppUpdateBanner'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const toggle = jest.fn(); const forceUpdate = jest.fn(); - const setUp = () => ({ - user: userEvent.setup(), - ...render(), - }); + const setUp = () => renderWithEvents(); afterEach(jest.clearAllMocks); diff --git a/test/common/ErrorHandler.test.tsx b/test/common/ErrorHandler.test.tsx index e9afd6e3..c924e137 100644 --- a/test/common/ErrorHandler.test.tsx +++ b/test/common/ErrorHandler.test.tsx @@ -1,7 +1,7 @@ import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import { Mock } from 'ts-mockery'; import { ErrorHandler as createErrorHandler } from '../../src/common/ErrorHandler'; +import { renderWithEvents } from '../__mocks__/setUpTest'; const ComponentWithError = () => { throw new Error('Error!!'); @@ -36,8 +36,7 @@ describe('', () => { }); it('reloads page on button click', async () => { - const user = userEvent.setup(); - render(} />); + const { user } = renderWithEvents(} />); expect(reload).not.toHaveBeenCalled(); await user.click(screen.getByRole('button')); diff --git a/test/common/MainHeader.test.tsx b/test/common/MainHeader.test.tsx index 6aa280a8..c29d3c63 100644 --- a/test/common/MainHeader.test.tsx +++ b/test/common/MainHeader.test.tsx @@ -1,8 +1,8 @@ -import { render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen, waitFor } from '@testing-library/react'; import { Router } from 'react-router-dom'; import { createMemoryHistory } from 'history'; import { MainHeader as createMainHeader } from '../../src/common/MainHeader'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const MainHeader = createMainHeader(() => <>ServersDropdown); @@ -10,14 +10,11 @@ describe('', () => { const history = createMemoryHistory(); history.push(pathname); - const user = userEvent.setup(); - const renderResult = render( + return renderWithEvents( , ); - - return { user, ...renderResult }; }; it('renders ServersDropdown', () => { diff --git a/test/domains/DomainSelector.test.tsx b/test/domains/DomainSelector.test.tsx index c18e650b..7ae03403 100644 --- a/test/domains/DomainSelector.test.tsx +++ b/test/domains/DomainSelector.test.tsx @@ -1,9 +1,9 @@ -import { render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen, waitFor } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { DomainSelector } from '../../src/domains/DomainSelector'; import { DomainsList } from '../../src/domains/reducers/domainsList'; import { ShlinkDomain } from '../../src/api/types'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const domainsList = Mock.of({ @@ -13,10 +13,9 @@ describe('', () => { Mock.of({ domain: 'bar.com' }), ], }); - const setUp = (value = '') => ({ - user: userEvent.setup(), - ...render(), - }); + const setUp = (value = '') => renderWithEvents( + , + ); afterEach(jest.clearAllMocks); diff --git a/test/domains/ManageDomains.test.tsx b/test/domains/ManageDomains.test.tsx index 85fc2e80..55415c29 100644 --- a/test/domains/ManageDomains.test.tsx +++ b/test/domains/ManageDomains.test.tsx @@ -1,27 +1,24 @@ -import { render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen, waitFor } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { DomainsList } from '../../src/domains/reducers/domainsList'; import { ManageDomains } from '../../src/domains/ManageDomains'; import { ProblemDetailsError, ShlinkDomain } from '../../src/api/types'; import { SelectedServer } from '../../src/servers/data'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const listDomains = jest.fn(); const filterDomains = jest.fn(); - const setUp = (domainsList: DomainsList) => ({ - user: userEvent.setup(), - ...render( - ()} - />, - ), - }); + const setUp = (domainsList: DomainsList) => renderWithEvents( + ()} + />, + ); afterEach(jest.clearAllMocks); diff --git a/test/domains/helpers/DomainDropdown.test.tsx b/test/domains/helpers/DomainDropdown.test.tsx index 44ccbc58..09f2f05c 100644 --- a/test/domains/helpers/DomainDropdown.test.tsx +++ b/test/domains/helpers/DomainDropdown.test.tsx @@ -1,26 +1,23 @@ -import { render, screen, waitForElementToBeRemoved } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen, waitForElementToBeRemoved } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { MemoryRouter } from 'react-router-dom'; import { DomainDropdown } from '../../../src/domains/helpers/DomainDropdown'; import { Domain } from '../../../src/domains/data'; import { ReachableServer, SelectedServer } from '../../../src/servers/data'; import { SemVer } from '../../../src/utils/helpers/version'; +import { renderWithEvents } from '../../__mocks__/setUpTest'; describe('', () => { const editDomainRedirects = jest.fn().mockResolvedValue(undefined); - const setUp = (domain?: Domain, selectedServer?: SelectedServer) => ({ - user: userEvent.setup(), - ...render( - - ()} - selectedServer={selectedServer ?? Mock.all()} - editDomainRedirects={editDomainRedirects} - /> - , - ), - }); + const setUp = (domain?: Domain, selectedServer?: SelectedServer) => renderWithEvents( + + ()} + selectedServer={selectedServer ?? Mock.all()} + editDomainRedirects={editDomainRedirects} + /> + , + ); afterEach(jest.clearAllMocks); diff --git a/test/domains/helpers/DomainStatusIcon.test.tsx b/test/domains/helpers/DomainStatusIcon.test.tsx index 51840c1c..e7bc6946 100644 --- a/test/domains/helpers/DomainStatusIcon.test.tsx +++ b/test/domains/helpers/DomainStatusIcon.test.tsx @@ -1,15 +1,14 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { DomainStatus } from '../../../src/domains/data'; import { DomainStatusIcon } from '../../../src/domains/helpers/DomainStatusIcon'; +import { renderWithEvents } from '../../__mocks__/setUpTest'; describe('', () => { const matchMedia = jest.fn().mockReturnValue(Mock.of({ matches: false })); - const setUp = (status: DomainStatus) => ({ - user: userEvent.setup(), - ...render(), - }); + const setUp = (status: DomainStatus) => renderWithEvents( + , + ); beforeEach(jest.clearAllMocks); diff --git a/test/domains/helpers/EditDomainRedirectsModal.test.tsx b/test/domains/helpers/EditDomainRedirectsModal.test.tsx index 3fc7205a..1b8753f4 100644 --- a/test/domains/helpers/EditDomainRedirectsModal.test.tsx +++ b/test/domains/helpers/EditDomainRedirectsModal.test.tsx @@ -1,8 +1,8 @@ -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { fireEvent, screen, waitFor } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { ShlinkDomain } from '../../../src/api/types'; import { EditDomainRedirectsModal } from '../../../src/domains/helpers/EditDomainRedirectsModal'; +import { renderWithEvents } from '../../__mocks__/setUpTest'; describe('', () => { const editDomainRedirects = jest.fn().mockResolvedValue(undefined); @@ -13,12 +13,9 @@ describe('', () => { baseUrlRedirect: 'baz', }, }); - const setUp = () => ({ - user: userEvent.setup(), - ...render( - , - ), - }); + const setUp = () => renderWithEvents( + , + ); afterEach(jest.clearAllMocks); diff --git a/test/servers/CreateServer.test.tsx b/test/servers/CreateServer.test.tsx index 54695846..a12aa73e 100644 --- a/test/servers/CreateServer.test.tsx +++ b/test/servers/CreateServer.test.tsx @@ -1,9 +1,9 @@ -import userEvent from '@testing-library/user-event'; -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; +import { fireEvent, screen, waitFor } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { useNavigate } from 'react-router-dom'; import { CreateServer as createCreateServer } from '../../src/servers/CreateServer'; import { ServerWithId } from '../../src/servers/data'; +import { renderWithEvents } from '../__mocks__/setUpTest'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() })); @@ -22,10 +22,7 @@ describe('', () => { }); const CreateServer = createCreateServer(() => <>ImportServersBtn, useTimeoutToggle); - return { - user: userEvent.setup(), - ...render(), - }; + return renderWithEvents(); }; beforeEach(jest.clearAllMocks); diff --git a/test/servers/DeleteServerButton.test.tsx b/test/servers/DeleteServerButton.test.tsx index 40f1c9d8..3d636182 100644 --- a/test/servers/DeleteServerButton.test.tsx +++ b/test/servers/DeleteServerButton.test.tsx @@ -1,20 +1,17 @@ import { ReactNode } from 'react'; -import userEvent from '@testing-library/user-event'; -import { render, screen, waitFor } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { DeleteServerButton as createDeleteServerButton } from '../../src/servers/DeleteServerButton'; import { ServerWithId } from '../../src/servers/data'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const DeleteServerButton = createDeleteServerButton( ({ isOpen }) => <>DeleteServerModal {isOpen ? '[Open]' : '[Closed]'}, ); - const setUp = (children?: ReactNode) => ({ - user: userEvent.setup(), - ...render( - ()} textClassName="button">{children}, - ), - }); + const setUp = (children?: ReactNode) => renderWithEvents( + ()} textClassName="button">{children}, + ); it.each([ ['Foo bar'], diff --git a/test/servers/DeleteServerModal.test.tsx b/test/servers/DeleteServerModal.test.tsx index 3bf0ec51..4defa691 100644 --- a/test/servers/DeleteServerModal.test.tsx +++ b/test/servers/DeleteServerModal.test.tsx @@ -1,9 +1,9 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { useNavigate } from 'react-router-dom'; import { DeleteServerModal } from '../../src/servers/DeleteServerModal'; import { ServerWithId } from '../../src/servers/data'; +import { renderWithEvents } from '../__mocks__/setUpTest'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() })); @@ -15,17 +15,14 @@ describe('', () => { const setUp = () => { (useNavigate as any).mockReturnValue(navigate); - return { - user: userEvent.setup(), - ...render( - ({ name: serverName })} - toggle={toggleMock} - isOpen - deleteServer={deleteServerMock} - />, - ), - }; + return renderWithEvents( + ({ name: serverName })} + toggle={toggleMock} + isOpen + deleteServer={deleteServerMock} + />, + ); }; afterEach(jest.clearAllMocks); diff --git a/test/servers/EditServer.test.tsx b/test/servers/EditServer.test.tsx index 106fc5c0..0ecf87ca 100644 --- a/test/servers/EditServer.test.tsx +++ b/test/servers/EditServer.test.tsx @@ -1,9 +1,9 @@ -import { fireEvent, render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { fireEvent, screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { useNavigate } from 'react-router-dom'; import { EditServer as editServerConstruct } from '../../src/servers/EditServer'; import { ReachableServer, SelectedServer } from '../../src/servers/data'; +import { renderWithEvents } from '../__mocks__/setUpTest'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() })); @@ -18,10 +18,9 @@ describe('', () => { apiKey: 'the_api_key', }); const EditServer = editServerConstruct(ServerError); - const setUp = (selectedServer: SelectedServer = defaultSelectedServer) => ({ - user: userEvent.setup(), - ...render(), - }); + const setUp = (selectedServer: SelectedServer = defaultSelectedServer) => renderWithEvents( + , + ); beforeEach(() => { (useNavigate as any).mockReturnValue(navigate); diff --git a/test/servers/ManageServers.test.tsx b/test/servers/ManageServers.test.tsx index a88d3cdc..8fc19b78 100644 --- a/test/servers/ManageServers.test.tsx +++ b/test/servers/ManageServers.test.tsx @@ -1,10 +1,10 @@ import { Mock } from 'ts-mockery'; -import userEvent from '@testing-library/user-event'; -import { render, screen, waitFor } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; import ServersExporter from '../../src/servers/services/ServersExporter'; import { ManageServers as createManageServers } from '../../src/servers/ManageServers'; import { ServersMap, ServerWithId } from '../../src/servers/data'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const exportServers = jest.fn(); @@ -19,10 +19,9 @@ describe('', () => { const createServerMock = (value: string, autoConnect = false) => Mock.of( { id: value, name: value, url: value, autoConnect }, ); - const setUp = (servers: ServersMap = {}) => ({ - user: userEvent.setup(), - ...render(), - }); + const setUp = (servers: ServersMap = {}) => renderWithEvents( + , + ); afterEach(jest.clearAllMocks); diff --git a/test/servers/ManageServersRowDropdown.test.tsx b/test/servers/ManageServersRowDropdown.test.tsx index 98ad07ca..85b544c3 100644 --- a/test/servers/ManageServersRowDropdown.test.tsx +++ b/test/servers/ManageServersRowDropdown.test.tsx @@ -1,9 +1,9 @@ -import userEvent from '@testing-library/user-event'; -import { render, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { MemoryRouter } from 'react-router-dom'; import { ServerWithId } from '../../src/servers/data'; import { ManageServersRowDropdown as createManageServersRowDropdown } from '../../src/servers/ManageServersRowDropdown'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const ManageServersRowDropdown = createManageServersRowDropdown( @@ -12,14 +12,11 @@ describe('', () => { const setAutoConnect = jest.fn(); const setUp = (autoConnect = false) => { const server = Mock.of({ id: 'abc123', autoConnect }); - return { - user: userEvent.setup(), - ...render( - - - , - ), - }; + return renderWithEvents( + + + , + ); }; afterEach(jest.clearAllMocks); diff --git a/test/servers/ServersDropdown.test.tsx b/test/servers/ServersDropdown.test.tsx index 19e8e616..0f18fbf4 100644 --- a/test/servers/ServersDropdown.test.tsx +++ b/test/servers/ServersDropdown.test.tsx @@ -1,10 +1,10 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { values } from 'ramda'; import { Mock } from 'ts-mockery'; import { MemoryRouter } from 'react-router-dom'; import { ServersDropdown } from '../../src/servers/ServersDropdown'; import { ServersMap, ServerWithId } from '../../src/servers/data'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const fallbackServers: ServersMap = { @@ -12,10 +12,9 @@ describe('', () => { '2b': Mock.of({ name: 'bar', id: '2b' }), '3c': Mock.of({ name: 'baz', id: '3c' }), }; - const setUp = (servers: ServersMap = fallbackServers) => ({ - user: userEvent.setup(), - ...render(), - }); + const setUp = (servers: ServersMap = fallbackServers) => renderWithEvents( + , + ); it('contains the list of servers and the "mange servers" button', async () => { const { user } = setUp(); diff --git a/test/servers/helpers/DuplicatedServersModal.test.tsx b/test/servers/helpers/DuplicatedServersModal.test.tsx index 766f0d64..fe41a5b8 100644 --- a/test/servers/helpers/DuplicatedServersModal.test.tsx +++ b/test/servers/helpers/DuplicatedServersModal.test.tsx @@ -1,18 +1,15 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal'; import { ServerData } from '../../../src/servers/data'; +import { renderWithEvents } from '../../__mocks__/setUpTest'; describe('', () => { const onDiscard = jest.fn(); const onSave = jest.fn(); - const setUp = (duplicatedServers: ServerData[] = []) => ({ - user: userEvent.setup(), - ...render( - , - ), - }); + const setUp = (duplicatedServers: ServerData[] = []) => renderWithEvents( + , + ); beforeEach(jest.clearAllMocks); diff --git a/test/servers/helpers/ImportServersBtn.test.tsx b/test/servers/helpers/ImportServersBtn.test.tsx index de3d2514..b7c49303 100644 --- a/test/servers/helpers/ImportServersBtn.test.tsx +++ b/test/servers/helpers/ImportServersBtn.test.tsx @@ -1,5 +1,4 @@ -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { fireEvent, screen, waitFor } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { ImportServersBtn as createImportServersBtn, @@ -7,6 +6,7 @@ import { } from '../../../src/servers/helpers/ImportServersBtn'; import { ServersImporter } from '../../../src/servers/services/ServersImporter'; import { ServersMap, ServerWithId } from '../../../src/servers/data'; +import { renderWithEvents } from '../../__mocks__/setUpTest'; describe('', () => { const onImportMock = jest.fn(); @@ -14,17 +14,14 @@ describe('', () => { const importServersFromFile = jest.fn().mockResolvedValue([]); const serversImporterMock = Mock.of({ importServersFromFile }); const ImportServersBtn = createImportServersBtn(serversImporterMock); - const setUp = (props: Partial = {}, servers: ServersMap = {}) => ({ - user: userEvent.setup(), - ...render( - , - ), - }); + const setUp = (props: Partial = {}, servers: ServersMap = {}) => renderWithEvents( + , + ); afterEach(jest.clearAllMocks); diff --git a/test/settings/RealTimeUpdatesSettings.test.tsx b/test/settings/RealTimeUpdatesSettings.test.tsx index 947e27e4..aed93bde 100644 --- a/test/settings/RealTimeUpdatesSettings.test.tsx +++ b/test/settings/RealTimeUpdatesSettings.test.tsx @@ -1,25 +1,22 @@ -import userEvent from '@testing-library/user-event'; -import { render, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { RealTimeUpdatesSettings as RealTimeUpdatesSettingsOptions, Settings, } from '../../src/settings/reducers/settings'; import { RealTimeUpdatesSettings } from '../../src/settings/RealTimeUpdatesSettings'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const toggleRealTimeUpdates = jest.fn(); const setRealTimeUpdatesInterval = jest.fn(); - const setUp = (realTimeUpdates: Partial = {}) => ({ - user: userEvent.setup(), - ...render( - ({ realTimeUpdates })} - toggleRealTimeUpdates={toggleRealTimeUpdates} - setRealTimeUpdatesInterval={setRealTimeUpdatesInterval} - />, - ), - }); + const setUp = (realTimeUpdates: Partial = {}) => renderWithEvents( + ({ realTimeUpdates })} + toggleRealTimeUpdates={toggleRealTimeUpdates} + setRealTimeUpdatesInterval={setRealTimeUpdatesInterval} + />, + ); afterEach(jest.clearAllMocks); diff --git a/test/settings/ShortUrlCreationSettings.test.tsx b/test/settings/ShortUrlCreationSettings.test.tsx index b98be1a1..77038cbb 100644 --- a/test/settings/ShortUrlCreationSettings.test.tsx +++ b/test/settings/ShortUrlCreationSettings.test.tsx @@ -1,20 +1,17 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { ShortUrlCreationSettings as ShortUrlsSettings, Settings } from '../../src/settings/reducers/settings'; import { ShortUrlCreationSettings } from '../../src/settings/ShortUrlCreationSettings'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const setShortUrlCreationSettings = jest.fn(); - const setUp = (shortUrlCreation?: ShortUrlsSettings) => ({ - user: userEvent.setup(), - ...render( - ({ shortUrlCreation })} - setShortUrlCreationSettings={setShortUrlCreationSettings} - />, - ), - }); + const setUp = (shortUrlCreation?: ShortUrlsSettings) => renderWithEvents( + ({ shortUrlCreation })} + setShortUrlCreationSettings={setShortUrlCreationSettings} + />, + ); afterEach(jest.clearAllMocks); diff --git a/test/settings/ShortUrlsListSettings.test.tsx b/test/settings/ShortUrlsListSettings.test.tsx index 104fd6f3..f396c723 100644 --- a/test/settings/ShortUrlsListSettings.test.tsx +++ b/test/settings/ShortUrlsListSettings.test.tsx @@ -1,18 +1,15 @@ -import userEvent from '@testing-library/user-event'; -import { render, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { Settings, ShortUrlsListSettings as ShortUrlsSettings } from '../../src/settings/reducers/settings'; import { ShortUrlsListSettings } from '../../src/settings/ShortUrlsListSettings'; import { ShortUrlsOrder } from '../../src/short-urls/data'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const setSettings = jest.fn(); - const setUp = (shortUrlsList?: ShortUrlsSettings) => ({ - user: userEvent.setup(), - ...render( - ({ shortUrlsList })} setShortUrlsListSettings={setSettings} />, - ), - }); + const setUp = (shortUrlsList?: ShortUrlsSettings) => renderWithEvents( + ({ shortUrlsList })} setShortUrlsListSettings={setSettings} />, + ); afterEach(jest.clearAllMocks); diff --git a/test/settings/TagsSettings.test.tsx b/test/settings/TagsSettings.test.tsx index 67abbdbb..c110b033 100644 --- a/test/settings/TagsSettings.test.tsx +++ b/test/settings/TagsSettings.test.tsx @@ -1,17 +1,16 @@ -import userEvent from '@testing-library/user-event'; -import { render, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { Settings, TagsMode, TagsSettings as TagsSettingsOptions } from '../../src/settings/reducers/settings'; import { TagsSettings } from '../../src/settings/TagsSettings'; import { TagsOrder } from '../../src/tags/data/TagsListChildrenProps'; import { capitalize } from '../../src/utils/utils'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const setTagsSettings = jest.fn(); - const setUp = (tags?: TagsSettingsOptions) => ({ - user: userEvent.setup(), - ...render(({ tags })} setTagsSettings={setTagsSettings} />), - }); + const setUp = (tags?: TagsSettingsOptions) => renderWithEvents( + ({ tags })} setTagsSettings={setTagsSettings} />, + ); afterEach(jest.clearAllMocks); diff --git a/test/settings/UserInterfaceSettings.test.tsx b/test/settings/UserInterfaceSettings.test.tsx index e10517ac..ebfee1ee 100644 --- a/test/settings/UserInterfaceSettings.test.tsx +++ b/test/settings/UserInterfaceSettings.test.tsx @@ -1,16 +1,15 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { Settings, UiSettings } from '../../src/settings/reducers/settings'; import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings'; import { Theme } from '../../src/utils/theme'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const setUiSettings = jest.fn(); - const setUp = (ui?: UiSettings) => ({ - user: userEvent.setup(), - ...render(({ ui })} setUiSettings={setUiSettings} />), - }); + const setUp = (ui?: UiSettings) => renderWithEvents( + ({ ui })} setUiSettings={setUiSettings} />, + ); afterEach(jest.clearAllMocks); diff --git a/test/settings/VisitsSettings.test.tsx b/test/settings/VisitsSettings.test.tsx index bcdb2f51..c2926d2b 100644 --- a/test/settings/VisitsSettings.test.tsx +++ b/test/settings/VisitsSettings.test.tsx @@ -1,15 +1,14 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { Settings } from '../../src/settings/reducers/settings'; import { VisitsSettings } from '../../src/settings/VisitsSettings'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const setVisitsSettings = jest.fn(); - const setUp = (settings: Partial = {}) => ({ - user: userEvent.setup(), - ...render((settings)} setVisitsSettings={setVisitsSettings} />), - }); + const setUp = (settings: Partial = {}) => renderWithEvents( + (settings)} setVisitsSettings={setVisitsSettings} />, + ); afterEach(jest.clearAllMocks); diff --git a/test/short-urls/ShortUrlForm.test.tsx b/test/short-urls/ShortUrlForm.test.tsx index 1263f5b5..4c741e93 100644 --- a/test/short-urls/ShortUrlForm.test.tsx +++ b/test/short-urls/ShortUrlForm.test.tsx @@ -1,5 +1,4 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { UserEvent } from '@testing-library/user-event/dist/types/setup'; import { formatISO } from 'date-fns'; import { Mock } from 'ts-mockery'; @@ -7,13 +6,13 @@ import { ShortUrlForm as createShortUrlForm, Mode } from '../../src/short-urls/S import { ReachableServer, SelectedServer } from '../../src/servers/data'; import { parseDate } from '../../src/utils/helpers/date'; import { OptionalString } from '../../src/utils/utils'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const createShortUrl = jest.fn(async () => Promise.resolve()); const ShortUrlForm = createShortUrlForm(() => TagsSelector, () => DomainSelector); - const setUp = (selectedServer: SelectedServer = null, mode: Mode = 'create', title?: OptionalString) => ({ - user: userEvent.setup(), - ...render( + const setUp = (selectedServer: SelectedServer = null, mode: Mode = 'create', title?: OptionalString) => + renderWithEvents( ', () => { initialState={{ validateUrl: true, findIfExists: false, title, longUrl: '' }} onSave={createShortUrl} />, - ), - }); + ); afterEach(jest.clearAllMocks); diff --git a/test/short-urls/ShortUrlsFilteringBar.test.tsx b/test/short-urls/ShortUrlsFilteringBar.test.tsx index 113196cf..c5f7f247 100644 --- a/test/short-urls/ShortUrlsFilteringBar.test.tsx +++ b/test/short-urls/ShortUrlsFilteringBar.test.tsx @@ -1,5 +1,4 @@ -import { render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen, waitFor } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { endOfDay, formatISO, startOfDay } from 'date-fns'; import { MemoryRouter, useLocation, useNavigate } from 'react-router-dom'; @@ -7,6 +6,7 @@ import { ShortUrlsFilteringBar as filteringBarCreator } from '../../src/short-ur import { ReachableServer, SelectedServer } from '../../src/servers/data'; import { DateRange } from '../../src/utils/dates/types'; import { formatDate } from '../../src/utils/helpers/date'; +import { renderWithEvents } from '../__mocks__/setUpTest'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), @@ -24,18 +24,15 @@ describe('', () => { (useLocation as any).mockReturnValue({ search }); (useNavigate as any).mockReturnValue(navigate); - return { - user: userEvent.setup(), - ...render( - - ()} - order={{}} - handleOrderBy={handleOrderBy} - /> - , - ), - }; + return renderWithEvents( + + ()} + order={{}} + handleOrderBy={handleOrderBy} + /> + , + ); }; afterEach(jest.clearAllMocks); diff --git a/test/short-urls/ShortUrlsList.test.tsx b/test/short-urls/ShortUrlsList.test.tsx index ab911250..8c9f0eea 100644 --- a/test/short-urls/ShortUrlsList.test.tsx +++ b/test/short-urls/ShortUrlsList.test.tsx @@ -1,5 +1,4 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { FC } from 'react'; import { Mock } from 'ts-mockery'; import { MemoryRouter, useNavigate } from 'react-router-dom'; @@ -10,6 +9,7 @@ import { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reduce import { ReachableServer } from '../../src/servers/data'; import { Settings } from '../../src/settings/reducers/settings'; import { ShortUrlsTableProps } from '../../src/short-urls/ShortUrlsTable'; +import { renderWithEvents } from '../__mocks__/setUpTest'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), @@ -36,20 +36,17 @@ describe('', () => { }, }); const ShortUrlsList = createShortUrlsList(ShortUrlsTable, ShortUrlsFilteringBar); - const setUp = (defaultOrdering: ShortUrlsOrder = {}) => ({ - user: userEvent.setup(), - ...render( - - ({ mercureInfo: { loading: true } })} - listShortUrls={listShortUrlsMock} - shortUrlsList={shortUrlsList} - selectedServer={Mock.of({ id: '1' })} - settings={Mock.of({ shortUrlsList: { defaultOrdering } })} - /> - , - ), - }); + const setUp = (defaultOrdering: ShortUrlsOrder = {}) => renderWithEvents( + + ({ mercureInfo: { loading: true } })} + listShortUrls={listShortUrlsMock} + shortUrlsList={shortUrlsList} + selectedServer={Mock.of({ id: '1' })} + settings={Mock.of({ shortUrlsList: { defaultOrdering } })} + /> + , + ); beforeEach(() => { (useNavigate as any).mockReturnValue(navigate); diff --git a/test/short-urls/ShortUrlsTable.test.tsx b/test/short-urls/ShortUrlsTable.test.tsx index 7f758a09..f16e3218 100644 --- a/test/short-urls/ShortUrlsTable.test.tsx +++ b/test/short-urls/ShortUrlsTable.test.tsx @@ -1,21 +1,18 @@ -import { fireEvent, render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { fireEvent, screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { ShortUrlsTable as shortUrlsTableCreator } from '../../src/short-urls/ShortUrlsTable'; import { ShortUrlsList } from '../../src/short-urls/reducers/shortUrlsList'; import { ReachableServer, SelectedServer } from '../../src/servers/data'; import { ShortUrlsOrderableFields, SHORT_URLS_ORDERABLE_FIELDS } from '../../src/short-urls/data'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const shortUrlsList = Mock.all(); const orderByColumn = jest.fn(); const ShortUrlsTable = shortUrlsTableCreator(() => ShortUrlsRow); - const setUp = (server: SelectedServer = null) => ({ - user: userEvent.setup(), - ...render( - orderByColumn} />, - ), - }); + const setUp = (server: SelectedServer = null) => renderWithEvents( + orderByColumn} />, + ); afterEach(jest.resetAllMocks); diff --git a/test/short-urls/UseExistingIfFoundInfoIcon.test.tsx b/test/short-urls/UseExistingIfFoundInfoIcon.test.tsx index 9104f1c9..b823296b 100644 --- a/test/short-urls/UseExistingIfFoundInfoIcon.test.tsx +++ b/test/short-urls/UseExistingIfFoundInfoIcon.test.tsx @@ -1,11 +1,10 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { UseExistingIfFoundInfoIcon } from '../../src/short-urls/UseExistingIfFoundInfoIcon'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { it('shows modal when icon is clicked', async () => { - const user = userEvent.setup(); - render(); + const { user } = renderWithEvents(); expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); await user.click(screen.getByTitle('What does this mean?').firstElementChild as Element); diff --git a/test/short-urls/helpers/CreateShortUrlResult.test.tsx b/test/short-urls/helpers/CreateShortUrlResult.test.tsx index ce35972b..e32e944b 100644 --- a/test/short-urls/helpers/CreateShortUrlResult.test.tsx +++ b/test/short-urls/helpers/CreateShortUrlResult.test.tsx @@ -1,18 +1,17 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { CreateShortUrlResult as createResult } from '../../../src/short-urls/helpers/CreateShortUrlResult'; import { ShortUrl } from '../../../src/short-urls/data'; import { TimeoutToggle } from '../../../src/utils/helpers/hooks'; +import { renderWithEvents } from '../../__mocks__/setUpTest'; describe('', () => { const copyToClipboard = jest.fn(); const useTimeoutToggle = jest.fn(() => [false, copyToClipboard]) as TimeoutToggle; const CreateShortUrlResult = createResult(useTimeoutToggle); - const setUp = (result: ShortUrl | null = null, error = false) => ({ - user: userEvent.setup(), - ...render( {}} result={result} error={error} saving={false} />), - }); + const setUp = (result: ShortUrl | null = null, error = false) => renderWithEvents( + {}} result={result} error={error} saving={false} />, + ); afterEach(jest.clearAllMocks); diff --git a/test/short-urls/helpers/ExportShortUrlsBtn.test.tsx b/test/short-urls/helpers/ExportShortUrlsBtn.test.tsx index 6cf72991..18f0bdac 100644 --- a/test/short-urls/helpers/ExportShortUrlsBtn.test.tsx +++ b/test/short-urls/helpers/ExportShortUrlsBtn.test.tsx @@ -1,10 +1,10 @@ import { Mock } from 'ts-mockery'; -import { render, screen, waitForElementToBeRemoved } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen, waitForElementToBeRemoved } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; import { ReportExporter } from '../../../src/common/services/ReportExporter'; import { ExportShortUrlsBtn as createExportShortUrlsBtn } from '../../../src/short-urls/helpers/ExportShortUrlsBtn'; import { NotFoundServer, ReachableServer, SelectedServer } from '../../../src/servers/data'; +import { renderWithEvents } from '../../__mocks__/setUpTest'; describe('', () => { const listShortUrls = jest.fn(); @@ -12,14 +12,11 @@ describe('', () => { const exportShortUrls = jest.fn(); const reportExporter = Mock.of({ exportShortUrls }); const ExportShortUrlsBtn = createExportShortUrlsBtn(buildShlinkApiClient, reportExporter); - const setUp = (amount?: number, selectedServer?: SelectedServer) => ({ - user: userEvent.setup(), - ...render( - - ()} amount={amount} /> - , - ), - }); + const setUp = (amount?: number, selectedServer?: SelectedServer) => renderWithEvents( + + ()} amount={amount} /> + , + ); afterEach(jest.clearAllMocks); diff --git a/test/short-urls/helpers/qr-codes/QrErrorCorrectionDropdown.test.tsx b/test/short-urls/helpers/qr-codes/QrErrorCorrectionDropdown.test.tsx index e27fa3b3..94cb23c7 100644 --- a/test/short-urls/helpers/qr-codes/QrErrorCorrectionDropdown.test.tsx +++ b/test/short-urls/helpers/qr-codes/QrErrorCorrectionDropdown.test.tsx @@ -1,17 +1,14 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { QrErrorCorrection } from '../../../../src/utils/helpers/qrCodes'; import { QrErrorCorrectionDropdown } from '../../../../src/short-urls/helpers/qr-codes/QrErrorCorrectionDropdown'; +import { renderWithEvents } from '../../../__mocks__/setUpTest'; describe('', () => { const initialErrorCorrection: QrErrorCorrection = 'Q'; const setErrorCorrection = jest.fn(); - const setUp = () => ({ - user: userEvent.setup(), - ...render( - , - ), - }); + const setUp = () => renderWithEvents( + , + ); afterEach(jest.clearAllMocks); diff --git a/test/short-urls/helpers/qr-codes/QrFormatDropdown.test.tsx b/test/short-urls/helpers/qr-codes/QrFormatDropdown.test.tsx index 2a005ea7..04767a34 100644 --- a/test/short-urls/helpers/qr-codes/QrFormatDropdown.test.tsx +++ b/test/short-urls/helpers/qr-codes/QrFormatDropdown.test.tsx @@ -1,15 +1,12 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { QrCodeFormat } from '../../../../src/utils/helpers/qrCodes'; import { QrFormatDropdown } from '../../../../src/short-urls/helpers/qr-codes/QrFormatDropdown'; +import { renderWithEvents } from '../../../__mocks__/setUpTest'; describe('', () => { const initialFormat: QrCodeFormat = 'svg'; const setFormat = jest.fn(); - const setUp = () => ({ - user: userEvent.setup(), - ...render(), - }); + const setUp = () => renderWithEvents(); afterEach(jest.clearAllMocks); diff --git a/test/tags/TagCard.test.tsx b/test/tags/TagCard.test.tsx index cb31f3ad..60e8a488 100644 --- a/test/tags/TagCard.test.tsx +++ b/test/tags/TagCard.test.tsx @@ -1,10 +1,10 @@ -import userEvent from '@testing-library/user-event'; -import { render, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; import { Mock } from 'ts-mockery'; import { TagCard as createTagCard } from '../../src/tags/TagCard'; import { ColorGenerator } from '../../src/utils/services/ColorGenerator'; import { ReachableServer } from '../../src/servers/data'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const TagCard = createTagCard( @@ -12,19 +12,16 @@ describe('', () => { ({ isOpen }) => EditTagModal {isOpen ? '[Open]' : '[Closed]'}, Mock.of({ getColorForKey: () => '' }), ); - const setUp = (tag = 'ssr') => ({ - user: userEvent.setup(), - ...render( - - ({ id: '1' })} - displayed - toggle={() => {}} - /> - , - ), - }); + const setUp = (tag = 'ssr') => renderWithEvents( + + ({ id: '1' })} + displayed + toggle={() => {}} + /> + , + ); afterEach(jest.resetAllMocks); diff --git a/test/tags/TagsCards.test.tsx b/test/tags/TagsCards.test.tsx index 6593569a..06274262 100644 --- a/test/tags/TagsCards.test.tsx +++ b/test/tags/TagsCards.test.tsx @@ -1,19 +1,18 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { TagsCards as createTagsCards } from '../../src/tags/TagsCards'; import { SelectedServer } from '../../src/servers/data'; import { rangeOf } from '../../src/utils/utils'; import { NormalizedTag } from '../../src/tags/data'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const amountOfTags = 10; const sortedTags = rangeOf(amountOfTags, (i) => Mock.of({ tag: `tag_${i}` })); const TagsCards = createTagsCards(() => TagCard); - const setUp = () => ({ - user: userEvent.setup(), - ...render(()} />), - }); + const setUp = () => renderWithEvents( + ()} />, + ); it('renders the proper amount of groups and cards based on the amount of tags', () => { const { container } = setUp(); diff --git a/test/tags/TagsList.test.tsx b/test/tags/TagsList.test.tsx index f1639203..b386fb5b 100644 --- a/test/tags/TagsList.test.tsx +++ b/test/tags/TagsList.test.tsx @@ -1,28 +1,25 @@ -import { render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen, waitFor } from '@testing-library/react'; import { identity } from 'ramda'; import { Mock } from 'ts-mockery'; import { TagsList as createTagsList, TagsListProps } from '../../src/tags/TagsList'; import { TagsList } from '../../src/tags/reducers/tagsList'; import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub'; import { Settings } from '../../src/settings/reducers/settings'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const filterTags = jest.fn(); const TagsListComp = createTagsList(() => <>TagsCards, () => <>TagsTable); - const setUp = (tagsList: Partial) => ({ - user: userEvent.setup(), - ...render( - ()} - {...Mock.of({ mercureInfo: {} })} - forceListTags={identity} - filterTags={filterTags} - tagsList={Mock.of(tagsList)} - settings={Mock.all()} - />, - ), - }); + const setUp = (tagsList: Partial) => renderWithEvents( + ()} + {...Mock.of({ mercureInfo: {} })} + forceListTags={identity} + filterTags={filterTags} + tagsList={Mock.of(tagsList)} + settings={Mock.all()} + />, + ); afterEach(jest.clearAllMocks); diff --git a/test/tags/TagsModeDropdown.test.tsx b/test/tags/TagsModeDropdown.test.tsx index 5c4e8ca7..7dfda64f 100644 --- a/test/tags/TagsModeDropdown.test.tsx +++ b/test/tags/TagsModeDropdown.test.tsx @@ -1,14 +1,11 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown'; import { TagsMode } from '../../src/settings/reducers/settings'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const onChange = jest.fn(); - const setUp = (mode: TagsMode) => ({ - user: userEvent.setup(), - ...render(), - }); + const setUp = (mode: TagsMode) => renderWithEvents(); afterEach(jest.clearAllMocks); diff --git a/test/tags/helpers/DeleteTagConfirmModal.test.tsx b/test/tags/helpers/DeleteTagConfirmModal.test.tsx index b8326fd9..70fac3b3 100644 --- a/test/tags/helpers/DeleteTagConfirmModal.test.tsx +++ b/test/tags/helpers/DeleteTagConfirmModal.test.tsx @@ -2,12 +2,24 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap'; import { DeleteTagConfirmModal } from '../../../src/tags/helpers/DeleteTagConfirmModal'; import { TagDeletion } from '../../../src/tags/reducers/tagDelete'; +import { renderWithEvents } from '../../__mocks__/setUpTest'; describe('', () => { - let wrapper: ShallowWrapper; const tag = 'nodejs'; const deleteTag = jest.fn(); const tagDeleted = jest.fn(); + const setUp = (tagDelete: TagDeletion) => renderWithEvents( + ''} + isOpen + deleteTag={deleteTag} + tagDeleted={tagDeleted} + tagDelete={tagDelete} + />, + ); + + let wrapper: ShallowWrapper; const createWrapper = (tagDelete: TagDeletion) => { wrapper = shallow( ', () => { return wrapper; }; - afterEach(() => wrapper?.unmount()); + afterEach(jest.resetAllMocks); it('asks confirmation for provided tag to be deleted', () => { diff --git a/test/tags/helpers/Tag.test.tsx b/test/tags/helpers/Tag.test.tsx index ff17fdb7..a7f24c6f 100644 --- a/test/tags/helpers/Tag.test.tsx +++ b/test/tags/helpers/Tag.test.tsx @@ -1,10 +1,10 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { ReactNode } from 'react'; import { ColorGenerator } from '../../../src/utils/services/ColorGenerator'; import { MAIN_COLOR } from '../../../src/utils/theme'; import { Tag } from '../../../src/tags/helpers/Tag'; +import { renderWithEvents } from '../../__mocks__/setUpTest'; const hexToRgb = (hex: string) => { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); @@ -25,14 +25,11 @@ describe('', () => { const isColorLightForKey = jest.fn(() => false); const getColorForKey = jest.fn(() => MAIN_COLOR); const colorGenerator = Mock.of({ getColorForKey, isColorLightForKey }); - const setUp = (text: string, clearable?: boolean, children?: ReactNode) => ({ - user: userEvent.setup(), - ...render( - - {children} - , - ), - }); + const setUp = (text: string, clearable?: boolean, children?: ReactNode) => renderWithEvents( + + {children} + , + ); afterEach(jest.clearAllMocks); diff --git a/test/utils/Checkbox.test.tsx b/test/utils/Checkbox.test.tsx index be173718..a60f3a3e 100644 --- a/test/utils/Checkbox.test.tsx +++ b/test/utils/Checkbox.test.tsx @@ -1,6 +1,6 @@ import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import { Checkbox } from '../../src/utils/Checkbox'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { it.each([['foo'], ['bar'], ['baz']])('includes extra class names when provided', (className) => { @@ -24,9 +24,8 @@ describe('', () => { }); it.each([[true], [false]])('changes checked status on input change', async (checked) => { - const user = userEvent.setup(); const onChange = jest.fn(); - render(Foo); + const { user } = renderWithEvents(Foo); expect(onChange).not.toHaveBeenCalled(); await user.click(screen.getByLabelText('Foo')); diff --git a/test/utils/CopyToClipboardIcon.test.tsx b/test/utils/CopyToClipboardIcon.test.tsx index 23cfb1c4..df7b3f99 100644 --- a/test/utils/CopyToClipboardIcon.test.tsx +++ b/test/utils/CopyToClipboardIcon.test.tsx @@ -1,13 +1,9 @@ -import { render } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import { CopyToClipboardIcon } from '../../src/utils/CopyToClipboardIcon'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const onCopy = jest.fn(); - const setUp = (text = 'foo') => ({ - user: userEvent.setup(), - ...render(), - }); + const setUp = (text = 'foo') => renderWithEvents(); afterEach(jest.clearAllMocks); diff --git a/test/utils/DateInput.test.tsx b/test/utils/DateInput.test.tsx index a37a39da..eba1eb05 100644 --- a/test/utils/DateInput.test.tsx +++ b/test/utils/DateInput.test.tsx @@ -1,13 +1,12 @@ -import { render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen, waitFor } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { DateInput, DateInputProps } from '../../src/utils/DateInput'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { - const setUp = (props: Partial = {}) => ({ - user: userEvent.setup(), - ...render((props)} />), - }); + const setUp = (props: Partial = {}) => renderWithEvents( + (props)} />, + ); it('shows calendar icon when input is not clearable', () => { setUp({ isClearable: false }); diff --git a/test/utils/InfoTooltip.test.tsx b/test/utils/InfoTooltip.test.tsx index 661e6bf0..dd5021a8 100644 --- a/test/utils/InfoTooltip.test.tsx +++ b/test/utils/InfoTooltip.test.tsx @@ -1,13 +1,12 @@ -import { render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen, waitFor } from '@testing-library/react'; import { Placement } from '@popperjs/core'; import { InfoTooltip, InfoTooltipProps } from '../../src/utils/InfoTooltip'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { - const setUp = (props: Partial = {}) => ({ - user: userEvent.setup(), - ...render(), - }); + const setUp = (props: Partial = {}) => renderWithEvents( + , + ); it.each([ [undefined], diff --git a/test/utils/OrderingDropdown.test.tsx b/test/utils/OrderingDropdown.test.tsx index 3c978e1a..47c83302 100644 --- a/test/utils/OrderingDropdown.test.tsx +++ b/test/utils/OrderingDropdown.test.tsx @@ -1,8 +1,8 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { values } from 'ramda'; import { OrderingDropdown, OrderingDropdownProps } from '../../src/utils/OrderingDropdown'; import { OrderDir } from '../../src/utils/helpers/ordering'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const items = { @@ -10,10 +10,9 @@ describe('', () => { bar: 'Bar', baz: 'Hello World', }; - const setUp = (props: Partial = {}) => ({ - user: userEvent.setup(), - ...render(), - }); + const setUp = (props: Partial = {}) => renderWithEvents( + , + ); const setUpWithDisplayedMenu = async (props: Partial = {}) => { const result = setUp(props); const { user } = result; diff --git a/test/utils/dates/DateIntervalDropdownItems.test.tsx b/test/utils/dates/DateIntervalDropdownItems.test.tsx index e0bd507a..0cbf817e 100644 --- a/test/utils/dates/DateIntervalDropdownItems.test.tsx +++ b/test/utils/dates/DateIntervalDropdownItems.test.tsx @@ -1,14 +1,13 @@ -import { render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen, waitFor } from '@testing-library/react'; import { DateIntervalDropdownItems } from '../../../src/utils/dates/DateIntervalDropdownItems'; import { DATE_INTERVALS, DateInterval, rangeOrIntervalToString } from '../../../src/utils/dates/types'; import { DropdownBtn } from '../../../src/utils/DropdownBtn'; +import { renderWithEvents } from '../../__mocks__/setUpTest'; describe('', () => { const onChange = jest.fn(); const setUp = async () => { - const user = userEvent.setup(); - const renderResult = render( + const { user, ...renderResult } = renderWithEvents( , diff --git a/test/utils/dates/DateIntervalSelector.test.tsx b/test/utils/dates/DateIntervalSelector.test.tsx index 0566247e..abca608e 100644 --- a/test/utils/dates/DateIntervalSelector.test.tsx +++ b/test/utils/dates/DateIntervalSelector.test.tsx @@ -1,15 +1,14 @@ -import { render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen, waitFor } from '@testing-library/react'; import { DateInterval, rangeOrIntervalToString } from '../../../src/utils/dates/types'; import { DateIntervalSelector } from '../../../src/utils/dates/DateIntervalSelector'; +import { renderWithEvents } from '../../__mocks__/setUpTest'; describe('', () => { const activeInterval: DateInterval = 'last7Days'; const onChange = jest.fn(); - const setUp = () => ({ - user: userEvent.setup(), - ...render(), - }); + const setUp = () => renderWithEvents( + , + ); it('passes props down to nested DateIntervalDropdownItems', async () => { const { user } = setUp(); diff --git a/test/visits/DomainVisits.test.tsx b/test/visits/DomainVisits.test.tsx index a7598e48..7697a1eb 100644 --- a/test/visits/DomainVisits.test.tsx +++ b/test/visits/DomainVisits.test.tsx @@ -1,5 +1,4 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; import { Mock } from 'ts-mockery'; import { formatISO } from 'date-fns'; @@ -10,6 +9,7 @@ import { DomainVisits } from '../../src/visits/reducers/domainVisits'; import { Settings } from '../../src/settings/reducers/settings'; import { SelectedServer } from '../../src/servers/data'; import { Visit } from '../../src/visits/types'; +import { renderWithEvents } from '../__mocks__/setUpTest'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), @@ -22,21 +22,18 @@ describe('', () => { const cancelGetDomainVisits = jest.fn(); const domainVisits = Mock.of({ visits: [Mock.of({ date: formatISO(new Date()) })] }); const DomainVisits = createDomainVisits(Mock.of({ exportVisits })); - const setUp = () => ({ - user: userEvent.setup(), - ...render( - - ({ mercureInfo: {} })} - getDomainVisits={getDomainVisits} - cancelGetDomainVisits={cancelGetDomainVisits} - domainVisits={domainVisits} - settings={Mock.all()} - selectedServer={Mock.all()} - /> - , - ), - }); + const setUp = () => renderWithEvents( + + ({ mercureInfo: {} })} + getDomainVisits={getDomainVisits} + cancelGetDomainVisits={cancelGetDomainVisits} + domainVisits={domainVisits} + settings={Mock.all()} + selectedServer={Mock.all()} + /> + , + ); it('wraps visits stats and header', () => { setUp(); diff --git a/test/visits/NonOrphanVisits.test.tsx b/test/visits/NonOrphanVisits.test.tsx index 646cd5a2..f27ec3f5 100644 --- a/test/visits/NonOrphanVisits.test.tsx +++ b/test/visits/NonOrphanVisits.test.tsx @@ -1,5 +1,4 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; import { Mock } from 'ts-mockery'; import { formatISO } from 'date-fns'; @@ -9,6 +8,7 @@ import { Visit, VisitsInfo } from '../../src/visits/types'; import { Settings } from '../../src/settings/reducers/settings'; import { ReportExporter } from '../../src/common/services/ReportExporter'; import { SelectedServer } from '../../src/servers/data'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const exportVisits = jest.fn(); @@ -16,21 +16,18 @@ describe('', () => { const cancelGetNonOrphanVisits = jest.fn(); const nonOrphanVisits = Mock.of({ visits: [Mock.of({ date: formatISO(new Date()) })] }); const NonOrphanVisits = createNonOrphanVisits(Mock.of({ exportVisits })); - const setUp = () => ({ - user: userEvent.setup(), - ...render( - - ({ mercureInfo: {} })} - getNonOrphanVisits={getNonOrphanVisits} - cancelGetNonOrphanVisits={cancelGetNonOrphanVisits} - nonOrphanVisits={nonOrphanVisits} - settings={Mock.all()} - selectedServer={Mock.all()} - /> - , - ), - }); + const setUp = () => renderWithEvents( + + ({ mercureInfo: {} })} + getNonOrphanVisits={getNonOrphanVisits} + cancelGetNonOrphanVisits={cancelGetNonOrphanVisits} + nonOrphanVisits={nonOrphanVisits} + settings={Mock.all()} + selectedServer={Mock.all()} + /> + , + ); it('wraps visits stats and header', () => { setUp(); diff --git a/test/visits/OrphanVisits.test.tsx b/test/visits/OrphanVisits.test.tsx index 0f1f426a..874be1ef 100644 --- a/test/visits/OrphanVisits.test.tsx +++ b/test/visits/OrphanVisits.test.tsx @@ -1,5 +1,4 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; import { Mock } from 'ts-mockery'; import { formatISO } from 'date-fns'; @@ -9,27 +8,25 @@ import { Visit, VisitsInfo } from '../../src/visits/types'; import { Settings } from '../../src/settings/reducers/settings'; import { ReportExporter } from '../../src/common/services/ReportExporter'; import { SelectedServer } from '../../src/servers/data'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const getOrphanVisits = jest.fn(); const exportVisits = jest.fn(); const orphanVisits = Mock.of({ visits: [Mock.of({ date: formatISO(new Date()) })] }); const OrphanVisits = createOrphanVisits(Mock.of({ exportVisits })); - const setUp = () => ({ - user: userEvent.setup(), - ...render( - - ({ mercureInfo: {} })} - getOrphanVisits={getOrphanVisits} - orphanVisits={orphanVisits} - cancelGetOrphanVisits={jest.fn()} - settings={Mock.all()} - selectedServer={Mock.all()} - /> - , - ), - }); + const setUp = () => renderWithEvents( + + ({ mercureInfo: {} })} + getOrphanVisits={getOrphanVisits} + orphanVisits={orphanVisits} + cancelGetOrphanVisits={jest.fn()} + settings={Mock.all()} + selectedServer={Mock.all()} + /> + , + ); it('wraps visits stats and header', () => { setUp(); diff --git a/test/visits/ShortUrlVisits.test.tsx b/test/visits/ShortUrlVisits.test.tsx index 960f986c..a2dc15b4 100644 --- a/test/visits/ShortUrlVisits.test.tsx +++ b/test/visits/ShortUrlVisits.test.tsx @@ -1,5 +1,4 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; import { identity } from 'ramda'; import { Mock } from 'ts-mockery'; @@ -11,29 +10,27 @@ import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub'; import { ReportExporter } from '../../src/common/services/ReportExporter'; import { Visit } from '../../src/visits/types'; import { Settings } from '../../src/settings/reducers/settings'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const getShortUrlVisitsMock = jest.fn(); const exportVisits = jest.fn(); const shortUrlVisits = Mock.of({ visits: [Mock.of({ date: formatISO(new Date()) })] }); const ShortUrlVisits = createShortUrlVisits(Mock.of({ exportVisits })); - const setUp = () => ({ - user: userEvent.setup(), - ...render( - - ()} - {...Mock.of({ mercureInfo: {} })} - getShortUrlDetail={identity} - getShortUrlVisits={getShortUrlVisitsMock} - shortUrlVisits={shortUrlVisits} - shortUrlDetail={Mock.all()} - settings={Mock.all()} - cancelGetShortUrlVisits={() => {}} - /> - , - ), - }); + const setUp = () => renderWithEvents( + + ()} + {...Mock.of({ mercureInfo: {} })} + getShortUrlDetail={identity} + getShortUrlVisits={getShortUrlVisitsMock} + shortUrlVisits={shortUrlVisits} + shortUrlDetail={Mock.all()} + settings={Mock.all()} + cancelGetShortUrlVisits={() => {}} + /> + , + ); it('wraps visits stats and header', () => { setUp(); diff --git a/test/visits/ShortUrlVisitsHeader.test.tsx b/test/visits/ShortUrlVisitsHeader.test.tsx index 3f2b0fd2..78ff2ba0 100644 --- a/test/visits/ShortUrlVisitsHeader.test.tsx +++ b/test/visits/ShortUrlVisitsHeader.test.tsx @@ -1,10 +1,10 @@ -import { render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen, waitFor } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { formatDistance, parseISO } from 'date-fns'; import { ShortUrlVisitsHeader } from '../../src/visits/ShortUrlVisitsHeader'; import { ShortUrlDetail } from '../../src/short-urls/reducers/shortUrlDetail'; import { ShortUrlVisits } from '../../src/visits/reducers/shortUrlVisits'; +import { renderWithEvents } from '../__mocks__/setUpTest'; describe('', () => { const dateCreated = '2018-01-01T10:00:00+00:00'; @@ -23,12 +23,9 @@ describe('', () => { }, loading: false, }); - return { - user: userEvent.setup(), - ...render( - , - ), - }; + return renderWithEvents( + , + ); }; it('shows when the URL was created', async () => { diff --git a/test/visits/TagVisits.test.tsx b/test/visits/TagVisits.test.tsx index 3b8f92c1..7225a809 100644 --- a/test/visits/TagVisits.test.tsx +++ b/test/visits/TagVisits.test.tsx @@ -1,5 +1,4 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { formatISO } from 'date-fns'; import { MemoryRouter } from 'react-router-dom'; import { Mock } from 'ts-mockery'; @@ -10,6 +9,7 @@ import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub'; import { ReportExporter } from '../../src/common/services/ReportExporter'; import { Visit } from '../../src/visits/types'; import { Settings } from '../../src/settings/reducers/settings'; +import { renderWithEvents } from '../__mocks__/setUpTest'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), @@ -24,21 +24,18 @@ describe('', () => { Mock.of({ isColorLightForKey: () => false, getColorForKey: () => 'red' }), Mock.of({ exportVisits }), ); - const setUp = () => ({ - user: userEvent.setup(), - ...render( - - ()} - {...Mock.of({ mercureInfo: {} })} - getTagVisits={getTagVisitsMock} - tagVisits={tagVisits} - settings={Mock.all()} - cancelGetTagVisits={() => {}} - /> - , - ), - }); + const setUp = () => renderWithEvents( + + ()} + {...Mock.of({ mercureInfo: {} })} + getTagVisits={getTagVisitsMock} + tagVisits={tagVisits} + settings={Mock.all()} + cancelGetTagVisits={() => {}} + /> + , + ); it('wraps visits stats and header', () => { setUp(); diff --git a/test/visits/charts/DoughnutChart.test.tsx b/test/visits/charts/DoughnutChart.test.tsx index c93305f8..e942bd7f 100644 --- a/test/visits/charts/DoughnutChart.test.tsx +++ b/test/visits/charts/DoughnutChart.test.tsx @@ -1,6 +1,6 @@ import { screen } from '@testing-library/react'; import { DoughnutChart } from '../../../src/visits/charts/DoughnutChart'; -import { setUpCanvas } from '../../__mocks__/setUpCanvas'; +import { setUpCanvas } from '../../__mocks__/setUpTest'; describe('', () => { const stats = { diff --git a/test/visits/charts/HorizontalBarChart.test.tsx b/test/visits/charts/HorizontalBarChart.test.tsx index 439681cf..cc5c1b6b 100644 --- a/test/visits/charts/HorizontalBarChart.test.tsx +++ b/test/visits/charts/HorizontalBarChart.test.tsx @@ -1,5 +1,5 @@ import { HorizontalBarChart, HorizontalBarChartProps } from '../../../src/visits/charts/HorizontalBarChart'; -import { setUpCanvas } from '../../__mocks__/setUpCanvas'; +import { setUpCanvas } from '../../__mocks__/setUpTest'; describe('', () => { const setUp = (props: HorizontalBarChartProps) => setUpCanvas(); diff --git a/test/visits/charts/LineChartCard.test.tsx b/test/visits/charts/LineChartCard.test.tsx index 474f51fc..db5e9040 100644 --- a/test/visits/charts/LineChartCard.test.tsx +++ b/test/visits/charts/LineChartCard.test.tsx @@ -4,7 +4,7 @@ import { formatISO, subDays, subMonths, subYears } from 'date-fns'; import { Mock } from 'ts-mockery'; import { LineChartCard } from '../../../src/visits/charts/LineChartCard'; import { NormalizedVisit } from '../../../src/visits/types'; -import { setUpCanvas } from '../../__mocks__/setUpCanvas'; +import { setUpCanvas } from '../../__mocks__/setUpTest'; describe('', () => { const setUp = (visits: NormalizedVisit[] = [], highlightedVisits: NormalizedVisit[] = []) => ({ diff --git a/test/visits/helpers/OpenMapModalBtn.test.tsx b/test/visits/helpers/OpenMapModalBtn.test.tsx index f33e67a8..5c851ae9 100644 --- a/test/visits/helpers/OpenMapModalBtn.test.tsx +++ b/test/visits/helpers/OpenMapModalBtn.test.tsx @@ -1,8 +1,8 @@ -import { render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen, waitFor } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { OpenMapModalBtn } from '../../../src/visits/helpers/OpenMapModalBtn'; import { CityStats } from '../../../src/visits/types'; +import { renderWithEvents } from '../../__mocks__/setUpTest'; describe('', () => { const title = 'Foo'; @@ -10,10 +10,9 @@ describe('', () => { Mock.of({ cityName: 'foo', count: 30, latLong: [5, 5] }), Mock.of({ cityName: 'bar', count: 45, latLong: [88, 88] }), ]; - const setUp = (activeCities?: string[]) => ({ - user: userEvent.setup(), - ...render(), - }); + const setUp = (activeCities?: string[]) => renderWithEvents( + , + ); it('renders tooltip on button hover and opens modal on click', async () => { const { user } = setUp(); diff --git a/test/visits/helpers/VisitsFilterDropdown.test.tsx b/test/visits/helpers/VisitsFilterDropdown.test.tsx index aed08cd1..71ce49c8 100644 --- a/test/visits/helpers/VisitsFilterDropdown.test.tsx +++ b/test/visits/helpers/VisitsFilterDropdown.test.tsx @@ -1,21 +1,18 @@ -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; import { OrphanVisitType, VisitsFilter } from '../../../src/visits/types'; import { VisitsFilterDropdown } from '../../../src/visits/helpers/VisitsFilterDropdown'; +import { renderWithEvents } from '../../__mocks__/setUpTest'; describe('', () => { const onChange = jest.fn(); - const setUp = (selected: VisitsFilter = {}, isOrphanVisits = true, botsSupported = true) => ({ - user: userEvent.setup(), - ...render( - , - ), - }); + const setUp = (selected: VisitsFilter = {}, isOrphanVisits = true, botsSupported = true) => renderWithEvents( + , + ); beforeEach(jest.clearAllMocks); From 08ca59f9909325fa48f5a55c96ce485320642c4e Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 9 Jul 2022 23:13:15 +0200 Subject: [PATCH 3/3] Migrated DeleteTagConfirmModal test to react testing library --- .../helpers/DeleteTagConfirmModal.test.tsx | 68 +++++++------------ 1 file changed, 24 insertions(+), 44 deletions(-) diff --git a/test/tags/helpers/DeleteTagConfirmModal.test.tsx b/test/tags/helpers/DeleteTagConfirmModal.test.tsx index 70fac3b3..b141d6a5 100644 --- a/test/tags/helpers/DeleteTagConfirmModal.test.tsx +++ b/test/tags/helpers/DeleteTagConfirmModal.test.tsx @@ -1,5 +1,4 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap'; +import { screen } from '@testing-library/react'; import { DeleteTagConfirmModal } from '../../../src/tags/helpers/DeleteTagConfirmModal'; import { TagDeletion } from '../../../src/tags/reducers/tagDelete'; import { renderWithEvents } from '../../__mocks__/setUpTest'; @@ -19,58 +18,39 @@ describe('', () => { />, ); - let wrapper: ShallowWrapper; - const createWrapper = (tagDelete: TagDeletion) => { - wrapper = shallow( - ''} - isOpen - deleteTag={deleteTag} - tagDeleted={tagDeleted} - tagDelete={tagDelete} - />, - ); - - return wrapper; - }; - afterEach(() => wrapper?.unmount()); - afterEach(jest.resetAllMocks); it('asks confirmation for provided tag to be deleted', () => { - wrapper = createWrapper({ error: false, deleting: false }); - const body = wrapper.find(ModalBody); - const footer = wrapper.find(ModalFooter); - const delBtn = footer.find(Button).last(); + setUp({ error: false, deleting: false }); - expect(body.html()).toContain(`Are you sure you want to delete tag ${tag}?`); - expect(delBtn.prop('disabled')).toEqual(false); - expect(delBtn.html()).toContain('>Delete tag<'); + const delBtn = screen.getByRole('button', { name: 'Delete tag' }); + + expect(screen.getByText(/^Are you sure you want to delete tag/)).toBeInTheDocument(); + expect(screen.queryByText('Something went wrong while deleting the tag :(')).not.toBeInTheDocument(); + expect(delBtn).toBeInTheDocument(); + expect(delBtn).not.toHaveClass('disabled'); + expect(delBtn).not.toHaveAttribute('disabled'); }); it('shows error message when deletion failed', () => { - wrapper = createWrapper({ error: true, deleting: false }); - const body = wrapper.find(ModalBody); - - expect(body.html()).toContain('Something went wrong while deleting the tag :('); + setUp({ error: true, deleting: false }); + expect(screen.getByText('Something went wrong while deleting the tag :(')).toBeInTheDocument(); }); it('shows loading status while deleting', () => { - wrapper = createWrapper({ error: false, deleting: true }); - const footer = wrapper.find(ModalFooter); - const delBtn = footer.find(Button).last(); + setUp({ error: false, deleting: true }); - expect(delBtn.prop('disabled')).toEqual(true); - expect(delBtn.html()).toContain('>Deleting tag...<'); + const delBtn = screen.getByRole('button', { name: 'Deleting tag...' }); + + expect(delBtn).toBeInTheDocument(); + expect(delBtn).toHaveClass('disabled'); + expect(delBtn).toHaveAttribute('disabled'); }); - it('deletes tag modal when btn is clicked', async () => { - wrapper = createWrapper({ error: false, deleting: true }); - const footer = wrapper.find(ModalFooter); - const delBtn = footer.find(Button).last(); + it('hides tag modal when btn is clicked', async () => { + const { user } = setUp({ error: false, deleting: false }); - await delBtn.simulate('click'); + await user.click(screen.getByRole('button', { name: 'Delete tag' })); expect(deleteTag).toHaveBeenCalledTimes(1); expect(deleteTag).toHaveBeenCalledWith(tag); @@ -78,11 +58,11 @@ describe('', () => { expect(tagDeleted).toHaveBeenCalledWith(tag); }); - it('does no further actions when modal is closed without deleting tag', () => { - wrapper = createWrapper({ error: false, deleting: false }); - const modal = wrapper.find(Modal); + it('does no further actions when modal is closed without deleting tag', async () => { + const { user } = setUp({ error: false, deleting: false }); + + await user.click(screen.getByLabelText('Close')); - modal.simulate('closed'); expect(deleteTag).not.toHaveBeenCalled(); expect(tagDeleted).not.toHaveBeenCalled(); });