@wopr-network/platform-ui-core 1.0.0

package/src/__tests__/coupon-input.test.tsx

@@ -0,0 +1,119 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+const { mockApplyCoupon } = vi.hoisted(() => ({
+  mockApplyCoupon: vi.fn(),
+}));
+
+vi.mock("@/lib/trpc", () => ({
+  trpcVanilla: {
+    billing: {
+      applyCoupon: {
+        mutate: (...args: unknown[]) => mockApplyCoupon(...args),
+      },
+    },
+  },
+}));
+
+vi.mock("framer-motion", () => ({
+  motion: {
+    div: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => (
+      <div {...props}>{children}</div>
+    ),
+  },
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+  useSearchParams: () => new URLSearchParams(),
+  usePathname: () => "/billing/credits",
+}));
+
+vi.mock("better-auth/react", () => ({
+  createAuthClient: () => ({
+    useSession: () => ({ data: null, isPending: false, error: null }),
+  }),
+}));
+
+describe("CouponInput", () => {
+  it("renders idle state — shows input and Apply button, no success/error message", async () => {
+    const { CouponInput } = await import("../components/billing/coupon-input");
+    render(<CouponInput />);
+
+    expect(screen.getByPlaceholderText("Coupon code")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Apply" })).toBeInTheDocument();
+    expect(screen.queryByText(/credits will be added/)).not.toBeInTheDocument();
+  });
+
+  it("shows loading state while applying — button shows Applying... and is disabled", async () => {
+    // Never resolves so we can inspect the loading state
+    mockApplyCoupon.mockImplementation(
+      () =>
+        new Promise(() => {
+          /* never resolves — keep loading state for test */
+        }),
+    );
+    const user = userEvent.setup();
+    const { CouponInput } = await import("../components/billing/coupon-input");
+    render(<CouponInput />);
+
+    const input = screen.getByPlaceholderText("Coupon code");
+    await user.type(input, "SAVE20");
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(screen.getByRole("button", { name: "Applying..." })).toBeDisabled();
+  });
+
+  it("shows success state after valid code — green message with credits amount visible", async () => {
+    mockApplyCoupon.mockResolvedValueOnce({
+      creditsGranted: 500,
+      message: "Coupon applied!",
+    });
+    const user = userEvent.setup();
+    const { CouponInput } = await import("../components/billing/coupon-input");
+    render(<CouponInput />);
+
+    const input = screen.getByPlaceholderText("Coupon code");
+    await user.type(input, "VALID50");
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(await screen.findByText(/\+500 credits added to your balance/)).toBeInTheDocument();
+  });
+
+  it("shows error state after invalid code — red error message with server message shown", async () => {
+    mockApplyCoupon.mockRejectedValueOnce(new Error("Coupon not found"));
+    const user = userEvent.setup();
+    const { CouponInput } = await import("../components/billing/coupon-input");
+    render(<CouponInput />);
+
+    const input = screen.getByPlaceholderText("Coupon code");
+    await user.type(input, "BADCODE");
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(await screen.findByText("Coupon not found")).toBeInTheDocument();
+  });
+
+  it("clears error when input changes — typing a new code clears the error state", async () => {
+    mockApplyCoupon.mockRejectedValueOnce(new Error("Invalid code"));
+    const user = userEvent.setup();
+    const { CouponInput } = await import("../components/billing/coupon-input");
+    render(<CouponInput />);
+
+    const input = screen.getByPlaceholderText("Coupon code");
+    await user.type(input, "BAD");
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+    await screen.findByText("Invalid code");
+
+    await user.type(input, "X");
+
+    expect(screen.queryByText("Invalid code")).not.toBeInTheDocument();
+  });
+
+  it("Apply button disabled when input is empty", async () => {
+    const { CouponInput } = await import("../components/billing/coupon-input");
+    render(<CouponInput />);
+
+    expect(screen.getByRole("button", { name: "Apply" })).toBeDisabled();
+  });
+});

package/src/__tests__/create-instance.test.tsx

@@ -0,0 +1,96 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { CreateInstanceClient } from "../app/instances/new/create-instance-client";
+
+vi.mock("@/lib/marketplace-data", () => ({
+  listMarketplacePlugins: vi.fn(),
+}));
+
+vi.mock("@/lib/api", () => ({
+  createInstance: vi.fn().mockResolvedValue({
+    id: "inst-new",
+    name: "my-new-instance",
+    template: "Custom",
+    status: "stopped",
+    provider: "anthropic",
+    channels: [],
+    plugins: [],
+    uptime: null,
+    createdAt: new Date().toISOString(),
+  }),
+}));
+
+import { listMarketplacePlugins } from "@/lib/marketplace-data";
+
+const mockListMarketplacePlugins = vi.mocked(listMarketplacePlugins);
+
+beforeEach(() => {
+  // Default: reject so hook falls back to static data quickly (loading resolves)
+  mockListMarketplacePlugins.mockRejectedValue(new Error("no marketplace in tests"));
+});
+
+describe("CreateInstanceClient", () => {
+  it("shows loading state before plugin data is ready", () => {
+    // Override to never resolve so loading stays true
+    const noop = (_resolve: unknown) => void _resolve;
+    mockListMarketplacePlugins.mockReturnValue(new Promise(noop));
+    render(<CreateInstanceClient />);
+    expect(screen.getByText(/loading/i)).toBeInTheDocument();
+  });
+
+  it("renders the create form heading", async () => {
+    render(<CreateInstanceClient />);
+    await waitFor(() =>
+      expect(screen.getByRole("heading", { name: "Create Instance" })).toBeInTheDocument(),
+    );
+  });
+
+  it("renders preset cards", async () => {
+    render(<CreateInstanceClient />);
+    await waitFor(() => {
+      expect(screen.getByText("Discord AI Bot")).toBeInTheDocument();
+      expect(screen.getByText("Slack AI Assistant")).toBeInTheDocument();
+      expect(screen.getByText("Multi-Channel")).toBeInTheDocument();
+    });
+  });
+
+  it("disables submit button without name", async () => {
+    render(<CreateInstanceClient />);
+    await waitFor(() => screen.getByRole("button", { name: "Create Instance" }));
+    const submitBtn = screen.getByRole("button", { name: "Create Instance" });
+    expect(submitBtn).toBeDisabled();
+  });
+
+  it("enables submit button when name is entered without preset", async () => {
+    const user = userEvent.setup();
+    render(<CreateInstanceClient />);
+    await waitFor(() => screen.getByPlaceholderText("my-instance"));
+    const nameInput = screen.getByPlaceholderText("my-instance");
+    await user.type(nameInput, "my-bot");
+    const submitBtn = screen.getByRole("button", { name: "Create Instance" });
+    expect(submitBtn).toBeEnabled();
+  });
+
+  it("shows confirmation after creating", async () => {
+    const user = userEvent.setup();
+    render(<CreateInstanceClient />);
+
+    // Wait for loading to complete
+    await waitFor(() => screen.getByText("Discord AI Bot"));
+
+    // Select preset
+    await user.click(screen.getByText("Discord AI Bot"));
+
+    // Enter name
+    const nameInput = screen.getByPlaceholderText("my-instance");
+    await user.type(nameInput, "my-new-instance");
+
+    // Submit
+    await user.click(screen.getByRole("button", { name: "Create Instance" }));
+
+    await waitFor(() => {
+      expect(screen.getByText("Instance created")).toBeInTheDocument();
+    });
+  });
+});

package/src/__tests__/create-org-wizard.test.tsx

@@ -0,0 +1,200 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mockPush = vi.fn();
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: mockPush }),
+  useSearchParams: () => new URLSearchParams(),
+  usePathname: () => "/settings",
+}));
+
+const mockCreateOrganization = vi.fn();
+vi.mock("@/lib/org-api", () => ({
+  createOrganization: (...args: unknown[]) => mockCreateOrganization(...args),
+}));
+
+vi.mock("framer-motion", () => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const React = require("react");
+  return {
+    motion: new Proxy(
+      {},
+      {
+        get:
+          (_target: unknown, tag: string) =>
+          ({ children, ...props }: { children?: unknown; [key: string]: unknown }) =>
+            React.createElement(tag, props, children),
+      },
+    ),
+    AnimatePresence: ({ children }: { children?: unknown }) => children,
+  };
+});
+
+import CreateOrgWizard from "@/components/settings/create-org-wizard";
+
+describe("CreateOrgWizard", () => {
+  beforeEach(() => {
+    mockPush.mockClear();
+    mockCreateOrganization.mockClear();
+  });
+
+  it("renders the trigger button", () => {
+    render(<CreateOrgWizard />);
+    expect(screen.getByRole("button", { name: /create organization/i })).toBeInTheDocument();
+  });
+
+  it("opens the dialog when trigger is clicked", async () => {
+    const user = userEvent.setup();
+    render(<CreateOrgWizard />);
+
+    await user.click(screen.getByRole("button", { name: /create organization/i }));
+    expect(screen.getByText("Name your organization")).toBeInTheDocument();
+    expect(screen.getByLabelText("Organization name")).toBeInTheDocument();
+    expect(screen.getByLabelText("Slug")).toBeInTheDocument();
+  });
+
+  it("auto-generates slug from name", async () => {
+    const user = userEvent.setup();
+    render(<CreateOrgWizard />);
+
+    await user.click(screen.getByRole("button", { name: /create organization/i }));
+    await user.type(screen.getByLabelText("Organization name"), "Acme Corp");
+
+    expect(screen.getByLabelText("Slug")).toHaveValue("acme-corp");
+  });
+
+  it("stops auto-generating slug once slug is manually edited", async () => {
+    const user = userEvent.setup();
+    render(<CreateOrgWizard />);
+
+    await user.click(screen.getByRole("button", { name: /create organization/i }));
+    await user.type(screen.getByLabelText("Organization name"), "Acme");
+    expect(screen.getByLabelText("Slug")).toHaveValue("acme");
+
+    // Use fireEvent.change to set custom slug (userEvent treats hyphens as special keys)
+    fireEvent.change(screen.getByLabelText("Slug"), { target: { value: "customslug" } });
+    expect(screen.getByLabelText("Slug")).toHaveValue("customslug");
+
+    // Type more in name — slug should NOT change since slug was manually edited
+    await user.type(screen.getByLabelText("Organization name"), " Corp");
+    expect(screen.getByLabelText("Slug")).toHaveValue("customslug");
+  });
+
+  it("sanitizes slug to lowercase, alphanumeric, hyphens only", async () => {
+    const user = userEvent.setup();
+    render(<CreateOrgWizard />);
+
+    await user.click(screen.getByRole("button", { name: /create organization/i }));
+    await user.type(screen.getByLabelText("Organization name"), "Hello World! @#$ Test");
+
+    expect(screen.getByLabelText("Slug")).toHaveValue("hello-world-test");
+  });
+
+  it("disables Next button when name or slug is empty", async () => {
+    const user = userEvent.setup();
+    render(<CreateOrgWizard />);
+
+    await user.click(screen.getByRole("button", { name: /create organization/i }));
+    expect(screen.getByRole("button", { name: "Next" })).toBeDisabled();
+  });
+
+  it("advances to confirm step on Next", async () => {
+    const user = userEvent.setup();
+    render(<CreateOrgWizard />);
+
+    await user.click(screen.getByRole("button", { name: /create organization/i }));
+    await user.type(screen.getByLabelText("Organization name"), "Acme Corp");
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    expect(screen.getByText("Confirm")).toBeInTheDocument();
+    expect(screen.getByText("Acme Corp")).toBeInTheDocument();
+    expect(screen.getByText("acme-corp")).toBeInTheDocument();
+  });
+
+  it("goes back from confirm to name step", async () => {
+    const user = userEvent.setup();
+    render(<CreateOrgWizard />);
+
+    await user.click(screen.getByRole("button", { name: /create organization/i }));
+    await user.type(screen.getByLabelText("Organization name"), "Acme Corp");
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Back" }));
+
+    expect(screen.getByText("Name your organization")).toBeInTheDocument();
+    expect(screen.getByLabelText("Organization name")).toHaveValue("Acme Corp");
+  });
+
+  it("calls createOrganization and shows done step on success", async () => {
+    mockCreateOrganization.mockResolvedValue({ id: "org-1", name: "Acme Corp", slug: "acme-corp" });
+    const user = userEvent.setup();
+    render(<CreateOrgWizard />);
+
+    await user.click(screen.getByRole("button", { name: /create organization/i }));
+    await user.type(screen.getByLabelText("Organization name"), "Acme Corp");
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Create" }));
+
+    expect(mockCreateOrganization).toHaveBeenCalledWith({ name: "Acme Corp", slug: "acme-corp" });
+    expect(await screen.findByText("Organization created")).toBeInTheDocument();
+  });
+
+  it("shows 409 conflict error message", async () => {
+    mockCreateOrganization.mockRejectedValue(new Error("409 Conflict"));
+    const user = userEvent.setup();
+    render(<CreateOrgWizard />);
+
+    await user.click(screen.getByRole("button", { name: /create organization/i }));
+    await user.type(screen.getByLabelText("Organization name"), "Acme Corp");
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Create" }));
+
+    expect(await screen.findByText(/slug is already taken/)).toBeInTheDocument();
+  });
+
+  it("shows generic error for non-409 failures", async () => {
+    mockCreateOrganization.mockRejectedValue(new Error("500 Server Error"));
+    const user = userEvent.setup();
+    render(<CreateOrgWizard />);
+
+    await user.click(screen.getByRole("button", { name: /create organization/i }));
+    await user.type(screen.getByLabelText("Organization name"), "Acme Corp");
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Create" }));
+
+    expect(await screen.findByText(/Failed to create organization/)).toBeInTheDocument();
+  });
+
+  it("navigates to /settings/org on done step button click", async () => {
+    mockCreateOrganization.mockResolvedValue({ id: "org-1", name: "Acme Corp", slug: "acme-corp" });
+    const user = userEvent.setup();
+    render(<CreateOrgWizard />);
+
+    await user.click(screen.getByRole("button", { name: /create organization/i }));
+    await user.type(screen.getByLabelText("Organization name"), "Acme Corp");
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Create" }));
+
+    const goBtn = await screen.findByRole("button", { name: /go to organization settings/i });
+    await user.click(goBtn);
+    expect(mockPush).toHaveBeenCalledWith("/settings/org");
+  });
+
+  it("disables Create button while creating", async () => {
+    mockCreateOrganization.mockReturnValue(
+      new Promise(() => {
+        /* never resolves */
+      }),
+    );
+    const user = userEvent.setup();
+    render(<CreateOrgWizard />);
+
+    await user.click(screen.getByRole("button", { name: /create organization/i }));
+    await user.type(screen.getByLabelText("Organization name"), "Acme Corp");
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await user.click(screen.getByRole("button", { name: "Create" }));
+
+    expect(await screen.findByText("Creating...")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Creating..." })).toBeDisabled();
+  });
+});

package/src/__tests__/credit-balance.test.tsx

@@ -0,0 +1,103 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { CreditBalance } from "@/components/billing/credit-balance";
+
+describe("CreditBalance", () => {
+  beforeEach(() => {
+    // Make requestAnimationFrame fire synchronously so the count-up animation completes instantly
+    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(performance.now() + 2000); // advance time past animation duration
+      return 0;
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders the formatted balance", async () => {
+    render(<CreditBalance data={{ balance: 42.5, dailyBurn: 3.25, runway: 13 }} />);
+    // The count-up animation targets 42.5 → "$42.50"
+    await waitFor(() => {
+      expect(screen.getByText("$42.50")).toBeInTheDocument();
+    });
+  });
+
+  it("renders daily burn rate", () => {
+    render(<CreditBalance data={{ balance: 100, dailyBurn: 5.0, runway: 20 }} />);
+    expect(screen.getByText("$5.00/day")).toBeInTheDocument();
+  });
+
+  it("renders runway in days (plural)", () => {
+    render(<CreditBalance data={{ balance: 100, dailyBurn: 5.0, runway: 20 }} />);
+    expect(screen.getByText("~20 days")).toBeInTheDocument();
+  });
+
+  it("renders runway singular for 1 day", () => {
+    render(<CreditBalance data={{ balance: 5, dailyBurn: 5.0, runway: 1 }} />);
+    expect(screen.getByText("~1 day")).toBeInTheDocument();
+  });
+
+  it("renders 'Suspended' when runway is 0", () => {
+    render(<CreditBalance data={{ balance: 0, dailyBurn: 5.0, runway: 0 }} />);
+    expect(screen.getByText("Suspended")).toBeInTheDocument();
+  });
+
+  it("renders 'N/A' when runway is null", () => {
+    render(<CreditBalance data={{ balance: 50, dailyBurn: 0, runway: null }} />);
+    expect(screen.getByText("N/A")).toBeInTheDocument();
+  });
+
+  it("applies destructive color when balance <= 2", async () => {
+    const { container } = render(
+      <CreditBalance data={{ balance: 1.5, dailyBurn: 1.5, runway: 1 }} />,
+    );
+    await waitFor(() => {
+      const balanceEl = container.querySelector(".text-4xl");
+      expect(balanceEl?.className).toContain("text-destructive");
+    });
+  });
+
+  it("applies destructive color when runway <= 1", async () => {
+    const { container } = render(
+      <CreditBalance data={{ balance: 50, dailyBurn: 50, runway: 1 }} />,
+    );
+    await waitFor(() => {
+      const balanceEl = container.querySelector(".text-4xl");
+      expect(balanceEl?.className).toContain("text-destructive");
+    });
+  });
+
+  it("applies amber color when balance <= 10", async () => {
+    const { container } = render(<CreditBalance data={{ balance: 8, dailyBurn: 2, runway: 4 }} />);
+    await waitFor(() => {
+      const balanceEl = container.querySelector(".text-4xl");
+      expect(balanceEl?.className).toContain("text-amber-500");
+    });
+  });
+
+  it("applies amber color when runway <= 7", async () => {
+    const { container } = render(
+      <CreditBalance data={{ balance: 50, dailyBurn: 10, runway: 5 }} />,
+    );
+    await waitFor(() => {
+      const balanceEl = container.querySelector(".text-4xl");
+      expect(balanceEl?.className).toContain("text-amber-500");
+    });
+  });
+
+  it("applies emerald color for healthy balance", async () => {
+    const { container } = render(
+      <CreditBalance data={{ balance: 100, dailyBurn: 5, runway: 20 }} />,
+    );
+    await waitFor(() => {
+      const balanceEl = container.querySelector(".text-4xl");
+      expect(balanceEl?.className).toContain("text-emerald-500");
+    });
+  });
+
+  it("renders the card title", () => {
+    render(<CreditBalance data={{ balance: 50, dailyBurn: 2, runway: 25 }} />);
+    expect(screen.getByText("Credit Balance")).toBeInTheDocument();
+  });
+});