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(); }); });