From 76e96a528351ed9a4168bf35ad005c6079c3a840 Mon Sep 17 00:00:00 2001
From: Homin <coc1381@naver.com>
Date: Tue, 15 Oct 2024 18:52:56 +0900
Subject: [PATCH] =?UTF-8?q?[KAN-123]=20test:=20FilterDate=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/Filter/FilterDate.test.tsx | 47 +++----------------
 src/app/components/Filter/FilterDate.tsx      |  1 +
 2 files changed, 7 insertions(+), 41 deletions(-)

diff --git a/src/app/components/Filter/FilterDate.test.tsx b/src/app/components/Filter/FilterDate.test.tsx
index 1960b633..fe737f17 100644
--- a/src/app/components/Filter/FilterDate.test.tsx
+++ b/src/app/components/Filter/FilterDate.test.tsx
@@ -52,51 +52,16 @@ describe('FilterDate Component Test', () => {
     expect(iconElement).toBeInTheDocument();
   });
 
-  // 클릭 시 모달이 열리고 닫히는지 확인
-  it('toggles dropdown on click', () => {
-    const filterElement = screen.getByTestId('filterDate');
-
-    fireEvent.click(filterElement);
-    expect(screen.getByTestId('calendar-modal')).toBeInTheDocument();
+  // 날짜 선택을 누르면 모달이 보이는지 확인
+  it('toggles dropdown visibility based on isOpen state', () => {
+    const filterElement = screen.getByText('날짜 선택');
 
     fireEvent.click(filterElement);
-    expect(screen.queryByTestId('calendar-modal')).not.toBeInTheDocument();
-  });
 
-  // 외부 영역 클릭 시 모달이 닫히는지 확인
-  it('closes dropdown when clicked outside', () => {
-    const filterElement = screen.getByTestId('filterDate');
+    const modalWrapper = screen.getByTestId('calendar-modal-wrapper');
 
-    fireEvent.click(filterElement);
-    expect(screen.getByTestId('calendar-modal')).toBeInTheDocument();
-
-    fireEvent.mouseDown(document.body);
-    expect(screen.queryByTestId('calendar-modal')).not.toBeInTheDocument();
-  });
-
-  // 날짜 선택 시 상태 업데이트 확인
-  it('selects a date and updates state', () => {
-    const filterElement = screen.getByTestId('filterDate');
-    fireEvent.click(filterElement);
-
-    const dateInput = screen.getByTestId('date-input');
-
-    // 내일 날짜를 input에 세팅
-    const date = new Date();
-    date.setDate(date.getDate() + 1);
-    const dateStr = date.toISOString().slice(0, 10);
-    fireEvent.change(dateInput, { target: { value: dateStr } });
-
-    // '적용' 버튼 클릭
-    const applyButton = screen.getByText('적용');
-    fireEvent.click(applyButton);
-
-    // state 업데이트 확인
-    expect(filterElement).toHaveClass('text-var-gray-50 bg-var-gray-900');
-    // 선택된 날짜 표시 확인
-    expect(filterElement).toHaveTextContent(formatDate(dateStr));
-    // 모달이 닫히는지 확인
-    expect(screen.queryByTestId('calendar-modal')).not.toBeInTheDocument();
+    expect(modalWrapper).toHaveStyle('visibility: visible');
+    expect(modalWrapper).not.toHaveClass('pointer-events-none');
   });
 
   // 초기화 버튼 클릭 시 상태 업데이트 확인
diff --git a/src/app/components/Filter/FilterDate.tsx b/src/app/components/Filter/FilterDate.tsx
index 013b45c2..14aa9af1 100644
--- a/src/app/components/Filter/FilterDate.tsx
+++ b/src/app/components/Filter/FilterDate.tsx
@@ -78,6 +78,7 @@ const FilterDate = ({
         className={`absolute z-dropdown mt-4 h-auto w-full min-w-max overflow-y-auto rounded-xl bg-var-gray-50 ring-2 ring-var-gray-400 transition-opacity duration-300 ease-in-out dark:bg-neutral-800 dark:ring-neutral-700 ${
           isOpen ? 'z-[100] opacity-100' : 'pointer-events-none opacity-0'
         }`}
+        data-testid='calendar-modal-wrapper'
       >
         <CalendarModal
           initialSelectedData={selectedDate}