Merge pull request #56 from route-master/test

Test

src/components/AddPlanCard/ModalContent/ModalContent.tsx

@@ -82,33 +82,31 @@ function Modalcontent({ setModalOpen }: Props): JSX.Element {
         <div>
           <div>여행 일정 선택</div>
           <div className={styles.datepickers_wrapper} onClick={handleClick}>
-            <label htmlFor="beginDate">
-              <DatePicker
-                id="beginDate"
-                showIcon
-                dateFormat="yyyy-MM-dd"
-                selectsStart
-                selected={beginDateInput}
-                endDate={endDateInput}
-                calendarClassName={styles.calendar}
-                onChange={(date: Date) => setBeginDateInput(date)}
-              />
-            </label>
+            <DatePicker
+              aria-labelledby="beginDateLabel"
+              id="beginDate"
+              showIcon
+              dateFormat="yyyy-MM-dd"
+              selectsStart
+              selected={beginDateInput}
+              endDate={endDateInput}
+              calendarClassName={styles.calendar}
+              onChange={(date: Date) => setBeginDateInput(date)}
+            />
             -
-            <label htmlFor="endDate">
-              <DatePicker
-                id="endDate"
-                showIcon
-                dateFormat="yyyy-MM-dd"
-                selected={endDateInput}
-                minDate={beginDateInput}
-                startDate={beginDateInput}
-                endDate={endDateInput}
-                calendarClassName={styles.calendar}
-                onChange={(date: Date) => setEndDateInput(date)}
-                selectsEnd
-              />
-            </label>
+            <DatePicker
+              aria-labelledby="endDateLabel"
+              id="endDate"
+              showIcon
+              dateFormat="yyyy-MM-dd"
+              selected={endDateInput}
+              minDate={beginDateInput}
+              startDate={beginDateInput}
+              endDate={endDateInput}
+              calendarClassName={styles.calendar}
+              onChange={(date: Date) => setEndDateInput(date)}
+              selectsEnd
+            />
           </div>
         </div>
         <button

src/components/Modal/Modal.test.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Modal from './Modal';
+
+describe('Modal', () => {
+  const Content = <div>test</div>;
+
+  function MockModal() {
+    const [modalOpen, setModalOpen] = useState(false);
+
+    return (
+      <div>
+        <button type="button" onClick={() => setModalOpen(true)}>
+          Open Modal Btn
+        </button>
+        {modalOpen && (
+          <Modal
+            setModalOpen={setModalOpen}
+            Content={Content}
+            mywidth="100px"
+            myheight="100px"
+          />
+        )}
+      </div>
+    );
+  }
+
+  it('renders Modal with content', () => {
+    render(<MockModal />);
+    fireEvent.click(screen.getByText('Open Modal Btn'));
+    expect(screen.getByText('test')).toBeInTheDocument();
+  });
+
+  it('closes Modal on close button click', () => {
+    render(<MockModal />);
+    fireEvent.click(screen.getByText('Open Modal Btn'));
+    fireEvent.click(screen.getByText('x'));
+    expect(screen.queryByText('test')).not.toBeInTheDocument();
+  });
+
+  it('closes when clicking on the background', () => {
+    render(<MockModal />);
+    fireEvent.click(screen.getByText('Open Modal Btn'));
+    const background = screen.getByTestId('modal-background'); // Add this data-testid to your background div
+    fireEvent.click(background);
+    expect(screen.queryByText('test')).not.toBeInTheDocument();
+  });
+});

src/components/Modal/Modal.tsx

@@ -34,6 +34,7 @@ function Modal({
       ref={bgRef}
       className={styles.background}
       onClick={(e) => closeModal(e)}
+      data-testid="modal-background"
     >
       <div className={styles.container} style={size}>
         <div className={styles.closebtn_wrapper}>