Update test cases for useAuth and useMatch

Author: ruiqi7

frontend/src/components/Navbar/Navbar.test.tsx

@@ -1,7 +1,8 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import axios from "axios";
 import { faker } from "@faker-js/faker";
-import * as hooks from "../../contexts/AuthContext";
+import * as authHooks from "../../contexts/AuthContext";
+import * as matchHooks from "../../contexts/MatchContext";
 import Navbar from ".";
 import { MemoryRouter } from "react-router-dom";
 
@@ -16,6 +17,24 @@ jest.mock("react-router-dom", () => ({
   useNavigate: () => mockUseNavigate(),
 }));
 
+beforeEach(() => {
+  jest.spyOn(matchHooks, "useMatch").mockImplementation(() => ({
+    findMatch: jest.fn(),
+    stopMatch: () => mockUseNavigate("/home"),
+    acceptMatch: jest.fn(),
+    rematch: jest.fn(),
+    retryMatch: jest.fn(),
+    matchingTimeout: jest.fn(),
+    matchOfferTimeout: jest.fn(),
+    verifyMatchStatus: jest.fn(),
+    matchUser: null,
+    matchCriteria: null,
+    partner: null,
+    matchPending: false,
+    loading: false,
+  }));
+});
+
 describe("Navigation routes", () => {
   it("Question route is present", () => {
     const username = faker.internet.userName();
@@ -41,7 +60,7 @@ describe("Navigation routes", () => {
         },
       },
     });
-    jest.spyOn(hooks, "useAuth").mockImplementation(() => ({
+    jest.spyOn(authHooks, "useAuth").mockImplementation(() => ({
       signup: jest.fn(),
       login: jest.fn(),
       logout: jest.fn(),
@@ -71,7 +90,7 @@ describe("Navigation routes", () => {
 describe("Unauthenticated user", () => {
   it("Sign up button is rendered", () => {
     mockedAxios.get.mockResolvedValue({ data: { data: null } });
-    jest.spyOn(hooks, "useAuth").mockImplementation(() => ({
+    jest.spyOn(authHooks, "useAuth").mockImplementation(() => ({
       signup: jest.fn(),
       login: jest.fn(),
       logout: jest.fn(),
@@ -89,7 +108,7 @@ describe("Unauthenticated user", () => {
 
   it("Login button is rendered", () => {
     mockedAxios.get.mockResolvedValue({ data: { data: null } });
-    jest.spyOn(hooks, "useAuth").mockImplementation(() => ({
+    jest.spyOn(authHooks, "useAuth").mockImplementation(() => ({
       signup: jest.fn(),
       login: jest.fn(),
       logout: jest.fn(),
@@ -131,7 +150,7 @@ describe("Authenticated user", () => {
         },
       },
     });
-    jest.spyOn(hooks, "useAuth").mockImplementation(() => ({
+    jest.spyOn(authHooks, "useAuth").mockImplementation(() => ({
       signup: jest.fn(),
       login: jest.fn(),
       logout: jest.fn(),
@@ -181,7 +200,7 @@ describe("Authenticated user", () => {
         },
       },
     });
-    jest.spyOn(hooks, "useAuth").mockImplementation(() => ({
+    jest.spyOn(authHooks, "useAuth").mockImplementation(() => ({
       signup: jest.fn(),
       login: jest.fn(),
       logout: jest.fn(),
@@ -235,7 +254,7 @@ describe("Authenticated user", () => {
         },
       },
     });
-    jest.spyOn(hooks, "useAuth").mockImplementation(() => ({
+    jest.spyOn(authHooks, "useAuth").mockImplementation(() => ({
       signup: jest.fn(),
       login: jest.fn(),
       logout: jest.fn(),
@@ -287,7 +306,7 @@ describe("Authenticated user", () => {
         },
       },
     });
-    jest.spyOn(hooks, "useAuth").mockImplementation(() => ({
+    jest.spyOn(authHooks, "useAuth").mockImplementation(() => ({
       signup: jest.fn(),
       login: jest.fn(),
       logout: jest.fn(),
@@ -316,4 +335,60 @@ describe("Authenticated user", () => {
       screen.getByRole("menuitem", { name: "Logout" })
     ).toBeInTheDocument();
   });
+
+  it("Stop matching button is rendered", () => {
+    const username = faker.internet.userName();
+    const firstName = faker.person.firstName();
+    const lastName = faker.person.lastName();
+    const email = faker.internet.email();
+    const biography = faker.person.bio();
+    const profilePictureUrl = "";
+    const createdAt = "";
+    const isAdmin = false;
+    mockedAxios.get.mockResolvedValue({
+      data: {
+        data: {
+          id: "1",
+          username,
+          firstName,
+          lastName,
+          email,
+          biography,
+          profilePictureUrl,
+          createdAt,
+          isAdmin,
+        },
+      },
+    });
+    jest.spyOn(authHooks, "useAuth").mockImplementation(() => ({
+      signup: jest.fn(),
+      login: jest.fn(),
+      logout: jest.fn(),
+      loading: false,
+      setUser: jest.fn(),
+      user: {
+        id: "1",
+        username,
+        firstName,
+        lastName,
+        email,
+        profilePictureUrl,
+        biography,
+        createdAt,
+        isAdmin,
+      },
+    }));
+    render(
+      <MemoryRouter initialEntries={["/matching"]}>
+        <Navbar />
+      </MemoryRouter>
+    );
+    const stopMatchingButton = screen.getByRole("button", {
+      name: "Stop matching",
+    });
+    expect(stopMatchingButton).toBeInTheDocument();
+
+    fireEvent.click(stopMatchingButton);
+    expect(mockUseNavigate).toHaveBeenCalledWith("/home");
+  });
 });

frontend/src/pages/LogIn/LogIn.test.tsx

@@ -27,6 +27,8 @@ describe("Log In Components", () => {
       signup: jest.fn(),
       login: jest.fn(),
       logout: jest.fn(),
+      setUser: jest.fn(),
+      loading: false,
       user: null,
     }));
   });
@@ -76,6 +78,8 @@ describe("Log In Events", () => {
         });
       },
       logout: jest.fn(),
+      setUser: jest.fn(),
+      loading: false,
       user: null,
     }));
   });

frontend/src/pages/QuestionList/QuestionList.test.tsx

@@ -17,7 +17,9 @@ jest.mock("../../utils/api", () => ({
     get: jest.fn(),
   },
 }));
-const mockedGet = questionClient.get as jest.MockedFunction<typeof questionClient.get>;
+const mockedGet = questionClient.get as jest.MockedFunction<
+  typeof questionClient.get
+>;
 const questions = [
   {
     id: "1",
@@ -32,7 +34,7 @@ const questions = [
     description: "Description of Question 2",
     complexity: "Medium",
     categories: ["Algorithms", "Data Structures"],
-  }
+  },
 ];
 mockedGet.mockImplementation((url: string) => {
   switch (url) {
@@ -61,6 +63,8 @@ describe("Question List Components For All Users", () => {
       signup: jest.fn(),
       login: jest.fn(),
       logout: jest.fn(),
+      setUser: jest.fn(),
+      loading: false,
       user: null,
     }));
   });
@@ -87,9 +91,15 @@ describe("Question List Components For All Users", () => {
 
   it("Question table headers are rendered", async () => {
     render(<QuestionList />);
-    expect(await screen.findByRole("columnheader", { name: "Title" })).toBeInTheDocument();
-    expect(await screen.findByRole("columnheader", { name: "Complexity" })).toBeInTheDocument();
-    expect(await screen.findByRole("columnheader", { name: "Categories" })).toBeInTheDocument();
+    expect(
+      await screen.findByRole("columnheader", { name: "Title" })
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByRole("columnheader", { name: "Complexity" })
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByRole("columnheader", { name: "Categories" })
+    ).toBeInTheDocument();
   });
 
   it("Question table rows are rendered", async () => {
@@ -105,14 +115,20 @@ describe("Question List Components For All Users", () => {
 
   it("Question table pagination is rendered", async () => {
     render(<QuestionList />);
-    expect(await screen.findByRole("button", { name: /previous page/i })).toBeInTheDocument();
-    expect(await screen.findByRole("button", { name: /next page/i })).toBeInTheDocument();
+    expect(
+      await screen.findByRole("button", { name: /previous page/i })
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByRole("button", { name: /next page/i })
+    ).toBeInTheDocument();
   });
 
   it("Create button is not rendered", async () => {
     render(<QuestionList />);
     await waitFor(() => {
-      expect(screen.queryByRole("button", { name: "Create" })).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", { name: "Create" })
+      ).not.toBeInTheDocument();
     });
   });
 
@@ -131,6 +147,8 @@ describe("Question List Components for Admin", () => {
       signup: jest.fn(),
       login: jest.fn(),
       logout: jest.fn(),
+      setUser: jest.fn(),
+      loading: false,
       user: {
         id: "1",
         firstName: "Admin",
@@ -161,10 +179,12 @@ describe("Question List Components for Admin", () => {
     editDeleteMenu.forEach((button) => {
       expect(button).toBeInTheDocument();
     });
-    
+
     fireEvent.click(editDeleteMenu[0]);
     expect(screen.getByRole("menuitem", { name: "Edit" })).toBeInTheDocument();
-    expect(screen.getByRole("menuitem", { name: "Delete" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("menuitem", { name: "Delete" })
+    ).toBeInTheDocument();
   });
 
   it("Edit button redirects to edit question page", async () => {

frontend/src/pages/SignUp/SignUp.test.tsx

@@ -27,6 +27,8 @@ describe("Sign Up Components", () => {
       signup: jest.fn(),
       login: jest.fn(),
       logout: jest.fn(),
+      setUser: jest.fn(),
+      loading: false,
       user: null,
     }));
   });
@@ -97,6 +99,8 @@ describe("Sign Up Events", () => {
       },
       login: jest.fn(),
       logout: jest.fn(),
+      setUser: jest.fn(),
+      loading: false,
       user: null,
     }));
   });