@wopr-network/platform-ui-core 1.0.0

package/src/__tests__/backups-tab.test.tsx

@@ -0,0 +1,221 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@/lib/api", () => ({
+  listSnapshots: vi.fn(),
+  createSnapshot: vi.fn(),
+  restoreSnapshot: vi.fn(),
+  deleteSnapshot: vi.fn(),
+  apiFetch: vi.fn(),
+}));
+
+vi.mock("@/lib/api-config", async () => {
+  const actual = await vi.importActual("@/lib/api-config");
+  return { ...actual };
+});
+
+vi.mock("@/lib/fetch-utils", () => ({
+  handleUnauthorized: vi.fn(),
+}));
+
+vi.mock("@/lib/trpc", () => ({
+  trpcVanilla: {},
+}));
+
+vi.mock("sonner", () => ({
+  toast: { success: vi.fn(), error: vi.fn() },
+}));
+
+import { BackupsTab } from "@/components/bot-settings/backups-tab";
+import { createSnapshot, deleteSnapshot, listSnapshots, restoreSnapshot } from "@/lib/api";
+
+const mockListSnapshots = vi.mocked(listSnapshots);
+const mockCreateSnapshot = vi.mocked(createSnapshot);
+const mockRestoreSnapshot = vi.mocked(restoreSnapshot);
+const mockDeleteSnapshot = vi.mocked(deleteSnapshot);
+
+const MOCK_SNAPSHOTS = [
+  {
+    id: "snap-1",
+    instanceId: "bot-1",
+    name: "Before plugin install",
+    type: "on-demand" as const,
+    trigger: "manual" as const,
+    sizeMb: 42,
+    createdAt: "2026-02-20T10:00:00Z",
+    expiresAt: null,
+  },
+  {
+    id: "snap-2",
+    instanceId: "bot-1",
+    name: null,
+    type: "nightly" as const,
+    trigger: "scheduled" as const,
+    sizeMb: 100,
+    createdAt: "2026-02-19T03:00:00Z",
+    expiresAt: 1740700800,
+  },
+  {
+    id: "snap-3",
+    instanceId: "bot-1",
+    name: null,
+    type: "pre-restore" as const,
+    trigger: "manual" as const,
+    sizeMb: 42,
+    createdAt: "2026-02-18T12:00:00Z",
+    expiresAt: null,
+  },
+];
+
+describe("BackupsTab", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("shows loading state then renders snapshot list", async () => {
+    mockListSnapshots.mockResolvedValueOnce(MOCK_SNAPSHOTS);
+    render(<BackupsTab botId="bot-1" />);
+    expect(screen.getByText(/loading/i)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText("Before plugin install")).toBeInTheDocument();
+    });
+    expect(mockListSnapshots).toHaveBeenCalledWith("bot-1");
+  });
+
+  it("shows empty state when no snapshots", async () => {
+    mockListSnapshots.mockResolvedValueOnce([]);
+    render(<BackupsTab botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText(/no backups yet/i)).toBeInTheDocument();
+    });
+  });
+
+  it("shows snapshot type badges", async () => {
+    mockListSnapshots.mockResolvedValueOnce(MOCK_SNAPSHOTS);
+    render(<BackupsTab botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText("Manual")).toBeInTheDocument();
+      expect(screen.getByText("Nightly")).toBeInTheDocument();
+      expect(screen.getByText("Auto (pre-restore)")).toBeInTheDocument();
+    });
+  });
+
+  it("creates a snapshot with name", async () => {
+    mockListSnapshots.mockResolvedValue([]);
+    mockCreateSnapshot.mockResolvedValueOnce({
+      snapshot: MOCK_SNAPSHOTS[0],
+      estimatedMonthlyCost: "$0.01/month",
+    });
+    const user = userEvent.setup();
+    render(<BackupsTab botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText(/no backups yet/i)).toBeInTheDocument();
+    });
+    await user.click(screen.getByRole("button", { name: /create backup/i }));
+    const input = screen.getByPlaceholderText(/backup name/i);
+    await user.type(input, "My checkpoint");
+    await user.click(screen.getByRole("button", { name: /^save$/i }));
+    expect(mockCreateSnapshot).toHaveBeenCalledWith("bot-1", "My checkpoint");
+  });
+
+  it("shows restore confirmation dialog", async () => {
+    mockListSnapshots.mockResolvedValueOnce(MOCK_SNAPSHOTS);
+    const user = userEvent.setup();
+    render(<BackupsTab botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText("Before plugin install")).toBeInTheDocument();
+    });
+    const restoreButtons = screen.getAllByRole("button", {
+      name: /restore/i,
+    });
+    await user.click(restoreButtons[0]);
+    expect(screen.getByText(/are you sure/i)).toBeInTheDocument();
+    expect(screen.getByText(/this will overwrite/i)).toBeInTheDocument();
+  });
+
+  it("restores a snapshot after confirmation", async () => {
+    mockListSnapshots.mockResolvedValue(MOCK_SNAPSHOTS);
+    mockRestoreSnapshot.mockResolvedValueOnce(undefined);
+    const user = userEvent.setup();
+    render(<BackupsTab botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText("Before plugin install")).toBeInTheDocument();
+    });
+    const restoreButtons = screen.getAllByRole("button", {
+      name: /restore/i,
+    });
+    await user.click(restoreButtons[0]);
+    await user.click(screen.getByRole("button", { name: /^confirm restore$/i }));
+    expect(mockRestoreSnapshot).toHaveBeenCalledWith("bot-1", "snap-1");
+  });
+
+  it("deletes a snapshot after confirmation", async () => {
+    mockListSnapshots.mockResolvedValue(MOCK_SNAPSHOTS);
+    mockDeleteSnapshot.mockResolvedValueOnce(undefined);
+    const user = userEvent.setup();
+    render(<BackupsTab botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText("Before plugin install")).toBeInTheDocument();
+    });
+    const deleteButtons = screen.getAllByRole("button", {
+      name: /delete/i,
+    });
+    await user.click(deleteButtons[0]);
+    await user.click(screen.getByRole("button", { name: /^confirm delete$/i }));
+    expect(mockDeleteSnapshot).toHaveBeenCalledWith("bot-1", "snap-1");
+  });
+
+  it("shows error when list fails", async () => {
+    mockListSnapshots.mockRejectedValueOnce(new Error("Network error"));
+    render(<BackupsTab botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText("Network error")).toBeInTheDocument();
+    });
+  });
+
+  it("shows retry button in list area when error is set", async () => {
+    mockListSnapshots.mockRejectedValueOnce(new Error("Network error"));
+    render(<BackupsTab botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: /retry/i })).toBeInTheDocument();
+    });
+  });
+
+  it("retries load when retry button is clicked", async () => {
+    mockListSnapshots
+      .mockRejectedValueOnce(new Error("Network error"))
+      .mockResolvedValueOnce(MOCK_SNAPSHOTS);
+    const user = userEvent.setup();
+    render(<BackupsTab botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: /retry/i })).toBeInTheDocument();
+    });
+    await user.click(screen.getByRole("button", { name: /retry/i }));
+    await waitFor(() => {
+      expect(screen.getByText("Before plugin install")).toBeInTheDocument();
+    });
+  });
+
+  it("does not dismiss dialog while async op is in progress", async () => {
+    mockListSnapshots.mockResolvedValue(MOCK_SNAPSHOTS);
+    let resolveDelete!: () => void;
+    mockDeleteSnapshot.mockImplementationOnce(
+      () =>
+        new Promise<undefined>((res) => {
+          resolveDelete = () => res(undefined);
+        }),
+    );
+    const user = userEvent.setup();
+    render(<BackupsTab botId="bot-1" />);
+    await waitFor(() => {
+      expect(screen.getByText("Before plugin install")).toBeInTheDocument();
+    });
+    const deleteButtons = screen.getAllByRole("button", { name: /delete/i });
+    await user.click(deleteButtons[0]);
+    await user.click(screen.getByRole("button", { name: /^confirm delete$/i }));
+    // While deleting, the dialog should still be open (button changes to "Deleting...")
+    expect(screen.getByRole("button", { name: /deleting/i })).toBeInTheDocument();
+    resolveDelete();
+  });
+});

