580 lines
17 KiB
TypeScript
580 lines
17 KiB
TypeScript
// @vitest-environment jsdom
|
|
|
|
import { flushSync } from "react-dom";
|
|
import { createRoot } from "react-dom/client";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import type { Agent, ExecutionWorkspace, Project, RoutineVariable } from "@paperclipai/shared";
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
import { RoutineRunVariablesDialog } from "./RoutineRunVariablesDialog";
|
|
|
|
let issueWorkspaceDraftCalls = 0;
|
|
let issueWorkspaceDraft = {
|
|
executionWorkspaceId: null as string | null,
|
|
executionWorkspacePreference: "shared_workspace",
|
|
executionWorkspaceSettings: { mode: "shared_workspace" },
|
|
};
|
|
let issueWorkspaceBranchName: string | null = null;
|
|
let latestWorkspaceIssue: Record<string, unknown> | null = null;
|
|
|
|
vi.mock("../api/instanceSettings", () => ({
|
|
instanceSettingsApi: {
|
|
getExperimental: vi.fn(async () => ({ enableIsolatedWorkspaces: true })),
|
|
},
|
|
}));
|
|
|
|
vi.mock("./IssueWorkspaceCard", async () => {
|
|
const React = await import("react");
|
|
|
|
return {
|
|
IssueWorkspaceCard: ({
|
|
issue,
|
|
onDraftChange,
|
|
}: {
|
|
issue: Record<string, unknown>;
|
|
onDraftChange?: (
|
|
data: Record<string, unknown>,
|
|
meta: { canSave: boolean; workspaceBranchName?: string | null },
|
|
) => void;
|
|
}) => {
|
|
React.useEffect(() => {
|
|
latestWorkspaceIssue = issue;
|
|
issueWorkspaceDraftCalls += 1;
|
|
if (issueWorkspaceDraftCalls > 20) {
|
|
throw new Error("IssueWorkspaceCard onDraftChange looped");
|
|
}
|
|
onDraftChange?.(issueWorkspaceDraft, {
|
|
canSave: true,
|
|
workspaceBranchName: issueWorkspaceBranchName,
|
|
});
|
|
}, [onDraftChange]);
|
|
|
|
return <div data-testid="workspace-card">Workspace card</div>;
|
|
},
|
|
};
|
|
});
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
|
|
|
|
async function settleEffects() {
|
|
await Promise.resolve();
|
|
await Promise.resolve();
|
|
await new Promise((resolve) => setTimeout(resolve, 0));
|
|
}
|
|
|
|
async function flushUi(callback: () => void) {
|
|
flushSync(callback);
|
|
await settleEffects();
|
|
}
|
|
|
|
function createProject(): Project {
|
|
return {
|
|
id: "project-1",
|
|
companyId: "company-1",
|
|
urlKey: "workspace-project",
|
|
goalId: null,
|
|
goalIds: [],
|
|
goals: [],
|
|
name: "Workspace project",
|
|
description: null,
|
|
status: "in_progress",
|
|
leadAgentId: null,
|
|
targetDate: null,
|
|
color: "#22c55e",
|
|
icon: null,
|
|
env: null,
|
|
pauseReason: null,
|
|
pausedAt: null,
|
|
archivedAt: null,
|
|
executionWorkspacePolicy: {
|
|
enabled: true,
|
|
defaultMode: "shared_workspace",
|
|
allowIssueOverride: true,
|
|
},
|
|
codebase: {
|
|
workspaceId: null,
|
|
repoUrl: null,
|
|
repoRef: null,
|
|
defaultRef: null,
|
|
repoName: null,
|
|
localFolder: null,
|
|
managedFolder: "/tmp/paperclip/project-1",
|
|
effectiveLocalFolder: "/tmp/paperclip/project-1",
|
|
origin: "managed_checkout",
|
|
},
|
|
workspaces: [],
|
|
primaryWorkspace: null,
|
|
createdAt: new Date("2026-04-02T00:00:00.000Z"),
|
|
updatedAt: new Date("2026-04-02T00:00:00.000Z"),
|
|
};
|
|
}
|
|
|
|
function createAgent(): Agent {
|
|
return {
|
|
id: "agent-1",
|
|
companyId: "company-1",
|
|
name: "Routine Agent",
|
|
role: "engineer",
|
|
title: null,
|
|
status: "active",
|
|
reportsTo: null,
|
|
capabilities: null,
|
|
adapterType: "process",
|
|
adapterConfig: {},
|
|
runtimeConfig: {},
|
|
budgetMonthlyCents: 0,
|
|
spentMonthlyCents: 0,
|
|
lastHeartbeatAt: null,
|
|
icon: "code",
|
|
metadata: null,
|
|
createdAt: new Date("2026-04-02T00:00:00.000Z"),
|
|
updatedAt: new Date("2026-04-02T00:00:00.000Z"),
|
|
urlKey: "routine-agent",
|
|
pauseReason: null,
|
|
pausedAt: null,
|
|
permissions: { canCreateAgents: false },
|
|
};
|
|
}
|
|
|
|
function createExecutionWorkspace(): ExecutionWorkspace {
|
|
return {
|
|
id: "workspace-1",
|
|
companyId: "company-1",
|
|
projectId: "project-1",
|
|
projectWorkspaceId: "project-workspace-1",
|
|
sourceIssueId: null,
|
|
mode: "isolated_workspace",
|
|
strategyType: "git_worktree",
|
|
name: "PAP-1634",
|
|
status: "active",
|
|
cwd: "/tmp/paperclip/PAP-1634",
|
|
repoUrl: null,
|
|
baseRef: "main",
|
|
branchName: "pap-1634-routine-branch",
|
|
providerType: "local_fs",
|
|
providerRef: null,
|
|
derivedFromExecutionWorkspaceId: null,
|
|
lastUsedAt: new Date("2026-04-02T00:00:00.000Z"),
|
|
openedAt: new Date("2026-04-02T00:00:00.000Z"),
|
|
closedAt: null,
|
|
cleanupEligibleAt: null,
|
|
cleanupReason: null,
|
|
config: {
|
|
provisionCommand: null,
|
|
teardownCommand: null,
|
|
cleanupCommand: null,
|
|
workspaceRuntime: null,
|
|
desiredState: null,
|
|
},
|
|
metadata: null,
|
|
runtimeServices: [],
|
|
createdAt: new Date("2026-04-02T00:00:00.000Z"),
|
|
updatedAt: new Date("2026-04-02T00:00:00.000Z"),
|
|
};
|
|
}
|
|
|
|
function createQueryClient() {
|
|
return new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
retry: false,
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
async function renderRoutineRunDialog(container: HTMLDivElement, props: {
|
|
variables: RoutineVariable[];
|
|
onSubmit?: (data: unknown) => void;
|
|
}) {
|
|
const root = createRoot(container);
|
|
const queryClient = createQueryClient();
|
|
const onSubmit = props.onSubmit ?? vi.fn();
|
|
|
|
await flushUi(() => {
|
|
root.render(
|
|
<QueryClientProvider client={queryClient}>
|
|
<RoutineRunVariablesDialog
|
|
open
|
|
onOpenChange={() => {}}
|
|
companyId="company-1"
|
|
projects={[]}
|
|
agents={[createAgent()]}
|
|
defaultAssigneeAgentId="agent-1"
|
|
variables={props.variables}
|
|
isPending={false}
|
|
onSubmit={onSubmit}
|
|
/>
|
|
</QueryClientProvider>,
|
|
);
|
|
});
|
|
|
|
return { root, onSubmit };
|
|
}
|
|
|
|
function setInputValue(input: HTMLInputElement, value: string) {
|
|
const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
|
|
setter?.call(input, value);
|
|
input.dispatchEvent(new Event("input", { bubbles: true }));
|
|
}
|
|
|
|
function findRunButton() {
|
|
return Array.from(document.querySelectorAll("button"))
|
|
.find((button) => button.textContent === "Run routine") as HTMLButtonElement | undefined;
|
|
}
|
|
|
|
describe("RoutineRunVariablesDialog", () => {
|
|
let container: HTMLDivElement;
|
|
|
|
beforeEach(() => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
issueWorkspaceDraftCalls = 0;
|
|
issueWorkspaceDraft = {
|
|
executionWorkspaceId: null,
|
|
executionWorkspacePreference: "shared_workspace",
|
|
executionWorkspaceSettings: { mode: "shared_workspace" },
|
|
};
|
|
issueWorkspaceBranchName = null;
|
|
latestWorkspaceIssue = null;
|
|
});
|
|
|
|
afterEach(() => {
|
|
container.remove();
|
|
document.body.innerHTML = "";
|
|
});
|
|
|
|
it("does not loop when the workspace card reports the same draft repeatedly", async () => {
|
|
const root = createRoot(container);
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
retry: false,
|
|
},
|
|
},
|
|
});
|
|
|
|
await flushUi(() => {
|
|
root.render(
|
|
<QueryClientProvider client={queryClient}>
|
|
<RoutineRunVariablesDialog
|
|
open
|
|
onOpenChange={() => {}}
|
|
companyId="company-1"
|
|
projects={[createProject()]}
|
|
agents={[createAgent()]}
|
|
defaultProjectId="project-1"
|
|
defaultAssigneeAgentId="agent-1"
|
|
variables={[]}
|
|
isPending={false}
|
|
onSubmit={() => {}}
|
|
/>
|
|
</QueryClientProvider>,
|
|
);
|
|
});
|
|
|
|
expect(issueWorkspaceDraftCalls).toBeLessThanOrEqual(2);
|
|
expect(document.body.textContent).toContain("Run routine");
|
|
expect(document.body.textContent).not.toContain("Search agents...");
|
|
expect(document.body.textContent).not.toContain("Search projects...");
|
|
|
|
await flushUi(() => {
|
|
root.unmount();
|
|
});
|
|
});
|
|
|
|
it("keeps the mobile dialog bounded with an internal form scroll region", async () => {
|
|
const root = createRoot(container);
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
retry: false,
|
|
},
|
|
},
|
|
});
|
|
|
|
await flushUi(() => {
|
|
root.render(
|
|
<QueryClientProvider client={queryClient}>
|
|
<RoutineRunVariablesDialog
|
|
open
|
|
onOpenChange={() => {}}
|
|
companyId="company-1"
|
|
projects={[createProject()]}
|
|
agents={[createAgent()]}
|
|
defaultProjectId="project-1"
|
|
defaultAssigneeAgentId="agent-1"
|
|
variables={[
|
|
{
|
|
name: "notes",
|
|
label: "notes",
|
|
type: "textarea",
|
|
defaultValue: null,
|
|
required: false,
|
|
options: [],
|
|
},
|
|
]}
|
|
isPending={false}
|
|
onSubmit={() => {}}
|
|
/>
|
|
</QueryClientProvider>,
|
|
);
|
|
});
|
|
|
|
const dialogContent = Array.from(document.body.querySelectorAll("div")).find((element) =>
|
|
typeof element.className === "string" && element.className.includes("max-h-[calc(100dvh-2rem)]"),
|
|
);
|
|
expect(dialogContent?.className).toContain("h-[calc(100dvh-2rem)]");
|
|
expect(dialogContent?.className).toContain("overflow-hidden");
|
|
|
|
const notesInput = document.querySelector("textarea");
|
|
const formScrollRegion = Array.from(document.body.querySelectorAll("div")).find((element) =>
|
|
typeof element.className === "string" && element.className.includes("overscroll-contain"),
|
|
);
|
|
expect(formScrollRegion?.className).toContain("min-h-0");
|
|
expect(formScrollRegion?.className).toContain("flex-1");
|
|
expect(formScrollRegion?.className).toContain("overflow-y-auto");
|
|
expect(formScrollRegion?.contains(notesInput)).toBe(true);
|
|
|
|
const footer = Array.from(document.body.querySelectorAll("div")).find((element) =>
|
|
typeof element.className === "string" && element.className.includes("pb-[calc(1rem+env(safe-area-inset-bottom))]"),
|
|
);
|
|
expect(footer?.className).toContain("shrink-0");
|
|
expect(footer?.contains(formScrollRegion ?? null)).toBe(false);
|
|
expect(footer?.textContent).toContain("Run routine");
|
|
|
|
await flushUi(() => {
|
|
root.unmount();
|
|
});
|
|
});
|
|
|
|
it("renders workspaceBranch as a read-only selected workspace value", async () => {
|
|
issueWorkspaceDraft = {
|
|
executionWorkspaceId: "workspace-1",
|
|
executionWorkspacePreference: "reuse_existing",
|
|
executionWorkspaceSettings: { mode: "isolated_workspace" },
|
|
};
|
|
issueWorkspaceBranchName = "pap-1634-routine-branch";
|
|
const onSubmit = vi.fn();
|
|
const root = createRoot(container);
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
retry: false,
|
|
},
|
|
},
|
|
});
|
|
|
|
await flushUi(() => {
|
|
root.render(
|
|
<QueryClientProvider client={queryClient}>
|
|
<RoutineRunVariablesDialog
|
|
open
|
|
onOpenChange={() => {}}
|
|
companyId="company-1"
|
|
projects={[createProject()]}
|
|
agents={[createAgent()]}
|
|
defaultProjectId="project-1"
|
|
defaultAssigneeAgentId="agent-1"
|
|
variables={[
|
|
{
|
|
name: "workspaceBranch",
|
|
label: null,
|
|
type: "text",
|
|
defaultValue: null,
|
|
required: true,
|
|
options: [],
|
|
},
|
|
]}
|
|
isPending={false}
|
|
onSubmit={onSubmit}
|
|
/>
|
|
</QueryClientProvider>,
|
|
);
|
|
});
|
|
|
|
for (let i = 0; i < 10 && !document.querySelector('[data-testid="workspace-card"]'); i += 1) {
|
|
await settleEffects();
|
|
}
|
|
|
|
const branchInput = Array.from(document.querySelectorAll("input"))
|
|
.find((input) => input.value === "pap-1634-routine-branch");
|
|
expect(branchInput?.disabled).toBe(true);
|
|
expect(document.body.textContent).not.toContain("Missing: workspaceBranch");
|
|
|
|
const runButton = Array.from(document.querySelectorAll("button"))
|
|
.find((button) => button.textContent === "Run routine");
|
|
expect(runButton).toBeTruthy();
|
|
|
|
await flushUi(() => {
|
|
runButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
|
});
|
|
|
|
expect(onSubmit).toHaveBeenCalledWith({
|
|
variables: {
|
|
workspaceBranch: "pap-1634-routine-branch",
|
|
},
|
|
assigneeAgentId: "agent-1",
|
|
projectId: "project-1",
|
|
executionWorkspaceId: "workspace-1",
|
|
executionWorkspacePreference: "reuse_existing",
|
|
executionWorkspaceSettings: { mode: "isolated_workspace" },
|
|
});
|
|
|
|
await flushUi(() => {
|
|
root.unmount();
|
|
});
|
|
});
|
|
|
|
it("prefills the supplied execution workspace for workspace-specific routine runs", async () => {
|
|
const workspace = createExecutionWorkspace();
|
|
issueWorkspaceDraft = {
|
|
executionWorkspaceId: workspace.id,
|
|
executionWorkspacePreference: "reuse_existing",
|
|
executionWorkspaceSettings: { mode: "isolated_workspace" },
|
|
};
|
|
issueWorkspaceBranchName = workspace.branchName;
|
|
|
|
const root = createRoot(container);
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
retry: false,
|
|
},
|
|
},
|
|
});
|
|
|
|
await flushUi(() => {
|
|
root.render(
|
|
<QueryClientProvider client={queryClient}>
|
|
<RoutineRunVariablesDialog
|
|
open
|
|
onOpenChange={() => {}}
|
|
companyId="company-1"
|
|
projects={[createProject()]}
|
|
agents={[createAgent()]}
|
|
defaultProjectId="project-1"
|
|
defaultAssigneeAgentId="agent-1"
|
|
defaultExecutionWorkspace={workspace}
|
|
variables={[]}
|
|
isPending={false}
|
|
onSubmit={() => {}}
|
|
/>
|
|
</QueryClientProvider>,
|
|
);
|
|
});
|
|
|
|
for (let i = 0; i < 10 && latestWorkspaceIssue === null; i += 1) {
|
|
await settleEffects();
|
|
}
|
|
|
|
expect(latestWorkspaceIssue).toMatchObject({
|
|
executionWorkspaceId: workspace.id,
|
|
executionWorkspacePreference: "reuse_existing",
|
|
currentExecutionWorkspace: workspace,
|
|
projectWorkspaceId: workspace.projectWorkspaceId,
|
|
});
|
|
|
|
await flushUi(() => {
|
|
root.unmount();
|
|
});
|
|
});
|
|
|
|
it("respects explicit date and text variable types for Date-suffixed names", async () => {
|
|
const { root } = await renderRoutineRunDialog(container, {
|
|
variables: [
|
|
{
|
|
name: "startDate",
|
|
label: null,
|
|
type: "text",
|
|
defaultValue: "2026-06-26",
|
|
required: true,
|
|
options: [],
|
|
},
|
|
{
|
|
name: "releaseOn",
|
|
label: "Release on",
|
|
type: "date",
|
|
defaultValue: "2026-07-01",
|
|
required: false,
|
|
options: [],
|
|
},
|
|
],
|
|
});
|
|
|
|
const dateInputs = Array.from(document.querySelectorAll<HTMLInputElement>('input[type="date"]'));
|
|
expect(dateInputs).toHaveLength(1);
|
|
expect(dateInputs[0]?.value).toBe("2026-07-01");
|
|
|
|
const textInput = Array.from(document.querySelectorAll<HTMLInputElement>('input[type="text"]'))
|
|
.find((input) => input.value === "2026-06-26");
|
|
expect(textInput).toBeTruthy();
|
|
|
|
await flushUi(() => {
|
|
root.unmount();
|
|
});
|
|
});
|
|
|
|
it("blocks empty required dates, submits date strings, and omits optional empty dates", async () => {
|
|
const onSubmit = vi.fn();
|
|
const { root } = await renderRoutineRunDialog(container, {
|
|
variables: [
|
|
{
|
|
name: "startDate",
|
|
label: null,
|
|
type: "date",
|
|
defaultValue: null,
|
|
required: true,
|
|
options: [],
|
|
},
|
|
{
|
|
name: "releaseOn",
|
|
label: "Release on",
|
|
type: "date",
|
|
defaultValue: null,
|
|
required: true,
|
|
options: [],
|
|
},
|
|
{
|
|
name: "endDate",
|
|
label: null,
|
|
type: "date",
|
|
defaultValue: null,
|
|
required: false,
|
|
options: [],
|
|
},
|
|
],
|
|
onSubmit,
|
|
});
|
|
|
|
const runButton = findRunButton();
|
|
expect(runButton?.disabled).toBe(true);
|
|
expect(document.body.textContent).toContain("Missing: startDate, Release on");
|
|
|
|
const dateInputs = Array.from(document.querySelectorAll<HTMLInputElement>('input[type="date"]'));
|
|
await flushUi(() => {
|
|
setInputValue(dateInputs[0]!, "2026-07-04");
|
|
setInputValue(dateInputs[1]!, "2026-08-01");
|
|
});
|
|
|
|
expect(runButton?.disabled).toBe(false);
|
|
|
|
await flushUi(() => {
|
|
runButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
|
});
|
|
|
|
expect(onSubmit).toHaveBeenCalledWith({
|
|
variables: {
|
|
startDate: "2026-07-04",
|
|
releaseOn: "2026-08-01",
|
|
},
|
|
assigneeAgentId: "agent-1",
|
|
projectId: null,
|
|
});
|
|
|
|
await flushUi(() => {
|
|
root.unmount();
|
|
});
|
|
});
|
|
});
|