@elizaos/app-core 2.0.0-alpha.37

package/test/app/game-view.test.ts

@@ -0,0 +1,444 @@
+// @vitest-environment jsdom
+
+import type { AppViewerAuthMessage } from "@elizaos/app-core/api";
+import React from "react";
+import TestRenderer, { act } from "react-test-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+interface GameContextStub {
+  t: (key: string) => string;
+  activeGameApp: string;
+  activeGameDisplayName: string;
+  activeGameViewerUrl: string;
+  activeGameSandbox: string;
+  activeGamePostMessageAuth: boolean;
+  activeGamePostMessagePayload: AppViewerAuthMessage | null;
+  gameOverlayEnabled: boolean;
+  plugins: { id: string; enabled: boolean }[];
+  logs: unknown[];
+  loadLogs: () => Promise<void>;
+  setState: (
+    key: string,
+    value: string | boolean | AppViewerAuthMessage | null,
+  ) => void;
+  setActionNotice: (
+    text: string,
+    tone?: "info" | "success" | "error",
+    ttlMs?: number,
+  ) => void;
+}
+
+type TestWindow = Window & {
+  __MILADY_ELECTROBUN_RPC__?: {
+    request: Record<string, (params?: unknown) => Promise<unknown>>;
+  };
+  __electrobunWindowId?: number;
+};
+
+const { mockClientFns, mockUseApp } = vi.hoisted(() => ({
+  mockClientFns: {
+    getCodingAgentStatus: vi.fn(async () => null),
+    stopApp: vi.fn(),
+  },
+  mockUseApp: vi.fn(),
+}));
+
+vi.mock("@elizaos/app-core/api", () => ({
+  client: mockClientFns,
+}));
+vi.mock("@elizaos/app-core/state", () => ({
+  useApp: () => mockUseApp(),
+}));
+
+import { GameView } from "@elizaos/app-core/components/GameView";
+
+function createContext(overrides?: Partial<GameContextStub>): GameContextStub {
+  return {
+    t: (k: string) => k,
+    activeGameApp: "@elizaos/app-hyperscape",
+    activeGameDisplayName: "Hyperscape",
+    activeGameViewerUrl: "http://localhost:5175/viewer",
+    activeGameSandbox: "allow-scripts allow-same-origin",
+    activeGamePostMessageAuth: false,
+    activeGamePostMessagePayload: null,
+    gameOverlayEnabled: false,
+    plugins: [],
+    logs: [],
+    loadLogs: vi.fn(async () => {}),
+    setState: vi.fn<GameContextStub["setState"]>(),
+    setActionNotice: vi.fn<GameContextStub["setActionNotice"]>(),
+    ...overrides,
+  };
+}
+
+function text(node: TestRenderer.ReactTestInstance): string {
+  return node.children
+    .map((child) => (typeof child === "string" ? child : ""))
+    .join("")
+    .trim();
+}
+
+function findButtonByText(
+  root: TestRenderer.ReactTestInstance,
+  label: string,
+): TestRenderer.ReactTestInstance {
+  const matches = root.findAll(
+    (node) => node.type === "button" && text(node) === label,
+  );
+  if (!matches[0]) {
+    throw new Error(`Button "${label}" not found`);
+  }
+  return matches[0];
+}
+
+async function flush(): Promise<void> {
+  await act(async () => {
+    await Promise.resolve();
+  });
+}
+
+describe("GameView", () => {
+  beforeEach(() => {
+    mockClientFns.stopApp.mockReset();
+    mockUseApp.mockReset();
+  });
+
+  afterEach(() => {
+    delete (window as TestWindow).__MILADY_ELECTROBUN_RPC__;
+    delete (window as TestWindow).__electrobunWindowId;
+    vi.restoreAllMocks();
+  });
+
+  it("renders empty state and Back to Apps returns to apps tab", async () => {
+    const ctx = createContext({
+      activeGameApp: "",
+      activeGameDisplayName: "",
+      activeGameViewerUrl: "",
+    });
+    mockUseApp.mockReturnValue(ctx);
+
+    let tree: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(GameView));
+    });
+    await flush();
+
+    await act(async () => {
+      findButtonByText(tree?.root, "game.backToApps").props.onClick();
+    });
+
+    expect(ctx.setState).toHaveBeenCalledWith("tab", "apps");
+  });
+
+  it("opens viewer in a new tab and handles popup blocking", async () => {
+    const ctx = createContext();
+    mockUseApp.mockReturnValue(ctx);
+
+    const openSpy = vi.spyOn(window, "open").mockReturnValue({} as Window);
+
+    let tree: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(GameView));
+    });
+    await flush();
+
+    await act(async () => {
+      await findButtonByText(tree?.root, "game.openInNewTab").props.onClick();
+    });
+
+    expect(openSpy).toHaveBeenCalledWith(
+      ctx.activeGameViewerUrl,
+      "_blank",
+      "noopener,noreferrer",
+    );
+    expect(ctx.setActionNotice).not.toHaveBeenCalledWith(
+      "Popup blocked. Allow popups and try again.",
+      "error",
+      3600,
+    );
+
+    openSpy.mockReturnValueOnce(null);
+    await act(async () => {
+      await findButtonByText(tree?.root, "game.openInNewTab").props.onClick();
+    });
+    expect(ctx.setActionNotice).toHaveBeenCalledWith(
+      "Popup blocked. Allow popups and try again.",
+      "error",
+      3600,
+    );
+  });
+
+  it("uses the Electrobun shell bridge when opening the viewer externally", async () => {
+    const ctx = createContext();
+    const desktopOpenExternal = vi.fn(async () => undefined);
+    const gameOpenWindow = vi.fn(async () => ({ id: "game-window-1" }));
+    mockUseApp.mockReturnValue(ctx);
+    (window as TestWindow).__electrobunWindowId = 1;
+    (window as TestWindow).__MILADY_ELECTROBUN_RPC__ = {
+      request: {
+        desktopOpenExternal,
+        gameOpenWindow,
+      },
+    };
+    const openSpy = vi.spyOn(window, "open");
+
+    let tree: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(GameView));
+    });
+    await flush();
+
+    await act(async () => {
+      await findButtonByText(tree?.root, "game.openInNewTab").props.onClick();
+    });
+
+    expect(gameOpenWindow).toHaveBeenCalledWith({
+      url: ctx.activeGameViewerUrl,
+      title: ctx.activeGameDisplayName || ctx.activeGameApp,
+    });
+    expect(desktopOpenExternal).toHaveBeenCalledWith({
+      url: ctx.activeGameViewerUrl,
+    });
+    expect(openSpy).not.toHaveBeenCalled();
+  });
+
+  it("stops app, resets state, and navigates back on success", async () => {
+    const ctx = createContext();
+    mockUseApp.mockReturnValue(ctx);
+    mockClientFns.stopApp.mockResolvedValue({
+      success: true,
+      appName: ctx.activeGameApp,
+      stoppedAt: new Date().toISOString(),
+      pluginUninstalled: true,
+      needsRestart: true,
+      stopScope: "plugin-uninstalled",
+      message:
+        "App disconnected and plugin uninstalled. Agent restart required.",
+    });
+
+    let tree: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(GameView));
+    });
+    await flush();
+
+    await act(async () => {
+      await findButtonByText(tree?.root, "game.stop").props.onClick();
+    });
+
+    expect(mockClientFns.stopApp).toHaveBeenCalledWith(ctx.activeGameApp);
+    expect(ctx.setState).toHaveBeenCalledWith("activeGameApp", "");
+    expect(ctx.setState).toHaveBeenCalledWith("activeGameDisplayName", "");
+    expect(ctx.setState).toHaveBeenCalledWith("activeGameViewerUrl", "");
+    expect(ctx.setState).toHaveBeenCalledWith(
+      "activeGamePostMessageAuth",
+      false,
+    );
+    expect(ctx.setState).toHaveBeenCalledWith(
+      "activeGamePostMessagePayload",
+      null,
+    );
+    expect(ctx.setState).toHaveBeenCalledWith("tab", "apps");
+    expect(ctx.setActionNotice).toHaveBeenCalledWith(
+      "App disconnected and plugin uninstalled. Agent restart required.",
+      "success",
+      5000,
+    );
+  });
+
+  it("shows stop errors when API call fails", async () => {
+    const ctx = createContext();
+    mockUseApp.mockReturnValue(ctx);
+    mockClientFns.stopApp.mockRejectedValue(new Error("stop failed"));
+
+    let tree: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(GameView));
+    });
+    await flush();
+
+    await act(async () => {
+      await findButtonByText(tree?.root, "game.stop").props.onClick();
+    });
+    expect(ctx.setActionNotice).toHaveBeenCalledWith(
+      "Failed to stop: stop failed",
+      "error",
+    );
+  });
+
+  it("shows info notice when stop result is a no-op", async () => {
+    const ctx = createContext();
+    mockUseApp.mockReturnValue(ctx);
+    mockClientFns.stopApp.mockResolvedValue({
+      success: false,
+      appName: ctx.activeGameApp,
+      stoppedAt: new Date().toISOString(),
+      pluginUninstalled: false,
+      needsRestart: false,
+      stopScope: "no-op",
+      message: "No active session or installed plugin found.",
+    });
+
+    let tree: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(GameView));
+    });
+    await flush();
+
+    await act(async () => {
+      await findButtonByText(tree?.root, "game.stop").props.onClick();
+    });
+    expect(ctx.setActionNotice).toHaveBeenCalledWith(
+      "No active session or installed plugin found.",
+      "info",
+      3200,
+    );
+  });
+
+  it("postMessage auth handshake sends auth once for matching origin", async () => {
+    const payload: AppViewerAuthMessage = {
+      type: "HYPERSCAPE_AUTH",
+      authToken: "token-abc",
+    };
+    const ctx = createContext({
+      activeGamePostMessageAuth: true,
+      activeGamePostMessagePayload: payload,
+    });
+    mockUseApp.mockReturnValue(ctx);
+
+    let messageHandler:
+      | ((event: MessageEvent<{ type?: string }>) => void)
+      | null = null;
+    vi.spyOn(window, "addEventListener").mockImplementation(((
+      type: string,
+      listener: EventListenerOrEventListenerObject,
+    ) => {
+      if (type === "message" && typeof listener === "function") {
+        messageHandler = listener as (
+          event: MessageEvent<{ type?: string }>,
+        ) => void;
+      }
+    }) as typeof window.addEventListener);
+    vi.spyOn(window, "removeEventListener").mockImplementation(
+      (() => {}) as typeof window.removeEventListener,
+    );
+
+    const postMessage =
+      vi.fn<(message: AppViewerAuthMessage, targetOrigin: string) => void>();
+    Object.defineProperty(window, "postMessage", {
+      value: postMessage,
+      writable: true,
+      configurable: true,
+    });
+    let _tree: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      _tree = TestRenderer.create(React.createElement(GameView), {
+        createNodeMock: (element) => {
+          if (element.type === "iframe") {
+            return { contentWindow: window };
+          }
+          return {};
+        },
+      });
+    });
+    await flush();
+
+    expect(messageHandler).toBeTypeOf("function");
+    await act(async () => {
+      messageHandler?.({
+        source: window,
+        data: { type: "HYPERSCAPE_READY" },
+        origin: "http://localhost:5175",
+      } as MessageEvent<{ type?: string }>);
+    });
+    expect(postMessage).toHaveBeenCalledWith(payload, "http://localhost:5175");
+    expect(ctx.setActionNotice).toHaveBeenCalledWith(
+      "Viewer auth sent.",
+      "info",
+      1800,
+    );
+
+    await act(async () => {
+      messageHandler?.({
+        source: window,
+        data: { type: "HYPERSCAPE_READY" },
+        origin: "http://localhost:5175",
+      } as MessageEvent<{ type?: string }>);
+    });
+    expect(postMessage).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not send auth when ready event origin mismatches", async () => {
+    const payload: AppViewerAuthMessage = {
+      type: "HYPERSCAPE_AUTH",
+      authToken: "token-abc",
+    };
+    const ctx = createContext({
+      activeGamePostMessageAuth: true,
+      activeGamePostMessagePayload: payload,
+    });
+    mockUseApp.mockReturnValue(ctx);
+
+    let messageHandler:
+      | ((event: MessageEvent<{ type?: string }>) => void)
+      | null = null;
+    vi.spyOn(window, "addEventListener").mockImplementation(((
+      type: string,
+      listener: EventListenerOrEventListenerObject,
+    ) => {
+      if (type === "message" && typeof listener === "function") {
+        messageHandler = listener as (
+          event: MessageEvent<{ type?: string }>,
+        ) => void;
+      }
+    }) as typeof window.addEventListener);
+    vi.spyOn(window, "removeEventListener").mockImplementation(
+      (() => {}) as typeof window.removeEventListener,
+    );
+
+    const postMessage =
+      vi.fn<(message: AppViewerAuthMessage, targetOrigin: string) => void>();
+    Object.defineProperty(window, "postMessage", {
+      value: postMessage,
+      writable: true,
+      configurable: true,
+    });
+    let _tree: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      _tree = TestRenderer.create(React.createElement(GameView), {
+        createNodeMock: (element) => {
+          if (element.type === "iframe") {
+            return { contentWindow: window };
+          }
+          return {};
+        },
+      });
+    });
+    await flush();
+
+    await act(async () => {
+      messageHandler?.({
+        source: window,
+        data: { type: "HYPERSCAPE_READY" },
+        origin: "http://evil.example",
+      } as MessageEvent<{ type?: string }>);
+    });
+    expect(postMessage).not.toHaveBeenCalled();
+  });
+
+  it("Back to Apps button switches tab", async () => {
+    const ctx = createContext();
+    mockUseApp.mockReturnValue(ctx);
+
+    let tree: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(GameView));
+    });
+    await flush();
+
+    await act(async () => {
+      findButtonByText(tree?.root, "game.backToApps").props.onClick();
+    });
+    expect(ctx.setState).toHaveBeenCalledWith("tab", "apps");
+  });
+});