package/src/__tests__/billing-byok-callout.test.tsx

@@ -0,0 +1,76 @@
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn(), replace: vi.fn() }),
+  useSearchParams: () => new URLSearchParams(),
+  usePathname: () => "/billing",
+}));
+
+vi.mock("@/lib/api", () => ({
+  getInferenceMode: vi.fn().mockResolvedValue("byok"),
+}));
+
+import { ByokCallout } from "@/components/billing/byok-callout";
+import { getInferenceMode } from "@/lib/api";
+
+describe("ByokCallout", () => {
+  beforeEach(() => {
+    vi.mocked(getInferenceMode).mockResolvedValue("byok");
+  });
+
+  it("renders BYOK callout when mode is byok", async () => {
+    render(<ByokCallout />);
+    expect(await screen.findByText("Bring Your Own Keys")).toBeInTheDocument();
+    expect(screen.getByText(/Platform never touches your inference/)).toBeInTheDocument();
+  });
+
+  it("renders compact BYOK text when compact prop is true", async () => {
+    render(<ByokCallout compact />);
+    expect(await screen.findByText(/All plans are BYOK/)).toBeInTheDocument();
+    expect(screen.queryByText("Bring Your Own Keys")).not.toBeInTheDocument();
+  });
+
+  it("renders hosted callout when mode is hosted", async () => {
+    vi.mocked(getInferenceMode).mockResolvedValue("hosted");
+    render(<ByokCallout />);
+    expect(await screen.findByText("Hosted AI Adapter")).toBeInTheDocument();
+    expect(screen.getByText(/transparent pricing/)).toBeInTheDocument();
+  });
+
+  it("renders compact hosted text when hosted + compact", async () => {
+    vi.mocked(getInferenceMode).mockResolvedValue("hosted");
+    render(<ByokCallout compact />);
+    expect(await screen.findByText(/Hosted adapter/)).toBeInTheDocument();
+    expect(screen.queryByText("Hosted AI Adapter")).not.toBeInTheDocument();
+  });
+
+  it("falls back to BYOK when getInferenceMode rejects", async () => {
+    vi.mocked(getInferenceMode).mockRejectedValue(new Error("fail"));
+    render(<ByokCallout />);
+    expect(await screen.findByText("Bring Your Own Keys")).toBeInTheDocument();
+  });
+
+  it("renders loading placeholder before mode resolves", () => {
+    vi.mocked(getInferenceMode).mockReturnValue(
+      new Promise(() => {
+        /* never resolves */
+      }),
+    );
+    const { container } = render(<ByokCallout />);
+    expect(container.querySelector(".h-5")).toBeInTheDocument();
+    expect(screen.queryByText("Bring Your Own Keys")).not.toBeInTheDocument();
+  });
+
+  it("renders compact loading placeholder as nbsp", () => {
+    vi.mocked(getInferenceMode).mockReturnValue(
+      new Promise(() => {
+        /* never resolves */
+      }),
+    );
+    const { container } = render(<ByokCallout compact />);
+    const p = container.querySelector("p");
+    expect(p).toBeInTheDocument();
+    expect(p?.textContent).toBe("\u00a0");
+  });
+});

