Ensured DeleteServerModal is not removed from the DOM before close transition has finished

src/servers/DeleteServerModal.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useRef } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import { useNavigate } from 'react-router-dom';
 import { ServerWithId } from './data';
@@ -18,14 +18,22 @@ export const DeleteServerModal: FC<DeleteServerModalConnectProps> = (
   { server, toggle, isOpen, deleteServer, redirectHome = true },
 ) => {
   const navigate = useNavigate();
-  const closeModal = () => {
+  const doDelete = useRef<boolean>(false);
-    deleteServer(server);
+  const toggleAndDelete = () => {
+    doDelete.current = true;
     toggle();
+  };
+  const onClosed = () => {
+    if (!doDelete.current) {
+      return;
+    }
+
+    deleteServer(server);
     redirectHome && navigate('/');
   };
 
   return (
-    <Modal isOpen={isOpen} toggle={toggle} centered>
+    <Modal isOpen={isOpen} toggle={toggle} centered onClosed={onClosed}>
       <ModalHeader toggle={toggle} className="text-danger">Remove server</ModalHeader>
       <ModalBody>
         <p>Are you sure you want to remove <b>{server ? server.name : ''}</b>?</p>
@@ -38,7 +46,7 @@ export const DeleteServerModal: FC<DeleteServerModalConnectProps> = (
       </ModalBody>
       <ModalFooter>
         <Button color="link" onClick={toggle}>Cancel</Button>
-        <Button color="danger" onClick={() => closeModal()}>Delete</Button>
+        <Button color="danger" onClick={toggleAndDelete}>Delete</Button>
       </ModalFooter>
     </Modal>
   );

test/servers/DeleteServerModal.test.tsx

@@ -1,25 +1,37 @@
-import { screen } from '@testing-library/react';
+import { FC } from 'react';
+import { screen, waitFor } 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 '../__helpers__/setUpTest';
+import { useToggle } from '../../src/utils/helpers/hooks';
 
 jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
 
+const DeleteServerModalWrapper: FC<{ name: string; deleteServer: () => void }> = ({ name, deleteServer }) => {
+  const [isOpen, toggle] = useToggle(true);
+
+  return (
+    <DeleteServerModal
+      server={Mock.of<ServerWithId>({ name })}
+      toggle={toggle}
+      isOpen={isOpen}
+      deleteServer={deleteServer}
+    />
+  );
+};
+
 describe('<DeleteServerModal />', () => {
   const deleteServerMock = jest.fn();
   const navigate = jest.fn();
-  const toggleMock = jest.fn();
   const serverName = 'the_server_name';
   const setUp = () => {
     (useNavigate as any).mockReturnValue(navigate);
 
     return renderWithEvents(
-      <DeleteServerModal
+      <DeleteServerModalWrapper
-        server={Mock.of<ServerWithId>({ name: serverName })}
+        name={serverName}
-        toggle={toggleMock}
-        isOpen
         deleteServer={deleteServerMock}
       />,
     );
@@ -47,10 +59,8 @@ describe('<DeleteServerModal />', () => {
   ])('toggles when clicking cancel button', async (getButton) => {
     const { user } = setUp();
 
-    expect(toggleMock).not.toHaveBeenCalled();
     await user.click(getButton());
 
-    expect(toggleMock).toHaveBeenCalledTimes(1);
     expect(deleteServerMock).not.toHaveBeenCalled();
     expect(navigate).not.toHaveBeenCalled();
   });
@@ -58,13 +68,11 @@ describe('<DeleteServerModal />', () => {
   it('deletes server when clicking accept button', async () => {
     const { user } = setUp();
 
-    expect(toggleMock).not.toHaveBeenCalled();
     expect(deleteServerMock).not.toHaveBeenCalled();
     expect(navigate).not.toHaveBeenCalled();
     await user.click(screen.getByRole('button', { name: 'Delete' }));
 
-    expect(toggleMock).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(deleteServerMock).toHaveBeenCalledTimes(1));
-    expect(deleteServerMock).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(navigate).toHaveBeenCalledTimes(1));
-    expect(navigate).toHaveBeenCalledTimes(1);
   });
 });