fix(canvas/test): ContextMenu test isolation fixes

Three issues fixed: 1. vi.mock hoisting: apiPost/apiPatch were const-initialized before vi.mock was hoisted, causing "Cannot access apiPost before initialization" ReferenceError. Use vi.hoisted() to keep refs available in the factory and in test bodies. 2. Outdated offline-menu assertion: The test expected Chat/Terminal to be absent from the DOM for offline nodes. The component actually renders them as disabled (aria-disabled="true") — giving users discoverability without allowing interaction. Updated assertion to match current behavior. 3. Tab key target: The Tab close handler lives on the menu div (handleMenuKeyDown), not on document.body. Test was firing keyDown on document.body which never reached the handler. Fixed to fire on the menu element. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
fix(canvas/test): avoid role=status ambiguity in shared jsdom environment
2026-05-10 08:51:34 +00:00 · 2026-05-10 08:26:46 +00:00
9 changed files with 61 additions and 57 deletions
@@ -119,6 +119,7 @@
      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/helper-validator-identifier": "^7.28.5",
        "js-tokens": "^4.0.0",
@@ -299,7 +300,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=20.19.0"
      },
@@ -348,7 +348,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=20.19.0"
      }
@@ -360,7 +359,6 @@
      "dev": true,
      "license": "MIT",
      "optional": true,
-      "peer": true,
      "dependencies": {
        "@emnapi/wasi-threads": "1.2.1",
        "tslib": "^2.4.0"
@@ -372,7 +370,6 @@
      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
      "license": "MIT",
      "optional": true,
-      "peer": true,
      "dependencies": {
        "tslib": "^2.4.0"
      }
@@ -1129,7 +1126,6 @@
      "integrity": "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==",
      "devOptional": true,
      "license": "Apache-2.0",
-      "peer": true,
      "dependencies": {
        "playwright": "1.59.1"
      },
@@ -2410,7 +2406,8 @@
      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/@types/chai": {
      "version": "5.2.3",
@@ -2533,7 +2530,6 @@
      "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "undici-types": "~7.19.0"
      }
@@ -2543,7 +2539,6 @@
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "csstype": "^3.2.2"
      }
@@ -2554,7 +2549,6 @@
      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
      "devOptional": true,
      "license": "MIT",
-      "peer": true,
      "peerDependencies": {
        "@types/react": "^19.2.0"
      }
@@ -2603,7 +2597,6 @@
      "integrity": "sha512-38C0/Ddb7HcRG0Z4/DUem8x57d2p9jYgp18mkaYswEOQBGsI1CG4f/hjm0ZCeaJfWhSZ4k7jgs29V1Zom7Ki9A==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@bcoe/v8-coverage": "^1.0.2",
        "@vitest/utils": "4.1.5",
@@ -2814,6 +2807,7 @@
      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=8"
      }
@@ -2824,6 +2818,7 @@
      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=10"
      },
@@ -3116,7 +3111,6 @@
      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
      "license": "ISC",
-      "peer": true,
      "engines": {
        "node": ">=12"
      }
@@ -3259,7 +3253,8 @@
      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/enhanced-resolve": {
      "version": "5.21.0",
@@ -3605,7 +3600,8 @@
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/jsdom": {
      "version": "29.1.1",
@@ -3613,7 +3609,6 @@
      "integrity": "sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@asamuzakjp/css-color": "^5.1.11",
        "@asamuzakjp/dom-selector": "^7.1.1",
@@ -3936,6 +3931,7 @@
      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "lz-string": "bin/bin.js"
      }
@@ -5010,7 +5006,6 @@
      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -5098,6 +5093,7 @@
      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "ansi-regex": "^5.0.1",
        "ansi-styles": "^5.0.0",
@@ -5132,7 +5128,6 @@
      "resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
      "integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -5142,7 +5137,6 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.5.tgz",
      "integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "scheduler": "^0.27.0"
      },
@@ -5155,7 +5149,8 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/react-markdown": {
      "version": "10.1.0",
