@wopr-network/platform-ui-core 1.0.0

package/src/__tests__/network-page.test.tsx

@@ -0,0 +1,100 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { Instance } from "@/lib/api";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+  useSearchParams: () => new URLSearchParams(),
+  usePathname: () => "/dashboard/network",
+}));
+
+vi.mock("better-auth/react", () => ({
+  createAuthClient: () => ({
+    useSession: () => ({ data: null, isPending: false, error: null }),
+    signIn: { email: vi.fn(), social: vi.fn() },
+    signUp: { email: vi.fn() },
+    signOut: vi.fn(),
+  }),
+}));
+
+const MOCK_INSTANCES: Instance[] = [
+  {
+    id: "inst-1",
+    name: "Alpha Bot",
+    status: "running",
+    channels: [],
+    createdAt: new Date().toISOString(),
+    provider: "",
+    plugins: [],
+    uptime: null,
+  },
+  {
+    id: "inst-2",
+    name: "Beta Bot",
+    status: "stopped",
+    channels: [],
+    createdAt: new Date().toISOString(),
+    provider: "",
+    plugins: [],
+    uptime: null,
+  },
+];
+
+vi.mock("@/components/instances/friends-tab", () => ({
+  FriendsTab: ({ instanceId }: { instanceId: string }) => (
+    <div data-testid="friends-tab" data-instance-id={instanceId} />
+  ),
+}));
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/lib/api")>();
+  return {
+    ...actual,
+    listInstances: vi.fn(),
+  };
+});
+
+import NetworkPage from "@/app/(dashboard)/dashboard/network/page";
+import { listInstances } from "@/lib/api";
+
+describe("NetworkPage", () => {
+  it("renders page heading", async () => {
+    vi.mocked(listInstances).mockResolvedValue(MOCK_INSTANCES);
+    render(<NetworkPage />);
+    expect(screen.getByText(/friends/i)).toBeTruthy();
+  });
+
+  it("shows instance selector after load", async () => {
+    vi.mocked(listInstances).mockResolvedValue(MOCK_INSTANCES);
+    render(<NetworkPage />);
+    await waitFor(() => {
+      expect(screen.getByRole("combobox", { name: /select instance/i })).toBeTruthy();
+    });
+  });
+
+  it("shows placeholder when no instance is selected", async () => {
+    vi.mocked(listInstances).mockResolvedValue(MOCK_INSTANCES);
+    render(<NetworkPage />);
+    await waitFor(() => {
+      expect(screen.getByText(/select an instance to manage friends/i)).toBeTruthy();
+    });
+  });
+
+  it("auto-selects the only instance when there is one", async () => {
+    vi.mocked(listInstances).mockResolvedValue([MOCK_INSTANCES[0]]);
+    render(<NetworkPage />);
+    // When single instance is auto-selected, FriendsTab mounts and triggers its own API calls.
+    // We just confirm the placeholder is NOT shown.
+    await waitFor(() => {
+      expect(screen.queryByText(/select an instance to manage friends/i)).toBeNull();
+    });
+  });
+
+  it("shows error message when listInstances fails", async () => {
+    vi.mocked(listInstances).mockRejectedValue(new Error("network error"));
+    render(<NetworkPage />);
+    await waitFor(() => {
+      expect(screen.getByText(/network error/i)).toBeTruthy();
+    });
+  });
+});

package/src/__tests__/next-config-headers.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+
+describe("next.config headers", () => {
+  it("exports headers function", async () => {
+    const config = await import("../../next.config.js");
+    const nextConfig = config.default;
+    expect(typeof nextConfig.headers).toBe("function");
+
+    const headers = await nextConfig.headers?.();
+    if (!headers) throw new Error("headers() returned undefined");
+    expect(headers).toHaveLength(1);
+    expect(headers[0].source).toBe("/:path*");
+
+    const headerMap = new Map(
+      headers[0].headers.map((h: { key: string; value: string }) => [h.key, h.value]),
+    );
+    expect(headerMap.get("X-Frame-Options")).toBe("DENY");
+    expect(headerMap.get("X-Content-Type-Options")).toBe("nosniff");
+    // CSP is now set exclusively by middleware (nonce-based), not next.config.ts
+    expect(headerMap.get("Content-Security-Policy")).toBeUndefined();
+    // HSTS is only set when NEXT_PUBLIC_API_URL is an https:// origin
+    const hsts = headerMap.get("Strict-Transport-Security");
+    if (hsts !== undefined) {
+      expect(hsts).toContain("max-age=31536000");
+    }
+    expect(headerMap.get("Permissions-Policy")).toMatch(/camera|microphone|geolocation/);
+  });
+});