package/test/app/global-emote-overlay.test.tsx

@@ -0,0 +1,106 @@
+// @vitest-environment jsdom
+
+import { APP_EMOTE_EVENT } from "@elizaos/app-core/events";
+import React from "react";
+import TestRenderer, { act } from "react-test-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { GlobalEmoteOverlay } from "../../src/components/GlobalEmoteOverlay";
+
+describe("GlobalEmoteOverlay", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it("shows an emoji burst for app-wide emote events and fades it out", async () => {
+    let tree: TestRenderer.ReactTestRenderer | undefined;
+
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(GlobalEmoteOverlay));
+    });
+
+    expect(
+      tree?.root.findAll(
+        (node) => node.props["data-testid"] === "global-emote-overlay",
+      ),
+    ).toHaveLength(0);
+
+    await act(async () => {
+      window.dispatchEvent(
+        new CustomEvent(APP_EMOTE_EVENT, {
+          detail: {
+            emoteId: "wave",
+            path: "/animations/emotes/waving-both-hands.glb",
+            duration: 2.5,
+            loop: false,
+          },
+        }),
+      );
+    });
+
+    const overlaysAfterEvent =
+      tree?.root.findAll(
+        (node) => node.props["data-testid"] === "global-emote-overlay",
+      ) ?? [];
+    expect(overlaysAfterEvent).toHaveLength(1);
+    expect(overlaysAfterEvent[0]?.props["data-emote-id"]).toBe("wave");
+    expect(
+      tree?.root.findAll(
+        (node) =>
+          typeof node.props.className === "string" &&
+          node.props.className.includes("text-[88px]") &&
+          node.props.className.includes("h-32") &&
+          node.props.className.includes("w-32"),
+      ),
+    ).toHaveLength(1);
+    expect(
+      tree?.root.findAll(
+        (node) =>
+          node.type === "span" &&
+          node.children.some((child) => child === "\u{1F44B}"),
+      ),
+    ).toHaveLength(1);
+
+    await act(async () => {
+      vi.advanceTimersByTime(2400);
+    });
+
+    expect(
+      tree?.root.findAll(
+        (node) => node.props["data-testid"] === "global-emote-overlay",
+      ),
+    ).toHaveLength(0);
+  });
+
+  it("skips rendering the emoji burst when the emote disables overlays", async () => {
+    let tree: TestRenderer.ReactTestRenderer | undefined;
+
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(GlobalEmoteOverlay));
+    });
+
+    await act(async () => {
+      window.dispatchEvent(
+        new CustomEvent(APP_EMOTE_EVENT, {
+          detail: {
+            emoteId: "wave",
+            path: "/animations/emotes/waving-both-hands.glb",
+            duration: 2.5,
+            loop: false,
+            showOverlay: false,
+          },
+        }),
+      );
+    });
+
+    expect(
+      tree?.root.findAll(
+        (node) => node.props["data-testid"] === "global-emote-overlay",
+      ),
+    ).toHaveLength(0);
+  });
+});

