wehub-resource-sync
94 lines
4.1 KiB
TypeScript
94 lines
4.1 KiB
TypeScript
import { test, expect } from "@playwright/test";
|
|
|
|
// QA reference: qa/mcp-apps.md
|
|
// Demo source: src/app/demos/mcp-apps/page.tsx
|
|
// Backend: src/agents/mcp_apps_agent.py
|
|
// Runtime: src/app/api/copilotkit-mcp-apps/route.ts (mcpApps.servers wires
|
|
// the public Excalidraw MCP app at https://mcp.excalidraw.com, pinned
|
|
// serverId: "excalidraw").
|
|
//
|
|
// Pattern: MCP server-driven UI via ACTIVITY RENDERERS. The runtime
|
|
// middleware fetches the UI resource associated with the `create_view`
|
|
// MCP tool call and emits an activity event; CopilotKit's built-in
|
|
// `MCPAppsActivityRenderer` auto-registers for the `mcp-apps` activity
|
|
// type (per `@region[no-frontend-renderer-needed]` comment on page.tsx)
|
|
// and paints a sandboxed <iframe> inline in the chat transcript.
|
|
//
|
|
// The app registers NO custom activity renderer and NO data-testid. Our
|
|
// render-signal is the sandboxed <iframe> element itself — the built-in
|
|
// renderer always sets the `sandbox` attribute. The iframe payload
|
|
// (the actual Excalidraw drawing) is rendered inside a cross-origin
|
|
// frame and is not introspectable from Playwright's page context, so we
|
|
// only assert presence + the sandbox contract.
|
|
//
|
|
// W8-9: the MCP round-trip (agent → create_view → server-side resource
|
|
// fetch → activity event) is the slowest flow in the suite on Railway,
|
|
// regularly sitting above 60s. The end-to-end tool-driven test uses a
|
|
// 90s budget and is kept un-skipped; the deterministic draw-prompt
|
|
// version is covered by the suggestion pill flow.
|
|
|
|
test.describe("MCP Apps (Excalidraw activity iframe)", () => {
|
|
test.setTimeout(180_000);
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto("/demos/mcp-apps");
|
|
});
|
|
|
|
test("page loads with chat input and no activity iframe rendered", async ({
|
|
page,
|
|
}) => {
|
|
await expect(page.getByPlaceholder("Type a message")).toBeVisible();
|
|
// No sandboxed iframe on first paint.
|
|
await expect(page.locator("iframe[sandbox]")).toHaveCount(0);
|
|
});
|
|
|
|
test("both suggestion pills render with verbatim titles", async ({
|
|
page,
|
|
}) => {
|
|
const suggestions = page.locator('[data-testid="copilot-suggestion"]');
|
|
await expect(
|
|
suggestions.filter({ hasText: "Draw a flowchart" }).first(),
|
|
).toBeVisible({ timeout: 15_000 });
|
|
await expect(
|
|
suggestions.filter({ hasText: "Sketch a system diagram" }).first(),
|
|
).toBeVisible({ timeout: 15_000 });
|
|
});
|
|
|
|
// SKIP: on Railway the MCP round-trip (agent -> create_view ->
|
|
// server-side resource fetch -> activity event -> iframe render)
|
|
// regularly sits above 90s and intermittently fails to paint an
|
|
// iframe at all when the Excalidraw MCP server is slow. See W8-9.
|
|
// Un-skip when the MCP Apps middleware / Excalidraw upstream
|
|
// stabilises on Railway.
|
|
test.skip("Draw-a-flowchart pill renders a sandboxed activity iframe", async ({
|
|
page,
|
|
}) => {
|
|
const suggestions = page.locator('[data-testid="copilot-suggestion"]');
|
|
await suggestions.filter({ hasText: "Draw a flowchart" }).first().click();
|
|
|
|
// The built-in MCPAppsActivityRenderer always sets the `sandbox`
|
|
// attribute on the UI-resource iframe (that is the load-bearing
|
|
// renderer contract — no renderer can skip it).
|
|
const iframe = page.locator("iframe[sandbox]").first();
|
|
await expect(iframe).toBeVisible({ timeout: 90_000 });
|
|
});
|
|
|
|
// SKIP: same root cause as the flowchart flow — the typed-prompt
|
|
// variant also depends on the MCP round-trip. See W8-9.
|
|
test.skip("explicit create_view prompt renders a sandboxed iframe", async ({
|
|
page,
|
|
}) => {
|
|
// Typed prompt (not suggestion pill) — the QA doc calls this out as
|
|
// the canonical end-to-end MCP interaction: single `create_view`
|
|
// call with 3 elements.
|
|
const input = page.getByPlaceholder("Type a message");
|
|
await input.fill(
|
|
"Use Excalidraw to draw exactly 2 rectangles labelled 'A' and 'B' connected by one arrow from A to B.",
|
|
);
|
|
await page.locator('[data-testid="copilot-send-button"]').first().click();
|
|
|
|
const iframe = page.locator("iframe[sandbox]").first();
|
|
await expect(iframe).toBeVisible({ timeout: 90_000 });
|
|
});
|
|
});
|