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 ( +
+
open()}> + 샘플 이미지 1 + 샘플 이미지 2 + 샘플 이미지 3 + 샘플 이미지 4 +
+ + + 샘플 이미지 1 + + + 샘플 이미지 2 + + + 샘플 이미지 3 + + + 샘플 이미지 4 + + +
+ ); +}; + +describe('Dimmed Modal Test', () => { + test('이미지를 클릭하면 해당 이미지가 있는 모달을 렌더링한다.', async () => { + render(); + 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(); + const user = userEvent.setup(); + + const modalCloseBtn = screen.getByRole('button', { name: /모달 닫기/i }); + + // 닫기 버튼 클릭 + await user.click(modalCloseBtn); + + // 모달 닫기 버튼이 없음을 확인 + expect(modalCloseBtn).not.toBeInTheDocument(); + }); +});