Merge pull request #939 from bounswe/FRONTEND-934

feat(frontend): write guest and admin view unit tests

frontend/src/components/post/post-card.tsx

@@ -242,7 +242,7 @@ export default function PostCard({
                 onOpenChange={(isOpen) => setPopoverOpen(isOpen)}
                 isOpen={popoverOpen}
               >
-                <PopoverTrigger>
+                <PopoverTrigger data-testid="admin-popover">
                   <IconDotsVertical size={20} />
                 </PopoverTrigger>
                 <PopoverContent className="p-1 pb-2">

frontend/src/pages/forum.test.tsx

@@ -1,59 +1,137 @@
 import Forum from "./forum";
 import { render, waitFor } from "@testing-library/react";
 import { screen } from "@testing-library/dom";
+import { AuthActions } from "../components/auth/utils";
+
+vi.mock("../components/auth/utils", () => ({
+  AuthActions: vi.fn(),
+}));
 
 vi.mock("react-router-dom", () => ({
   useNavigate: () => vi.fn(),
   useLocation: () => ({ pathname: "/forum" }),
-  Link: ({ children, to }: { children: React.ReactNode; to: string }) => (
+  Link: ({ children, to }) => (
     <a href={to} data-testid="link">
       {children}
     </a>
   ),
 }));
 
 describe("Forum", () => {
-  beforeEach(() => {
-    render(<Forum />);
-  });
+  const setupAuthMocks = ({ isGuest = true, isAdmin = false }) => {
+    const mockGetToken = vi.fn().mockReturnValue(isGuest ? null : "mock-token");
+    const mockUseIsAdmin = vi.fn().mockReturnValue(isAdmin);
 
-  it("should render navbar", async () => {
-    expect(screen.getByTestId("navbar")).toBeInTheDocument();
-  });
+    vi.mocked(AuthActions).mockImplementation(() => ({
+      getToken: mockGetToken,
+      useIsAdmin: mockUseIsAdmin,
+      login: vi.fn(),
+      handleJWTRefresh: vi.fn(),
+      register: vi.fn(),
+      storeToken: vi.fn(),
+      logout: vi.fn(),
+      removeTokens: vi.fn(),
+      checkAdmin: vi.fn(),
+    }));
 
-  it("should render post card", async () => {
-    await waitFor(
-      () => {
-        expect(screen.getByTestId("post-card")).toBeInTheDocument();
-      },
-      { timeout: 1000 }
-    );
-  });
+    return { mockGetToken, mockUseIsAdmin };
+  };
+
+  describe("with guest user", () => {
+    beforeEach(() => {
+      setupAuthMocks({ isGuest: true });
+      render(<Forum />);
+    });
+
+    it("should render navbar", () => {
+      expect(screen.getByTestId("navbar")).toBeInTheDocument();
+    });
+
+    it("should render post card", async () => {
+      await waitFor(
+        () => {
+          expect(screen.getByTestId("post-card")).toBeInTheDocument();
+        },
+        { timeout: 1000 }
+      );
+    });
+
+    it("should render post card title and content", async () => {
+      await waitFor(
+        () => {
+          expect(screen.getByText("MockTitle")).toBeInTheDocument();
+          expect(screen.getByText("MockDescription")).toBeInTheDocument();
+        },
+        { timeout: 1000 }
+      );
+    });
+
+    it("should not allow liking when user is guest", async () => {
+      await waitFor(
+        () => {
+          expect(screen.getByTestId("like-button")).toBeInTheDocument();
+        },
+        { timeout: 1000 }
+      );
 
-  it("should render post card title and content", async () => {
-    await waitFor(
-      () => {
-        expect(screen.getByText("MockTitle")).toBeInTheDocument();
-        expect(screen.getByText("MockDescription")).toBeInTheDocument();
-      },
-      { timeout: 1000 }
-    );
+      const likeButton = screen.getByTestId("like-button");
+      likeButton.click();
+
+      // The like count should not increase
+      await waitFor(() => {
+        expect(screen.queryByText("1")).not.toBeInTheDocument();
+      });
+    });
+
+    it("should not show admin popover for guest users", async () => {
+      await waitFor(() => {
+        expect(screen.queryByTestId("admin-popover")).not.toBeInTheDocument();
+      });
+    });
   });
 
-  it("should make a correct request when like button is clicked", async () => {
-    await waitFor(
-      () => {
-        expect(screen.getByTestId("like-button")).toBeInTheDocument();
-      },
-      { timeout: 1000 }
-    );
-    const likeButton = screen.getByTestId("like-button");
+  describe("with authenticated user", () => {
+    beforeEach(() => {
+      setupAuthMocks({ isGuest: false });
+      render(<Forum />);
+    });
+
+    it("should allow liking when user is authenticated", async () => {
+      await waitFor(
+        () => {
+          expect(screen.getByTestId("like-button")).toBeInTheDocument();
+        },
+        { timeout: 1000 }
+      );
+
+      const likeButton = screen.getByTestId("like-button");
+      likeButton.click();
 
-    likeButton.click();
+      await waitFor(() => {
+        expect(screen.getByText("1")).toBeInTheDocument();
+      });
+    });
 
-    await waitFor(() => {
-      expect(screen.getByText("1")).toBeInTheDocument();
+    it("should not show admin popover for regular users", async () => {
+      await waitFor(() => {
+        expect(screen.queryByTestId("admin-popover")).not.toBeInTheDocument();
+      });
     });
   });
-});
 
+  describe("with admin user", () => {
+    beforeEach(() => {
+      setupAuthMocks({ isGuest: false, isAdmin: true });
+      render(<Forum />);
+    });
+
+    it("should show admin popover for admin users", async () => {
+      await waitFor(
+        () => {
+          expect(screen.getByTestId("admin-popover")).toBeInTheDocument();
+        },
+        { timeout: 1000 }
+      );
+    });
+  });
+});