From 04a56e8be6b133dc9d802e00a71abb24528ed0fe Mon Sep 17 00:00:00 2001 From: shihakata Date: Wed, 29 Jan 2025 10:30:38 +0900 Subject: [PATCH 1/3] Add AppBar test --- web/src/pages/App/__tests__/AppBar.test.jsx | 89 +++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 web/src/pages/App/__tests__/AppBar.test.jsx diff --git a/web/src/pages/App/__tests__/AppBar.test.jsx b/web/src/pages/App/__tests__/AppBar.test.jsx new file mode 100644 index 00000000..a18da75e --- /dev/null +++ b/web/src/pages/App/__tests__/AppBar.test.jsx @@ -0,0 +1,89 @@ +import { render, screen } from "@testing-library/react"; +import userEvent, { PointerEventsCheckLevel } from "@testing-library/user-event"; +import React from "react"; +import { Provider, useDispatch } from "react-redux"; +import { BrowserRouter, useNavigate } from "react-router-dom"; +//import { vi } from "vitest"; + +import { firebaseApi } from "../../../services/firebaseApi"; +import { tcApi } from "../../../services/tcApi"; +import { setDrawerOpen } from "../../../slices/system"; +import store from "../../../store"; +import { AppBar } from "../AppBar"; + +vi.mock("react-router-dom", async () => { + const actual = await vi.importActual("react-router-dom"); + return { + ...actual, + useNavigate: vi.fn(), + }; +}); + +vi.mock("react-redux", async () => { + const actual = await vi.importActual("react-redux"); + return { + ...actual, + useDispatch: vi.fn(), + }; +}); + +const renderAppBar = () => { + render( + + + + + , + ); +}; + +describe("TestAppBar", () => { + it("AppBar renders", () => { + renderAppBar(); + const tmp = screen.getByRole("button", { name: "Logout" }); + expect(tmp).toBeEnabled(); + expect(screen.getByLabelText("menu")).toBeInTheDocument(); + }); + + it("toggles drawer state when menu button is clicked", async () => { + const ue = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never }); + const dispatchMock = vi.fn(); + vi.mocked(useDispatch).mockReturnValue(dispatchMock); + + renderAppBar(); + await ue.click(screen.getByLabelText("menu")); + + expect(dispatchMock).toHaveBeenCalledWith(setDrawerOpen(expect.any(Boolean))); + }); + + it("resets API states and navigates to login when the Logout button is clicked", async () => { + const ue = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never }); + const dispatchMock = vi.fn(); + vi.mocked(useDispatch).mockReturnValue(dispatchMock); + + const navigateMock = vi.fn(); + vi.mocked(useNavigate).mockReturnValue(navigateMock); + + renderAppBar(); + await ue.click(screen.getByRole("button", { name: "Logout" })); + + expect(dispatchMock).toHaveBeenCalledWith(firebaseApi.util.resetApiState()); + expect(dispatchMock).toHaveBeenCalledWith(tcApi.util.resetApiState()); + + expect(navigateMock).toHaveBeenCalledWith("/login", { + state: { message: "Logged out successfully.", from: null, search: null }, + }); + }); +}); From ecc557f7e6c5dca83540d4593d0132b89efadce0 Mon Sep 17 00:00:00 2001 From: shihakata Date: Wed, 29 Jan 2025 14:03:47 +0900 Subject: [PATCH 2/3] Refactor AppBar.test and remove BrowserRouter future --- web/src/pages/App/__tests__/AppBar.test.jsx | 78 +++++++++------------ 1 file changed, 34 insertions(+), 44 deletions(-) diff --git a/web/src/pages/App/__tests__/AppBar.test.jsx b/web/src/pages/App/__tests__/AppBar.test.jsx index a18da75e..2ce4818d 100644 --- a/web/src/pages/App/__tests__/AppBar.test.jsx +++ b/web/src/pages/App/__tests__/AppBar.test.jsx @@ -3,7 +3,6 @@ import userEvent, { PointerEventsCheckLevel } from "@testing-library/user-event" import React from "react"; import { Provider, useDispatch } from "react-redux"; import { BrowserRouter, useNavigate } from "react-router-dom"; -//import { vi } from "vitest"; import { firebaseApi } from "../../../services/firebaseApi"; import { tcApi } from "../../../services/tcApi"; @@ -11,16 +10,16 @@ import { setDrawerOpen } from "../../../slices/system"; import store from "../../../store"; import { AppBar } from "../AppBar"; -vi.mock("react-router-dom", async () => { - const actual = await vi.importActual("react-router-dom"); +vi.mock("react-router-dom", async (importOriginal) => { + const actual = await importOriginal(); return { ...actual, useNavigate: vi.fn(), }; }); -vi.mock("react-redux", async () => { - const actual = await vi.importActual("react-redux"); +vi.mock("react-redux", async (importOriginal) => { + const actual = await importOriginal(); return { ...actual, useDispatch: vi.fn(), @@ -30,19 +29,7 @@ vi.mock("react-redux", async () => { const renderAppBar = () => { render( - + , @@ -50,40 +37,43 @@ const renderAppBar = () => { }; describe("TestAppBar", () => { - it("AppBar renders", () => { - renderAppBar(); - const tmp = screen.getByRole("button", { name: "Logout" }); - expect(tmp).toBeEnabled(); - expect(screen.getByLabelText("menu")).toBeInTheDocument(); + describe("Rendering", () => { + it("AppBar renders", () => { + renderAppBar(); + expect(screen.getByRole("button", { name: "Logout" })).toBeEnabled(); + expect(screen.getByLabelText("menu")).toBeInTheDocument(); + }); }); + describe("Drawer Behavior", () => { + it("opens the drawer when the menu button is clicked", async () => { + const ue = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never }); + const dispatchMock = vi.fn(); + vi.mocked(useDispatch).mockReturnValue(dispatchMock); - it("toggles drawer state when menu button is clicked", async () => { - const ue = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never }); - const dispatchMock = vi.fn(); - vi.mocked(useDispatch).mockReturnValue(dispatchMock); - - renderAppBar(); - await ue.click(screen.getByLabelText("menu")); + renderAppBar(); + await ue.click(screen.getByLabelText("menu")); - expect(dispatchMock).toHaveBeenCalledWith(setDrawerOpen(expect.any(Boolean))); + expect(dispatchMock).toHaveBeenCalledWith(setDrawerOpen(expect.any(Boolean))); + }); }); + describe("Logout Behavior", () => { + it("resets API states and navigates to login when the Logout button is clicked", async () => { + const ue = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never }); + const dispatchMock = vi.fn(); + vi.mocked(useDispatch).mockReturnValue(dispatchMock); - it("resets API states and navigates to login when the Logout button is clicked", async () => { - const ue = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never }); - const dispatchMock = vi.fn(); - vi.mocked(useDispatch).mockReturnValue(dispatchMock); - - const navigateMock = vi.fn(); - vi.mocked(useNavigate).mockReturnValue(navigateMock); + const navigateMock = vi.fn(); + vi.mocked(useNavigate).mockReturnValue(navigateMock); - renderAppBar(); - await ue.click(screen.getByRole("button", { name: "Logout" })); + renderAppBar(); + await ue.click(screen.getByRole("button", { name: "Logout" })); - expect(dispatchMock).toHaveBeenCalledWith(firebaseApi.util.resetApiState()); - expect(dispatchMock).toHaveBeenCalledWith(tcApi.util.resetApiState()); + expect(dispatchMock).toHaveBeenCalledWith(firebaseApi.util.resetApiState()); + expect(dispatchMock).toHaveBeenCalledWith(tcApi.util.resetApiState()); - expect(navigateMock).toHaveBeenCalledWith("/login", { - state: { message: "Logged out successfully.", from: null, search: null }, + expect(navigateMock).toHaveBeenCalledWith("/login", { + state: { message: "Logged out successfully.", from: null, search: null }, + }); }); }); }); From c1c9535ab3e910db816330384012ad2e789a3329 Mon Sep 17 00:00:00 2001 From: shihakata Date: Wed, 29 Jan 2025 15:55:48 +0900 Subject: [PATCH 3/3] Fix warning AppBar.test --- web/src/pages/App/__tests__/AppBar.test.jsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/web/src/pages/App/__tests__/AppBar.test.jsx b/web/src/pages/App/__tests__/AppBar.test.jsx index 2ce4818d..ea5c48bc 100644 --- a/web/src/pages/App/__tests__/AppBar.test.jsx +++ b/web/src/pages/App/__tests__/AppBar.test.jsx @@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react"; import userEvent, { PointerEventsCheckLevel } from "@testing-library/user-event"; import React from "react"; import { Provider, useDispatch } from "react-redux"; -import { BrowserRouter, useNavigate } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { firebaseApi } from "../../../services/firebaseApi"; import { tcApi } from "../../../services/tcApi"; @@ -15,6 +15,7 @@ vi.mock("react-router-dom", async (importOriginal) => { return { ...actual, useNavigate: vi.fn(), + useLocation: vi.fn(), }; }); @@ -29,9 +30,7 @@ vi.mock("react-redux", async (importOriginal) => { const renderAppBar = () => { render( - - - + , ); };