Merge pull request #169 from kdt-8-4/156-testCode

[Test] #156 카테고리 검색 기능(통합) 테스트 구현, Given-When-Then 구조 재설정, 해시태그 검색 통합 테스트 수정
kdt-8-4 · Jun 16, 2024 · 77af658 · 77af658
2 parents 38ee7c3 + 08ae17e
commit 77af658
Show file tree

Hide file tree

Showing 8 changed files with 333 additions and 59 deletions.
diff --git a/weatherfit_refactoring/__test__/FeedHashTagSearch.int.test.tsx b/weatherfit_refactoring/__test__/FeedHashTagSearch.int.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import FeedSearch from '@/Components/Molecules/post/FeedSearch'
-import FeedContent from '@/Components/Molecules/post/FeedContent'
+import { FeedData } from '@/Store/FeedData'
 
 // msw 서버 설정을 위한 import
 import { http, HttpResponse } from 'msw'
@@ -16,7 +16,7 @@ const handlers = [
   http.get('https://www.jerneithe.site/board/search', info => {
     const url = new URL(info.request.url)
     const inputHashtag = url.searchParams.get('hashtags')
-    if (inputHashtag === '#카페 #겨울 #행복') {
+    if (inputHashtag === '카페,겨울,행복') {
       return HttpResponse.json([feed_data[0]])
     }
   }),
@@ -42,7 +42,7 @@ describe('피드 페이지 통합 테스트', () => {
     //       imageUrl:
     //         'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJ0OerVCpI1NxInMd93w4JtvWoGmeRf4l8ZlLM7-A--g&s',
     //     },
-    //     category: ['숏 패딩', '컨버스'],
+    //     category: ['데님 팬츠', '컨버스'],
     //     hashTag: ['카페', '행복', '겨울'],
     //     weatherIcon: 'https://openweathermap.org/img/wn/13d.png',
     //     likelist: [
@@ -62,13 +62,10 @@ describe('피드 페이지 통합 테스트', () => {
 
     test('해시태그 입력 후 검색 버튼 클릭 시 해당하는 코디가 보여진다.', async () => {
       // Given
-      // 가져온 코디에 대한 blurURI
-      const BLURURI: string =
-        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAIAAAAGpYjXAAAACXBIWXMAAAsTAAALEwEAmpwYAAABBUlEQVR4nAH6AAX/AODb0PHr3/v269DKwmlfWHR1coiIiLu7uQDy7eL68+nW08goJygYFxgLCwxoaGimpqUA8O3i//rtoZ6XExITKCcoBgYHTExMkJCPAO3o3/z262NgXRYWFignJwICAi8tLYaGhgD17+bu6d2Uk4wvLS0VFBUMDAw9PDx5eXkA8e/m8evg8evfMC8wBgYIGBgXb29viIiIAOvl2/fy6O/q4DMyMgAAABYWFnJycouLiwD79uv99uv//vOIh4ZMTEtWVVVycnKJiYgAzcKv2M259+zVr62mpqaidHRya21tg4SFAHJpXHJmWoN1ZV9WTX10bFZRS01HQHhwZvYaezP3SOmNAAAAAElFTkSuQmCC'
       render(
         <div>
           <FeedSearch />
-          <FeedContent DataforFeed={feed_data[0]} blurDataUrl={BLURURI} />
+          {/* <FeedContent DataforFeed={feed_data[0]} blurDataUrl={BLURURI} /> */}
         </div>,
       )
       const input: HTMLInputElement = screen.getByPlaceholderText(
@@ -82,15 +79,7 @@ describe('피드 페이지 통합 테스트', () => {
 
       // Then
       await waitFor(() => {
-        const nickName = screen.getByText(/홍길동/)
-        const temperature = screen.getByText('1.2℃')
-        const category = screen.getByLabelText('코디 정보 숏 패딩,컨버스')
-        const likeCount = screen.getByText('2')
-
-        expect(nickName).toBeInTheDocument()
-        expect(temperature).toBeInTheDocument()
-        expect(category).toBeInTheDocument()
-        expect(likeCount).toBeInTheDocument()
+        expect(FeedData.getState().feedData[0]).toStrictEqual(feed_data[0])
       })
     })
   })

diff --git a/weatherfit_refactoring/package-lock.json b/weatherfit_refactoring/package-lock.json
diff --git a/weatherfit_refactoring/public/dummy_data/feedData.json b/weatherfit_refactoring/public/dummy_data/feedData.json
@@ -9,7 +9,7 @@
       "imageId": 1,
       "imageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJ0OerVCpI1NxInMd93w4JtvWoGmeRf4l8ZlLM7-A--g&s"
     },
-    "category": ["숏 패딩", "컨버스"],
+    "category": ["데님 팬츠", "컨버스"],
     "hashTag": ["카페", "행복", "겨울"],
     "weatherIcon": "https://openweathermap.org/img/wn/13d.png",
     "likelist": [
@@ -27,7 +27,7 @@
   },
   {
     "boardId": 2,
-    "category": ["후드 집업", "가죽자켓", "컨버스", "운동화", "베레모"],
+    "category": ["후드 집업", "가죽자켓", "컨버스", "운동화", "셔츠"],
     "createDate": "2024-02-14T08:00:00.000Z",
     "hashTag": ["카페", "행복", "겨울", "과", "가을", "사이"],
     "images": {

diff --git a/weatherfit_refactoring/src/Components/Molecules/FeedCategory.test.tsx b/weatherfit_refactoring/src/Components/Molecules/FeedCategory.test.tsx
@@ -0,0 +1,25 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import FeedCategory from './FeedCategory'
+
+//카테고리 선택창 Mocking
+
+jest.mock('./post/FeedCategorySelect', () => {
+  return () => <div>카테고리 선택창</div>
+})
+
+describe('FeedCategory 컴포넌트 유닛 테스트', () => {
+  test('카테고리 버튼을 클릭했을 때, 카테고리 선택창이 나타나는지 확인한다.', async () => {
+    // Given
+    render(<FeedCategory />)
+
+    // When
+    const categoryButton = screen.getAllByRole('button')[0]
+    userEvent.click(categoryButton)
+
+    // Then
+    await waitFor(() => {
+      expect(screen.getByText('카테고리 선택창')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/weatherfit_refactoring/src/Components/Molecules/post/DetailImage.tsx b/weatherfit_refactoring/src/Components/Molecules/post/DetailImage.tsx
@@ -30,7 +30,7 @@ export default function DetailImage({
       </div>
       {images.length > 1 && (
         <div
-          className="absolute flex w-full cursor-pointer px-10 flex justify-between items-center"
+          className="absolute flex w-full cursor-pointer px-10 justify-between items-center"
           data-testid="image-button">
           <IconStore
             iconStyle={IconStyle.PREV}

diff --git a/weatherfit_refactoring/src/Components/Molecules/post/Detailimage.test.tsx b/weatherfit_refactoring/src/Components/Molecules/post/Detailimage.test.tsx
@@ -37,17 +37,21 @@ const images: IMAGE[] = [
 
 describe('DetailImage 화면 테스트', () => {
   test('이미지가 한 개일때, 이미지 이동 버튼이 생성되지 않는다.', () => {
-    // Given + When
+    // Given
     render(<DetailImage images={image} />)
+
+    //When
     const imageButtonElement = screen.queryByTestId('image-button')
 
     // Then
     expect(imageButtonElement).toBeNull()
   })
 
   test('이미지가 두 개 이상일때, 이미지 이동 버튼이 생성된다.', () => {
-    // Given + When
+    // Given
     render(<DetailImage images={images} />)
+
+    //When
     const imageButtonElement = screen.queryByTestId('image-button')
 
     // Then
@@ -58,9 +62,9 @@ describe('DetailImage 화면 테스트', () => {
     it('이전 버튼 클릭 시, 3번째 이미지를 보여준다.', async () => {
       // Given
       render(<DetailImage images={images} />)
-      const prevButton = screen.getByRole('img', { name: 'prev' })
 
       // When
+      const prevButton = screen.getByRole('img', { name: 'prev' })
       userEvent.click(prevButton)
 
       // Then
@@ -73,9 +77,9 @@ describe('DetailImage 화면 테스트', () => {
     it('이전 버튼을 2번 클릭 시, 2번째 이미지를 보여준다.', async () => {
       // Given
       render(<DetailImage images={images} />)
-      const prevButton = screen.getByRole('img', { name: 'prev' })
 
       // When
+      const prevButton = screen.getByRole('img', { name: 'prev' })
       userEvent.click(prevButton)
       userEvent.click(prevButton)
 
@@ -89,9 +93,9 @@ describe('DetailImage 화면 테스트', () => {
     it('이전 버튼을 3번 클릭 시, 처음 이미지로 돌아온다', async () => {
       // Given
       render(<DetailImage images={images} />)
-      const prevButton = screen.getByAltText('prev')
 
       // When
+      const prevButton = screen.getByAltText('prev')
       userEvent.click(prevButton)
       userEvent.click(prevButton)
       userEvent.click(prevButton)
@@ -106,9 +110,9 @@ describe('DetailImage 화면 테스트', () => {
     it('다음 버튼 클릭 시, 2번째 이미지를 보여준다.', async () => {
       // Given
       render(<DetailImage images={images} />)
-      const nextButton = screen.getByRole('img', { name: 'next' })
 
       // When
+      const nextButton = screen.getByRole('img', { name: 'next' })
       userEvent.click(nextButton)
 
       // Then
@@ -121,9 +125,9 @@ describe('DetailImage 화면 테스트', () => {
     it('다음 버튼 2번 클릭 시, 3번째 이미지를 보여준다.', async () => {
       // Given
       render(<DetailImage images={images} />)
-      const nextButton = screen.getByRole('img', { name: 'next' })
 
       // When
+      const nextButton = screen.getByRole('img', { name: 'next' })
       userEvent.click(nextButton)
       userEvent.click(nextButton)
 
@@ -137,9 +141,9 @@ describe('DetailImage 화면 테스트', () => {
     it('다음 버튼 3번 클릭 시, 처음 이미지로 돌아온다.', async () => {
       // Given
       render(<DetailImage images={images} />)
-      const nextButton = screen.getByRole('img', { name: 'next' })
 
       // When
+      const nextButton = screen.getByRole('img', { name: 'next' })
       userEvent.click(nextButton)
       userEvent.click(nextButton)
       userEvent.click(nextButton)