test : last problem page with button event and setTitmeout event hand…

…ler test
YAPP-Github · Jun 29, 2024 · 66125bc · 66125bc
1 parent 063eb83
commit 66125bc
Showing 1 changed file with 68 additions and 47 deletions.
diff --git a/src/app/problem/[problemId]/problemLastIdPage.test.tsx b/src/app/problem/[problemId]/problemLastIdPage.test.tsx
@@ -1,6 +1,14 @@
 import { useQuery } from "@tanstack/react-query";
 
-import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from "vitest";
 
 import QueryClientProviders from "@shared/components/queryClientProvider";
 import { createQueryProviderWrapper } from "@shared/constants/createQueryProvider";
@@ -14,7 +22,13 @@ import ProblemContext, {
 } from "@problem/context/problemContext";
 import { getProblemQueryOptions } from "@problem/remotes/getProblemQueryOptions";
 import { ProblemContextInfo } from "@problem/types/problemContextInfo";
-import { render, renderHook, screen, waitFor } from "@testing-library/react";
+import {
+  act,
+  render,
+  renderHook,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 const isExistNextProblem = vi.fn(() => false);
@@ -78,6 +92,8 @@ describe("마지막 문제 풀이 페이지 테스트", () => {
   });
 
   beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+
     renderWithContext({
       problemContextValue: {
         ...defaultStates,
@@ -91,6 +107,10 @@ describe("마지막 문제 풀이 페이지 테스트", () => {
     });
   });
 
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it("마지막 문제 가져오기 확인", async () => {
     const { result } = renderHook(
       () => useQuery({ ...getProblemQueryOptions({ problemId: "3" }) }),
@@ -100,49 +120,50 @@ describe("마지막 문제 풀이 페이지 테스트", () => {
       expect(result.current.isSuccess).toBe(true);
     });
   });
-  // it("정답 선택 이후 정답 제출하기 버튼 클릭 시, 해설 컴포넌트 잘 노출되고, 로띠 재생이후 메인으로 넘어가기", async () => {
-  //   vi.useFakeTimers();
-
-  //   const { result } = renderHook(
-  //     () => useQuery({ ...getProblemQueryOptions({ problemId: "3" }) }),
-  //     { wrapper: createQueryProviderWrapper() },
-  //   );
-  //   await waitFor(() => {
-  //     expect(result.current.isSuccess).toBe(true);
-  //   });
-  //   expect(screen.getByText("3/3")).toBeInTheDocument();
-  //   const choiceAnswerButton = screen.getByRole("button", {
-  //     name: "정리를해서....",
-  //   });
-  //   await userEvent.click(choiceAnswerButton);
-  //   const answerSubmitButton = screen.getByRole("button", {
-  //     name: "정답 제출하기",
-  //   });
-
-  //   await userEvent.click(answerSubmitButton);
-
-  //   const problemExplanation = screen.getByRole("article");
-  //   expect(problemExplanation.childElementCount).toBe(2);
-  //   const explanationParagraphy = screen.getByRole("paragraph");
-
-  //   expect(explanationParagraphy.textContent).toBe(
-  //     "이 유행어는 개발자 PM 영모님께서 종준이에게 주로 사용하는 말입니다. ",
-  //   );
-
-  //   const problemCompleteDialogCloseButton = screen.getByRole("button", {
-  //     name: "Close",
-  //   });
-  //   await userEvent.click(problemCompleteDialogCloseButton);
-
-  //   const nextProblemButton = screen.getByRole("button", {
-  //     name: "메인으로 가기",
-  //   });
-
-  //   await userEvent.click(nextProblemButton);
-
-  //   expect(isExistNextProblem).toBeCalled();
-
-  //   expect(clearProblem).toHaveBeenCalledOnce();
-  //   expect(push).toHaveBeenNthCalledWith(1, "/");
-  // });
+  it("정답 선택 이후 정답 제출하기 버튼 클릭 시, 해설 컴포넌트 잘 노출되고, 로띠 재생이후 메인으로 넘어가기", async () => {
+    const { result } = renderHook(
+      () => useQuery({ ...getProblemQueryOptions({ problemId: "3" }) }),
+      { wrapper: createQueryProviderWrapper() },
+    );
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+    expect(screen.getByText("3/3")).toBeInTheDocument();
+    const choiceAnswerButton = screen.getByRole("button", {
+      name: "온돌은 바닥 아래에 연기 길이 있다.",
+    });
+    await userEvent.click(choiceAnswerButton);
+
+    const answerSubmitButton = screen.getByRole("button", {
+      name: "정답 제출하기",
+    });
+
+    await userEvent.click(answerSubmitButton);
+
+    const problemExplanation = screen.getByRole("article");
+    expect(problemExplanation.childElementCount).toBe(2);
+    const explanationParagraphy = screen.getByRole("paragraph");
+    expect(explanationParagraphy.textContent).toBe(
+      "온돌은 바닥 아래에 연기가 지나가는 길이 있는 반면, 하이포코스트는 바닥 아래가 거의 다 뚫려있는 형태입니다.",
+    );
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
+
+    const problemCompleteDialogCloseButton = screen.getByRole("button", {
+      name: "Close",
+    });
+    await userEvent.click(problemCompleteDialogCloseButton);
+
+    const nextProblemButton = screen.getByRole("button", {
+      name: "메인으로 가기",
+    });
+
+    await userEvent.click(nextProblemButton);
+
+    expect(isExistNextProblem).toBeCalled();
+
+    expect(clearProblem).toHaveBeenCalledOnce();
+    expect(push).toHaveBeenNthCalledWith(1, "/workbook/1");
+  });
 });