diff --git a/src/servers/DeleteServerModal.tsx b/src/servers/DeleteServerModal.tsx index 911ba3d0..8fba141c 100644 --- a/src/servers/DeleteServerModal.tsx +++ b/src/servers/DeleteServerModal.tsx @@ -26,7 +26,7 @@ export const DeleteServerModal: FC = ( return ( - Remove server + Remove server

Are you sure you want to remove {server ? server.name : ''}?

diff --git a/test/servers/DeleteServerModal.test.tsx b/test/servers/DeleteServerModal.test.tsx index 39b3832e..3bf0ec51 100644 --- a/test/servers/DeleteServerModal.test.tsx +++ b/test/servers/DeleteServerModal.test.tsx @@ -1,5 +1,5 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { Mock } from 'ts-mockery'; import { useNavigate } from 'react-router-dom'; import { DeleteServerModal } from '../../src/servers/DeleteServerModal'; @@ -8,56 +8,63 @@ import { ServerWithId } from '../../src/servers/data'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() })); describe('', () => { - let wrapper: ShallowWrapper; const deleteServerMock = jest.fn(); const navigate = jest.fn(); const toggleMock = jest.fn(); const serverName = 'the_server_name'; - - beforeEach(() => { + const setUp = () => { (useNavigate as any).mockReturnValue(navigate); - wrapper = shallow( - ({ name: serverName })} - toggle={toggleMock} - isOpen - deleteServer={deleteServerMock} - />, - ); - }); - afterEach(() => wrapper.unmount()); + return { + user: userEvent.setup(), + ...render( + ({ name: serverName })} + toggle={toggleMock} + isOpen + deleteServer={deleteServerMock} + />, + ), + }; + }; + afterEach(jest.clearAllMocks); it('renders a modal window', () => { - expect(wrapper.find(Modal)).toHaveLength(1); - expect(wrapper.find(ModalHeader)).toHaveLength(1); - expect(wrapper.find(ModalBody)).toHaveLength(1); - expect(wrapper.find(ModalFooter)).toHaveLength(1); + setUp(); + + expect(screen.getByRole('dialog')).toBeInTheDocument(); + expect(screen.getByRole('heading')).toHaveTextContent('Remove server'); }); it('displays the name of the server as part of the content', () => { - const modalBody = wrapper.find(ModalBody); + setUp(); - expect(modalBody.find('p').first().text()).toEqual( - `Are you sure you want to remove ${serverName}?`, - ); + expect(screen.getByText(/^Are you sure you want to remove/)).toBeInTheDocument(); + expect(screen.getByText(serverName)).toBeInTheDocument(); }); - it('toggles when clicking cancel button', () => { - const cancelBtn = wrapper.find(Button).first(); + it.each([ + [() => screen.getByRole('button', { name: 'Cancel' })], + [() => screen.getByLabelText('Close')], + ])('toggles when clicking cancel button', async (getButton) => { + const { user } = setUp(); - cancelBtn.simulate('click'); + expect(toggleMock).not.toHaveBeenCalled(); + await user.click(getButton()); expect(toggleMock).toHaveBeenCalledTimes(1); expect(deleteServerMock).not.toHaveBeenCalled(); expect(navigate).not.toHaveBeenCalled(); }); - it('deletes server when clicking accept button', () => { - const acceptBtn = wrapper.find(Button).last(); + it('deletes server when clicking accept button', async () => { + const { user } = setUp(); - acceptBtn.simulate('click'); + expect(toggleMock).not.toHaveBeenCalled(); + expect(deleteServerMock).not.toHaveBeenCalled(); + expect(navigate).not.toHaveBeenCalled(); + await user.click(screen.getByRole('button', { name: 'Delete' })); expect(toggleMock).toHaveBeenCalledTimes(1); expect(deleteServerMock).toHaveBeenCalledTimes(1);