@wopr-network/platform-ui-core 1.0.0

package/src/__tests__/auth-redirect.test.tsx

@@ -0,0 +1,60 @@
+import { render, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mockReplace = vi.fn();
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ replace: mockReplace }),
+}));
+
+const mockUseSession = vi.fn();
+vi.mock("@/lib/auth-client", () => ({
+  get useSession() {
+    return mockUseSession;
+  },
+}));
+
+import { AuthRedirect } from "@/components/auth/auth-redirect";
+
+describe("AuthRedirect", () => {
+  beforeEach(() => {
+    mockReplace.mockClear();
+  });
+
+  it("redirects authenticated user to /marketplace", async () => {
+    mockUseSession.mockReturnValue({
+      data: { user: { id: "1", email: "test@test.com" } },
+      isPending: false,
+    });
+    render(<AuthRedirect />);
+    await waitFor(() => {
+      expect(mockReplace).toHaveBeenCalledWith("/marketplace");
+    });
+  });
+
+  it("does not redirect while session is loading", () => {
+    mockUseSession.mockReturnValue({
+      data: null,
+      isPending: true,
+    });
+    render(<AuthRedirect />);
+    expect(mockReplace).not.toHaveBeenCalled();
+  });
+
+  it("does not redirect unauthenticated user", () => {
+    mockUseSession.mockReturnValue({
+      data: null,
+      isPending: false,
+    });
+    render(<AuthRedirect />);
+    expect(mockReplace).not.toHaveBeenCalled();
+  });
+
+  it("renders nothing (returns null)", () => {
+    mockUseSession.mockReturnValue({
+      data: null,
+      isPending: false,
+    });
+    const { container } = render(<AuthRedirect />);
+    expect(container.innerHTML).toBe("");
+  });
+});

package/src/__tests__/auth.test.tsx

