Add tests to frontend/(auth)/logout (#439)

* chore: refactor <Logout/>

* test(useLogout): add unit tests

frontend/app/(auth)/logout/hooks/__tests__/useLogout.test.ts

@@ -0,0 +1,32 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { useLogout } from "../useLogout";
+
+const mockSignOut = vi.fn(() => ({ error: null }));
+
+const mockUseSupabase = () => ({
+  supabase: {
+    auth: {
+      signOut: mockSignOut,
+    },
+  },
+});
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ replace: vi.fn() }),
+}));
+
+vi.mock("@/lib/context/SupabaseProvider", () => ({
+  useSupabase: () => mockUseSupabase(),
+}));
+
+describe("useLogout", () => {
+  it("should call signOut", async () => {
+    const { result } = renderHook(() => useLogout());
+
+    await act(() => result.current.handleLogout());
+
+    expect(mockSignOut).toHaveBeenCalledTimes(1);
+  });
+});

frontend/app/(auth)/logout/hooks/useLogout.ts

@@ -0,0 +1,41 @@
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { useSupabase } from "@/lib/context/SupabaseProvider";
+import { useToast } from "@/lib/hooks";
+import { useEventTracking } from "@/services/analytics/useEventTracking";
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useLogout = () => {
+  const { supabase } = useSupabase();
+  const [isPending, setIsPending] = useState(false);
+  const { track } = useEventTracking();
+
+  const { publish } = useToast();
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    setIsPending(true);
+    const { error } = await supabase.auth.signOut();
+    void track("LOGOUT");
+    if (error) {
+      console.error("Error logging out:", error.message);
+      publish({
+        variant: "danger",
+        text: `Error logging out: ${error.message}`,
+      });
+    } else {
+      publish({
+        variant: "success",
+        text: "Logged out successfully",
+      });
+      router.replace("/");
+    }
+    setIsPending(false);
+  };
+
+  return {
+    handleLogout,
+    isPending,
+  };
+};

frontend/app/(auth)/logout/page.tsx

@@ -1,44 +1,14 @@
 /* eslint-disable */
 "use client";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
 
 import Button from "@/lib/components/ui/Button";
 import Card from "@/lib/components/ui/Card";
 import PageHeading from "@/lib/components/ui/PageHeading";
-import { useSupabase } from "@/lib/context/SupabaseProvider";
-import { useToast } from "@/lib/hooks/useToast";
-import { useEventTracking } from "@/services/analytics/useEventTracking";
+import { useLogout } from "./hooks/useLogout";
 
 export default function Logout() {
-  const { supabase } = useSupabase();
-  const [isPending, setIsPending] = useState(false);
-  const { track } = useEventTracking();
-
-  const { publish } = useToast();
-  const router = useRouter();
-
-  const handleLogout = async () => {
-    setIsPending(true);
-    const { error } = await supabase.auth.signOut();
-    void track("LOGOUT")
-    if (error) {
-      console.error("Error logging out:", error.message);
-      publish({
-        variant: "danger",
-        text: `Error logging out: ${error.message}`,
-      });
-    } else {
-      publish({
-        variant: "success",
-        text: "Logged out successfully",
-      });
-      router.replace("/");
-    }
-    setIsPending(false);
-  };
-
+  const { handleLogout, isPending } = useLogout();
   return (
     <main>
       <section className="w-full min-h-[80vh] h-full outline-none flex flex-col gap-5 items-center justify-center p-6">