Added simple button and Write testcase for button

Real-Dev-Squad · Jan 17, 2025 · 7ad50d5 · 7ad50d5
1 parent 71e6959
commit 7ad50d5
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/__tests__/Unit/Components/modal/index.test.tsx b/__tests__/Unit/Components/modal/index.test.tsx
@@ -47,4 +47,21 @@ describe('Modal Component', () => {
         fireEvent.click(modalBox);
         expect(toggleMock).not.toHaveBeenCalled();
     });
+
+    test('closes modal when close button is clicked', () => {
+        const toggleMock = jest.fn();
+        const { getByTestId } = render(
+            <Modal isOpen={true} toggle={toggleMock} />
+        );
+        const closeButton = getByTestId('close-button');
+        fireEvent.click(closeButton);
+        expect(toggleMock).toHaveBeenCalled();
+    });
+
+    test('closes modal when Escape key is pressed', () => {
+        const toggleMock = jest.fn();
+        render(<Modal isOpen={true} toggle={toggleMock} />);
+        fireEvent.keyDown(document, { key: 'Escape' });
+        expect(toggleMock).toHaveBeenCalled();
+    });
 });
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -35,12 +35,13 @@ export default function Modal(props: ModalType) {
                         className={styles.modalBox}
                         data-testid="modal-box"
                     >
-                        <button
+                        <p
                             className={styles.closeButton}
                             onClick={props.toggle}
+                            data-testid="close-button"
                         >
-                            <RxCross2 size={20} />
-                        </button>
+                            <RxCross2 size={25} className="closeIcon" />
+                        </p>
                         {props.children}
                     </div>
                 </div>

diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss
@@ -41,10 +41,8 @@
     z-index: 999;
     padding: 4px 10px;
     border-radius: 3px;
-    background-color: $theme-primary-light;
-    color: $off-white;
-    &:hover {
-        background-color: $theme-primary;
-        color: $white;
-    }
+    size: 25px;
+    color: $gray;
+
 }
+