@@ -0,0 +1,269 @@
+import { render, screen } from "@testing-library/react";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// 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 }),
+  }),
+}));
+
+// Mock tRPC so OAuthButtons can query enabled social providers
+vi.mock("@/lib/trpc", () => ({
+  trpc: {
+    authSocial: {
+      enabledSocialProviders: {
+        useQuery: () => ({ data: ["github", "discord", "google"], isLoading: false }),
+      },
+    },
+  },
+  TRPCProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+// Mock framer-motion to prevent animation issues in JSDOM
+vi.mock("framer-motion", () => ({
+  motion: {
+    div: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => (
+      <div {...props}>{children}</div>
+    ),
+    p: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => (
+      <p {...props}>{children}</p>
+    ),
+  },
+}));
+
+describe("Login page", () => {
+  it("renders email and password fields", async () => {
+    const { default: LoginPage } = await import("../app/(auth)/login/page");
+    render(<LoginPage />);
+
+    expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    expect(screen.getByLabelText("Password")).toBeInTheDocument();
+  });
+
+  it("renders sign in button", async () => {
+    const { default: LoginPage } = await import("../app/(auth)/login/page");
+    render(<LoginPage />);
+
+    expect(screen.getByRole("button", { name: "Sign in" })).toBeInTheDocument();
+  });
+
+  it("renders OAuth buttons", async () => {
+    const { default: LoginPage } = await import("../app/(auth)/login/page");
+    render(<LoginPage />);
+
+    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 forgot password and signup links", async () => {
+    const { default: LoginPage } = await import("../app/(auth)/login/page");
+    render(<LoginPage />);
+
+    expect(screen.getByText("Forgot password?")).toBeInTheDocument();
+    expect(screen.getByText("Sign up")).toBeInTheDocument();
+  });
+});
+
+describe("Signup page", () => {
+  it("renders name, email, password, and confirm password fields", async () => {
+    const { default: SignupPage } = await import("../app/(auth)/signup/page");
+    render(<SignupPage />);
+
+    expect(screen.getByLabelText("Name")).toBeInTheDocument();
+    expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    expect(screen.getByLabelText("Password")).toBeInTheDocument();
+    expect(screen.getByLabelText("Confirm password")).toBeInTheDocument();
+  });
+
+  it("renders create account button", async () => {
+    const { default: SignupPage } = await import("../app/(auth)/signup/page");
+    render(<SignupPage />);
+
+    expect(screen.getByRole("button", { name: "Create account" })).toBeInTheDocument();
+  });
+
+  it("renders terms checkbox", async () => {
+    const { default: SignupPage } = await import("../app/(auth)/signup/page");
+    render(<SignupPage />);
+
+    expect(screen.getByText(/Terms of Service/)).toBeInTheDocument();
+    expect(screen.getByText(/Privacy Policy/)).toBeInTheDocument();
+  });
+
+  it("renders sign in link", async () => {
+    const { default: SignupPage } = await import("../app/(auth)/signup/page");
+    render(<SignupPage />);
+
+    expect(screen.getByText("Sign in")).toBeInTheDocument();
+  });
+});
+
+describe("Forgot password page", () => {
+  it("renders email field and submit button", async () => {
+    const { default: ForgotPasswordPage } = await import("../app/(auth)/forgot-password/page");
+    render(<ForgotPasswordPage />);
+
+    expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Send reset link" })).toBeInTheDocument();
+  });
+
+  it("renders back to sign in link", async () => {
+    const { default: ForgotPasswordPage } = await import("../app/(auth)/forgot-password/page");
+    render(<ForgotPasswordPage />);
+
+    expect(screen.getByText("Back to sign in")).toBeInTheDocument();
+  });
+});
+
+describe("Reset password page", () => {
+  it("shows access denied when no token is present", async () => {
+    const { default: ResetPasswordPage } = await import("../app/(auth)/reset-password/page");
+    render(<ResetPasswordPage />);
+
+    expect(screen.getByText("Access denied")).toBeInTheDocument();
+    expect(screen.getByText("Request a new reset link")).toBeInTheDocument();
+  });
+});
+
+describe("OAuth callback page", () => {
+  const mockPush = vi.fn();
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mockPush.mockClear();
+    vi.mocked(useRouter).mockReturnValue({ push: mockPush } as unknown as ReturnType<
+      typeof useRouter
+    >);
+    vi.mocked(useParams).mockReturnValue({ provider: "github" });
+    vi.mocked(useSearchParams).mockReturnValue(
+      new URLSearchParams() as ReturnType<typeof useSearchParams>,
+    );
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("renders loading state when no error", async () => {
+    const { default: OAuthCallbackPage } = await import("../app/auth/callback/[provider]/page");
+    render(<OAuthCallbackPage />);
+
+    expect(screen.getByText(/Completing sign in with github/)).toBeInTheDocument();
+  });
+
+  it("redirects to / after 1 second when no error and no callbackUrl", async () => {
+    const { default: OAuthCallbackPage } = await import("../app/auth/callback/[provider]/page");
+    render(<OAuthCallbackPage />);
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(mockPush).toHaveBeenCalledWith("/");
+  });
+
+  it("redirects to callbackUrl when provided", async () => {
+    vi.mocked(useSearchParams).mockReturnValue(
+      new URLSearchParams("callbackUrl=/dashboard") as ReturnType<typeof useSearchParams>,
+    );
+    const { default: OAuthCallbackPage } = await import("../app/auth/callback/[provider]/page");
+    render(<OAuthCallbackPage />);
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(mockPush).toHaveBeenCalledWith("/dashboard");
+  });
+
+  it("sanitizes unsafe callbackUrl and redirects to /", async () => {
+    vi.mocked(useSearchParams).mockReturnValue(
+      new URLSearchParams("callbackUrl=//evil.com") as ReturnType<typeof useSearchParams>,
+    );
+    const { default: OAuthCallbackPage } = await import("../app/auth/callback/[provider]/page");
+    render(<OAuthCallbackPage />);
+
+    await vi.advanceTimersByTimeAsync(1000);
+
+    expect(mockPush).toHaveBeenCalledWith("/");
+  });
+
+  it("shows access denied error for error=access_denied", async () => {
+    vi.mocked(useSearchParams).mockReturnValue(
+      new URLSearchParams("error=access_denied") as ReturnType<typeof useSearchParams>,
+    );
+    const { default: OAuthCallbackPage } = await import("../app/auth/callback/[provider]/page");
+    render(<OAuthCallbackPage />);
+
+    expect(screen.getByText("Authentication failed")).toBeInTheDocument();
+    expect(screen.getByText("Access was denied. Please try again.")).toBeInTheDocument();
+    expect(screen.getByText("Could not sign in with github")).toBeInTheDocument();
+    expect(mockPush).not.toHaveBeenCalled();
+  });
+
+  it("shows account already linked error", async () => {
+    vi.mocked(useSearchParams).mockReturnValue(
+      new URLSearchParams("error=account_already_linked") as ReturnType<typeof useSearchParams>,
+    );
+    const { default: OAuthCallbackPage } = await import("../app/auth/callback/[provider]/page");
+    render(<OAuthCallbackPage />);
+
+    expect(screen.getByText("Authentication failed")).toBeInTheDocument();
+    expect(
+      screen.getByText("An account with this email already exists. Sign in to link your account."),
+    ).toBeInTheDocument();
+    expect(mockPush).not.toHaveBeenCalled();
+  });
+
+  it("shows generic error for unknown error param", async () => {
+    vi.mocked(useSearchParams).mockReturnValue(
+      new URLSearchParams("error=totally_unknown_code") as ReturnType<typeof useSearchParams>,
+    );
+    const { default: OAuthCallbackPage } = await import("../app/auth/callback/[provider]/page");
+    render(<OAuthCallbackPage />);
+
+    expect(screen.getByText("Authentication failed")).toBeInTheDocument();
+    expect(screen.getByText("Authentication failed. Please try again.")).toBeInTheDocument();
+    expect(mockPush).not.toHaveBeenCalled();
+  });
+
+  it("renders back to sign in link on error", async () => {
+    vi.mocked(useSearchParams).mockReturnValue(
+      new URLSearchParams("error=access_denied") as ReturnType<typeof useSearchParams>,
+    );
+    const { default: OAuthCallbackPage } = await import("../app/auth/callback/[provider]/page");
+    render(<OAuthCallbackPage />);
+
+    const link = screen.getByText("Back to sign in");
+    expect(link).toBeInTheDocument();
+    expect(link.closest("a")).toHaveAttribute("href", "/login");
+  });
+
+  it("displays correct provider name from route params", async () => {
+    vi.mocked(useParams).mockReturnValue({ provider: "discord" });
+    vi.mocked(useSearchParams).mockReturnValue(
+      new URLSearchParams("error=access_denied") as ReturnType<typeof useSearchParams>,
+    );
+    const { default: OAuthCallbackPage } = await import("../app/auth/callback/[provider]/page");
+    render(<OAuthCallbackPage />);
+
+    expect(screen.getByText("Could not sign in with discord")).toBeInTheDocument();
+  });
+});

package/src/__tests__/auto-topup-card.test.tsx

@@ -0,0 +1,257 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { AutoTopupSettings } from "@/lib/api";
+
+const { mockGetAutoTopupSettings, mockUpdateAutoTopupSettings } = vi.hoisted(() => ({
+  mockGetAutoTopupSettings: vi.fn(),
+  mockUpdateAutoTopupSettings: vi.fn(),
+}));
+
+// Mock framer-motion to prevent animation issues in JSDOM
+vi.mock("framer-motion", () => ({
+  motion: {
+    div: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => (
+      <div {...props}>{children}</div>
+    ),
+  },
+}));
+
+// Mock next/navigation
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+  useSearchParams: () => new URLSearchParams(),
+  usePathname: () => "/billing/credits",
+}));
+
+// 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 MOCK_SETTINGS: AutoTopupSettings = {
+  usageBased: {
+    enabled: false,
+    thresholdCents: 500,
+    topupAmountCents: 2000,
+  },
+  scheduled: {
+    enabled: false,
+    amountCents: 2000,
+    interval: "weekly",
+    nextChargeDate: null,
+  },
+  paymentMethodLast4: "4242",
+  paymentMethodBrand: "Visa",
+};
+
+const MOCK_SETTINGS_ENABLED: AutoTopupSettings = {
+  usageBased: {
+    enabled: true,
+    thresholdCents: 500,
+    topupAmountCents: 2000,
+  },
+  scheduled: {
+    enabled: true,
+    amountCents: 2000,
+    interval: "weekly",
+    nextChargeDate: "2026-02-24T00:00:00Z",
+  },
+  paymentMethodLast4: "4242",
+  paymentMethodBrand: "Visa",
+};
+
+const MOCK_SETTINGS_NO_CARD: AutoTopupSettings = {
+  usageBased: {
+    enabled: false,
+    thresholdCents: 500,
+    topupAmountCents: 2000,
+  },
+  scheduled: {
+    enabled: false,
+    amountCents: 2000,
+    interval: "weekly",
+    nextChargeDate: null,
+  },
+  paymentMethodLast4: null,
+  paymentMethodBrand: null,
+};
+
+const MOCK_SETTINGS_MONTHLY: AutoTopupSettings = {
+  ...MOCK_SETTINGS_ENABLED,
+  scheduled: {
+    enabled: true,
+    amountCents: 2000,
+    interval: "monthly",
+    nextChargeDate: "2026-03-01T00:00:00Z",
+  },
+};
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/lib/api")>();
+  return {
+    ...actual,
+    getAutoTopupSettings: (...args: unknown[]) => mockGetAutoTopupSettings(...args),
+    updateAutoTopupSettings: (...args: unknown[]) => mockUpdateAutoTopupSettings(...args),
+  };
+});
+
+describe("AutoTopupCard", () => {
+  beforeEach(() => {
+    // Reset defaults before each test so per-test overrides don't leak.
+    mockGetAutoTopupSettings.mockResolvedValue(MOCK_SETTINGS);
+    mockUpdateAutoTopupSettings.mockResolvedValue(MOCK_SETTINGS_ENABLED);
+  });
+
+  it("renders card title", async () => {
+    const { AutoTopupCard } = await import("../components/billing/auto-topup-card");
+    render(<AutoTopupCard />);
+
+    // Wait for loading to complete by finding something in the final rendered state
+    await screen.findByText("Usage-based");
+    expect(screen.getAllByText("Auto-topup").length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("renders loading skeleton initially", async () => {
+    const { AutoTopupCard } = await import("../components/billing/auto-topup-card");
+    render(<AutoTopupCard />);
+
+    expect(document.querySelector('[data-slot="skeleton"]')).toBeInTheDocument();
+  });
+
+  it("renders usage-based and scheduled labels", async () => {
+    const { AutoTopupCard } = await import("../components/billing/auto-topup-card");
+    render(<AutoTopupCard />);
+
+    expect(await screen.findByText("Usage-based")).toBeInTheDocument();
+    expect(screen.getByText("Scheduled")).toBeInTheDocument();
+  });
+
+  it("renders two toggle switches", async () => {
+    const { AutoTopupCard } = await import("../components/billing/auto-topup-card");
+    render(<AutoTopupCard />);
+
+    await screen.findByText("Usage-based");
+    const switches = screen.getAllByRole("switch");
+    expect(switches).toHaveLength(2);
+  });
+
+  it("renders card on file info", async () => {
+    const { AutoTopupCard } = await import("../components/billing/auto-topup-card");
+    render(<AutoTopupCard />);
+
+    expect(await screen.findByText(/Visa/)).toBeInTheDocument();
+    expect(screen.getByText(/4242/)).toBeInTheDocument();
+  });
+
+  it("shows add payment method prompt when no card on file", async () => {
+    mockGetAutoTopupSettings.mockResolvedValueOnce(MOCK_SETTINGS_NO_CARD);
+    const { AutoTopupCard } = await import("../components/billing/auto-topup-card");
+    render(<AutoTopupCard />);
+
+    expect(
+      await screen.findByText("Add a payment method to enable auto-topup."),
+    ).toBeInTheDocument();
+  });
+
+  it("shows error state with retry on fetch failure", async () => {
+    mockGetAutoTopupSettings.mockRejectedValueOnce(new Error("fail"));
+    const { AutoTopupCard } = await import("../components/billing/auto-topup-card");
+    render(<AutoTopupCard />);
+
+    expect(await screen.findByText("Failed to load auto-topup settings.")).toBeInTheDocument();
+    expect(screen.getByText("Retry")).toBeInTheDocument();
+  });
+
+  it("calls updateAutoTopupSettings when usage toggle is clicked", async () => {
+    const user = userEvent.setup();
+    mockUpdateAutoTopupSettings.mockResolvedValue(MOCK_SETTINGS_ENABLED);
+    const { AutoTopupCard } = await import("../components/billing/auto-topup-card");
+    render(<AutoTopupCard />);
+
+    await screen.findByText("Usage-based");
+    const usageToggle = screen.getAllByRole("switch")[0];
+    await user.click(usageToggle);
+
+    expect(mockUpdateAutoTopupSettings).toHaveBeenCalledWith({
+      usageBased: {
+        enabled: true,
+        thresholdCents: 500,
+        topupAmountCents: 2000,
+      },
+    });
+  });
+
+  it("calls updateAutoTopupSettings when schedule toggle is clicked", async () => {
+    const user = userEvent.setup();
+    mockUpdateAutoTopupSettings.mockResolvedValue(MOCK_SETTINGS_ENABLED);
+    const { AutoTopupCard } = await import("../components/billing/auto-topup-card");
+    render(<AutoTopupCard />);
+
+    await screen.findByText("Scheduled");
+    const scheduleToggle = screen.getAllByRole("switch")[1];
+    await user.click(scheduleToggle);
+
+    expect(mockUpdateAutoTopupSettings).toHaveBeenCalledWith({
+      scheduled: {
+        enabled: true,
+        amountCents: 2000,
+        interval: "weekly",
+      },
+    });
+  });
+
+  it("shows next charge date when schedule is enabled", async () => {
+    mockGetAutoTopupSettings.mockResolvedValueOnce(MOCK_SETTINGS_ENABLED);
+    const { AutoTopupCard } = await import("../components/billing/auto-topup-card");
+    render(<AutoTopupCard />);
+
+    expect(await screen.findByText(/Next charge:/)).toBeInTheDocument();
+  });
+
+  it("shows daily/weekly dividend tip when schedule is enabled", async () => {
+    mockGetAutoTopupSettings.mockResolvedValueOnce(MOCK_SETTINGS_ENABLED);
+    const { AutoTopupCard } = await import("../components/billing/auto-topup-card");
+    render(<AutoTopupCard />);
+
+    expect(
+      await screen.findByText(
+        "Tip: scheduled top-ups keep you in the dividend pool automatically.",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("shows monthly dividend tip for monthly interval", async () => {
+    mockGetAutoTopupSettings.mockResolvedValueOnce(MOCK_SETTINGS_MONTHLY);
+    const { AutoTopupCard } = await import("../components/billing/auto-topup-card");
+    render(<AutoTopupCard />);
+
+    expect(
+      await screen.findByText(
+        "Tip: scheduled top-ups keep you in the dividend pool for 7 days each month.",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("renders configuration text for usage-based section", async () => {
+    const { AutoTopupCard } = await import("../components/billing/auto-topup-card");
+    render(<AutoTopupCard />);
+
+    expect(await screen.findByText("When balance drops below")).toBeInTheDocument();
+    expect(screen.getByText("add")).toBeInTheDocument();
+  });
+
+  it("renders configuration text for scheduled section", async () => {
+    const { AutoTopupCard } = await import("../components/billing/auto-topup-card");
+    render(<AutoTopupCard />);
+
+    expect(await screen.findByText("Add")).toBeInTheDocument();
+    expect(screen.getByText("every")).toBeInTheDocument();
+  });
+});