feat(web): wire workspaces settings page to real API (MS21-UI-003) (#574)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/app/(authenticated)/settings/workspaces/page.test.tsx

@@ -1,60 +1,135 @@
-/**
- * Workspaces Page Tests
- * Tests for page structure and component integration
- */
+import type { UserWorkspace } from "@/lib/api/workspaces";
+import type { ReactElement, ReactNode } from "react";
 
-import { describe, it, expect, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { WorkspaceMemberRole } from "@mosaic/shared";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createWorkspace, fetchUserWorkspaces } from "@/lib/api/workspaces";
+
+import WorkspacesPage from "./page";
 
-// Mock next/link
 vi.mock("next/link", () => ({
-  default: ({ children, href }: { children: React.ReactNode; href: string }): React.JSX.Element => (
-    <a href={href}>{children}</a>
-  ),
+  default: function LinkMock({
+    children,
+    href,
+  }: {
+    children: ReactNode;
+    href: string;
+  }): ReactElement {
+    return <a href={href}>{children}</a>;
+  },
 }));
 
-// Mock the WorkspaceCard component
 vi.mock("@/components/workspace/WorkspaceCard", () => ({
-  WorkspaceCard: (): React.JSX.Element => <div data-testid="workspace-card">WorkspaceCard</div>,
+  WorkspaceCard: function WorkspaceCardMock({
+    workspace,
+    userRole,
+    memberCount,
+  }: {
+    workspace: { name: string };
+    userRole: WorkspaceMemberRole;
+    memberCount: number;
+  }): ReactElement {
+    return (
+      <div data-testid="workspace-card">
+        {workspace.name} | {userRole} | {String(memberCount)}
+      </div>
+    );
+  },
 }));
 
-describe("WorkspacesPage", (): void => {
-  // Note: NODE_ENV is "test" during test runs, which triggers the Coming Soon view
-  // This tests the production-like behavior where mock data is hidden
+vi.mock("@/lib/api/workspaces", () => ({
+  fetchUserWorkspaces: vi.fn(),
+  createWorkspace: vi.fn(),
+}));
 
-  it("should render the Coming Soon view in non-development environments", async (): Promise<void> => {
-    const { default: WorkspacesPage } = await import("./page");
-    render(<WorkspacesPage />);
+const fetchUserWorkspacesMock = vi.mocked(fetchUserWorkspaces);
+const createWorkspaceMock = vi.mocked(createWorkspace);
 
-    // In test mode (non-development), should show Coming Soon
-    expect(screen.getByText("Coming Soon")).toBeInTheDocument();
-    expect(screen.getByText("Workspace Management")).toBeInTheDocument();
+const baseWorkspace: UserWorkspace = {
+  id: "workspace-1",
+  name: "Personal Workspace",
+  ownerId: "owner-1",
+  role: WorkspaceMemberRole.OWNER,
+  createdAt: "2026-01-01T00:00:00.000Z",
+};
+
+describe("WorkspacesPage", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
   });
 
-  it("should display appropriate description for workspace feature", async (): Promise<void> => {
-    const { default: WorkspacesPage } = await import("./page");
+  it("loads and renders user workspaces from the API", async () => {
+    fetchUserWorkspacesMock.mockResolvedValue([baseWorkspace]);
+
     render(<WorkspacesPage />);
 
-    expect(
-      screen.getByText(/create and manage workspaces to organize your projects/i)
-    ).toBeInTheDocument();
+    expect(screen.getByText("Loading workspaces...")).toBeInTheDocument();
+
+    expect(await screen.findByText("Your Workspaces (1)")).toBeInTheDocument();
+    expect(screen.getByTestId("workspace-card")).toHaveTextContent("Personal Workspace");
+    expect(fetchUserWorkspacesMock).toHaveBeenCalledTimes(1);
   });
 
-  it("should not render mock workspace data in Coming Soon view", async (): Promise<void> => {
-    const { default: WorkspacesPage } = await import("./page");
+  it("shows fetch errors in the UI", async () => {
+    fetchUserWorkspacesMock.mockRejectedValue(new Error("Unable to load workspaces"));
+
     render(<WorkspacesPage />);
 
-    // Should not show workspace cards or create form in non-development mode
-    expect(screen.queryByTestId("workspace-card")).not.toBeInTheDocument();
-    expect(screen.queryByText("Create New Workspace")).not.toBeInTheDocument();
+    expect(await screen.findByText("Unable to load workspaces")).toBeInTheDocument();
   });
 
-  it("should include link back to settings", async (): Promise<void> => {
-    const { default: WorkspacesPage } = await import("./page");
+  it("creates a workspace and refreshes the list", async () => {
+    fetchUserWorkspacesMock.mockResolvedValueOnce([baseWorkspace]).mockResolvedValueOnce([
+      baseWorkspace,
+      {
+        ...baseWorkspace,
+        id: "workspace-2",
+        name: "New Workspace",
+        role: WorkspaceMemberRole.MEMBER,
+      },
+    ]);
+    createWorkspaceMock.mockResolvedValue({
+      id: "workspace-2",
+      name: "New Workspace",
+      ownerId: "owner-1",
+      settings: {},
+      createdAt: "2026-01-02T00:00:00.000Z",
+      updatedAt: "2026-01-02T00:00:00.000Z",
+      memberCount: 1,
+    });
+
+    const user = userEvent.setup();
     render(<WorkspacesPage />);
 
-    const link = screen.getByRole("link", { name: /back to settings/i });
-    expect(link).toBeInTheDocument();
-    expect(link).toHaveAttribute("href", "/settings");
+    expect(await screen.findByText("Your Workspaces (1)")).toBeInTheDocument();
+
+    await user.type(screen.getByPlaceholderText("Enter workspace name..."), "New Workspace");
+    await user.click(screen.getByRole("button", { name: "Create Workspace" }));
+
+    await waitFor(() => {
+      expect(createWorkspaceMock).toHaveBeenCalledWith({ name: "New Workspace" });
+    });
+    await waitFor(() => {
+      expect(fetchUserWorkspacesMock).toHaveBeenCalledTimes(2);
+    });
+
+    expect(await screen.findByText("Your Workspaces (2)")).toBeInTheDocument();
+  });
+
+  it("shows create errors in the UI", async () => {
+    fetchUserWorkspacesMock.mockResolvedValue([baseWorkspace]);
+    createWorkspaceMock.mockRejectedValue(new Error("Workspace creation failed"));
+
+    const user = userEvent.setup();
+    render(<WorkspacesPage />);
+
+    expect(await screen.findByText("Your Workspaces (1)")).toBeInTheDocument();
+
+    await user.type(screen.getByPlaceholderText("Enter workspace name..."), "Bad Workspace");
+    await user.click(screen.getByRole("button", { name: "Create Workspace" }));
+
+    expect(await screen.findByText("Workspace creation failed")).toBeInTheDocument();
   });
 });