533 lines
17 KiB
TypeScript
533 lines
17 KiB
TypeScript
// @vitest-environment jsdom
|
|
|
|
import React from "react";
|
|
import { act } from "react";
|
|
import { createRoot, type Root } from "react-dom/client";
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
|
|
const mocks = vi.hoisted(() => ({
|
|
queueNodeDataUpdate: vi.fn(async () => undefined),
|
|
runAgent: vi.fn(async () => ({ queued: true })),
|
|
resumeAgent: vi.fn(async () => ({ queued: true })),
|
|
toastWarning: vi.fn(),
|
|
subscription: { tier: "starter" as const },
|
|
isOffline: false,
|
|
}));
|
|
|
|
vi.mock("convex/react", () => ({
|
|
useAction: (reference: unknown) => {
|
|
if (reference === "agents.resumeAgent") {
|
|
return mocks.resumeAgent;
|
|
}
|
|
return mocks.runAgent;
|
|
},
|
|
}));
|
|
|
|
vi.mock("@/convex/_generated/api", () => ({
|
|
api: {
|
|
credits: {
|
|
getSubscription: "credits.getSubscription",
|
|
},
|
|
agents: {
|
|
runAgent: "agents.runAgent",
|
|
resumeAgent: "agents.resumeAgent",
|
|
},
|
|
},
|
|
}));
|
|
|
|
vi.mock("@/hooks/use-auth-query", () => ({
|
|
useAuthQuery: () => mocks.subscription,
|
|
}));
|
|
|
|
vi.mock("@/components/canvas/canvas-sync-context", () => ({
|
|
useCanvasSync: () => ({
|
|
queueNodeDataUpdate: mocks.queueNodeDataUpdate,
|
|
status: { isOffline: mocks.isOffline, isSyncing: false, pendingCount: 0 },
|
|
}),
|
|
}));
|
|
|
|
vi.mock("@/lib/toast", () => ({
|
|
toast: {
|
|
warning: mocks.toastWarning,
|
|
},
|
|
}));
|
|
|
|
vi.mock("@/components/ui/label", () => ({
|
|
Label: ({ children, htmlFor }: { children: React.ReactNode; htmlFor?: string }) =>
|
|
React.createElement("label", { htmlFor }, children),
|
|
}));
|
|
|
|
vi.mock("@/components/ui/select", () => ({
|
|
Select: ({
|
|
value,
|
|
onValueChange,
|
|
children,
|
|
}: {
|
|
value: string;
|
|
onValueChange: (value: string) => void;
|
|
children: React.ReactNode;
|
|
}) =>
|
|
React.createElement(
|
|
"select",
|
|
{
|
|
"aria-label": "agent-model",
|
|
value,
|
|
onChange: (event: Event) => {
|
|
onValueChange((event.target as HTMLSelectElement).value);
|
|
},
|
|
},
|
|
children,
|
|
),
|
|
SelectTrigger: ({ children }: { children: React.ReactNode }) => children,
|
|
SelectValue: () => null,
|
|
SelectContent: ({ children }: { children: React.ReactNode }) => children,
|
|
SelectItem: ({ children, value }: { children: React.ReactNode; value: string }) =>
|
|
React.createElement("option", { value }, children),
|
|
}));
|
|
|
|
vi.mock("@/components/canvas/nodes/base-node-wrapper", () => ({
|
|
default: ({ children }: { children: React.ReactNode }) => React.createElement("div", null, children),
|
|
}));
|
|
|
|
const translations: Record<string, string> = {
|
|
"agentNode.templates.campaignDistributor.name": "Campaign Distributor",
|
|
"agentNode.templates.campaignDistributor.description":
|
|
"Develops and distributes LemonSpace campaign content across social media and messenger channels.",
|
|
"agentNode.modelLabel": "Model",
|
|
"agentNode.modelCreditMeta": "{model} - {credits} Cr",
|
|
"agentNode.briefingLabel": "Briefing",
|
|
"agentNode.briefingPlaceholder": "Describe the core task and desired output.",
|
|
"agentNode.constraintsLabel": "Constraints",
|
|
"agentNode.audienceLabel": "Audience",
|
|
"agentNode.toneLabel": "Tone",
|
|
"agentNode.targetChannelsLabel": "Target channels",
|
|
"agentNode.targetChannelsPlaceholder": "LinkedIn, Instagram Feed",
|
|
"agentNode.hardConstraintsLabel": "Hard constraints",
|
|
"agentNode.hardConstraintsPlaceholder": "No emojis\nMax 120 words",
|
|
"agentNode.runAgentButton": "Run agent",
|
|
"agentNode.clarificationsLabel": "Clarifications",
|
|
"agentNode.submitClarificationButton": "Submit clarification",
|
|
"agentNode.templateReferenceLabel": "Template reference",
|
|
"agentNode.templateReferenceChannelsLabel": "Channels",
|
|
"agentNode.templateReferenceInputsLabel": "Inputs",
|
|
"agentNode.templateReferenceOutputsLabel": "Outputs",
|
|
"agentNode.executingStepFallback": "Executing step {current}/{total}",
|
|
"agentNode.executingPlannedTotalFallback": "Executing planned outputs ({total} total)",
|
|
"agentNode.executingPlannedFallback": "Executing planned outputs",
|
|
"agentNode.offlineTitle": "Offline currently not supported",
|
|
"agentNode.offlineDescription": "Agent run requires an active connection.",
|
|
"agentNode.clarificationPrompts.briefing":
|
|
"What should the agent produce? Provide the brief in one or two sentences.",
|
|
"agentNode.clarificationPrompts.targetChannels":
|
|
"Which channels should this run target? List at least one channel.",
|
|
"agentNode.clarificationPrompts.incomingContext":
|
|
"No context was provided. What source context should the agent use?",
|
|
};
|
|
|
|
vi.mock("next-intl", () => ({
|
|
useLocale: () => "de",
|
|
useTranslations: (namespace?: string) =>
|
|
(key: string, values?: Record<string, unknown>) => {
|
|
const fullKey = namespace ? `${namespace}.${key}` : key;
|
|
let text = translations[fullKey] ?? key;
|
|
if (values) {
|
|
for (const [name, value] of Object.entries(values)) {
|
|
text = text.replaceAll(`{${name}}`, String(value));
|
|
}
|
|
}
|
|
return text;
|
|
},
|
|
}));
|
|
|
|
vi.mock("@xyflow/react", () => ({
|
|
Handle: () => null,
|
|
Position: { Left: "left", Right: "right" },
|
|
}));
|
|
|
|
import AgentNode from "@/components/canvas/nodes/agent-node";
|
|
|
|
(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
|
|
|
describe("AgentNode runtime", () => {
|
|
let container: HTMLDivElement | null = null;
|
|
let root: Root | null = null;
|
|
|
|
beforeEach(() => {
|
|
mocks.subscription = { tier: "starter" };
|
|
mocks.isOffline = false;
|
|
mocks.queueNodeDataUpdate.mockClear();
|
|
mocks.runAgent.mockClear();
|
|
mocks.resumeAgent.mockClear();
|
|
mocks.toastWarning.mockClear();
|
|
});
|
|
|
|
afterEach(() => {
|
|
if (root) {
|
|
act(() => {
|
|
root?.unmount();
|
|
});
|
|
}
|
|
container?.remove();
|
|
container = null;
|
|
root = null;
|
|
});
|
|
|
|
it("renders tier-aware model picker, updates node data, and triggers run/resume actions", async () => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
React.createElement(AgentNode, {
|
|
id: "agent-1",
|
|
selected: false,
|
|
dragging: false,
|
|
draggable: true,
|
|
selectable: true,
|
|
deletable: true,
|
|
zIndex: 1,
|
|
isConnectable: true,
|
|
type: "agent",
|
|
data: {
|
|
canvasId: "canvas-1",
|
|
templateId: "campaign-distributor",
|
|
modelId: "openai/gpt-5.4-mini",
|
|
briefConstraints: {
|
|
briefing: "Draft channel-ready campaign copy",
|
|
audience: "SaaS founders",
|
|
tone: "Confident and practical",
|
|
targetChannels: ["LinkedIn", "Instagram Feed"],
|
|
hardConstraints: ["No emojis", "Max 120 words"],
|
|
},
|
|
clarificationQuestions: [
|
|
{ id: "briefing", prompt: "RAW_BRIEFING_PROMPT", required: true },
|
|
],
|
|
clarificationAnswers: {},
|
|
} as Record<string, unknown>,
|
|
positionAbsoluteX: 0,
|
|
positionAbsoluteY: 0,
|
|
}),
|
|
);
|
|
});
|
|
|
|
const modelSelect = container.querySelector('select[aria-label="agent-model"]');
|
|
if (!(modelSelect instanceof HTMLSelectElement)) {
|
|
throw new Error("Agent model select not found");
|
|
}
|
|
|
|
const modelOptionValues = Array.from(modelSelect.querySelectorAll("option")).map(
|
|
(option) => (option as HTMLOptionElement).value,
|
|
);
|
|
expect(modelOptionValues).toContain("openai/gpt-5.4-mini");
|
|
expect(modelOptionValues).not.toContain("openai/gpt-5.4-pro");
|
|
|
|
expect(container.textContent).toContain("GPT-5.4 Mini");
|
|
expect(container.textContent).toContain("15 Cr");
|
|
expect(container.textContent).toContain("Briefing");
|
|
expect(container.textContent).toContain("Constraints");
|
|
expect(container.textContent).toContain("Template reference");
|
|
|
|
const briefingTextarea = container.querySelector('textarea[name="agent-briefing"]');
|
|
if (!(briefingTextarea instanceof HTMLTextAreaElement)) {
|
|
throw new Error("Briefing textarea not found");
|
|
}
|
|
expect(briefingTextarea.value).toBe("Draft channel-ready campaign copy");
|
|
|
|
const targetChannelsInput = container.querySelector('input[name="agent-target-channels"]');
|
|
if (!(targetChannelsInput instanceof HTMLInputElement)) {
|
|
throw new Error("Target channels input not found");
|
|
}
|
|
expect(targetChannelsInput.value).toBe("LinkedIn, Instagram Feed");
|
|
|
|
const hardConstraintsInput = container.querySelector('textarea[name="agent-hard-constraints"]');
|
|
if (!(hardConstraintsInput instanceof HTMLTextAreaElement)) {
|
|
throw new Error("Hard constraints textarea not found");
|
|
}
|
|
expect(hardConstraintsInput.value).toBe("No emojis\nMax 120 words");
|
|
|
|
await act(async () => {
|
|
modelSelect.value = "openai/gpt-5.4";
|
|
modelSelect.dispatchEvent(new Event("change", { bubbles: true }));
|
|
});
|
|
|
|
expect(mocks.queueNodeDataUpdate).toHaveBeenCalledWith(
|
|
expect.objectContaining({
|
|
nodeId: "agent-1",
|
|
data: expect.objectContaining({ modelId: "openai/gpt-5.4" }),
|
|
}),
|
|
);
|
|
|
|
await act(async () => {
|
|
const valueSetter = Object.getOwnPropertyDescriptor(
|
|
HTMLTextAreaElement.prototype,
|
|
"value",
|
|
)?.set;
|
|
valueSetter?.call(briefingTextarea, "Adapt this launch to each channel");
|
|
briefingTextarea.dispatchEvent(new Event("input", { bubbles: true }));
|
|
});
|
|
|
|
expect(mocks.queueNodeDataUpdate).toHaveBeenCalledWith(
|
|
expect.objectContaining({
|
|
nodeId: "agent-1",
|
|
data: expect.objectContaining({
|
|
briefConstraints: expect.objectContaining({
|
|
briefing: "Adapt this launch to each channel",
|
|
}),
|
|
}),
|
|
}),
|
|
);
|
|
|
|
await act(async () => {
|
|
const valueSetter = Object.getOwnPropertyDescriptor(
|
|
HTMLInputElement.prototype,
|
|
"value",
|
|
)?.set;
|
|
valueSetter?.call(targetChannelsInput, "LinkedIn, X, TikTok");
|
|
targetChannelsInput.dispatchEvent(new Event("input", { bubbles: true }));
|
|
});
|
|
|
|
expect(mocks.queueNodeDataUpdate).toHaveBeenCalledWith(
|
|
expect.objectContaining({
|
|
nodeId: "agent-1",
|
|
data: expect.objectContaining({
|
|
briefConstraints: expect.objectContaining({
|
|
targetChannels: ["LinkedIn", "X", "TikTok"],
|
|
}),
|
|
}),
|
|
}),
|
|
);
|
|
|
|
await act(async () => {
|
|
const valueSetter = Object.getOwnPropertyDescriptor(
|
|
HTMLTextAreaElement.prototype,
|
|
"value",
|
|
)?.set;
|
|
valueSetter?.call(hardConstraintsInput, "No emojis\nMax 80 words, include CTA");
|
|
hardConstraintsInput.dispatchEvent(new Event("input", { bubbles: true }));
|
|
});
|
|
|
|
expect(mocks.queueNodeDataUpdate).toHaveBeenCalledWith(
|
|
expect.objectContaining({
|
|
nodeId: "agent-1",
|
|
data: expect.objectContaining({
|
|
briefConstraints: expect.objectContaining({
|
|
hardConstraints: ["No emojis", "Max 80 words", "include CTA"],
|
|
}),
|
|
}),
|
|
}),
|
|
);
|
|
|
|
expect(container.textContent).toContain(
|
|
"What should the agent produce? Provide the brief in one or two sentences.",
|
|
);
|
|
|
|
const clarificationInput = container.querySelector('input[name="clarification-briefing"]');
|
|
if (!(clarificationInput instanceof HTMLInputElement)) {
|
|
throw new Error("Clarification input not found");
|
|
}
|
|
|
|
await act(async () => {
|
|
const valueSetter = Object.getOwnPropertyDescriptor(
|
|
HTMLInputElement.prototype,
|
|
"value",
|
|
)?.set;
|
|
valueSetter?.call(clarificationInput, "SaaS founders");
|
|
clarificationInput.dispatchEvent(new Event("input", { bubbles: true }));
|
|
});
|
|
|
|
expect(mocks.queueNodeDataUpdate).toHaveBeenCalledWith(
|
|
expect.objectContaining({
|
|
nodeId: "agent-1",
|
|
data: expect.objectContaining({
|
|
clarificationAnswers: expect.objectContaining({ briefing: "SaaS founders" }),
|
|
}),
|
|
}),
|
|
);
|
|
|
|
const runButton = Array.from(container.querySelectorAll("button")).find((element) =>
|
|
element.textContent?.includes("Run agent"),
|
|
);
|
|
if (!(runButton instanceof HTMLButtonElement)) {
|
|
throw new Error("Run button not found");
|
|
}
|
|
|
|
await act(async () => {
|
|
runButton.click();
|
|
});
|
|
|
|
expect(mocks.runAgent).toHaveBeenCalledWith({
|
|
canvasId: "canvas-1",
|
|
nodeId: "agent-1",
|
|
modelId: "openai/gpt-5.4",
|
|
locale: "de",
|
|
});
|
|
|
|
const submitButton = Array.from(container.querySelectorAll("button")).find((element) =>
|
|
element.textContent?.includes("Submit clarification"),
|
|
);
|
|
if (!(submitButton instanceof HTMLButtonElement)) {
|
|
throw new Error("Submit clarification button not found");
|
|
}
|
|
|
|
await act(async () => {
|
|
submitButton.click();
|
|
});
|
|
|
|
expect(mocks.resumeAgent).toHaveBeenCalledWith({
|
|
canvasId: "canvas-1",
|
|
nodeId: "agent-1",
|
|
clarificationAnswers: { briefing: "SaaS founders" },
|
|
locale: "de",
|
|
});
|
|
});
|
|
|
|
it("warns and skips actions when offline", async () => {
|
|
mocks.isOffline = true;
|
|
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
React.createElement(AgentNode, {
|
|
id: "agent-2",
|
|
selected: false,
|
|
dragging: false,
|
|
draggable: true,
|
|
selectable: true,
|
|
deletable: true,
|
|
zIndex: 1,
|
|
isConnectable: true,
|
|
type: "agent",
|
|
data: {
|
|
canvasId: "canvas-1",
|
|
templateId: "campaign-distributor",
|
|
modelId: "openai/gpt-5.4-mini",
|
|
clarificationQuestions: [{ id: "q1", prompt: "Goal?", required: true }],
|
|
clarificationAnswers: { q1: "More signups" },
|
|
} as Record<string, unknown>,
|
|
positionAbsoluteX: 0,
|
|
positionAbsoluteY: 0,
|
|
}),
|
|
);
|
|
});
|
|
|
|
const runButton = Array.from(container.querySelectorAll("button")).find((element) =>
|
|
element.textContent?.includes("Run agent"),
|
|
);
|
|
const submitButton = Array.from(container.querySelectorAll("button")).find((element) =>
|
|
element.textContent?.includes("Submit clarification"),
|
|
);
|
|
|
|
if (!(runButton instanceof HTMLButtonElement) || !(submitButton instanceof HTMLButtonElement)) {
|
|
throw new Error("Runtime action buttons not found");
|
|
}
|
|
|
|
await act(async () => {
|
|
runButton.click();
|
|
submitButton.click();
|
|
});
|
|
|
|
expect(mocks.toastWarning).toHaveBeenCalledTimes(2);
|
|
expect(mocks.runAgent).not.toHaveBeenCalled();
|
|
expect(mocks.resumeAgent).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("disables run button and shows progress while executing", async () => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
React.createElement(AgentNode, {
|
|
id: "agent-3",
|
|
selected: false,
|
|
dragging: false,
|
|
draggable: true,
|
|
selectable: true,
|
|
deletable: true,
|
|
zIndex: 1,
|
|
isConnectable: true,
|
|
type: "agent",
|
|
data: {
|
|
canvasId: "canvas-1",
|
|
templateId: "campaign-distributor",
|
|
modelId: "openai/gpt-5.4-mini",
|
|
_status: "executing",
|
|
_statusMessage: "Executing step 2/4",
|
|
} as Record<string, unknown>,
|
|
positionAbsoluteX: 0,
|
|
positionAbsoluteY: 0,
|
|
}),
|
|
);
|
|
});
|
|
|
|
const runButton = Array.from(container.querySelectorAll("button")).find((element) =>
|
|
element.textContent?.includes("Run agent"),
|
|
);
|
|
if (!(runButton instanceof HTMLButtonElement)) {
|
|
throw new Error("Run button not found");
|
|
}
|
|
|
|
expect(runButton.disabled).toBe(true);
|
|
expect(container.textContent).toContain("Executing step 2/4");
|
|
|
|
await act(async () => {
|
|
runButton.click();
|
|
});
|
|
|
|
expect(mocks.runAgent).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("keeps execution progress fallback compatible with richer runtime execution step data", async () => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
React.createElement(AgentNode, {
|
|
id: "agent-4",
|
|
selected: false,
|
|
dragging: false,
|
|
draggable: true,
|
|
selectable: true,
|
|
deletable: true,
|
|
zIndex: 1,
|
|
isConnectable: true,
|
|
type: "agent",
|
|
data: {
|
|
canvasId: "canvas-1",
|
|
templateId: "campaign-distributor",
|
|
modelId: "openai/gpt-5.4-mini",
|
|
_status: "executing",
|
|
executionSteps: [
|
|
{
|
|
stepIndex: 0,
|
|
stepTotal: 2,
|
|
artifactType: "social-post",
|
|
requiredSections: ["hook", "body", "cta"],
|
|
qualityChecks: ["channel-fit"],
|
|
},
|
|
{
|
|
stepIndex: 1,
|
|
stepTotal: 2,
|
|
artifactType: "social-post",
|
|
requiredSections: ["hook", "body", "cta"],
|
|
qualityChecks: ["channel-fit"],
|
|
},
|
|
],
|
|
} as Record<string, unknown>,
|
|
positionAbsoluteX: 0,
|
|
positionAbsoluteY: 0,
|
|
}),
|
|
);
|
|
});
|
|
|
|
expect(container.textContent).toContain("Executing planned outputs (2 total)");
|
|
});
|
|
});
|