From 9cbece5874210e7626f25ce2a4c506f3699e2e54 Mon Sep 17 00:00:00 2001 From: cloud0406 Date: Wed, 22 Jan 2025 14:47:36 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8[Feat]=20jest=20=EC=A0=88=EB=8C=80?= =?UTF-8?q?=20=EA=B2=BD=EB=A1=9C=20=EB=A7=A4=ED=95=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jest.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/jest.config.js b/jest.config.js index 2d756f45..7d3102f7 100644 --- a/jest.config.js +++ b/jest.config.js @@ -11,6 +11,10 @@ const config = { coverageProvider: 'v8', testEnvironment: 'jsdom', // setupFilesAfterEnv: ['/src/setupTests.ts'], + moduleNameMapper: { + // 절대 경로 매핑 + '^@/(.*)$': '/src/$1', + }, }; // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async From 67f81420cb5db155fe8073ec9ffa88b9f768cfa0 Mon Sep 17 00:00:00 2001 From: cloud0406 Date: Wed, 22 Jan 2025 14:48:14 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=85[Test]=20imagefiled=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=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 --- .../container/ImageField/ImageField.test.tsx | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 src/features/club-create/container/ImageField/ImageField.test.tsx diff --git a/src/features/club-create/container/ImageField/ImageField.test.tsx b/src/features/club-create/container/ImageField/ImageField.test.tsx new file mode 100644 index 00000000..fe7fe395 --- /dev/null +++ b/src/features/club-create/container/ImageField/ImageField.test.tsx @@ -0,0 +1,40 @@ +import { render, screen } from '@testing-library/react'; +import ImageField from '@/features/club-create/container/ImageField/ImageField'; +import { useImageField } from '@/features/club-create/hooks'; +import '@testing-library/jest-dom'; + +jest.mock('@/features/club-create/hooks/useImageField', () => ({ + useImageField: jest.fn(() => ({ + selectedFileName: '', + handleFileChange: jest.fn(), + })), +})); + +describe('ImageField', () => { + const mockRegister = jest.fn(); + const mockSetValue = jest.fn(); + + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('이미지가 선택되지 않았을 때 이미지 업로드 UI를 표시한다', () => { + render(); + + expect(screen.getByTestId('camera-icon')).toBeInTheDocument(); + expect(screen.getByTestId('file-input')).toBeInTheDocument(); + }); + + it('이미지 선택 시 파일명을 표시한다', () => { + const testFileName = 'test.jpg'; + (useImageField as jest.Mock).mockImplementationOnce(() => ({ + selectedFileName: testFileName, + handleFileChange: jest.fn(), + })); + + render(); + + expect(screen.getByTestId('image-icon')).toBeInTheDocument(); + expect(screen.getByText(testFileName)).toBeInTheDocument(); + }); +}); From 41cf768dea682563fbc299e0824361a83834bbaf Mon Sep 17 00:00:00 2001 From: cloud0406 Date: Wed, 22 Jan 2025 14:48:39 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=9A=9A[Rename]=20=EA=B2=BD=EB=A1=9C?= =?UTF-8?q?=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../club-create/container/FormContainer.tsx | 2 +- .../container/{ => ImageField}/ImageField.tsx | 15 ++++++++++----- 2 files changed, 11 insertions(+), 6 deletions(-) rename src/features/club-create/container/{ => ImageField}/ImageField.tsx (78%) diff --git a/src/features/club-create/container/FormContainer.tsx b/src/features/club-create/container/FormContainer.tsx index 681159a1..10f9684d 100644 --- a/src/features/club-create/container/FormContainer.tsx +++ b/src/features/club-create/container/FormContainer.tsx @@ -5,11 +5,11 @@ import { CreateClubFormField, InputField, } from '@/features/club-create/components'; -import ImageField from '@/features/club-create/container/ImageField'; import RadioButtonGroup from '@/features/club-create/container/RadioButtonGroup'; import DatePickerContainer from '@/features/club-create/container/DatePickerField'; import { useBookClubForm } from '@/features/club-create/hooks'; import PopUp from '@/components/pop-up/PopUp'; +import ImageField from '@/features/club-create/container/ImageField/ImageField'; function FormContainer() { const { diff --git a/src/features/club-create/container/ImageField.tsx b/src/features/club-create/container/ImageField/ImageField.tsx similarity index 78% rename from src/features/club-create/container/ImageField.tsx rename to src/features/club-create/container/ImageField/ImageField.tsx index 64a7568a..0b471efe 100644 --- a/src/features/club-create/container/ImageField.tsx +++ b/src/features/club-create/container/ImageField/ImageField.tsx @@ -1,10 +1,10 @@ 'use client'; import { UseFormRegister, UseFormSetValue } from 'react-hook-form'; -import { BookClubForm } from '../types'; -import { CreateClubFormField } from '../components'; +import { BookClubForm } from '../../types'; +import { CreateClubFormField } from '../../components'; import { useImageField } from '@/features/club-create/hooks'; -import { CameraIcon, ImageIcon } from '../../../../public/icons'; +import { CameraIcon, ImageIcon } from '../../../../../public/icons'; interface ImageUploadContainerProps { register: UseFormRegister; @@ -24,7 +24,9 @@ function ImageField({ register, setValue, error }: ImageUploadContainerProps) { {selectedFileName ? ( <>
- +
+ +
{selectedFileName} @@ -32,7 +34,9 @@ function ImageField({ register, setValue, error }: ImageUploadContainerProps) { ) : (
- +
+ +
이미지를 첨부해 주세요 (jpg, jpeg) @@ -43,6 +47,7 @@ function ImageField({ register, setValue, error }: ImageUploadContainerProps) { accept="image/*" className="absolute inset-0 cursor-pointer opacity-0" onChange={handleFileChange} + data-testid="file-input" />
From fe1afeb8e0b054b45f4e554de4c50e80e56a7d6b Mon Sep 17 00:00:00 2001 From: cloud0406 Date: Wed, 22 Jan 2025 14:56:16 +0900 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=9A=9A[Rename]=20radiobuttonGroup=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/club-create/container/FormContainer.tsx | 2 +- .../container/{ => RadioButtonGroup}/RadioButtonGroup.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) rename src/features/club-create/container/{ => RadioButtonGroup}/RadioButtonGroup.tsx (97%) diff --git a/src/features/club-create/container/FormContainer.tsx b/src/features/club-create/container/FormContainer.tsx index 10f9684d..a223cac5 100644 --- a/src/features/club-create/container/FormContainer.tsx +++ b/src/features/club-create/container/FormContainer.tsx @@ -5,7 +5,7 @@ import { CreateClubFormField, InputField, } from '@/features/club-create/components'; -import RadioButtonGroup from '@/features/club-create/container/RadioButtonGroup'; +import RadioButtonGroup from '@/features/club-create/container/RadioButtonGroup/RadioButtonGroup'; import DatePickerContainer from '@/features/club-create/container/DatePickerField'; import { useBookClubForm } from '@/features/club-create/hooks'; import PopUp from '@/components/pop-up/PopUp'; diff --git a/src/features/club-create/container/RadioButtonGroup.tsx b/src/features/club-create/container/RadioButtonGroup/RadioButtonGroup.tsx similarity index 97% rename from src/features/club-create/container/RadioButtonGroup.tsx rename to src/features/club-create/container/RadioButtonGroup/RadioButtonGroup.tsx index a52556d1..b8af4947 100644 --- a/src/features/club-create/container/RadioButtonGroup.tsx +++ b/src/features/club-create/container/RadioButtonGroup/RadioButtonGroup.tsx @@ -2,8 +2,8 @@ import Card from '@/components/card/Card'; import { useSelectAddress } from '@/features/club-create/hooks'; import { BookClubForm } from '@/features/club-create/types'; import { UseFormSetValue, UseFormWatch } from 'react-hook-form'; -import InputField from '../components/InputField'; -import CreateClubFormField from '../components/CreateClubFormField'; +import InputField from '../../components/InputField'; +import CreateClubFormField from '../../components/CreateClubFormField'; interface RadioButtonGroupProps { options: { label: string; value: string; description?: string }[]; From 6d5de62be223bb08f2cb1e8a88fb4a0ccb1723c9 Mon Sep 17 00:00:00 2001 From: cloud0406 Date: Wed, 22 Jan 2025 15:11:15 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=E2=9C=85[Test]=20RadiobuttonGroup=20test?= =?UTF-8?q?=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 --- .../RadioButtonGroup.test.tsx | 52 +++++++++++++++++++ .../RadioButtonGroup/RadioButtonGroup.tsx | 1 + 2 files changed, 53 insertions(+) create mode 100644 src/features/club-create/container/RadioButtonGroup/RadioButtonGroup.test.tsx diff --git a/src/features/club-create/container/RadioButtonGroup/RadioButtonGroup.test.tsx b/src/features/club-create/container/RadioButtonGroup/RadioButtonGroup.test.tsx new file mode 100644 index 00000000..b3e33cd1 --- /dev/null +++ b/src/features/club-create/container/RadioButtonGroup/RadioButtonGroup.test.tsx @@ -0,0 +1,52 @@ +import { render, screen } from '@testing-library/react'; +import RadioButtonGroup from './RadioButtonGroup'; +import '@testing-library/jest-dom'; + +jest.mock('@/features/club-create/hooks/useSelectAddress', () => ({ + useSelectAddress: jest.fn(() => ({ + handleRadioChange: jest.fn(), + })), +})); + +describe('RadioButtonGroup', () => { + const mockRegister = jest.fn(); + const mockSetValue = jest.fn(); + const mockWatch = jest.fn(); + const mockErrors = {}; + + const options = [ + { label: '오프라인', value: 'OFFLINE' }, + { label: '온라인', value: 'ONLINE' }, + ]; + + it('OFFLINE 선택 시 주소 입력 필드가 표시된다', () => { + render( + , + ); + + expect(screen.getByTestId('address-input')).toBeInTheDocument(); + }); + + it('OFFLINE이 아닌 옵션 선택 시 주소 입력 필드가 표시되지 않는다', () => { + render( + , + ); + + expect(screen.queryByTestId('address-input')).not.toBeInTheDocument(); + }); +}); diff --git a/src/features/club-create/container/RadioButtonGroup/RadioButtonGroup.tsx b/src/features/club-create/container/RadioButtonGroup/RadioButtonGroup.tsx index b8af4947..370415bd 100644 --- a/src/features/club-create/container/RadioButtonGroup/RadioButtonGroup.tsx +++ b/src/features/club-create/container/RadioButtonGroup/RadioButtonGroup.tsx @@ -114,6 +114,7 @@ function RadioButtonGroup({