feat: implement actual sign out flow

Author: kantord

src/app/layout.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { UserMenu } from "@/components/user-menu";
+import { signOut } from "@/lib/auth/auth-client";
 
 describe("UserMenu", () => {
   it.each([
@@ -36,4 +37,26 @@ describe("UserMenu", () => {
     const signOutItem = screen.getByText("Sign out");
     expect(signOutItem).toBeTruthy();
   });
+
+  it("calls signOut when sign out menu item is clicked", async () => {
+    const userEvent = (await import("@testing-library/user-event")).default;
+    render(<UserMenu userName="Jane Smith" />);
+    const user = userEvent.setup();
+
+    // Open dropdown - use getAllByRole and find the one in this render
+    const buttons = screen.getAllByRole("button");
+    const trigger = buttons.find((btn) =>
+      btn.textContent?.includes("Jane Smith"),
+    );
+    expect(trigger).toBeTruthy();
+    if (!trigger) return;
+    await user.click(trigger);
+
+    // Find and click the sign out menu item (it's a div with role="menuitem")
+    const signOutItem = screen.getByRole("menuitem", { name: /sign out/i });
+    await user.click(signOutItem);
+
+    // Verify signOut was called
+    expect(signOut).toHaveBeenCalledOnce();
+  });
 });

src/components/user-menu.tsx

@@ -8,6 +8,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { signOut } from "@/lib/auth/auth-client";
 
 interface UserMenuProps {
   userName: string;
@@ -24,6 +25,10 @@ function getInitials(name: string): string {
 export function UserMenu({ userName }: UserMenuProps) {
   const initials = getInitials(userName);
 
+  const handleSignOut = async () => {
+    await signOut();
+  };
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -35,7 +40,7 @@ export function UserMenu({ userName }: UserMenuProps) {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent>
-        <DropdownMenuItem>Sign out</DropdownMenuItem>
+        <DropdownMenuItem onSelect={handleSignOut}>Sign out</DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );

vitest.setup.ts

@@ -60,12 +60,20 @@ vi.mock("@/lib/auth/auth-client", () => ({
     },
     signOut: vi.fn(),
   },
+  signIn: {
+    oauth2: vi.fn(),
+  },
+  signOut: vi.fn(),
+  useSession: vi.fn(),
 }));
 
+import { cleanup } from "@testing-library/react";
 // Reset mocks between test cases globally
 import { afterEach } from "vitest";
 
 afterEach(() => {
   // Clear calls/instances, but keep hoisted module mock implementations intact
   vi.clearAllMocks();
+  // Clean up DOM after each test
+  cleanup();
 });