From 6bae5cf185ced59d4c6a2aaf6c816d67b7581ca9 Mon Sep 17 00:00:00 2001
From: BangDori <44726494+BangDori@users.noreply.github.com>
Date: Wed, 8 May 2024 14:18:19 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=ED=94=BC=EB=93=9C=20=EB=A9=94?=
 =?UTF-8?q?=EC=9D=B8=20=EB=AA=A9=EB=A1=9D=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=9E=91=EC=84=B1=20(#39)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 피드 메인 목록에 대한 테스트 코드 작성
* style: 피드 메인 리스트 테스트 타이틀 수정
* style: 파일명 수정
---
 .../test/FeedMainList.error.test.tsx          | 29 +++++++++
 .../feed-main-list/test/FeedMainList.test.tsx | 65 +++++++++++++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 src/widgets/feed-main-list/test/FeedMainList.error.test.tsx
 create mode 100644 src/widgets/feed-main-list/test/FeedMainList.test.tsx

diff --git a/src/widgets/feed-main-list/test/FeedMainList.error.test.tsx b/src/widgets/feed-main-list/test/FeedMainList.error.test.tsx
new file mode 100644
index 0000000..92e5eb8
--- /dev/null
+++ b/src/widgets/feed-main-list/test/FeedMainList.error.test.tsx
@@ -0,0 +1,29 @@
+import { HttpResponse, http } from 'msw';
+import { expect, test } from 'vitest';
+
+import { server } from '@/setupTest';
+import { render, screen } from '@/shared/tests/setup';
+
+import { FeedMainList } from '..';
+
+test('피드 메인 페이지 에러 발생 시, 네트워크 에러 메시지가 화면에 표시된다.', async () => {
+  // given
+  server.use(
+    http.get('/feeds', async () => {
+      return new HttpResponse(null, { status: 524 }); // 타임아웃 에러 반환
+    }),
+  );
+  render(<FeedMainList />);
+
+  const errorTitle = await screen.findByRole('heading', {
+    level: 1,
+    name: '인터넷에 연결되지 않았어요',
+  });
+  const retryButton = await screen.findByRole('button', {
+    name: '재시도하기',
+  });
+
+  // then
+  expect(errorTitle).toBeInTheDocument();
+  expect(retryButton).toBeInTheDocument();
+});
diff --git a/src/widgets/feed-main-list/test/FeedMainList.test.tsx b/src/widgets/feed-main-list/test/FeedMainList.test.tsx
new file mode 100644
index 0000000..4e5e290
--- /dev/null
+++ b/src/widgets/feed-main-list/test/FeedMainList.test.tsx
@@ -0,0 +1,65 @@
+import { HttpResponse, http } from 'msw';
+import { describe, expect, it } from 'vitest';
+
+import { server } from '@/setupTest';
+import { render, screen } from '@/shared/tests/setup';
+
+import { FeedMainList } from '..';
+
+const mockingFeedData = [
+  {
+    id: 1,
+    user: { id: 1, profileImage: '', name: '강병준' },
+    content: 'Feed Content 1',
+    images: [],
+
+    likeCount: 0,
+    commentCount: 0,
+
+    isLiked: false,
+    isBookmark: false,
+
+    createdAt: '2024-04-16 12:00:00',
+    updatedAt: '2024-04-16 12:00:00',
+  },
+];
+
+describe('피드 메인 페이지에서', () => {
+  it('스켈레톤 UI가 화면에 먼저 렌더링된다.', async () => {
+    // given
+    render(<FeedMainList />);
+    const skeletonFeedMainList = document.querySelector(
+      '.skeleton-feed-section',
+    );
+
+    // then
+    expect(skeletonFeedMainList).toBeInTheDocument();
+  });
+
+  it('스켈레톤 UI 이후 콘텐츠가 정상적으로 렌더링된다.', async () => {
+    // given
+    server.use(
+      http.get('/feeds', async () => {
+        return HttpResponse.json(
+          {
+            code: '2000',
+            data: {
+              feeds: mockingFeedData,
+              currentPageNumber: 1,
+              pageSize: 1,
+              numberOfElements: 1,
+              hasNextPage: false,
+            },
+          },
+          { status: 200 },
+        );
+      }),
+    );
+    render(<FeedMainList />);
+
+    const content = await screen.findByText(mockingFeedData[0].content);
+
+    // then
+    expect(content).toBeInTheDocument();
+  });
+});