diff --git a/test/servers/helpers/DuplicatedServersModal.test.tsx b/test/servers/helpers/DuplicatedServersModal.test.tsx index d57af0e2..766f0d64 100644 --- a/test/servers/helpers/DuplicatedServersModal.test.tsx +++ b/test/servers/helpers/DuplicatedServersModal.test.tsx @@ -1,23 +1,20 @@ -import { shallow, ShallowWrapper } from 'enzyme'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { Mock } from 'ts-mockery'; -import { Button, ModalHeader } from 'reactstrap'; import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal'; import { ServerData } from '../../../src/servers/data'; describe('', () => { const onDiscard = jest.fn(); const onSave = jest.fn(); - let wrapper: ShallowWrapper; - const createWrapper = (duplicatedServers: ServerData[] = []) => { - wrapper = shallow( + const setUp = (duplicatedServers: ServerData[] = []) => ({ + user: userEvent.setup(), + ...render( , - ); - - return wrapper; - }; + ), + }); beforeEach(jest.clearAllMocks); - afterEach(() => wrapper?.unmount()); it.each([ [[], 0], @@ -26,10 +23,8 @@ describe('', () => { [[Mock.all(), Mock.all(), Mock.all()], 3], [[Mock.all(), Mock.all(), Mock.all(), Mock.all()], 4], ])('renders expected amount of items', (duplicatedServers, expectedItems) => { - const wrapper = createWrapper(duplicatedServers); - const li = wrapper.find('li'); - - expect(li).toHaveLength(expectedItems); + setUp(duplicatedServers); + expect(screen.queryAllByRole('listitem')).toHaveLength(expectedItems); }); it.each([ @@ -52,55 +47,53 @@ describe('', () => { }, ], ])('renders expected texts based on amount of servers', (duplicatedServers, assertions) => { - const wrapper = createWrapper(duplicatedServers); - const header = wrapper.find(ModalHeader); - const p = wrapper.find('p'); - const span = wrapper.find('span'); - const discardBtn = wrapper.find(Button).first(); + setUp(duplicatedServers); - expect(header.html()).toContain(assertions.header); - expect(p.html()).toContain(assertions.firstParagraph); - expect(span.html()).toContain(assertions.lastParagraph); - expect(discardBtn.html()).toContain(assertions.discardBtn); + expect(screen.getByRole('heading')).toHaveTextContent(assertions.header); + expect(screen.getByText(assertions.firstParagraph)).toBeInTheDocument(); + expect(screen.getByText(assertions.lastParagraph)).toBeInTheDocument(); + expect(screen.getByRole('button', { name: assertions.discardBtn })).toBeInTheDocument(); }); it.each([ [[]], [[Mock.of({ url: 'url', apiKey: 'apiKey' })]], + [[ + Mock.of({ url: 'url_1', apiKey: 'apiKey_1' }), + Mock.of({ url: 'url_2', apiKey: 'apiKey_2' }), + ]], ])('displays provided server data', (duplicatedServers) => { - const wrapper = createWrapper(duplicatedServers); - const li = wrapper.find('li'); + setUp(duplicatedServers); if (duplicatedServers.length === 0) { - expect(li).toHaveLength(0); + expect(screen.queryByRole('listitem')).not.toBeInTheDocument(); } else if (duplicatedServers.length === 1) { - expect(li.first().find('b').html()).toEqual(`${duplicatedServers[0].url}`); - expect(li.last().find('b').html()).toEqual(`${duplicatedServers[0].apiKey}`); + const [firstItem, secondItem] = screen.getAllByRole('listitem'); + + expect(firstItem).toHaveTextContent(`URL: ${duplicatedServers[0].url}`); + expect(secondItem).toHaveTextContent(`API key: ${duplicatedServers[0].apiKey}`); } else { expect.assertions(duplicatedServers.length); - li.forEach((item, index) => { + screen.getAllByRole('listitem').forEach((item, index) => { const server = duplicatedServers[index]; - - expect(item.html()).toContain(`${server.url} - ${server.apiKey}`); + expect(item).toHaveTextContent(`${server.url} - ${server.apiKey}`); }); } }); - it('invokes onDiscard when appropriate button is clicked', () => { - const wrapper = createWrapper(); - const btn = wrapper.find(Button).first(); - - btn.simulate('click'); + it('invokes onDiscard when appropriate button is clicked', async () => { + const { user } = setUp(); + expect(onDiscard).not.toHaveBeenCalled(); + await user.click(screen.getByRole('button', { name: 'Discard' })); expect(onDiscard).toHaveBeenCalled(); }); - it('invokes onSave when appropriate button is clicked', () => { - const wrapper = createWrapper(); - const btn = wrapper.find(Button).last(); - - btn.simulate('click'); + it('invokes onSave when appropriate button is clicked', async () => { + const { user } = setUp(); + expect(onSave).not.toHaveBeenCalled(); + await user.click(screen.getByRole('button', { name: 'Save anyway' })); expect(onSave).toHaveBeenCalled(); }); }); diff --git a/test/servers/helpers/ServerError.test.tsx b/test/servers/helpers/ServerError.test.tsx index 014d6ff3..88847c39 100644 --- a/test/servers/helpers/ServerError.test.tsx +++ b/test/servers/helpers/ServerError.test.tsx @@ -1,49 +1,43 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { BrowserRouter } from 'react-router-dom'; +import { render, screen } from '@testing-library/react'; +import { MemoryRouter } from 'react-router-dom'; import { Mock } from 'ts-mockery'; import { ServerError as createServerError } from '../../../src/servers/helpers/ServerError'; import { NonReachableServer, NotFoundServer } from '../../../src/servers/data'; describe('', () => { - let wrapper: ShallowWrapper; const ServerError = createServerError(() => null); - afterEach(() => wrapper?.unmount()); - it.each([ [ Mock.all(), { - 'Could not find this Shlink server.': true, - 'Oops! Could not connect to this Shlink server.': false, - 'Make sure you have internet connection, and the server is properly configured and on-line.': false, - 'Alternatively, if you think you may have miss-configured this server': false, + found: ['Could not find this Shlink server.'], + notFound: [ + 'Oops! Could not connect to this Shlink server.', + 'Make sure you have internet connection, and the server is properly configured and on-line.', + /^Alternatively, if you think you may have miss-configured this server/, + ], }, ], [ Mock.of({ id: 'abc123' }), { - 'Could not find this Shlink server.': false, - 'Oops! Could not connect to this Shlink server.': true, - 'Make sure you have internet connection, and the server is properly configured and on-line.': true, - 'Alternatively, if you think you may have miss-configured this server': true, + found: [ + 'Oops! Could not connect to this Shlink server.', + 'Make sure you have internet connection, and the server is properly configured and on-line.', + /^Alternatively, if you think you may have miss-configured this server/, + ], + notFound: ['Could not find this Shlink server.'], }, ], - ])('renders expected information based on provided server type', (selectedServer, textsToFind) => { - wrapper = shallow( - + ])('renders expected information based on provided server type', (selectedServer, { found, notFound }) => { + render( + - , + , ); - const wrapperText = wrapper.html(); - const textPairs = Object.entries(textsToFind); - textPairs.forEach(([text, shouldBeFound]) => { - if (shouldBeFound) { - expect(wrapperText).toContain(text); - } else { - expect(wrapperText).not.toContain(text); - } - }); + found.forEach((text) => expect(screen.getByText(text)).toBeInTheDocument()); + notFound.forEach((text) => expect(screen.queryByText(text)).not.toBeInTheDocument()); }); }); diff --git a/test/servers/helpers/ServerForm.test.tsx b/test/servers/helpers/ServerForm.test.tsx index e15318e9..ad8c543c 100644 --- a/test/servers/helpers/ServerForm.test.tsx +++ b/test/servers/helpers/ServerForm.test.tsx @@ -1,30 +1,24 @@ -import { shallow, ShallowWrapper } from 'enzyme'; +import { fireEvent, render, screen } from '@testing-library/react'; import { ServerForm } from '../../../src/servers/helpers/ServerForm'; -import { InputFormGroup } from '../../../src/utils/forms/InputFormGroup'; describe('', () => { - let wrapper: ShallowWrapper; const onSubmit = jest.fn(); + const setUp = () => render(Something); - beforeEach(() => { - wrapper = shallow(Something); - }); - - afterEach(() => wrapper?.unmount()); afterEach(jest.resetAllMocks); it('renders components', () => { - expect(wrapper.find(InputFormGroup)).toHaveLength(3); - expect(wrapper.find('span')).toHaveLength(1); + setUp(); + + expect(screen.getAllByRole('textbox')).toHaveLength(3); + expect(screen.getByText('Something')).toBeInTheDocument(); }); - it('invokes submit callback when submit event is triggered', () => { - const form = wrapper.find('form'); - const preventDefault = jest.fn(); + it('invokes submit callback when submit event is triggered', async () => { + setUp(); - form.simulate('submit', { preventDefault }); - - expect(preventDefault).toHaveBeenCalled(); + expect(onSubmit).not.toHaveBeenCalled(); + fireEvent.submit(screen.getByRole('form'), { preventDefault: jest.fn() }); expect(onSubmit).toHaveBeenCalled(); }); });