package/src/__tests__/billing-layout-nav-hidden.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import BillingLayout from "@/app/(dashboard)/billing/layout";
+
+// Mock next/navigation
+vi.mock("next/navigation", () => ({
+  usePathname: () => "/billing/plans",
+}));
+
+// Mock next/link
+vi.mock("next/link", () => ({
+  default: ({
+    children,
+    href,
+    ...props
+  }: {
+    children: React.ReactNode;
+    href: string;
+    [key: string]: unknown;
+  }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+// Mock API — mode never resolves (stays null)
+vi.mock("@/lib/api", () => ({
+  apiFetch: vi.fn(),
+  getInferenceMode: () =>
+    new Promise((_resolve) => {
+      /* never resolves */
+    }),
+}));
+
+test("hostedOnly nav item is hidden (not just invisible) while mode is loading", () => {
+  render(
+    <BillingLayout>
+      <div>child</div>
+    </BillingLayout>,
+  );
+
+  const hostedLink = screen.getByText("Hosted Usage");
+  const li = hostedLink.closest("li");
+  expect(li?.className).toMatch(/\bhidden\b/);
+  expect(li?.className).not.toMatch(/\binvisible\b/);
+});

package/src/__tests__/billing-payment-org-invoices.test.tsx

@@ -0,0 +1,123 @@
+import { render, screen } from "@testing-library/react";
+import type React from "react";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@/lib/auth-client", () => ({
+  useSession: () => ({
+    data: { user: { email: "test@example.com" } },
+  }),
+}));
+
+vi.mock("@/lib/api", () => ({
+  getBillingInfo: vi.fn().mockResolvedValue({
+    email: "test@example.com",
+    paymentMethods: [],
+    invoices: [],
+  }),
+  removePaymentMethod: vi.fn(),
+  setDefaultPaymentMethod: vi.fn(),
+  updateBillingEmail: vi.fn(),
+  apiFetch: vi.fn(),
+}));
+
+vi.mock("@/lib/org-api", () => ({
+  getOrganization: vi.fn().mockResolvedValue({
+    id: "org-1",
+    name: "Test Org",
+    members: [{ email: "test@example.com", role: "admin" }],
+  }),
+}));
+
+vi.mock("@/lib/org-billing-api", () => ({
+  getOrgBillingInfo: vi.fn().mockResolvedValue({
+    paymentMethods: [],
+    invoices: [
+      {
+        id: "inv-org-1",
+        date: "2026-01-15T00:00:00Z",
+        amount: 4999,
+        status: "paid",
+        downloadUrl: "https://example.com/invoice/inv-org-1",
+      },
+      {
+        id: "inv-org-2",
+        date: "2026-02-15T00:00:00Z",
+        amount: 2500,
+        status: "pending",
+        downloadUrl: "https://example.com/invoice/inv-org-2",
+      },
+    ],
+  }),
+}));
+
+vi.mock("@/lib/format-credit", () => ({
+  formatCreditStandard: (v: number) => `$${(v / 100).toFixed(2)}`,
+}));
+
+vi.mock("framer-motion", () => ({
+  AnimatePresence: ({ children }: { children: React.ReactNode }) => children,
+  motion: {
+    div: ({ children, ...props }: Record<string, unknown>) => {
+      const {
+        initial: _i,
+        animate: _a,
+        exit: _e,
+        variants: _v,
+        custom: _c,
+        transition: _t,
+        ...rest
+      } = props;
+      return <div {...(rest as Record<string, unknown>)}>{children as React.ReactNode}</div>;
+    },
+    tr: ({ children, ...props }: Record<string, unknown>) => {
+      const {
+        initial: _i,
+        animate: _a,
+        exit: _e,
+        variants: _v,
+        custom: _c,
+        transition: _t,
+        ...rest
+      } = props;
+      return <tr {...(rest as Record<string, unknown>)}>{children as React.ReactNode}</tr>;
+    },
+  },
+}));
+
+vi.mock("@/components/billing/add-payment-method-dialog", () => ({
+  AddPaymentMethodDialog: () => null,
+}));
+
+vi.mock("@/components/billing/byok-callout", () => ({
+  ByokCallout: () => null,
+}));
+
+import PaymentPage from "@/app/(dashboard)/billing/payment/page";
+
+describe("PaymentPage org invoices", () => {
+  it("renders org invoice rows when org context is available", async () => {
+    render(<PaymentPage />);
+
+    expect(await screen.findByText("Org Billing History")).toBeInTheDocument();
+    expect(await screen.findByText("$49.99")).toBeInTheDocument();
+    expect(await screen.findByText("$25.00")).toBeInTheDocument();
+    expect(screen.getByText("paid")).toBeInTheDocument();
+    expect(screen.getByText("pending")).toBeInTheDocument();
+
+    const downloadLinks = screen.getAllByText("Download");
+    expect(downloadLinks.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("shows empty message when org has no invoices", async () => {
+    const { getOrgBillingInfo } = await import("@/lib/org-billing-api");
+    vi.mocked(getOrgBillingInfo).mockResolvedValueOnce({
+      paymentMethods: [],
+      invoices: [],
+    });
+
+    render(<PaymentPage />);
+
+    expect(await screen.findByText("Org Billing History")).toBeInTheDocument();
+    expect(screen.getByText("No org invoices yet.")).toBeInTheDocument();
+  });
+});