diff --git a/src/app/problem/[problemId]/problemLastIdPage.test.tsx b/src/app/problem/[problemId]/problemLastIdPage.test.tsx index d721626b..be8d6d3d 100644 --- 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"); + }); });