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(); + + 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(); + 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(); + + const content = await screen.findByText(mockingFeedData[0].content); + + // then + expect(content).toBeInTheDocument(); + }); +});