[FE][댓글모듈] 좋아요 기능 테스트 코드 추가 (#308)

frontend/reply-module/src/__test__/intergration/guestUserComment.test.tsx

@@ -1,11 +1,11 @@
 import "@testing-library/jest-dom/extend-expect";
-import { fireEvent, render, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import CommentInput from "../../components/organisms/CommentInput/index";
 import CommentList from "../../components/organisms/CommentList";
 import { useCreateComment, useDeleteComment, useEditComment, useConfirmGuestPassword } from "../../hooks";
 import { useLikeComment } from "../../hooks/useLikeComment";
 import { Comment } from "../../types";
-import { comments } from "../fixture/comments";
+import { comments as _comments } from "../fixture/comments";
 
 jest.mock("../../hooks/useEditComment");
 jest.mock("../../hooks/useDeleteComment");
@@ -23,8 +23,15 @@ window.confirm = function (str) {
   console.log(str);
   return true;
 };
-describe("비로그인 유저 댓글 조회", () => {
+describe("비로그인 유저 댓글 CRUD 테스트 코드를 작성한다.", () => {
   beforeEach(() => {
+    (useCreateComment as jest.Mock).mockImplementation(() => {
+      return {
+        createComment: () => {},
+        isLoading: false,
+        error: false
+      };
+    });
     (useEditComment as jest.Mock).mockImplementation(() => {
       return {
         editComment: () => {},
@@ -60,184 +67,145 @@ describe("비로그인 유저 댓글 조회", () => {
       };
     });
   });
-  test("비로그인 유저인 경우, 비로그인 유저가 작성한 모든 댓글들에 수정/삭제 옵션이 노출된다.", () => {
-    const _comments: Comment[] = JSON.parse(JSON.stringify(comments));
-    const commentList = render(<CommentList comments={_comments} project={undefined} />);
-    const $$comments = commentList.container.querySelectorAll("section > div:nth-child(2) > div");
-
-    $$comments.forEach(($comment, index) => {
-      if (_comments[index].user.type === "GuestUser") {
-        expect($comment.querySelectorAll("img")[1]).toBeVisible();
-      }
-    });
-  });
-
-  test("비로그인 유저인 경우, 모든 댓글들이 왼쪽에 정렬된다", async () => {
-    const _comments: Comment[] = JSON.parse(JSON.stringify(comments));
-    const commentList = render(<CommentList comments={_comments} project={undefined} />);
 
-    await waitFor(() => {
+  describe("비로그인 유저 댓글 조회", () => {
+    test("비로그인 유저인 경우, 비로그인 유저가 작성한 모든 댓글들에 수정/삭제 옵션이 노출된다.", () => {
+      const comments: Comment[] = JSON.parse(JSON.stringify(_comments));
+      const commentList = render(<CommentList comments={comments} project={undefined} />);
       const $$comments = commentList.container.querySelectorAll("section > div:nth-child(2) > div");
 
       $$comments.forEach(($comment, index) => {
-        if (_comments[index].user.type === "GuestUser") {
-          expect($comment).toHaveStyle("flex-direction: row");
+        if (comments[index].user.type === "GuestUser") {
+          expect($comment.querySelectorAll("img")[1]).toBeVisible();
         }
       });
     });
-  });
-});
 
-describe("비로그인 유저 댓글 생성", () => {
-  beforeEach(() => {
-    (useCreateComment as jest.Mock).mockImplementation(() => {
-      return {
-        createComment: () => {}
-      };
+    test("비로그인 유저인 경우, 모든 댓글들이 왼쪽에 정렬된다", async () => {
+      const comments: Comment[] = JSON.parse(JSON.stringify(_comments));
+      const commentList = render(<CommentList comments={comments} project={undefined} />);
+
+      await waitFor(() => {
+        const $$comments = commentList.container.querySelectorAll("section > div:nth-child(2) > div > div");
+
+        $$comments.forEach(($comment, index) => {
+          if (comments[index].user.type === "GuestUser") {
+            expect($comment).toHaveStyle("flex-direction: row");
+          }
+        });
+      });
     });
   });
-  test("비로그인 유저인 경우, 댓글 입력에 게스트 비밀번호/이름 입력란이 노출된다.", () => {
-    const commentInput = render(<CommentInput user={undefined} url={null} projectSecretKey={null} />);
-    const $commentInputArea = commentInput.container.querySelector("textarea");
-    const [$guestNickName, $guestPassword] = Array.from(commentInput.container.querySelectorAll("form  input"));
-
-    expect($commentInputArea).toBeVisible();
-    expect($guestNickName).toBeVisible();
-    expect($guestPassword).toBeVisible();
-  });
+  describe("비로그인 유저 댓글 생성", () => {
+    test("비로그인 유저인 경우, 댓글 입력에 게스트 비밀번호/이름 입력란이 노출된다.", () => {
+      const commentInput = render(<CommentInput user={undefined} url={null} projectSecretKey={null} />);
+      const $commentInputArea = commentInput.container.querySelector("textarea");
+      const [$guestNickName, $guestPassword] = Array.from(commentInput.container.querySelectorAll("form  input"));
 
-  test("비로그인 유저인 경우, 댓글 생성 시 댓글 내용/작성자 이름/비밀번호를 모두 입력해야 댓글을 작성할 수 있다.", async () => {
-    const commentInput = render(<CommentInput user={undefined} url={null} projectSecretKey={null} />);
-    const $commentInputArea = commentInput.container.querySelector("textarea") as HTMLElement;
-    const [$guestNickName, $guestPassword] = Array.from(commentInput.container.querySelectorAll("form  input"));
-    const $submitButton = commentInput.container.querySelector("button") as HTMLButtonElement;
+      expect($commentInputArea).toBeVisible();
+      expect($guestNickName).toBeVisible();
+      expect($guestPassword).toBeVisible();
+    });
 
-    fireEvent.change($commentInputArea, { target: { value: "댓글 내용" } });
-    fireEvent.change($guestNickName, { target: { value: "게스트 이름" } });
-    fireEvent.change($guestPassword, { target: { value: "게스트 비밀번호" } });
+    test("비로그인 유저인 경우, 댓글 생성 시 댓글 내용/작성자 이름/비밀번호를 모두 입력해야 댓글을 작성할 수 있다.", async () => {
+      const commentInput = render(<CommentInput user={undefined} url={null} projectSecretKey={null} />);
+      const $commentInputArea = commentInput.container.querySelector("textarea") as HTMLElement;
+      const [$guestNickName, $guestPassword] = Array.from(commentInput.container.querySelectorAll("form  input"));
+      const $submitButton = commentInput.container.querySelector("button") as HTMLButtonElement;
 
-    fireEvent.click($submitButton);
+      fireEvent.change($commentInputArea, { target: { value: "댓글 내용" } });
+      fireEvent.change($guestNickName, { target: { value: "게스트 이름" } });
+      fireEvent.change($guestPassword, { target: { value: "게스트 비밀번호" } });
 
-    await waitFor(() => {
-      expect(($commentInputArea as HTMLTextAreaElement).value).toBe("");
-      expect(($guestNickName as HTMLInputElement).value).toBe("");
-      expect(($guestPassword as HTMLInputElement).value).toBe("");
-    });
+      fireEvent.click($submitButton);
+
+      await waitFor(() => {
+        expect(($commentInputArea as HTMLTextAreaElement).value).toBe("");
+        expect(($guestNickName as HTMLInputElement).value).toBe("");
+        expect(($guestPassword as HTMLInputElement).value).toBe("");
+      });
 
-    fireEvent.change($commentInputArea, { target: { value: "댓글 내용" } });
-    fireEvent.change($guestNickName, { target: { value: "게스트 이름" } });
-    fireEvent.change($guestPassword, { target: { value: "게스트 비밀번호" } });
+      fireEvent.change($commentInputArea, { target: { value: "댓글 내용" } });
+      fireEvent.change($guestNickName, { target: { value: "게스트 이름" } });
+      fireEvent.change($guestPassword, { target: { value: "게스트 비밀번호" } });
 
-    fireEvent.click($submitButton);
+      fireEvent.click($submitButton);
 
-    await waitFor(() => {
-      expect(($commentInputArea as HTMLTextAreaElement).value).toBe("댓글 내용");
-      expect(($guestNickName as HTMLInputElement).value).toBe("게스트 이름");
-      expect(($guestPassword as HTMLInputElement).value).toBe("게스트 비밀번호");
+      await waitFor(() => {
+        expect(($commentInputArea as HTMLTextAreaElement).value).toBe("댓글 내용");
+        expect(($guestNickName as HTMLInputElement).value).toBe("게스트 이름");
+        expect(($guestPassword as HTMLInputElement).value).toBe("게스트 비밀번호");
+      });
     });
   });
-});
 
-describe("비로그인 유저 댓글 수정", () => {
-  beforeEach(() => {
-    // (request as jest.Mock).mockImplementation(() => {});
+  describe("비로그인 유저 댓글 수정", () => {
+    test("비로그인 유저는 댓글을 수정시, 비밀번호를 입력해야 수정내용 입력란이 활성화 된다.", async () => {
+      const comments: Comment[] = JSON.parse(JSON.stringify(_comments));
+      const guestUserComments = comments.filter(comment => comment.user.type === "GuestUser");
+      const commentList = render(<CommentList user={undefined} comments={guestUserComments} project={undefined} />);
 
-    (useEditComment as jest.Mock).mockImplementation(() => {
-      return {
-        editComment: () => {},
-        isLoading: false,
-        error: false
-      };
-    });
+      const firstThreeDotButton = commentList.getAllByAltText("댓글 옵션")[0];
+      fireEvent.click(firstThreeDotButton);
 
-    (useDeleteComment as jest.Mock).mockImplementation(() => {
-      return {
-        deleteComment: () => {},
-        isLoading: false,
-        error: false
-      };
-    });
-    (useConfirmGuestPassword as jest.Mock).mockImplementation(() => {
-      return {
-        isValid: true,
-        getPasswordConfirmResult: () => {
-          return {
-            data: {
-              isCorrectPassword: true
-            }
-          };
-        }
-      };
+      const firstEditButton = commentList.getAllByTestId("comment-option-edit-button")[0];
+      fireEvent.click(firstEditButton);
+
+      const firstPasswordSubmitButton = commentList.getByText("입력");
+      fireEvent.click(firstPasswordSubmitButton);
+
+      await waitFor(() => {
+        const editConfirmButtons = commentList.getByText("등록");
+        expect(editConfirmButtons).toBeVisible();
+      });
     });
   });
-  test("비로그인 유저는 댓글을 수정시, 비밀번호를 입력해야 수정내용 입력란이 활성화 된다.", async () => {
-    const _comments: Comment[] = JSON.parse(JSON.stringify(comments));
-    const guestUserComments = _comments.filter(comment => comment.user.type === "GuestUser");
-    const commentList = render(<CommentList user={undefined} comments={guestUserComments} project={undefined} />);
 
-    const firstThreeDotButton = commentList.getAllByAltText("댓글 옵션")[0];
-    fireEvent.click(firstThreeDotButton);
+  describe("비로그인 유저 댓글 삭제", () => {
+    test("비로그인 유저는 댓글을 수정시, 비밀번호를 입력해야 삭제를 할 수 있다.", async () => {
+      const comments: Comment[] = JSON.parse(JSON.stringify(_comments));
+      const guestUserComments = comments.filter(comment => comment.user.type === "GuestUser");
+      const commentList = render(<CommentList comments={guestUserComments} project={undefined} />);
+
+      const firstThreeDotButton = commentList.getAllByAltText("댓글 옵션")[0];
+      fireEvent.click(firstThreeDotButton);
 
-    const firstEditButton = commentList.getAllByTestId("comment-option-edit-button")[0];
-    fireEvent.click(firstEditButton);
+      const firstEditButton = commentList.getByText("삭제");
+      fireEvent.click(firstEditButton);
 
-    const firstPasswordSubmitButton = commentList.getByText("입력");
-    fireEvent.click(firstPasswordSubmitButton);
+      const firstPasswordSubmitButton = commentList.getByText("입력");
+      fireEvent.click(firstPasswordSubmitButton);
 
-    await waitFor(() => {
-      const editConfirmButtons = commentList.getByText("등록");
-      expect(editConfirmButtons).toBeVisible();
+      await waitFor(() => {
+        const allThreeDots = commentList.getAllByAltText("댓글 옵션");
+        expect(allThreeDots.length).toEqual(guestUserComments.length - 1);
+      });
     });
   });
-});
 
-describe("비로그인 유저 댓글 삭제", () => {
-  beforeEach(() => {
-    (useEditComment as jest.Mock).mockImplementation(() => {
-      return {
-        editComment: () => {},
-        isLoading: false,
-        error: false
-      };
-    });
+  describe("비로그인 유저 댓글 좋아요", () => {
+    test("비로그인 유저는 좋아요 기능을 사용할 수 없다.", async () => {
+      const comments = JSON.parse(JSON.stringify(_comments));
 
-    (useDeleteComment as jest.Mock).mockImplementation(() => {
-      return {
-        deleteComment: () => {},
-        isLoading: false,
-        error: false
-      };
-    });
-    (useConfirmGuestPassword as jest.Mock).mockImplementation(() => {
-      return {
-        isValid: true,
-        getPasswordConfirmResult: () => {
-          return {
-            data: {
-              isCorrectPassword: true
-            }
-          };
-        }
-      };
-    });
-  });
-  test("비로그인 유저는 댓글을 수정시, 비밀번호를 입력해야 삭제를 할 수 있다.", async () => {
-    const _comments: Comment[] = JSON.parse(JSON.stringify(comments));
-    const guestUserComments = _comments.filter(comment => comment.user.type === "GuestUser");
-    const commentList = render(<CommentList comments={guestUserComments} project={undefined} />);
+      (useLikeComment as jest.Mock).mockImplementation(() => {
+        return {
+          likeComment: () => {},
+          isLoading: false,
+          error: false
+        };
+      });
 
-    const firstThreeDotButton = commentList.getAllByAltText("댓글 옵션")[0];
-    fireEvent.click(firstThreeDotButton);
+      const { rerender } = render(<CommentList user={undefined} project={undefined} comments={comments} />);
 
-    const firstEditButton = commentList.getByText("삭제");
-    fireEvent.click(firstEditButton);
+      const likeButton = screen.getAllByTestId("comment-like-button")[0];
 
-    const firstPasswordSubmitButton = commentList.getByText("입력");
-    fireEvent.click(firstPasswordSubmitButton);
+      fireEvent.click(likeButton);
 
-    await waitFor(() => {
-      const allThreeDots = commentList.getAllByAltText("댓글 옵션");
-      expect(allThreeDots.length).toEqual(guestUserComments.length - 1);
+      rerender(<CommentList user={undefined} project={undefined} comments={comments} />);
+
+      await waitFor(() => {
+        expect(screen.queryByTestId("liking-users-button-num-of-likes")).toBeFalsy();
+      });
     });
   });
 });