340 lines
12 KiB
TypeScript
340 lines
12 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 handleCalls: Array<{ type: string; id?: string }> = [];
|
|
|
|
vi.mock("@/components/canvas/nodes/base-node-wrapper", () => ({
|
|
default: ({ children }: { children: React.ReactNode }) => React.createElement("div", null, children),
|
|
}));
|
|
|
|
vi.mock("@xyflow/react", () => ({
|
|
Handle: ({ type, id }: { type: string; id?: string }) => {
|
|
handleCalls.push({ type, id });
|
|
return React.createElement("div", {
|
|
"data-handle-type": type,
|
|
"data-handle-id": id,
|
|
});
|
|
},
|
|
Position: { Left: "left", Right: "right" },
|
|
useConnection: () => ({ inProgress: false }),
|
|
}));
|
|
|
|
const translations: Record<string, string> = {
|
|
"agentOutputNode.defaultTitle": "Agent output",
|
|
"agentOutputNode.plannedOutputDefaultTitle": "Planned output",
|
|
"agentOutputNode.skeletonBadge": "Skeleton",
|
|
"agentOutputNode.plannedOutputLabel": "Planned output",
|
|
"agentOutputNode.channelLabel": "Channel",
|
|
"agentOutputNode.artifactTypeLabel": "Artifact type",
|
|
"agentOutputNode.sectionsLabel": "Sections",
|
|
"agentOutputNode.metadataLabel": "Metadata",
|
|
"agentOutputNode.qualityChecksLabel": "Quality checks",
|
|
"agentOutputNode.detailsLabel": "Details",
|
|
"agentOutputNode.previewLabel": "Preview",
|
|
"agentOutputNode.previewFallback": "No preview available",
|
|
"agentOutputNode.emptyValue": "-",
|
|
"agentOutputNode.bodyLabel": "Body",
|
|
"agentOutputNode.plannedContent": "Planned content",
|
|
};
|
|
|
|
vi.mock("next-intl", () => ({
|
|
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;
|
|
},
|
|
}));
|
|
|
|
import AgentOutputNode from "@/components/canvas/nodes/agent-output-node";
|
|
|
|
(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
|
|
|
describe("AgentOutputNode", () => {
|
|
let container: HTMLDivElement | null = null;
|
|
let root: Root | null = null;
|
|
|
|
beforeEach(() => {
|
|
handleCalls.length = 0;
|
|
});
|
|
|
|
afterEach(() => {
|
|
if (root) {
|
|
act(() => {
|
|
root?.unmount();
|
|
});
|
|
}
|
|
container?.remove();
|
|
container = null;
|
|
root = null;
|
|
});
|
|
|
|
it("renders structured output with deliverable first and default-collapsed details", async () => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
React.createElement(AgentOutputNode, {
|
|
id: "agent-output-1",
|
|
selected: false,
|
|
dragging: false,
|
|
draggable: true,
|
|
selectable: true,
|
|
deletable: true,
|
|
zIndex: 1,
|
|
isConnectable: true,
|
|
type: "agent-output",
|
|
data: {
|
|
title: "Instagram Caption",
|
|
channel: "instagram-feed",
|
|
artifactType: "caption-pack",
|
|
previewText: "A short punchy caption with hashtags",
|
|
sections: [
|
|
{ id: "hook", label: "Hook", content: "Launch day is here." },
|
|
{ id: "body", label: "Body", content: "Built for modern teams." },
|
|
],
|
|
metadata: {
|
|
objective: "Drive signups",
|
|
tags: ["launch", "product"],
|
|
},
|
|
qualityChecks: ["channel-fit", "cta-present"],
|
|
body: "Legacy body fallback",
|
|
_status: "done",
|
|
} as Record<string, unknown>,
|
|
positionAbsoluteX: 0,
|
|
positionAbsoluteY: 0,
|
|
}),
|
|
);
|
|
});
|
|
|
|
expect(container.textContent).toContain("Instagram Caption");
|
|
expect(container.textContent).toContain("instagram-feed");
|
|
expect(container.textContent).toContain("caption-pack");
|
|
expect(container.textContent).toContain("Sections");
|
|
expect(container.textContent).toContain("Hook");
|
|
expect(container.textContent).toContain("Launch day is here.");
|
|
expect(container.textContent).toContain("Metadata");
|
|
expect(container.textContent).toContain("objective");
|
|
expect(container.textContent).toContain("Drive signups");
|
|
expect(container.textContent).toContain("Quality checks");
|
|
expect(container.textContent).toContain("channel-fit");
|
|
expect(container.textContent).toContain("Preview");
|
|
expect(container.textContent).toContain("A short punchy caption with hashtags");
|
|
expect(container.querySelector('[data-testid="agent-output-meta-strip"]')).not.toBeNull();
|
|
expect(container.querySelector('[data-testid="agent-output-sections"]')).not.toBeNull();
|
|
expect(container.querySelector('[data-testid="agent-output-metadata"]')).not.toBeNull();
|
|
expect(container.querySelector('[data-testid="agent-output-quality-checks"]')).not.toBeNull();
|
|
expect(container.querySelector('[data-testid="agent-output-preview"]')).not.toBeNull();
|
|
const details = container.querySelector('[data-testid="agent-output-details"]') as
|
|
| HTMLDetailsElement
|
|
| null;
|
|
expect(details).not.toBeNull();
|
|
expect(details?.open).toBe(false);
|
|
});
|
|
|
|
it("prioritizes social caption sections and moves secondary notes into details", async () => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
React.createElement(AgentOutputNode, {
|
|
id: "agent-output-caption-pack",
|
|
selected: false,
|
|
dragging: false,
|
|
draggable: true,
|
|
selectable: true,
|
|
deletable: true,
|
|
zIndex: 1,
|
|
isConnectable: true,
|
|
type: "agent-output",
|
|
data: {
|
|
title: "Caption Pack",
|
|
channel: "instagram-feed",
|
|
artifactType: "social-caption-pack",
|
|
sections: [
|
|
{ id: "hook", label: "Hook", content: "Start strong" },
|
|
{ id: "format", label: "Format note", content: "Best as 4:5" },
|
|
{ id: "cta", label: "CTA", content: "Save this post" },
|
|
{ id: "hashtags", label: "Hashtags", content: "#buildinpublic #launch" },
|
|
{ id: "caption", label: "Caption", content: "Launch day is here" },
|
|
{ id: "assumptions", label: "Assumptions", content: "Audience is founder-led" },
|
|
],
|
|
qualityChecks: ["channel-fit"],
|
|
} as Record<string, unknown>,
|
|
positionAbsoluteX: 0,
|
|
positionAbsoluteY: 0,
|
|
}),
|
|
);
|
|
});
|
|
|
|
const primarySections = container.querySelector('[data-testid="agent-output-sections"]');
|
|
expect(primarySections).not.toBeNull();
|
|
const primaryText = primarySections?.textContent ?? "";
|
|
expect(primaryText).toContain("Caption");
|
|
expect(primaryText).toContain("Hashtags");
|
|
expect(primaryText).toContain("CTA");
|
|
expect(primaryText.indexOf("Caption")).toBeLessThan(primaryText.indexOf("Hashtags"));
|
|
expect(primaryText.indexOf("Hashtags")).toBeLessThan(primaryText.indexOf("CTA"));
|
|
expect(primaryText).not.toContain("Format note");
|
|
expect(primaryText).not.toContain("Assumptions");
|
|
|
|
const secondarySections = container.querySelector('[data-testid="agent-output-secondary-sections"]');
|
|
expect(secondarySections).not.toBeNull();
|
|
expect(secondarySections?.textContent).toContain("Format note");
|
|
expect(secondarySections?.textContent).toContain("Assumptions");
|
|
});
|
|
|
|
it("renders parseable json body in a pretty-printed code block", async () => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
React.createElement(AgentOutputNode, {
|
|
id: "agent-output-4",
|
|
selected: false,
|
|
dragging: false,
|
|
draggable: true,
|
|
selectable: true,
|
|
deletable: true,
|
|
zIndex: 1,
|
|
isConnectable: true,
|
|
type: "agent-output",
|
|
data: {
|
|
title: "JSON output",
|
|
channel: "api",
|
|
artifactType: "payload",
|
|
body: '{"post":"Hello","tags":["launch","news"]}',
|
|
_status: "done",
|
|
} as Record<string, unknown>,
|
|
positionAbsoluteX: 0,
|
|
positionAbsoluteY: 0,
|
|
}),
|
|
);
|
|
});
|
|
|
|
const jsonBody = container.querySelector('[data-testid="agent-output-json-body"]');
|
|
expect(jsonBody).not.toBeNull();
|
|
expect(jsonBody?.textContent).toContain('"post": "Hello"');
|
|
expect(jsonBody?.textContent).toContain('"tags": [');
|
|
expect(container.querySelector('[data-testid="agent-output-text-body"]')).toBeNull();
|
|
});
|
|
|
|
it("falls back to legacy text body when structured fields are absent", async () => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
React.createElement(AgentOutputNode, {
|
|
id: "agent-output-legacy",
|
|
selected: false,
|
|
dragging: false,
|
|
draggable: true,
|
|
selectable: true,
|
|
deletable: true,
|
|
zIndex: 1,
|
|
isConnectable: true,
|
|
type: "agent-output",
|
|
data: {
|
|
title: "Legacy output",
|
|
channel: "linkedin",
|
|
artifactType: "post",
|
|
body: "Legacy body content",
|
|
} as Record<string, unknown>,
|
|
positionAbsoluteX: 0,
|
|
positionAbsoluteY: 0,
|
|
}),
|
|
);
|
|
});
|
|
|
|
expect(container.querySelector('[data-testid="agent-output-text-body"]')).not.toBeNull();
|
|
expect(container.textContent).toContain("Legacy body content");
|
|
expect(container.querySelector('[data-testid="agent-output-sections"]')).toBeNull();
|
|
});
|
|
|
|
it("renders input-only handle agent-output-in", async () => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
React.createElement(AgentOutputNode, {
|
|
id: "agent-output-2",
|
|
selected: false,
|
|
dragging: false,
|
|
draggable: true,
|
|
selectable: true,
|
|
deletable: true,
|
|
zIndex: 1,
|
|
isConnectable: true,
|
|
type: "agent-output",
|
|
data: {
|
|
title: "LinkedIn Post",
|
|
channel: "linkedin",
|
|
artifactType: "post",
|
|
body: "Body",
|
|
} as Record<string, unknown>,
|
|
positionAbsoluteX: 0,
|
|
positionAbsoluteY: 0,
|
|
}),
|
|
);
|
|
});
|
|
|
|
expect(handleCalls).toEqual([{ type: "target", id: "agent-output-in" }]);
|
|
});
|
|
|
|
it("renders skeleton mode with counter and placeholder", async () => {
|
|
container = document.createElement("div");
|
|
document.body.appendChild(container);
|
|
root = createRoot(container);
|
|
|
|
await act(async () => {
|
|
root?.render(
|
|
React.createElement(AgentOutputNode, {
|
|
id: "agent-output-3",
|
|
selected: false,
|
|
dragging: false,
|
|
draggable: true,
|
|
selectable: true,
|
|
deletable: true,
|
|
zIndex: 1,
|
|
isConnectable: true,
|
|
type: "agent-output",
|
|
data: {
|
|
title: "Planned headline",
|
|
channel: "linkedin",
|
|
artifactType: "post",
|
|
isSkeleton: true,
|
|
stepIndex: 1,
|
|
stepTotal: 4,
|
|
} as Record<string, unknown>,
|
|
positionAbsoluteX: 0,
|
|
positionAbsoluteY: 0,
|
|
}),
|
|
);
|
|
});
|
|
|
|
expect(container.textContent).toContain("Skeleton");
|
|
expect(container.textContent).toContain("2/4");
|
|
expect(container.querySelector('[data-testid="agent-output-skeleton-body"]')).not.toBeNull();
|
|
expect(handleCalls).toEqual([{ type: "target", id: "agent-output-in" }]);
|
|
});
|
|
});
|