package/src/__tests__/not-found.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import DashboardNotFound from "@/app/(dashboard)/not-found";
+
+describe("DashboardNotFound", () => {
+  it("renders the 404 error code", () => {
+    render(<DashboardNotFound />);
+    expect(screen.getByText("404")).toBeInTheDocument();
+  });
+
+  it("renders the error message", () => {
+    render(<DashboardNotFound />);
+    expect(screen.getByText(/route not found/i)).toBeInTheDocument();
+  });
+
+  it("renders a link to the dashboard", () => {
+    render(<DashboardNotFound />);
+    const links = screen.getAllByRole("link");
+    expect(links.some((link) => link.getAttribute("href") === "/dashboard")).toBe(true);
+  });
+
+  it("renders the terminal icon and system error label", () => {
+    render(<DashboardNotFound />);
+    expect(screen.getByText(/system error/i)).toBeInTheDocument();
+  });
+});

package/src/__tests__/notifications.test.tsx

@@ -0,0 +1,128 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { NotificationPreferences } from "@/lib/api";
+
+// Mock next/navigation
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+  useSearchParams: () => new URLSearchParams(),
+  usePathname: () => "/settings/notifications",
+}));
+
+// Mock better-auth/react
+vi.mock("better-auth/react", () => ({
+  createAuthClient: () => ({
+    useSession: () => ({ data: null, isPending: false, error: null }),
+    signIn: { email: vi.fn(), social: vi.fn() },
+    signUp: { email: vi.fn() },
+    signOut: vi.fn(),
+  }),
+}));
+
+const DEFAULT_PREFS: NotificationPreferences = {
+  billing_low_balance: true,
+  billing_receipts: true,
+  billing_auto_topup: false,
+  agent_channel_disconnect: true,
+  agent_status_changes: false,
+  account_role_changes: true,
+  account_team_invites: true,
+};
+
+const mockGetPrefs = vi.fn<() => Promise<NotificationPreferences>>();
+const mockUpdatePrefs =
+  vi.fn<(p: Partial<NotificationPreferences>) => Promise<NotificationPreferences>>();
+
+vi.mock("@/lib/settings-api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/lib/settings-api")>();
+  return {
+    ...actual,
+    getNotificationPreferences: (...args: unknown[]) => mockGetPrefs(...(args as [])),
+    updateNotificationPreferences: (...args: unknown[]) =>
+      mockUpdatePrefs(...(args as [Partial<NotificationPreferences>])),
+  };
+});
+
+describe("Notifications page - toggle behavior", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetPrefs.mockResolvedValue({ ...DEFAULT_PREFS });
+  });
+
+  it("uses functional updater so rapid clicks produce correct state", async () => {
+    let resolveFirst!: (v: NotificationPreferences) => void;
+    const firstCall = new Promise<NotificationPreferences>((r) => {
+      resolveFirst = r;
+    });
+    mockUpdatePrefs.mockReturnValueOnce(firstCall);
+    mockUpdatePrefs.mockResolvedValue({ ...DEFAULT_PREFS, billing_low_balance: false });
+
+    const user = userEvent.setup();
+    const { default: NotificationsPage } = await import(
+      "../app/(dashboard)/settings/notifications/page"
+    );
+    render(<NotificationsPage />);
+
+    const toggle = await screen.findByRole("switch", { name: "Low balance alerts" });
+    expect(toggle).toBeChecked();
+
+    // Click once — optimistic update flips to false
+    await user.click(toggle);
+    expect(toggle).not.toBeChecked();
+
+    expect(mockUpdatePrefs).toHaveBeenCalledWith({ billing_low_balance: false });
+
+    // Resolve the first API call
+    resolveFirst({ ...DEFAULT_PREFS, billing_low_balance: false });
+
+    await waitFor(() => {
+      expect(toggle).not.toBeChecked();
+    });
+  });
+
+  it("disables toggle while API call is in flight", async () => {
+    let resolveUpdate!: (v: NotificationPreferences) => void;
+    const pending = new Promise<NotificationPreferences>((r) => {
+      resolveUpdate = r;
+    });
+    mockUpdatePrefs.mockReturnValueOnce(pending);
+
+    const user = userEvent.setup();
+    const { default: NotificationsPage } = await import(
+      "../app/(dashboard)/settings/notifications/page"
+    );
+    render(<NotificationsPage />);
+
+    const toggle = await screen.findByRole("switch", { name: "Low balance alerts" });
+    await user.click(toggle);
+
+    // While in-flight, switch should be disabled
+    expect(toggle).toBeDisabled();
+
+    resolveUpdate({ ...DEFAULT_PREFS, billing_low_balance: false });
+    await waitFor(() => {
+      expect(toggle).not.toBeDisabled();
+    });
+  });
+
+  it("reverts optimistic update on API error", async () => {
+    mockUpdatePrefs.mockRejectedValueOnce(new Error("Network error"));
+
+    const user = userEvent.setup();
+    const { default: NotificationsPage } = await import(
+      "../app/(dashboard)/settings/notifications/page"
+    );
+    render(<NotificationsPage />);
+
+    const toggle = await screen.findByRole("switch", { name: "Low balance alerts" });
+    expect(toggle).toBeChecked();
+
+    await user.click(toggle);
+
+    // After rejection, should revert back to checked
+    await waitFor(() => {
+      expect(toggle).toBeChecked();
+    });
+  });
+});

