✨ 숨김 및 신고 테스트 추가 및 기존 테스트 리팩토링 (#73)

* feat: 테스트 서버 handler 등록
* feat: React Query 적용
* style: 통합 테스트 파일 명 수정
* feat: 무한 스크롤 단위 테스트
* feat: 신고 완료 시, 응답 포맷 수정
* feat: 북마크 단위 테스트 수정
* test: 북마크 단위 테스트 리팩토링
* feat: mutation 결과 반환
* feat: 북마크 단위 테스트 리팩토링
* feat: 좋아요 기능 단위 테스트 리팩토링
* test: 숨기기 기능 단위 테스트
* style: 주석 추가
* test: 신고 기능 단위 테스트
* feat: 신고하기 통합 테스트
* style: 파일명 컨벤션 유지

Closes #48, #71

src/app/mocks/handler/feed.ts

@@ -187,6 +187,6 @@ export const feedHandlers = [
       hiddens[formattedFeedId] = true;
     }
 
-    return createHttpSuccessResponse({});
+    return createHttpSuccessResponse({ isReported: true });
   }),
 ];

src/features/feed-bookmark/api/useBookmarks.tsx

@@ -10,7 +10,11 @@ import { updateBookmarkStatusInFeeds } from '../lib';
 export const useBookmarks = (feedId: number, isBookmarked: boolean) => {
   const queryClient = useQueryClient();
 
-  const { mutate: handleBookmarkFeed, isPending } = useMutation({
+  const {
+    data,
+    mutate: handleBookmarkFeed,
+    isPending,
+  } = useMutation({
     mutationFn: () =>
       isBookmarked
         ? requestUnbookmarkFeed(feedId)
@@ -51,5 +55,5 @@ export const useBookmarks = (feedId: number, isBookmarked: boolean) => {
     },
   });
 
-  return { handleBookmarkFeed, isPending };
+  return { data, handleBookmarkFeed, isPending };
 };

src/features/feed-bookmark/test/useBookmarks.unit.test.tsx

@@ -0,0 +1,44 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { createQueryClientWrapper } from '@/shared/tests';
+
+import { useBookmarks } from '../api';
+
+describe('북마크 기능 테스트', () => {
+  it('북마크 상태가 아닐 때, 북마크 버튼을 클릭하면 북마크 된다', async () => {
+    // given
+    const { result } = renderHook(() => useBookmarks(1, false), {
+      wrapper: createQueryClientWrapper(),
+    });
+
+    // when
+    act(() => result.current.handleBookmarkFeed());
+
+    // then
+    await waitFor(() => {
+      const {
+        data: { isBookmarked },
+      } = result.current.data;
+      expect(isBookmarked).toBeTruthy();
+    });
+  });
+
+  it('북마크 상태일 때, 북마크 버튼을 클릭하면 북마크가 취소된다', async () => {
+    // given
+    const { result } = renderHook(() => useBookmarks(1, true), {
+      wrapper: createQueryClientWrapper(),
+    });
+
+    // when
+    act(() => result.current.handleBookmarkFeed());
+
+    // then
+    await waitFor(() => {
+      const {
+        data: { isBookmarked },
+      } = result.current.data;
+      expect(isBookmarked).toBeFalsy();
+    });
+  });
+});

src/features/feed-hides/api/useHideCancle.tsx

@@ -10,10 +10,14 @@ async function requestHideCancelFeed(feedId: number) {
 }
 
 export const useHideCancel = (feedId: number) => {
-  const { mutate: hideCancelFeed, isPending } = useMutation({
+  const {
+    data,
+    mutate: hideCancelFeed,
+    isPending,
+  } = useMutation({
     mutationFn: () => requestHideCancelFeed(feedId),
     onMutate: () => cancleHiddenFeed(feedId),
   });
 
-  return { hideCancelFeed, isPending };
+  return { data, hideCancelFeed, isPending };
 };

src/features/feed-hides/api/useHides.tsx

@@ -10,10 +10,14 @@ async function requestHideFeed(feedId: number) {
 }
 
 export const useHides = (feedId: number) => {
-  const { mutate: hideFeed, isPending } = useMutation({
+  const {
+    data,
+    mutate: hideFeed,
+    isPending,
+  } = useMutation({
     mutationFn: () => requestHideFeed(feedId),
     onMutate: () => addHiddenFeed(feedId, 'hidden'),
   });
 
-  return { hideFeed, isPending };
+  return { data, hideFeed, isPending };
 };

src/features/feed-hides/test/useHide.unit.test.tsx

@@ -0,0 +1,46 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { createQueryClientWrapper } from '@/shared/tests';
+
+import { useHideCancel, useHides } from '../api';
+
+describe('숨기기 기능 테스트', () => {
+  it('숨기기 상태가 아닐 때, 숨기기 버튼을 클릭하면 게시물이 숨겨진다.', async () => {
+    // given
+    const { result } = renderHook(() => useHides(1), {
+      wrapper: createQueryClientWrapper(),
+    });
+
+    // when
+    act(() => result.current.hideFeed());
+
+    // then
+    await waitFor(() => {
+      const {
+        data: { isHidden },
+      } = result.current.data;
+
+      expect(isHidden).toBeTruthy();
+    });
+  });
+
+  it('숨기기 상태일 때, 취소 버튼을 클릭하면 숨기기가 취소된다.', async () => {
+    // given
+    const { result } = renderHook(() => useHideCancel(1), {
+      wrapper: createQueryClientWrapper(),
+    });
+
+    // when
+    act(() => result.current.hideCancelFeed());
+
+    // then
+    await waitFor(() => {
+      const {
+        data: { isHidden },
+      } = result.current.data;
+
+      expect(isHidden).toBeFalsy();
+    });
+  });
+});

src/features/feed-main-like/api/useLikes.tsx

@@ -10,7 +10,11 @@ import { updateLikeStatusInFeeds } from '../lib';
 export const useLikes = (feedId: number, isLiked: boolean) => {
   const queryClient = useQueryClient();
 
-  const { mutate: handleLikeFeed, isPending } = useMutation({
+  const {
+    data,
+    mutate: handleLikeFeed,
+    isPending,
+  } = useMutation({
     mutationFn: () =>
       isLiked ? requestUnlikeFeed(feedId) : requestLikeFeed(feedId),
     // mutate가 호출되면 ✨낙관적 업데이트를 위해 onMutate를 실행
@@ -53,5 +57,5 @@ export const useLikes = (feedId: number, isLiked: boolean) => {
     },
   });
 
-  return { handleLikeFeed, isPending };
+  return { data, handleLikeFeed, isPending };
 };

src/features/feed-main-like/test/useLikes.unit.test.tsx

@@ -0,0 +1,46 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { createQueryClientWrapper } from '@/shared/tests';
+
+import { useLikes } from '../api';
+
+describe('좋아요 기능 테스트', () => {
+  it('좋아요 상태가 아닐 때, 좋아요 버튼을 클릭하면 좋아요 상태가 변경된다.', async () => {
+    // given
+    const { result } = renderHook(() => useLikes(1, false), {
+      wrapper: createQueryClientWrapper(),
+    });
+
+    // when
+    act(() => result.current.handleLikeFeed());
+
+    // then
+    await waitFor(() => {
+      const {
+        data: { isLiked },
+      } = result.current.data;
+
+      expect(isLiked).toBeTruthy();
+    });
+  });
+
+  it('좋아요 상태일 때, 좋아요 버튼을 클릭하면 좋아요가 취소된다.', async () => {
+    // given
+    const { result } = renderHook(() => useLikes(1, true), {
+      wrapper: createQueryClientWrapper(),
+    });
+
+    // when
+    act(() => result.current.handleLikeFeed());
+
+    // then
+    await waitFor(() => {
+      const {
+        data: { isLiked },
+      } = result.current.data;
+
+      expect(isLiked).toBeFalsy();
+    });
+  });
+});

src/features/feed-reports/api/useSubmitReports.tsx

@@ -13,7 +13,11 @@ async function requestFeedReports(feedId: number, body: FeedReportForm) {
 }
 
 export const useSubmitReports = (feedId: number) => {
-  const { mutate: reportFeed, isPending } = useMutation({
+  const {
+    data,
+    mutate: reportFeed,
+    isPending,
+  } = useMutation({
     mutationKey: ['feed-report'],
     mutationFn: (body: FeedReportForm) => requestFeedReports(feedId, body),
     onError: (_, body) => saveFeedReportForm(feedId, body),
@@ -29,5 +33,5 @@ export const useSubmitReports = (feedId: number) => {
     },
   });
 
-  return { reportFeed, isPending };
+  return { data, reportFeed, isPending };
 };

src/features/feed-reports/test/FeedReports.integration.test.tsx

@@ -0,0 +1,44 @@
+import { expect, test, vi } from 'vitest';
+
+import { fireEvent, render, screen } from '@/shared/tests';
+import { Toast } from '@/shared/toast';
+
+import { FeedReportsForm } from '../ui';
+
+vi.mock('@/shared/ui/modal/ModalOverlay', () => ({
+  ModalOverlay: ({ children }: { children: JSX.Element }) => (
+    <section>{children}</section>
+  ),
+}));
+
+vi.mock('@/features/feed-reports/model', () => ({
+  useReportForm: () => ({
+    content: '',
+    isBlind: false,
+    isDisabledReportForm: false,
+    createReportBody: () => ({
+      category: '상업적/홍보성',
+      content: '',
+      isBlind: false,
+    }),
+  }),
+}));
+
+test('신고하기 버튼을 클릭하면, 신고 접수 토스트 메시지가 표시된다', async () => {
+  // given
+  render(
+    <>
+      <FeedReportsForm feedId={1} onClose={() => {}} />
+      <Toast />
+    </>,
+  );
+
+  const reportBtn = screen.getByRole('button', { name: '신고하기' });
+
+  // when
+  fireEvent.click(reportBtn);
+
+  // then
+  const reportAcceptMsg = await screen.findByText('신고가 접수되었어요');
+  expect(reportAcceptMsg).toBeInTheDocument();
+});