From 3c6198be59fb54852602af447ae7dab6055cf83a Mon Sep 17 00:00:00 2001
From: JWJung-99 <39busy@naver.com>
Date: Fri, 20 Dec 2024 17:16:23 +0900
Subject: [PATCH] =?UTF-8?q?Test:=20DimmedModal=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tests/Dimmedmodal.test.tsx | 64 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 tests/Dimmedmodal.test.tsx

diff --git a/tests/Dimmedmodal.test.tsx b/tests/Dimmedmodal.test.tsx
new file mode 100644
index 0000000..d90d94f
--- /dev/null
+++ b/tests/Dimmedmodal.test.tsx
@@ -0,0 +1,64 @@
+import useModal from '@hooks/useModal';
+import DimmedModal from '@pages/Studio/components/DimmedModal';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SwiperSlide } from 'swiper/react';
+import { describe } from 'vitest';
+
+const TestPage = () => {
+  const { open } = useModal(1);
+
+  return (
+    <div>
+      <div onClick={() => open()}>
+        <img src="/img/sample-1.png" alt="샘플 이미지 1" />
+        <img src="/img/sample-2.png" alt="샘플 이미지 2" />
+        <img src="/img/sample-1.png" alt="샘플 이미지 3" />
+        <img src="/img/sample-2.png" alt="샘플 이미지 4" />
+      </div>
+      <DimmedModal>
+        <SwiperSlide key={1} data-testid={1}>
+          <img src="/img/sample-1.png" alt="샘플 이미지 1" />
+        </SwiperSlide>
+        <SwiperSlide key={2} data-testid={2}>
+          <img src="/img/sample-2.png" alt="샘플 이미지 2" />
+        </SwiperSlide>
+        <SwiperSlide key={3} data-testid={3}>
+          <img src="/img/sample-1.png" alt="샘플 이미지 3" />
+        </SwiperSlide>
+        <SwiperSlide key={4} data-testid={4}>
+          <img src="/img/sample-2.png" alt="샘플 이미지 4" />
+        </SwiperSlide>
+      </DimmedModal>
+    </div>
+  );
+};
+
+describe('Dimmed Modal Test', () => {
+  test('이미지를 클릭하면 해당 이미지가 있는 모달을 렌더링한다.', async () => {
+    render(<TestPage />);
+    const user = userEvent.setup();
+    const img = screen.getByRole('img', { name: /샘플 이미지 1/i });
+
+    // 이미지 클릭
+    await user.click(img);
+
+    // 모달 닫기 버튼이 있는지 확인하여 모달 렌더링 확인
+    const modalCloseBtn = screen.getByRole('button', { name: /모달 닫기/i });
+
+    expect(modalCloseBtn).toBeInTheDocument();
+  });
+
+  test('닫기 버튼을 클릭하면 모달을 종료한다.', async () => {
+    render(<TestPage />);
+    const user = userEvent.setup();
+
+    const modalCloseBtn = screen.getByRole('button', { name: /모달 닫기/i });
+
+    // 닫기 버튼 클릭
+    await user.click(modalCloseBtn);
+
+    // 모달 닫기 버튼이 없음을 확인
+    expect(modalCloseBtn).not.toBeInTheDocument();
+  });
+});