Fixed: Added a button to close model. (#1312)

* Close button added * Added cross button on update modal * Formatting done * All Test Passed * Unnecessery Code Removed * Fix test to check if setIsOpen is called on close button click
Real-Dev-Squad · Feb 11, 2025 · f8c18bc · f8c18bc
1 parent 115bbfa
commit f8c18bc
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 21 deletions.
diff --git a/__tests__/Unit/Components/Tasks/TaskUpdateModal.test.tsx b/__tests__/Unit/Components/Tasks/TaskUpdateModal.test.tsx
@@ -1,26 +1,29 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { screen, fireEvent } from '@testing-library/react';
 import TaskUpdateModal from '@/components/taskDetails/TaskUpdateModal';
 import { Provider } from 'react-redux';
 import { store } from '@/app/store';
 import Modal from '@/components/Modal';
 import ProgressContainer from '@/components/tasks/card/progressContainer';
 import ProgressForm from '@/components/ProgressForm/ProgressForm';
 import getCurrentDate from '@/utils/getLatestDate';
+import { renderWithRouter } from '@/test_utils/createMockRouter';
 
 jest.mock('@/components/Modal', () =>
-    jest.fn(({ isOpen, toggle, children }) => (
-        <div data-testid="mock-modal">
-            {isOpen && (
-                <div>
-                    <button data-testid="close-modal" onClick={toggle}>
-                        Close
-                    </button>
-                    {children}
-                </div>
-            )}
-        </div>
-    ))
+    jest.fn(({ isOpen, toggle, children }) =>
+        isOpen ? (
+            <div data-testid="mock-modal">
+                <button
+                    data-testid="close-modal"
+                    onClick={toggle}
+                    aria-label="Close"
+                >
+                    Close
+                </button>
+                {children}
+            </div>
+        ) : null
+    )
 );
 
 jest.mock('@/components/tasks/card/progressContainer', () =>
@@ -65,7 +68,7 @@ describe('TaskUpdateModal', () => {
     });
 
     it('should renders the modal when open', () => {
-        render(
+        renderWithRouter(
             <Provider store={store()}>
                 <TaskUpdateModal {...defaultProps} />
             </Provider>
@@ -82,7 +85,7 @@ describe('TaskUpdateModal', () => {
     });
 
     it('should call setIsOpen when close button is clicked', () => {
-        render(
+        renderWithRouter(
             <Provider store={store()}>
                 <TaskUpdateModal {...defaultProps} />
             </Provider>
@@ -95,7 +98,7 @@ describe('TaskUpdateModal', () => {
     });
 
     it('should pass correct props to ProgressContainer', () => {
-        render(
+        renderWithRouter(
             <Provider store={store()}>
                 <TaskUpdateModal {...defaultProps} />
             </Provider>
@@ -111,7 +114,7 @@ describe('TaskUpdateModal', () => {
     });
 
     it('should pass correct props to ProgressForm', () => {
-        render(
+        renderWithRouter(
             <Provider store={store()}>
                 <TaskUpdateModal {...defaultProps} />
             </Provider>
@@ -127,7 +130,7 @@ describe('TaskUpdateModal', () => {
     });
 
     it('should display the correct date from getCurrentDate', () => {
-        render(
+        renderWithRouter(
             <Provider store={store()}>
                 <TaskUpdateModal {...defaultProps} />
             </Provider>
@@ -137,7 +140,7 @@ describe('TaskUpdateModal', () => {
     });
 
     it('should not render any content when modal is closed', () => {
-        render(
+        renderWithRouter(
             <Provider store={store()}>
                 <TaskUpdateModal {...defaultProps} isOpen={false} />
             </Provider>
@@ -164,7 +167,7 @@ describe('TaskUpdateModal', () => {
             )
         );
 
-        render(
+        renderWithRouter(
             <Provider store={store()}>
                 <TaskUpdateModal
                     {...defaultProps}
@@ -178,4 +181,42 @@ describe('TaskUpdateModal', () => {
         expect(mockOnUpdateSuccess).toHaveBeenCalled();
         expect(mockSetIsOpen).toHaveBeenCalledWith(false);
     });
+
+    it('should call the setIsOpen when close button is clicked', async () => {
+        renderWithRouter(
+            <Provider store={store()}>
+                <TaskUpdateModal {...defaultProps} />
+            </Provider>,
+            { query: { dev: 'true' } }
+        );
+
+        const closeButton = screen.getByTestId(
+            'task-update-modal-close-button'
+        );
+
+        fireEvent.click(closeButton);
+        expect(mockSetIsOpen).toHaveBeenCalledWith(false);
+    });
+
+    it('should show the close button when dev is true', () => {
+        renderWithRouter(<TaskUpdateModal {...defaultProps} />, {
+            query: { dev: 'true' },
+        });
+
+        const closeButton = screen.getByTestId(
+            'task-update-modal-close-button'
+        );
+        expect(closeButton).toBeInTheDocument();
+    });
+
+    it('should not show the close button when dev is false', async () => {
+        renderWithRouter(<TaskUpdateModal {...defaultProps} />, {
+            query: { dev: 'false' },
+        });
+
+        const closeButton = screen.queryByTestId(
+            'task-update-modal-close-button'
+        );
+        expect(closeButton).not.toBeInTheDocument();
+    });
 });
diff --git a/src/components/taskDetails/TaskUpdateModal.tsx b/src/components/taskDetails/TaskUpdateModal.tsx
@@ -6,7 +6,7 @@ import { questions } from '@/constants/ProgressUpdates';
 import ProgressForm from '../ProgressForm/ProgressForm';
 import task from '@/interfaces/task.type';
 import { useRouter } from 'next/router';
-
+import { IoMdClose } from 'react-icons/io';
 type Props = {
     isOpen: boolean;
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -26,9 +26,22 @@ function TaskUpdateModal({
     editedTaskDetails,
     onUpdateSuccess,
 }: Props) {
+    const router = useRouter();
+    const { dev } = router.query;
+
     return (
         <Modal isOpen={isOpen} toggle={() => setIsOpen(false)}>
             <div className={styles.taskUpdateModal}>
+                {dev === 'true' && (
+                    <button
+                        className={styles.closeButton}
+                        onClick={() => setIsOpen(false)}
+                        data-testid="task-update-modal-close-button"
+                        aria-label="Close"
+                    >
+                        <IoMdClose size={25} />
+                    </button>
+                )}
                 <h3 className={styles.updateProgress}>Update Progress</h3>
                 <section className={styles.containerUpdate}>
                     <h1 className={styles.formHeading}>Task Updates</h1>

diff --git a/src/components/taskDetails/task-details.module.scss b/src/components/taskDetails/task-details.module.scss
@@ -152,6 +152,7 @@ $base-unit: 4px;
     max-height: 5rem;
     overflow-y: scroll;
     padding: 4px 0 4px 0;
+
     div {
         padding: 2px 0 2px 0;
     }
@@ -223,6 +224,7 @@ $base-unit: 4px;
         color: black;
     }
 }
+
 .dateUpdated {
     font-size: $base-unit * 4;
     color: #7e7f80;
@@ -241,8 +243,23 @@ $base-unit: 4px;
 }
 
 .taskUpdateModal {
+    position: relative;
     min-width: fit-content;
     max-width: 796px;
     width: 80vw;
     padding: 1rem;
 }
+
+.closeButton {
+    position: absolute;
+    top: 0.125rem;
+    right: 0.625rem;
+    cursor: pointer;
+    padding: 0.25rem 0.625rem;
+    color: $gray;
+    border: none;
+    background-color: transparent;
+    &:hover {
+        color: $black;
+    }
+}