package/test/app/header-status.test.tsx

@@ -0,0 +1,149 @@
+// @vitest-environment jsdom
+import React from "react";
+import TestRenderer, { act } from "react-test-renderer";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const { mockUseApp } = vi.hoisted(() => ({
+  mockUseApp: vi.fn(),
+}));
+
+vi.mock("@elizaos/app-core/state", () => ({
+  useApp: () => mockUseApp(),
+}));
+
+vi.mock("@elizaos/app-core/hooks", () => ({
+  useBugReport: () => ({ isOpen: false, open: vi.fn(), close: vi.fn() }),
+}));
+
+vi.mock("@elizaos/app-core/navigation", () => ({
+  getTabGroups: () => [
+    {
+      label: "Chat",
+      tabs: ["chat"],
+      icon: () => React.createElement("span", null, "💬"),
+      description: "Chat",
+    },
+  ],
+}));
+
+vi.mock("@elizaos/app-core/components", () => ({
+  LanguageDropdown: () => React.createElement("div", null, "LanguageDropdown"),
+  ThemeToggle: () => React.createElement("div", null, "ThemeToggle"),
+}));
+
+vi.mock("@elizaos/ui", () => ({
+  IconTooltip: ({
+    children,
+  }: {
+    children: React.ReactNode;
+    content?: string;
+    side?: string;
+  }) => React.createElement("div", null, children),
+}));
+
+vi.mock("lucide-react", () => ({
+  AlertTriangle: () => React.createElement("span", null, "⚠"),
+  CircleUserRound: () => React.createElement("span", null, "👤"),
+  Bug: () => React.createElement("span", null, "🐛"),
+  CircleDollarSign: () => React.createElement("span", null, "💰"),
+  Menu: () => React.createElement("span", null, "☰"),
+  Monitor: () => React.createElement("span", null, "🖥"),
+  Smartphone: () => React.createElement("span", null, "📱"),
+  UserRound: () => React.createElement("span", null, "👤"),
+  Users: () => React.createElement("span", null, "👥"),
+  X: () => React.createElement("span", null, "✕"),
+}));
+
+import { Header } from "../../src/components/Header";
+
+let baseAppState: Record<string, unknown>;
+
+describe("header status", () => {
+  beforeEach(() => {
+    mockUseApp.mockReset();
+    baseAppState = {
+      t: (k: string) => k,
+      agentStatus: {
+        state: "running",
+        agentName: "Milady",
+        model: undefined,
+        startedAt: undefined,
+        uptime: undefined,
+      },
+      elizaCloudEnabled: false,
+      elizaCloudConnected: false,
+      elizaCloudCredits: null,
+      elizaCloudCreditsCritical: false,
+      elizaCloudCreditsLow: false,
+      elizaCloudTopUpUrl: "",
+      walletAddresses: null,
+      lifecycleBusy: false,
+      lifecycleAction: null,
+
+      handleRestart: vi.fn(),
+      handleStart: vi.fn(),
+      openCommandPalette: vi.fn(),
+      copyToClipboard: vi.fn(),
+      tab: "chat",
+      setTab: vi.fn(),
+      setState: vi.fn(),
+      dropStatus: null,
+      loadDropStatus: vi.fn().mockResolvedValue(undefined),
+      registryStatus: null,
+      plugins: [],
+      uiShellMode: "native",
+      setUiShellMode: vi.fn(),
+      uiLanguage: "en",
+      setUiLanguage: vi.fn(),
+      uiTheme: "dark",
+      setUiTheme: vi.fn(),
+    };
+    mockUseApp.mockReturnValue(baseAppState);
+  });
+
+  it("renders shell toggle button", async () => {
+    let tree: TestRenderer.ReactTestRenderer | undefined;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(Header));
+    });
+    expect(tree).toBeDefined();
+    const shellToggle = tree?.root.findByProps({
+      "data-testid": "ui-shell-toggle",
+    });
+    expect(shellToggle).toBeDefined();
+    expect(baseAppState.setState).toHaveBeenCalledWith("chatMode", "power");
+  });
+
+  it("renders language and theme controls", async () => {
+    let tree: TestRenderer.ReactTestRenderer | undefined;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(Header));
+    });
+    expect(tree).toBeDefined();
+    const controls = tree?.root.findAll(
+      (node) =>
+        typeof node.children?.[0] === "string" &&
+        (node.children[0] === "LanguageDropdown" ||
+          node.children[0] === "ThemeToggle"),
+    );
+    expect(controls?.length).toBeGreaterThan(0);
+  });
+
+  it("uses accent classes for the active native tab", async () => {
+    let tree: TestRenderer.ReactTestRenderer | undefined;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(Header));
+    });
+    expect(tree).toBeDefined();
+
+    const activeTabButton = tree?.root.find(
+      (node) =>
+        node.type === "button" &&
+        node.props.title === "Chat" &&
+        typeof node.props.className === "string",
+    );
+
+    expect(String(activeTabButton?.props.className)).toContain("text-accent");
+    expect(String(activeTabButton?.props.className)).toContain("bg-accent/15");
+  });
+});