package/src/__tests__/oauth-buttons.test.tsx

@@ -0,0 +1,101 @@
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@/lib/trpc", () => ({
+  trpc: {
+    authSocial: {
+      enabledSocialProviders: {
+        useQuery: vi.fn(),
+      },
+    },
+  },
+}));
+
+vi.mock("@/lib/auth-client", () => ({
+  signIn: {
+    social: vi.fn(),
+  },
+}));
+
+import { OAuthButtons } from "@/components/oauth-buttons";
+import { trpc } from "@/lib/trpc";
+
+describe("OAuthButtons", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders nothing while loading", () => {
+    vi.mocked(trpc.authSocial.enabledSocialProviders.useQuery).mockReturnValue({
+      data: undefined,
+      isLoading: true,
+    } as ReturnType<typeof trpc.authSocial.enabledSocialProviders.useQuery>);
+
+    const { container } = render(<OAuthButtons />);
+    expect(container.querySelector("button")).toBeNull();
+  });
+
+  it("renders nothing when no providers are enabled", () => {
+    vi.mocked(trpc.authSocial.enabledSocialProviders.useQuery).mockReturnValue({
+      data: [],
+      isLoading: false,
+    } as ReturnType<typeof trpc.authSocial.enabledSocialProviders.useQuery>);
+
+    const { container } = render(<OAuthButtons />);
+    expect(container.querySelector("button")).toBeNull();
+  });
+
+  it("renders nothing when data is undefined and not loading", () => {
+    vi.mocked(trpc.authSocial.enabledSocialProviders.useQuery).mockReturnValue({
+      data: undefined,
+      isLoading: false,
+    } as ReturnType<typeof trpc.authSocial.enabledSocialProviders.useQuery>);
+
+    const { container } = render(<OAuthButtons />);
+    expect(container.querySelector("button")).toBeNull();
+  });
+
+  it("renders only enabled providers", () => {
+    vi.mocked(trpc.authSocial.enabledSocialProviders.useQuery).mockReturnValue({
+      data: ["github", "discord"],
+      isLoading: false,
+    } as ReturnType<typeof trpc.authSocial.enabledSocialProviders.useQuery>);
+
+    render(<OAuthButtons />);
+    expect(screen.getByRole("button", { name: "Continue with GitHub" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Continue with Discord" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /Google/ })).not.toBeInTheDocument();
+  });
+
+  it("renders all three providers when all are enabled", () => {
+    vi.mocked(trpc.authSocial.enabledSocialProviders.useQuery).mockReturnValue({
+      data: ["github", "discord", "google"],
+      isLoading: false,
+    } as ReturnType<typeof trpc.authSocial.enabledSocialProviders.useQuery>);
+
+    render(<OAuthButtons />);
+    expect(screen.getByRole("button", { name: "Continue with GitHub" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Continue with Discord" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Continue with Google" })).toBeInTheDocument();
+  });
+
+  it("renders the separator when providers are available", () => {
+    vi.mocked(trpc.authSocial.enabledSocialProviders.useQuery).mockReturnValue({
+      data: ["github"],
+      isLoading: false,
+    } as ReturnType<typeof trpc.authSocial.enabledSocialProviders.useQuery>);
+
+    render(<OAuthButtons />);
+    expect(screen.getByText(/or continue with/i)).toBeInTheDocument();
+  });
+
+  it("does not render the separator when no providers", () => {
+    vi.mocked(trpc.authSocial.enabledSocialProviders.useQuery).mockReturnValue({
+      data: [],
+      isLoading: false,
+    } as ReturnType<typeof trpc.authSocial.enabledSocialProviders.useQuery>);
+
+    render(<OAuthButtons />);
+    expect(screen.queryByText(/or continue with/i)).not.toBeInTheDocument();
+  });
+});

package/src/__tests__/oauth-error-mapping.test.tsx

@@ -0,0 +1,97 @@
+import { render, screen } from "@testing-library/react";
+import { useSearchParams } from "next/navigation";
+import { describe, expect, it, vi } from "vitest";
+import { getOAuthErrorMessage } from "@/lib/oauth-errors";
+
+// Mock next/navigation
+vi.mock("next/navigation", () => ({
+  useRouter: vi.fn(() => ({ push: vi.fn() })),
+  useSearchParams: vi.fn(() => new URLSearchParams()),
+  useParams: vi.fn(() => ({ provider: "github" })),
+}));
+
+// Mock better-auth/react
+vi.mock("better-auth/react", () => ({
+  createAuthClient: () => ({
+    useSession: () => ({ data: null, isPending: false, error: null }),
+    signIn: { email: vi.fn(), social: vi.fn() },
+    signUp: { email: vi.fn() },
+    signOut: vi.fn(),
+    forgetPassword: vi.fn(),
+    resetPassword: vi.fn(),
+    sendVerificationEmail: vi.fn().mockResolvedValue({ data: {}, error: null }),
+  }),
+}));
+
+vi.mock("@/lib/trpc", () => ({
+  trpc: {
+    authSocial: {
+      enabledSocialProviders: {
+        useQuery: () => ({ data: ["github"], isLoading: false }),
+      },
+    },
+  },
+  TRPCProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+describe("getOAuthErrorMessage", () => {
+  it("returns null for null input", () => {
+    expect(getOAuthErrorMessage(null)).toBeNull();
+  });
+
+  it("maps access_denied to fixed message", () => {
+    expect(getOAuthErrorMessage("access_denied")).toBe("Access was denied. Please try again.");
+  });
+
+  it("maps account_already_linked to fixed message", () => {
+    expect(getOAuthErrorMessage("account_already_linked")).toBe(
+      "An account with this email already exists. Sign in to link your account.",
+    );
+  });
+
+  it("maps server_error to fixed message", () => {
+    expect(getOAuthErrorMessage("server_error")).toBe(
+      "The authentication server encountered an error. Please try again later.",
+    );
+  });
+
+  it("returns generic fallback for unknown code", () => {
+    expect(getOAuthErrorMessage("something_random")).toBe(
+      "Authentication failed. Please try again.",
+    );
+  });
+
+  it("returns generic fallback for malicious input — never reflects raw value", () => {
+    const malicious = '<script>alert("xss")</script>';
+    const result = getOAuthErrorMessage(malicious);
+    expect(result).toBe("Authentication failed. Please try again.");
+    expect(result).not.toContain(malicious);
+    expect(result).not.toContain("<script>");
+  });
+});
+
+// Import AFTER mocks
+const { default: OAuthCallbackPage } = await import("@/app/auth/callback/[provider]/page");
+
+describe("OAuthCallbackPage — error reflection", () => {
+  it("never renders raw malicious error param in the DOM", () => {
+    const malicious = "<img src=x onerror=alert(1)>";
+    vi.mocked(useSearchParams).mockReturnValue(
+      new URLSearchParams(`error=${encodeURIComponent(malicious)}`) as never,
+    );
+
+    render(<OAuthCallbackPage />);
+
+    expect(screen.getByText("Authentication failed. Please try again.")).toBeInTheDocument();
+
+    expect(screen.queryByText(malicious)).not.toBeInTheDocument();
+  });
+
+  it("shows fixed message for access_denied", () => {
+    vi.mocked(useSearchParams).mockReturnValue(new URLSearchParams("error=access_denied") as never);
+
+    render(<OAuthCallbackPage />);
+
+    expect(screen.getByText("Access was denied. Please try again.")).toBeInTheDocument();
+  });
+});