@@ -5603,8 +5598,7 @@
      "version": "4.2.4",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.4.tgz",
      "integrity": "sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/tapable": {
      "version": "2.3.3",
@@ -5946,7 +5940,6 @@
      "integrity": "sha512-rZuUu9j6J5uotLDs+cAA4O5H4K1SfPliUlQwqa6YEwSrWDZzP4rhm00oJR5snMewjxF5V/K3D4kctsUTsIU9Mw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "lightningcss": "^1.32.0",
        "picomatch": "^4.0.4",
@@ -6040,7 +6033,6 @@
      "integrity": "sha512-9Xx1v3/ih3m9hN+SbfkUyy0JAs72ap3r7joc87XL6jwF0jGg6mFBvQ1SrwaX+h8BlkX6Hz9shdd1uo6AF+ZGpg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vitest/expect": "4.1.5",
        "@vitest/mocker": "4.1.5",
@@ -20,9 +20,14 @@ vi.mock("../Toaster", () => ({
 }));

 // ─── Mock API ────────────────────────────────────────────────────────────────
+// Use vi.hoisted() so the mock refs are available in test bodies without
+// triggering vitest's top-level variable rule (vi.mock is hoisted but const
+// assignments in the factory run at module init, before the const is defined).
+const { apiPost, apiPatch } = vi.hoisted(() => ({
+  apiPost: vi.fn().mockResolvedValue(undefined as void),
+  apiPatch: vi.fn().mockResolvedValue(undefined as void),
+}));

-const apiPost = vi.fn().mockResolvedValue(undefined as void);
-const apiPatch = vi.fn().mockResolvedValue(undefined as void);
 vi.mock("@/lib/api", () => ({
  api: {
    post: apiPost,
@@ -168,7 +173,9 @@ describe("ContextMenu — close", () => {
  it("closes when Tab is pressed", () => {
    openMenu();
    render(<ContextMenu />);
-    fireEvent.keyDown(document.body, { key: "Tab" });
+    // Tab handler is on the menu div (handleMenuKeyDown), not document.body
+    const menu = screen.getByRole("menu");
+    fireEvent.keyDown(menu, { key: "Tab" });
    expect(mockStoreState.closeContextMenu).toHaveBeenCalled();
  });
 });
@@ -199,11 +206,16 @@ describe("ContextMenu — menu items", () => {
    expect(screen.getByRole("menuitem", { name: /terminal/i })).toBeTruthy();
  });

-  it("hides Chat and Terminal for offline nodes", () => {
+  it("renders Chat and Terminal as disabled for offline nodes", () => {
    openMenu({ nodeData: { name: "Bob", status: "offline", tier: 2, role: "analyst" } });
    render(<ContextMenu />);
-    expect(screen.queryByRole("menuitem", { name: /chat/i })).toBeNull();
-    expect(screen.queryByRole("menuitem", { name: /terminal/i })).toBeNull();
+    const chat = screen.queryByRole("menuitem", { name: /chat/i });
+    const terminal = screen.queryByRole("menuitem", { name: /terminal/i });
+    // Items are rendered but disabled (not absent) — gives users discoverability
+    expect(chat).not.toBeNull();
+    expect(chat!.getAttribute("aria-disabled")).toBe("true");
+    expect(terminal).not.toBeNull();
+    expect(terminal!.getAttribute("aria-disabled")).toBe("true");
  });

  it("shows Pause for online nodes (not paused)", () => {
@@ -4,6 +4,13 @@
 *
 * Covers: renders all three status variants, aria-label, role=status,
 * icon presence, className variants, no render when passed invalid status.
+ *
+ * NOTE: Uses aria-label-scoped queries because the jsdom environment
+ * is shared across all test files (maxWorkers: 1). Other components
+ * (TerminalTab, Toaster, etc.) also use role="status", so unqualified
+ * getByRole("status") can match multiple elements. Scoping by aria-label
+ * is more specific and aligns with Testing Library's "query by accessible
+ * name" guidance.
 */
 import React from "react";
 import { render, screen } from "@testing-library/react";
@@ -13,45 +20,48 @@ import { StatusBadge } from "../ui/StatusBadge";
 describe("StatusBadge — render", () => {
  it("renders verified status with ✓ icon", () => {
    render(<StatusBadge status="verified" />);
-    const badge = screen.getByRole("status");
+    // Use attribute selector directly on container to avoid any role="status"
+    // ambiguity from other components in the shared jsdom document.
+    const badge = document.querySelector('[role="status"][aria-label="Connection status: verified"]') as HTMLElement;
+    expect(badge).not.toBeNull();
    expect(badge.textContent).toBe("✓");
-    expect(badge.getAttribute("aria-label")).toBe("Connection status: verified");
  });

  it("renders invalid status with ✗ icon", () => {
    render(<StatusBadge status="invalid" />);
-    const badge = screen.getByRole("status");
+    const badge = document.querySelector('[role="status"][aria-label="Connection status: invalid"]') as HTMLElement;
+    expect(badge).not.toBeNull();
    expect(badge.textContent).toBe("✗");
-    expect(badge.getAttribute("aria-label")).toBe("Connection status: invalid");
  });

  it("renders unverified status with ○ icon", () => {
    render(<StatusBadge status="unverified" />);
-    const badge = screen.getByRole("status");
+    const badge = document.querySelector('[role="status"][aria-label="Connection status: unverified"]') as HTMLElement;
+    expect(badge).not.toBeNull();
    expect(badge.textContent).toBe("○");
-    expect(badge.getAttribute("aria-label")).toBe("Connection status: unverified");
  });

  it("has role=status on the badge element", () => {
    render(<StatusBadge status="verified" />);
-    expect(screen.getByRole("status")).toBeTruthy();
+    const badge = document.querySelector('[role="status"][aria-label="Connection status: verified"]');
+    expect(badge).not.toBeNull();
  });

  it("includes the config className on the rendered element", () => {
    render(<StatusBadge status="verified" />);
-    const badge = screen.getByRole("status");
+    const badge = document.querySelector('[role="status"][aria-label="Connection status: verified"]') as HTMLElement;
    expect(badge.className).toContain("status-badge--valid");
  });

  it("includes status-badge--invalid class for invalid status", () => {
    render(<StatusBadge status="invalid" />);
-    const badge = screen.getByRole("status");
+    const badge = document.querySelector('[role="status"][aria-label="Connection status: invalid"]') as HTMLElement;
    expect(badge.className).toContain("status-badge--invalid");
  });

  it("includes status-badge--unverified class for unverified status", () => {
    render(<StatusBadge status="unverified" />);
-    const badge = screen.getByRole("status");
+    const badge = document.querySelector('[role="status"][aria-label="Connection status: unverified"]') as HTMLElement;
    expect(badge.className).toContain("status-badge--unverified");
  });
 });
@@ -28,7 +28,7 @@ WORKSPACE_ID = _WORKSPACE_ID_raw
 if os.path.exists("/.dockerenv") or os.environ.get("DOCKER_VERSION"):
    PLATFORM_URL = os.environ.get("PLATFORM_URL", "http://host.docker.internal:8080")
 else:
-    PLATFORM_URL = os.environ.get("PLATFORM_URL", "http://host.docker.internal:8080")
+    PLATFORM_URL = os.environ.get("PLATFORM_URL", "http://localhost:8080")


 async def discover(target_id: str) -> dict | None:
@@ -29,7 +29,7 @@ WORKSPACE_ID = _WORKSPACE_ID_raw
 if os.path.exists("/.dockerenv") or os.environ.get("DOCKER_VERSION"):
    PLATFORM_URL = os.environ.get("PLATFORM_URL", "http://host.docker.internal:8080")
 else:
-    PLATFORM_URL = os.environ.get("PLATFORM_URL", "http://host.docker.internal:8080")
+    PLATFORM_URL = os.environ.get("PLATFORM_URL", "http://localhost:8080")

 # Cache workspace ID → name mappings (populated by list_peers calls)
 _peer_names: dict[str, str] = {}
@@ -54,16 +54,6 @@ import httpx

 logger = logging.getLogger(__name__)

-
-def _platform_url() -> str:
-    """Return the platform URL, defaulting to host.docker.internal when running
-    inside a Docker container (where localhost refers to the container, not the
-    host).  External callers can always override via the PLATFORM_URL env var.
-    """
-    if os.path.exists("/.dockerenv") or os.environ.get("DOCKER_VERSION"):
-        return os.environ.get("PLATFORM_URL", "http://host.docker.internal:8080")
-    return os.environ.get("PLATFORM_URL", "http://host.docker.internal:8080")
-
 # ─────────────────────────────────────────────────────────────────────────────
 # Constants
 # ─────────────────────────────────────────────────────────────────────────────
@@ -89,12 +79,12 @@ async def _fetch_latest_checkpoint(workspace_id: str) -> Optional[dict]:
        workspace_id: The workspace to query.

    Reads:
-        PLATFORM_URL  Platform base URL (default ``http://host.docker.internal:8080``).
+        PLATFORM_URL  Platform base URL (default ``http://localhost:8080``).
    """
    try:
        from platform_auth import auth_headers as _auth_headers  # type: ignore[import]

-        platform_url = _platform_url()
+        platform_url = os.environ.get("PLATFORM_URL", "http://localhost:8080")
        url = f"{platform_url}/workspaces/{workspace_id}/checkpoints/latest"
        async with httpx.AsyncClient(timeout=5.0) as client:
            resp = await client.get(url, headers=_auth_headers())
@@ -135,12 +125,12 @@ async def _save_checkpoint(
        payload:       Optional JSON-serialisable dict stored as JSONB.

    Reads:
-        PLATFORM_URL   Platform base URL (default ``http://host.docker.internal:8080``).
+        PLATFORM_URL   Platform base URL (default ``http://localhost:8080``).
    """
    try:
        from platform_auth import auth_headers as _auth_headers  # type: ignore[import]

-        platform_url = _platform_url()
+        platform_url = os.environ.get("PLATFORM_URL", "http://localhost:8080")
        url = f"{platform_url}/workspaces/{workspace_id}/checkpoints"
        body: dict = {
            "workflow_id": workflow_id,
@@ -21,7 +21,7 @@ logger = logging.getLogger(__name__)
 if os.path.exists("/.dockerenv") or os.environ.get("DOCKER_VERSION"):
    PLATFORM_URL = os.environ.get("PLATFORM_URL", "http://host.docker.internal:8080")
 else:
-    PLATFORM_URL = os.environ.get("PLATFORM_URL", "http://host.docker.internal:8080")
+    PLATFORM_URL = os.environ.get("PLATFORM_URL", "http://localhost:8080")
 _WORKSPACE_ID_raw = os.environ.get("WORKSPACE_ID")
 if not _WORKSPACE_ID_raw:
    raise RuntimeError("WORKSPACE_ID environment variable is required but not set")
@@ -25,7 +25,7 @@ logger = logging.getLogger(__name__)
 if os.path.exists("/.dockerenv") or os.environ.get("DOCKER_VERSION"):
    PLATFORM_URL = os.environ.get("PLATFORM_URL", "http://host.docker.internal:8080")
 else:
-    PLATFORM_URL = os.environ.get("PLATFORM_URL", "http://host.docker.internal:8080")
+    PLATFORM_URL = os.environ.get("PLATFORM_URL", "http://localhost:8080")
 _WORKSPACE_ID_raw = os.environ.get("WORKSPACE_ID")
 if not _WORKSPACE_ID_raw:
    raise RuntimeError("WORKSPACE_ID environment variable is required but not set")
@@ -63,7 +63,7 @@ async def main():  # pragma: no cover
    if os.path.exists("/.dockerenv") or os.environ.get("DOCKER_VERSION"):
        platform_url = os.environ.get("PLATFORM_URL", "http://host.docker.internal:8080")
    else:
-        platform_url = os.environ.get("PLATFORM_URL", "http://host.docker.internal:8080")
+        platform_url = os.environ.get("PLATFORM_URL", "http://localhost:8080")
    awareness_config = get_awareness_config()

    # 0. Initialise OpenTelemetry (no-op if packages not installed)