drawio-mcp-server 2.0.3 → 2.1.0

package/build/real-environment/harness.js

@@ -1,58 +1,109 @@
 import { chromium, } from "@playwright/test";
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 import { InMemoryTransport } from "@modelcontextprotocol/sdk/inMemory.js";
+import { spawnCaddy } from "drawio-mcp-dev-proxy";
+import { createServer } from "node:net";
 import { ensureAssets } from "../assets/index.js";
-import { getHttpFeatureConfig } from "../config.js";
+import { defaultConfig, getHttpFeatureConfig, } from "../config.js";
 import { createDrawioMcpApp } from "../index.js";
 import { MemoryLogger } from "./logger.js";
 import { createArtifactRunDir } from "./screenshot.js";
+async function getFreePort() {
+    return new Promise((resolve, reject) => {
+        const srv = createServer();
+        srv.once("error", reject);
+        srv.listen(0, "127.0.0.1", () => {
+            const addr = srv.address();
+            if (addr && typeof addr === "object") {
+                const port = addr.port;
+                srv.close(() => resolve(port));
+            }
+            else {
+                srv.close(() => reject(new Error("could not resolve free port")));
+            }
+        });
+    });
+}
 export async function createRealEnvironmentContext() {
     const logger = new MemoryLogger();
     const browserMessages = [];
     const artifactRunDir = await createArtifactRunDir();
-    await ensureAssets({}, () => undefined);
-    const app = createDrawioMcpApp({ log: logger });
+    await ensureAssets({}, logger);
+    const app = createDrawioMcpApp({ config: defaultConfig(), log: logger });
     const wsServer = await app.startWebSocketServer(0);
     const wsPort = Number(wsServer.address().port);
-    const config = {
-        extensionPort: wsPort,
-        httpPort: 0,
-        transports: ["http"],
-        editorEnabled: true,
-    };
-    const startedHttp = await app.startHttpServer(0, config, getHttpFeatureConfig(config));
-    const httpPort = startedHttp.port;
+    const useHttps = process.env.HARNESS_HTTPS === "1";
+    let caddy = null;
+    let proxyPort = null;
+    let webSocketUrl;
+    let upstreamHttpPort;
+    if (useHttps) {
+        proxyPort = await getFreePort();
+        const httpUpstream = await getFreePort();
+        caddy = await spawnCaddy({
+            proxyPort,
+            httpUpstream,
+            wsUpstream: wsPort,
+        });
+        webSocketUrl = `wss://localhost:${proxyPort}/ws`;
+        const config = {
+            extensionPort: wsPort,
+            httpPort: httpUpstream,
+            transports: ["http"],
+            editorEnabled: true,
+            webSocketUrl,
+            logger: "console",
+            tlsEnabled: false,
+            tlsAuto: false,
+        };
+        await app.startHttpServer(httpUpstream, config, getHttpFeatureConfig(config));
+        upstreamHttpPort = httpUpstream;
+    }
+    else {
+        const config = {
+            extensionPort: wsPort,
+            httpPort: 0,
+            transports: ["http"],
+            editorEnabled: true,
+            logger: "console",
+            tlsEnabled: false,
+            tlsAuto: false,
+        };
+        const startedHttp = await app.startHttpServer(0, config, getHttpFeatureConfig(config));
+        upstreamHttpPort = startedHttp.port;
+    }
+    const httpPort = useHttps ? proxyPort : upstreamHttpPort;
+    const baseUrl = useHttps
+        ? `https://localhost:${proxyPort}/`
+        : `http://localhost:${upstreamHttpPort}/`;
     const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair();
     const client = new Client({
         name: "real-environment-test",
         version: "1.0.0",
     });
+    const testServer = app.createMcpServer();
     await Promise.all([
-        app.server.connect(serverTransport),
+        testServer.connect(serverTransport),
         client.connect(clientTransport),
     ]);
     const browser = await chromium.launch({ headless: true });
-    const page = await browser.newPage();
-    page.on("console", (message) => {
-        browserMessages.push({
-            type: message.type(),
-            text: message.text(),
-        });
+    const browserContext = await browser.newContext({
+        ignoreHTTPSErrors: useHttps,
     });
-    await page.addInitScript((port) => {
-        const store = {
-            websocketPort: port,
-        };
-        window.__DRAWIO_MCP_TEST_HOOKS__ = true;
-        window.localStorage.setItem("drawio-mcp-plugin-config", JSON.stringify(store));
-        window.localStorage.setItem("drawio-mcp-config", JSON.stringify(store));
-    }, wsPort);
-    await page.goto(`http://localhost:${httpPort}/`, {
-        waitUntil: "domcontentloaded",
+    const page = await openConnectedDrawioPage({
+        browserContext,
+        baseUrl,
+        webSocketUrl,
+        httpPort,
+        wsPort,
+        browserMessages,
     });
-    await waitForPluginReady(page);
+    const proxy = caddy
+        ? { stop: () => caddy.stop(), proxyPort: caddy.proxyPort }
+        : null;
     return {
         browser,
+        browserContext,
         page,
         client,
         app,
@@ -61,12 +112,48 @@ export async function createRealEnvironmentContext() {
         artifactRunDir,
         httpPort,
         wsPort,
+        baseUrl,
+        proxy,
     };
 }
+export async function openConnectedDrawioPage({ browser, browserContext, baseUrl, webSocketUrl, httpPort, wsPort, browserMessages, }) {
+    const page = browserContext
+        ? await browserContext.newPage()
+        : await browser.newPage();
+    const editorUrl = baseUrl ?? `http://localhost:${httpPort}/`;
+    if (browserMessages) {
+        page.on("console", (message) => {
+            browserMessages.push({
+                type: message.type(),
+                text: message.text(),
+            });
+        });
+    }
+    await page.addInitScript((args) => {
+        const store = {
+            websocketPort: args.port,
+        };
+        if (args.websocketUrl) {
+            store.websocketUrl = args.websocketUrl;
+        }
+        window.__DRAWIO_MCP_TEST_HOOKS__ = true;
+        window.localStorage.setItem("drawio-mcp-plugin-config", JSON.stringify(store));
+        window.localStorage.setItem("drawio-mcp-config", JSON.stringify(store));
+    }, { port: wsPort, websocketUrl: webSocketUrl });
+    await page.goto(editorUrl, { waitUntil: "domcontentloaded" });
+    await waitForPluginReady(page);
+    return page;
+}
 export async function disposeRealEnvironmentContext(context) {
-    await context.client.close();
-    await context.browser.close();
-    await context.app.close();
+    if (!context)
+        return;
+    await context.client?.close();
+    await context.browserContext?.close();
+    await context.browser?.close();
+    await context.app?.close();
+    if (context.proxy) {
+        await context.proxy.stop();
+    }
 }
 export async function waitForPluginReady(page) {
     await page.waitForFunction(() => {
@@ -159,6 +246,7 @@ export async function resetDiagram(context) {
     await context.client.callTool({
         name: "import-diagram",
         arguments: {
+            target_page: { index: 0 },
             data: emptyDiagram,
             format: "xml",
             mode: "replace",

package/build/real-environment/import-mermaid.test.js

@@ -0,0 +1,81 @@
+import { afterAll, beforeAll, describe, expect, it } from "@jest/globals";
+import { createRealEnvironmentContext, disposeRealEnvironmentContext, resetDiagram, } from "./harness.js";
+import { expectNoBrowserErrors, expectNoServerErrors } from "./assertions.js";
+import { callToolJson } from "./tools.js";
+const FLOWCHART = "graph TD\nA[Start] --> B[Stop]";
+describe("real environment/import-mermaid", () => {
+    let context;
+    beforeAll(async () => {
+        context = await createRealEnvironmentContext();
+    }, 180000);
+    afterAll(async () => {
+        await disposeRealEnvironmentContext(context);
+    });
+    it("native mode converts a flowchart to native cells on the target page", async () => {
+        await resetDiagram(context);
+        context.browserMessages.length = 0;
+        const logCountBefore = context.logger.entries.length;
+        const { payload } = await callToolJson(context, "import-mermaid", {
+            target_page: { index: 0 },
+            mermaid_source: FLOWCHART,
+            mode: "native",
+            insert_mode: "add",
+        });
+        expect(payload.success).toBe(true);
+        expect(payload.result?.mode).toBe("native");
+        expect(typeof payload.result?.xml).toBe("string");
+        expect(payload.result?.xml ?? "").toContain("mxGraphModel");
+        await context.page.waitForFunction(() => {
+            const ui = window.ui;
+            const model = ui?.editor?.graph?.getModel?.();
+            const cells = Object.values(model?.cells ?? {});
+            return cells.some((cell) => cell?.vertex === true);
+        });
+        await expectNoBrowserErrors(context, "import-mermaid:native");
+        await expectNoServerErrors(context, "import-mermaid:native", logCountBefore);
+    }, 180000);
+    it("embed mode produces XML carrying the mermaidData attribute", async () => {
+        await resetDiagram(context);
+        const { payload } = await callToolJson(context, "import-mermaid", {
+            target_page: { index: 0 },
+            mermaid_source: FLOWCHART,
+            mode: "embed",
+            insert_mode: "replace",
+        });
+        expect(payload.success).toBe(true);
+        expect(payload.result?.mode).toBe("embed");
+        expect(payload.result?.xml ?? "").toContain("mermaidData");
+        expect(payload.result?.xml ?? "").toContain("shape=image");
+    }, 180000);
+    it("requires target_page for replace and add modes", async () => {
+        await resetDiagram(context);
+        const result = await context.client.callTool({
+            name: "import-mermaid",
+            arguments: {
+                mermaid_source: FLOWCHART,
+                mode: "native",
+                insert_mode: "add",
+            },
+        });
+        expect(result.isError).toBe(true);
+        const content = result.content;
+        expect(String(content[0]?.text ?? "")).toContain("`target_page` is required");
+    }, 180000);
+    it("allows new-page imports without target_page", async () => {
+        await resetDiagram(context);
+        const { payload: beforePagesPayload } = await callToolJson(context, "list-pages", {});
+        expect(beforePagesPayload.success).toBe(true);
+        const { payload } = await callToolJson(context, "import-mermaid", {
+            mermaid_source: FLOWCHART,
+            mode: "native",
+            insert_mode: "new-page",
+        });
+        expect(payload.success).toBe(true);
+        expect(payload.result?.mode).toBe("native");
+        expect(payload.result?.xml ?? "").toContain("mxGraphModel");
+        const { payload: afterPagesPayload } = await callToolJson(context, "list-pages", {});
+        expect(afterPagesPayload.success).toBe(true);
+        expect(afterPagesPayload.result).toHaveLength(beforePagesPayload.result.length + 1);
+        expect(afterPagesPayload.result.at(-1)?.is_current).toBe(true);
+    }, 180000);
+});