mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-21 00:05:49 +02:00
392 lines
15 KiB
TypeScript
392 lines
15 KiB
TypeScript
// @vitest-environment jsdom
|
|
|
|
import { flushSync } from "react-dom";
|
|
import { createRoot, type Root } from "react-dom/client";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
|
|
import { ConfigureBuiltInAgentModal } from "./ConfigureBuiltInAgentModal";
|
|
import type { BuiltInAgentState } from "@/api/builtInAgents";
|
|
|
|
const provisionMock = vi.hoisted(() => vi.fn());
|
|
const updateMock = vi.hoisted(() => vi.fn());
|
|
const adapterModelsMock = vi.hoisted(() => vi.fn());
|
|
const adapterDiscoveryMock = vi.hoisted(() => vi.fn());
|
|
|
|
vi.mock("@/api/adapters", () => ({ adaptersApi: { list: adapterDiscoveryMock } }));
|
|
|
|
vi.mock("@/api/builtInAgents", async (importOriginal) => {
|
|
const actual = await importOriginal<typeof import("@/api/builtInAgents")>();
|
|
return { ...actual, builtInAgentsApi: { list: vi.fn(), provision: provisionMock, reset: vi.fn() } };
|
|
});
|
|
|
|
vi.mock("@/api/agents", () => ({
|
|
agentsApi: { update: updateMock, adapterModels: adapterModelsMock },
|
|
}));
|
|
|
|
vi.mock("@/adapters/metadata", () => ({
|
|
listAdapterOptions: () => [
|
|
{ value: "codex_local", label: "Codex" },
|
|
{ value: "claude_local", label: "Claude" },
|
|
{ value: "process", label: "Process" },
|
|
],
|
|
}));
|
|
|
|
// Stub the shared pickers so the test can drive them without the full form.
|
|
vi.mock("@/components/AgentConfigForm", () => ({
|
|
AdapterTypeDropdown: ({ value }: { value: string }) => (
|
|
<div data-testid="adapter-dropdown" data-value={value} />
|
|
),
|
|
ModelDropdown: ({ value, onChange }: { value: string; onChange: (v: string) => void }) => (
|
|
<input
|
|
data-testid="model-input"
|
|
value={value}
|
|
onChange={(e) => onChange((e.target as HTMLInputElement).value)}
|
|
/>
|
|
),
|
|
}));
|
|
|
|
vi.mock("@/components/agent-config-primitives", () => ({
|
|
Field: ({ label, children }: { label: string; children: React.ReactNode }) => (
|
|
<label>
|
|
{label}
|
|
{children}
|
|
</label>
|
|
),
|
|
}));
|
|
|
|
function makeState(overrides: Partial<BuiltInAgentState> = {}): BuiltInAgentState {
|
|
return {
|
|
definition: {
|
|
key: "briefs",
|
|
displayName: "Briefs Agent",
|
|
featureKeys: ["briefs"],
|
|
shortPurpose: "Prepares briefs.",
|
|
defaultInstructions: "…",
|
|
defaultRole: "general",
|
|
allowedAdapterTypes: ["codex_local", "claude_local"],
|
|
defaultBudgetMonthlyCents: 0,
|
|
},
|
|
status: "not_provisioned",
|
|
agentId: null,
|
|
agent: null,
|
|
pauseReason: null,
|
|
...overrides,
|
|
};
|
|
}
|
|
|
|
function makeSavedAgent(adapterType: "codex_local" | "paperclip_runner", adapterConfig: Record<string, unknown>): NonNullable<BuiltInAgentState["agent"]> {
|
|
return {
|
|
id: "a1", companyId: "c1", name: "Briefs Agent", urlKey: "briefs-agent", role: "general", title: null, icon: null,
|
|
status: "idle", reportsTo: null, capabilities: null, adapterType, adapterConfig, runtimeConfig: {}, defaultEnvironmentId: null,
|
|
budgetMonthlyCents: 0, spentMonthlyCents: 0, pauseReason: null, pausedAt: null, permissions: { canCreateAgents: false },
|
|
lastHeartbeatAt: null, metadata: null, createdAt: new Date(0), updatedAt: new Date(0),
|
|
};
|
|
}
|
|
|
|
async function flushReact() {
|
|
for (let index = 0; index < 6; index += 1) {
|
|
await Promise.resolve();
|
|
await new Promise((resolve) => window.setTimeout(resolve, 0));
|
|
}
|
|
flushSync(() => {});
|
|
}
|
|
|
|
function findButton(text: string): HTMLButtonElement | undefined {
|
|
return Array.from(document.body.querySelectorAll("button")).find((b) =>
|
|
b.textContent?.includes(text),
|
|
) as HTMLButtonElement | undefined;
|
|
}
|
|
|
|
describe("ConfigureBuiltInAgentModal (PAP-12978)", () => {
|
|
let container: HTMLDivElement;
|
|
let root: Root | null = null;
|
|
const onOpenChange = vi.fn();
|
|
const onConfigured = vi.fn();
|
|
|
|
async function renderModal(state: BuiltInAgentState = makeState()) {
|
|
root = createRoot(container);
|
|
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
|
flushSync(() => {
|
|
root!.render(
|
|
<QueryClientProvider client={queryClient}>
|
|
<ConfigureBuiltInAgentModal
|
|
companyId="c1"
|
|
state={state}
|
|
open
|
|
onOpenChange={onOpenChange}
|
|
onConfigured={onConfigured}
|
|
/>
|
|
</QueryClientProvider>,
|
|
);
|
|
});
|
|
await flushReact();
|
|
}
|
|
|
|
beforeEach(() => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
provisionMock.mockReset();
|
|
updateMock.mockReset();
|
|
adapterModelsMock.mockReset().mockResolvedValue([]);
|
|
adapterDiscoveryMock.mockReset().mockResolvedValue([{ type: "codex_local", supportedRunners: ["paperclip", "legacy"], defaultRunner: "legacy" }]);
|
|
onOpenChange.mockReset();
|
|
onConfigured.mockReset();
|
|
});
|
|
|
|
afterEach(() => {
|
|
flushSync(() => {
|
|
root?.unmount();
|
|
});
|
|
root = null;
|
|
container.remove();
|
|
});
|
|
|
|
it("disables submit until a model is chosen, then provisions with adapter + model", async () => {
|
|
provisionMock.mockResolvedValue({ ...makeState(), status: "ready", agentId: "a1" });
|
|
await renderModal();
|
|
|
|
const submit = findButton("Configure");
|
|
expect(submit).toBeTruthy();
|
|
expect(submit!.disabled).toBe(true);
|
|
|
|
const modelInput = document.body.querySelector('[data-testid="model-input"]') as HTMLInputElement;
|
|
expect(modelInput).toBeTruthy();
|
|
const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")!.set!;
|
|
flushSync(() => {
|
|
setter.call(modelInput, "gpt-5");
|
|
modelInput.dispatchEvent(new Event("input", { bubbles: true }));
|
|
});
|
|
await flushReact();
|
|
|
|
const submitReady = findButton("Configure")!;
|
|
expect(submitReady.disabled).toBe(false);
|
|
flushSync(() => {
|
|
submitReady.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
|
});
|
|
await flushReact();
|
|
|
|
expect(provisionMock).toHaveBeenCalledWith("c1", "briefs", {
|
|
adapterType: "codex_local",
|
|
adapterConfig: { model: "gpt-5" },
|
|
});
|
|
expect(onConfigured).toHaveBeenCalled();
|
|
expect(onOpenChange).toHaveBeenCalledWith(false);
|
|
});
|
|
|
|
it("prefills a built-in's default adapter and model", async () => {
|
|
provisionMock.mockResolvedValue({ ...makeState(), status: "ready", agentId: "a1" });
|
|
await renderModal(makeState({
|
|
definition: {
|
|
...makeState().definition,
|
|
defaultAdapterType: "claude_local",
|
|
defaultAdapterConfig: { model: "claude-haiku-4-5" },
|
|
},
|
|
}));
|
|
|
|
expect(document.body.querySelector('[data-testid="adapter-dropdown"]')?.getAttribute("data-value"))
|
|
.toBe("claude_local");
|
|
expect(document.body.querySelector<HTMLInputElement>('[data-testid="model-input"]')?.value)
|
|
.toBe("claude-haiku-4-5");
|
|
|
|
const submit = findButton("Configure")!;
|
|
expect(submit.disabled).toBe(false);
|
|
flushSync(() => {
|
|
submit.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
|
});
|
|
await flushReact();
|
|
|
|
expect(provisionMock).toHaveBeenCalledWith("c1", "briefs", {
|
|
adapterType: "claude_local",
|
|
adapterConfig: { model: "claude-haiku-4-5" },
|
|
});
|
|
});
|
|
|
|
it.each([
|
|
["codex_local", "ready"],
|
|
["paperclip_runner", "ready"],
|
|
["codex_local", "paused"],
|
|
["paperclip_runner", "paused"],
|
|
] as const)("lets the server translate saved %s settings for a runner-only change while %s", async (adapterType, status) => {
|
|
const savedConfig = { model: "gpt-5", timeoutSec: 45, modelReasoningEffort: "high", env: { CODEX_HOME: { type: "secret_ref", secretId: "account-1" } }, ...(adapterType === "paperclip_runner" ? { provider: "codex", codexPermissionMode: "never", lifecycleMode: "per_turn" } : {}) };
|
|
const state = makeState({ status, agentId: "a1", agent: makeSavedAgent(adapterType, savedConfig) });
|
|
provisionMock.mockResolvedValue(state);
|
|
await renderModal(state);
|
|
const summary = document.querySelector("summary")!;
|
|
flushSync(() => summary.dispatchEvent(new MouseEvent("click", { bubbles: true })));
|
|
flushSync(() => document.querySelector('[aria-label="Runner"]')!.dispatchEvent(new MouseEvent("click", { bubbles: true })));
|
|
await flushReact();
|
|
const runner = adapterType === "paperclip_runner" ? "legacy" : "paperclip";
|
|
flushSync(() => document.querySelector(`[role="option"][data-value="${runner}"]`)!.dispatchEvent(new MouseEvent("click", { bubbles: true })));
|
|
await flushReact();
|
|
flushSync(() => findButton("Configure")!.dispatchEvent(new MouseEvent("click", { bubbles: true })));
|
|
await flushReact();
|
|
expect(provisionMock).toHaveBeenCalledWith("c1", "briefs", { runner });
|
|
expect(state.agent?.adapterConfig).toEqual(savedConfig);
|
|
});
|
|
|
|
it.each([
|
|
["codex_local", "saved"],
|
|
["paperclip_runner", "saved"],
|
|
["codex_local", "definition"],
|
|
["paperclip_runner", "definition"],
|
|
] as const)("submits the displayed %s configuration to finish setup with its %s model", async (adapterType, modelSource) => {
|
|
const savedConfig = {
|
|
...(modelSource === "saved" ? { model: "gpt-5" } : {}),
|
|
timeoutSec: 45,
|
|
modelReasoningEffort: "high",
|
|
env: { CODEX_HOME: { type: "secret_ref", secretId: "account-1" } },
|
|
...(adapterType === "paperclip_runner" ? { provider: "codex", codexPermissionMode: "never", lifecycleMode: "per_turn" } : {}),
|
|
};
|
|
const agent = makeSavedAgent(adapterType, savedConfig);
|
|
agent.metadata = { paperclipBuiltInSetupRequired: true };
|
|
const state = makeState({
|
|
status: "needs_setup",
|
|
agentId: agent.id,
|
|
agent,
|
|
definition: { ...makeState().definition, defaultAdapterConfig: { model: "gpt-5" } },
|
|
});
|
|
const configured = { ...state, status: "ready" as const, agent: { ...agent, metadata: { paperclipBuiltInSetupRequired: false } } };
|
|
provisionMock.mockResolvedValue(configured);
|
|
await renderModal(state);
|
|
|
|
expect(document.querySelector<HTMLInputElement>('[data-testid="model-input"]')?.value).toBe("gpt-5");
|
|
expect(findButton("Configure")?.disabled).toBe(false);
|
|
flushSync(() => findButton("Configure")!.dispatchEvent(new MouseEvent("click", { bubbles: true })));
|
|
await flushReact();
|
|
|
|
expect(provisionMock).toHaveBeenCalledWith("c1", "briefs", {
|
|
adapterType,
|
|
adapterConfig: { ...savedConfig, model: "gpt-5" },
|
|
});
|
|
expect(onConfigured).toHaveBeenCalledWith(configured);
|
|
expect(onOpenChange).toHaveBeenCalledWith(false);
|
|
expect(state.agent?.metadata?.paperclipBuiltInSetupRequired).toBe(true);
|
|
expect(state.agent?.adapterConfig).toEqual(savedConfig);
|
|
});
|
|
|
|
it("merges a built-in model edit into the saved native configuration", async () => {
|
|
const savedConfig = { provider: "codex", model: "gpt-5", timeoutSec: 45, modelReasoningEffort: "high", env: { CODEX_HOME: { type: "secret_ref", secretId: "account-1" } } };
|
|
const state = makeState({ status: "ready", agentId: "a1", agent: makeSavedAgent("paperclip_runner", savedConfig) });
|
|
provisionMock.mockResolvedValue(state);
|
|
await renderModal(state);
|
|
const modelInput = document.querySelector('[data-testid="model-input"]') as HTMLInputElement;
|
|
flushSync(() => {
|
|
Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(modelInput, "gpt-6-sol");
|
|
modelInput.dispatchEvent(new Event("input", { bubbles: true }));
|
|
});
|
|
await flushReact();
|
|
flushSync(() => findButton("Configure")!.dispatchEvent(new MouseEvent("click", { bubbles: true })));
|
|
await flushReact();
|
|
expect(provisionMock).toHaveBeenCalledWith("c1", "briefs", { adapterType: "paperclip_runner", adapterConfig: { ...savedConfig, model: "gpt-6-sol" } });
|
|
});
|
|
|
|
it("shows a visible error and blocks provisioning for an unknown model", async () => {
|
|
adapterModelsMock.mockResolvedValue([
|
|
{ id: "claude-haiku-4-5", label: "Claude Haiku 4.5" },
|
|
]);
|
|
await renderModal(makeState({
|
|
definition: {
|
|
...makeState().definition,
|
|
defaultAdapterType: "claude_local",
|
|
defaultAdapterConfig: { model: "claude-haiku-4-6" },
|
|
},
|
|
}));
|
|
await flushReact();
|
|
|
|
expect(document.body.querySelector('[role="alert"]')?.textContent)
|
|
.toContain("claude-haiku-4-6");
|
|
expect(document.body.querySelector('[role="alert"]')?.textContent)
|
|
.toContain("not available");
|
|
expect(findButton("Configure")?.disabled).toBe(true);
|
|
expect(provisionMock).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("sends the budget with provisioning so approval-gated setup preserves it", async () => {
|
|
provisionMock.mockResolvedValue({
|
|
...makeState(),
|
|
status: "pending_approval",
|
|
agentId: "a1",
|
|
approval: { id: "approval-1", status: "pending" },
|
|
});
|
|
await renderModal();
|
|
|
|
const modelInput = document.body.querySelector('[data-testid="model-input"]') as HTMLInputElement;
|
|
const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")!.set!;
|
|
flushSync(() => {
|
|
setter.call(modelInput, "gpt-5");
|
|
modelInput.dispatchEvent(new Event("input", { bubbles: true }));
|
|
});
|
|
await flushReact();
|
|
|
|
const budgetInput = document.body.querySelector('input[type="number"]') as HTMLInputElement;
|
|
flushSync(() => {
|
|
setter.call(budgetInput, "50");
|
|
budgetInput.dispatchEvent(new Event("input", { bubbles: true }));
|
|
});
|
|
await flushReact();
|
|
|
|
flushSync(() => {
|
|
findButton("Configure")!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
|
});
|
|
await flushReact();
|
|
|
|
expect(provisionMock).toHaveBeenCalled();
|
|
expect(provisionMock).toHaveBeenCalledWith("c1", "briefs", {
|
|
adapterType: "codex_local",
|
|
adapterConfig: { model: "gpt-5" },
|
|
budgetMonthlyCents: 5000,
|
|
});
|
|
expect(updateMock).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("provisions non-model adapters so command fields can be completed later", async () => {
|
|
provisionMock.mockResolvedValue({ ...makeState(), status: "needs_setup", agentId: "a1" });
|
|
await renderModal(makeState({
|
|
definition: {
|
|
...makeState().definition,
|
|
allowedAdapterTypes: ["process"],
|
|
},
|
|
}));
|
|
|
|
expect(document.body.textContent).toContain("needs command or endpoint fields");
|
|
expect(document.body.querySelector('[data-testid="model-input"]')).toBeNull();
|
|
const submit = findButton("Provision");
|
|
expect(submit).toBeTruthy();
|
|
expect(submit!.disabled).toBe(false);
|
|
flushSync(() => {
|
|
submit!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
|
});
|
|
await flushReact();
|
|
|
|
expect(provisionMock).toHaveBeenCalledWith("c1", "briefs", {
|
|
adapterType: "process",
|
|
adapterConfig: {},
|
|
});
|
|
expect(onConfigured).toHaveBeenCalled();
|
|
expect(onOpenChange).toHaveBeenCalledWith(false);
|
|
});
|
|
|
|
it("surfaces provision errors inline instead of closing", async () => {
|
|
const { ApiError } = await import("@/api/client");
|
|
provisionMock.mockRejectedValue(new ApiError("Adapter not allowed", 422, null));
|
|
await renderModal();
|
|
|
|
const modelInput = document.body.querySelector('[data-testid="model-input"]') as HTMLInputElement;
|
|
const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")!.set!;
|
|
flushSync(() => {
|
|
setter.call(modelInput, "gpt-5");
|
|
modelInput.dispatchEvent(new Event("input", { bubbles: true }));
|
|
});
|
|
await flushReact();
|
|
|
|
flushSync(() => {
|
|
findButton("Configure")!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
|
});
|
|
await flushReact();
|
|
|
|
expect(document.body.textContent).toContain("Adapter not allowed");
|
|
expect(onOpenChange).not.toHaveBeenCalledWith(false);
|
|
});
|
|
});
|