Add correct toast for UpdateTaskModal.tsx with full test coverage

PalisadoesFoundation · Nov 9, 2023 · 7b7b31b · 7b7b31b
1 parent d065a39
commit 7b7b31b
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 59 deletions.
diff --git a/src/components/TaskModals/DeleteTaskModal.test.tsx b/src/components/TaskModals/DeleteTaskModal.test.tsx
@@ -96,6 +96,5 @@ describe('Testing Delete Event Project Modal', () => {
         queryByText('There was an error in deleting the task!')
       ).toBeInTheDocument()
     );
-    await waitFor(() => expect(queryByText('Oops')).toBeInTheDocument());
   });
 });
diff --git a/src/components/TaskModals/DeleteTaskModal.tsx b/src/components/TaskModals/DeleteTaskModal.tsx
@@ -13,23 +13,21 @@ type ModalPropType = {
 
 export const DeleteTaskModal = (props: ModalPropType): JSX.Element => {
   const [deleteMutation] = useMutation(DELETE_EVENT_TASK_MUTATION);
-
-  const deleteProject = (): void => {
-    toast.warn('Deleting the task...');
-    deleteMutation({
+  const notify = (): Promise<void> => {
+    return toast.promise(deleteProject, {
+      pending: 'Deleting the task...',
+      success: 'Deleted the task successfully!',
+      error: 'There was an error in deleting the task!',
+    });
+  };
+  const deleteProject = async (): Promise<void> => {
+    await deleteMutation({
       variables: {
         id: props.taskId,
       },
-    })
-      .then(() => {
-        toast.success('Deleted the task successfully!');
-        props.refetchData();
-        props.handleClose();
-      })
-      .catch((err) => {
-        toast.error('There was an error in deleting the task!');
-        toast.error(err.message);
-      });
+    });
+    props.refetchData();
+    props.handleClose();
   };
 
   return (
@@ -56,7 +54,7 @@ export const DeleteTaskModal = (props: ModalPropType): JSX.Element => {
           >
             Cancel
           </Button>
-          <Button variant="danger" onClick={deleteProject} className="m-1">
+          <Button variant="danger" onClick={notify} className="m-1">
             Delete
           </Button>
         </Modal.Footer>

diff --git a/src/components/TaskModals/ManageVolunteerModal.test.tsx b/src/components/TaskModals/ManageVolunteerModal.test.tsx
@@ -131,7 +131,5 @@ describe('Testing Manage Volunteers Modal', () => {
         queryByText('There was an error in updating the volunteers!')
       ).toBeInTheDocument()
     );
-
-    await waitFor(() => expect(queryByText('Oops')).toBeInTheDocument());
   });
 });
diff --git a/src/components/TaskModals/ManageVolunteerModal.tsx b/src/components/TaskModals/ManageVolunteerModal.tsx
@@ -32,24 +32,22 @@ export const ManageVolunteerModal = (props: ModalPropType): JSX.Element => {
   useEffect(() => setVolunteers(props.volunteers), [props.volunteers]);
 
   const [setMutation] = useMutation(SET_TASK_VOLUNTEERS_MUTATION);
-
-  const handleSubmit = (): void => {
-    toast.warn('Updating the volunteers...');
-    setMutation({
+  const notify = (): Promise<void> => {
+    return toast.promise(handleSubmit, {
+      pending: 'Updating the volunteers...',
+      success: 'Successfully updated the volunteers!',
+      error: 'There was an error in updating the volunteers!',
+    });
+  };
+  const handleSubmit = async (): Promise<void> => {
+    await setMutation({
       variables: {
         id: props.taskId,
         volunteers: volunteers.map((volunteer) => volunteer._id),
       },
-    })
-      .then(() => {
-        toast.success('Successfully updated the volunteers!');
-        props.refetchData();
-        props.handleClose();
-      })
-      .catch((err) => {
-        toast.error('There was an error in updating the volunteers!');
-        toast.error(err.message);
-      });
+    });
+    props.refetchData();
+    props.handleClose();
   };
 
   return (
@@ -94,7 +92,7 @@ export const ManageVolunteerModal = (props: ModalPropType): JSX.Element => {
           <br />
         </Modal.Body>
         <Modal.Footer>
-          <Button variant="success" color="success" onClick={handleSubmit}>
+          <Button variant="success" color="success" onClick={notify}>
             Update Volunteers
           </Button>
         </Modal.Footer>

diff --git a/src/components/TaskModals/UpdateTaskModal.test.tsx b/src/components/TaskModals/UpdateTaskModal.test.tsx
@@ -229,8 +229,6 @@ describe('Testing Update Event Task Modal', () => {
         queryByText('There was an error in updating the task!')
       ).toBeInTheDocument()
     );
-
-    await waitFor(() => expect(queryByText('Oops')).toBeInTheDocument());
   });
 
   test('Manage volunteer modal and delete task modal should open and close properly', async () => {

diff --git a/src/components/TaskModals/UpdateTaskModal.tsx b/src/components/TaskModals/UpdateTaskModal.tsx
@@ -57,9 +57,15 @@ export const UpdateTaskModal = (props: ModalPropType): JSX.Element => {
   }, [props.task]);
 
   const [updateMutation] = useMutation(UPDATE_EVENT_PROJECT_TASK_MUTATION);
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
+  const notify = (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
     e.preventDefault();
+    return toast.promise(handleSubmit, {
+      pending: 'Updating the task...',
+      success: 'Updated the task successfully!',
+      error: 'There was an error in updating the task!',
+    });
+  };
+  const handleSubmit = async (): Promise<void> => {
     let toSubmit = true;
 
     if (title.trim().length == 0) {
@@ -70,28 +76,19 @@ export const UpdateTaskModal = (props: ModalPropType): JSX.Element => {
       toast.error('Description cannot be empty!');
       toSubmit = false;
     }
+    if (!toSubmit) return Promise.reject();
 
-    if (toSubmit) {
-      toast.warn('Updating the task...');
-      updateMutation({
-        variables: {
-          taskId: props.task._id,
-          title,
-          description,
-          deadline,
-          completed,
-        },
-      })
-        .then(() => {
-          toast.success('Updated the task successfully!');
-          props.refetchData();
-          props.handleClose();
-        })
-        .catch((err) => {
-          toast.error('There was an error in updating the task!');
-          toast.error(err.message);
-        });
-    }
+    await updateMutation({
+      variables: {
+        taskId: props.task._id,
+        title,
+        description,
+        deadline,
+        completed,
+      },
+    });
+    props.refetchData();
+    props.handleClose();
   };
 
   return (
@@ -107,7 +104,7 @@ export const UpdateTaskModal = (props: ModalPropType): JSX.Element => {
             Update the Event Task
           </Modal.Title>
         </Modal.Header>
-        <Form onSubmit={handleSubmit}>
+        <Form onSubmit={notify}>
           <Modal.Body>
             <Form.Group controlId="formBasicTitle">
               <Form.Label>Title</Form.Label>