@elizaos/app-core 2.0.0-alpha.37

package/test/app/companion-view.test.tsx

@@ -0,0 +1,686 @@
+// @vitest-environment jsdom
+import React from "react";
+import TestRenderer, { act } from "react-test-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const mockUseApp = vi.fn();
+const viewerPropsRef: { current: null | Record<string, unknown> } = {
+  current: null,
+};
+
+vi.mock("@elizaos/app-core/state", () => ({
+  useApp: () => mockUseApp(),
+  getVrmPreviewUrl: () => "/vrms/previews/milady-1.png",
+  getVrmUrl: () => "/vrms/milady-1.vrm.gz",
+  getVrmBackgroundUrl: (index: number) =>
+    `/vrms/backgrounds/milady-${index}.png`,
+  getVrmTitle: (index: number) => `MILADY-${index}`,
+  VRM_COUNT: 24,
+}));
+
+vi.mock("@elizaos/app-core/components/avatar/VrmViewer", () => ({
+  VrmViewer: (props: Record<string, unknown>) => {
+    viewerPropsRef.current = props;
+    return React.createElement("div", null, "VrmViewer");
+  },
+}));
+
+vi.mock("../../src/components/ChatModalView.js", () => ({
+  ChatModalView: () =>
+    React.createElement(
+      "div",
+      { "data-testid": "companion-chat-modal-stub" },
+      "ChatModalView",
+    ),
+}));
+
+const mockUploadCustomVrm = vi.fn(async () => {});
+const mockUploadCustomBackground = vi.fn(async () => {});
+
+vi.mock("@elizaos/app-core/api", () => ({
+  client: {
+    uploadCustomVrm: (...args: unknown[]) => mockUploadCustomVrm(...args),
+    uploadCustomBackground: (...args: unknown[]) =>
+      mockUploadCustomBackground(...args),
+    onWsEvent: vi.fn(() => () => {}),
+  },
+}));
+
+vi.mock("@elizaos/app-core/utils", () => ({
+  resolveApiUrl: (p: string) => p,
+  resolveAppAssetUrl: (p: string) => p,
+}));
+
+import { CompanionSceneHost } from "@elizaos/app-core/components/CompanionSceneHost";
+import { CompanionView } from "../../src/components/CompanionView";
+
+const COMPANION_ZOOM_STORAGE_KEY = "milady.companion.zoom.v1";
+
+function createContext(overrides: Record<string, unknown> = {}) {
+  return {
+    t: (k: string) => k,
+    chatMode: "simple",
+    chatAgentVoiceMuted: false,
+    setState: vi.fn(),
+    handleNewConversation: vi.fn(async () => {}),
+    selectedVrmIndex: 1,
+    customVrmUrl: "",
+    customBackgroundUrl: "",
+    walletAddresses: null,
+    walletBalances: null,
+    walletNfts: null,
+    walletLoading: false,
+    walletNftsLoading: false,
+    walletError: null,
+    loadBalances: vi.fn(async () => {}),
+    loadNfts: vi.fn(async () => {}),
+    getBscTradePreflight: vi.fn(async () => ({
+      ok: false,
+      reasons: ["disabled"],
+    })),
+    getBscTradeQuote: vi.fn(async () => ({
+      route: [],
+      quoteIn: { amount: "0", symbol: "BNB" },
+      quoteOut: { amount: "0", symbol: "BNB" },
+      minReceive: { amount: "0", symbol: "BNB" },
+      slippageBps: 100,
+    })),
+    getBscTradeTxStatus: vi.fn(async (hash: string) => ({
+      ok: true,
+      hash,
+      status: "pending",
+      explorerUrl: `https://bscscan.com/tx/${hash}`,
+      chainId: 56,
+      blockNumber: null,
+      confirmations: 0,
+      nonce: null,
+      gasUsed: null,
+      effectiveGasPriceWei: null,
+    })),
+    loadWalletTradingProfile: vi.fn(async () => ({
+      window: "30d",
+      source: "all",
+      generatedAt: new Date().toISOString(),
+      summary: {
+        totalSwaps: 0,
+        buyCount: 0,
+        sellCount: 0,
+        settledCount: 0,
+        successCount: 0,
+        revertedCount: 0,
+        tradeWinRate: null,
+        txSuccessRate: null,
+        winningTrades: 0,
+        evaluatedTrades: 0,
+        realizedPnlBnb: "0",
+        volumeBnb: "0",
+      },
+      pnlSeries: [],
+      tokenBreakdown: [],
+      recentSwaps: [],
+    })),
+    executeBscTrade: vi.fn(async () => ({
+      executed: false,
+      execution: null,
+      requiresUserSignature: false,
+    })),
+    executeBscTransfer: vi.fn(async () => ({
+      executed: false,
+      execution: null,
+      requiresUserSignature: false,
+    })),
+    setActionNotice: vi.fn(),
+    agentStatus: {
+      state: "running",
+      agentName: "Milady",
+      platform: "test",
+      pid: null,
+    },
+    elizaCloudEnabled: false,
+    elizaCloudConnected: false,
+    elizaCloudCredits: null,
+    elizaCloudCreditsCritical: false,
+    elizaCloudCreditsLow: false,
+    elizaCloudTopUpUrl: "",
+    lifecycleBusy: false,
+    lifecycleAction: null,
+
+    handleRestart: vi.fn(async () => {}),
+    copyToClipboard: vi.fn(async () => {}),
+    uiLanguage: "en",
+    setUiLanguage: vi.fn(),
+    uiTheme: "light",
+    setUiTheme: vi.fn(),
+    uiShellMode: "companion",
+    setUiShellMode: vi.fn(),
+    switchUiShellMode: vi.fn(),
+    switchShellView: vi.fn(),
+    setTab: vi.fn(),
+    plugins: [],
+    ...overrides,
+  };
+}
+
+function text(node: TestRenderer.ReactTestInstance): string {
+  return node.children
+    .map((child) => (typeof child === "string" ? child : text(child)))
+    .join("");
+}
+
+function _countByClass(
+  node: TestRenderer.ReactTestInstance,
+  className: string,
+): number {
+  return node.findAll(
+    (candidate) =>
+      typeof candidate.props.className === "string" &&
+      candidate.props.className.split(/\s+/).includes(className),
+  ).length;
+}
+
+describe("CompanionView", () => {
+  const originalWindow = globalThis.window;
+  const originalLocalStorage = globalThis.localStorage;
+
+  beforeEach(() => {
+    viewerPropsRef.current = null;
+    const storage = new Map<string, string>();
+    Object.defineProperty(globalThis, "localStorage", {
+      value: {
+        getItem: vi.fn((key: string) => storage.get(String(key)) ?? null),
+        setItem: vi.fn((key: string, value: string) => {
+          storage.set(String(key), String(value));
+        }),
+        removeItem: vi.fn((key: string) => {
+          storage.delete(String(key));
+        }),
+        clear: vi.fn(() => {
+          storage.clear();
+        }),
+      },
+      configurable: true,
+      writable: true,
+    });
+
+    Object.defineProperty(globalThis, "window", {
+      value: {
+        innerWidth: 1440,
+        setTimeout: globalThis.setTimeout.bind(globalThis),
+        clearTimeout: globalThis.clearTimeout.bind(globalThis),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      },
+      configurable: true,
+    });
+    Object.assign(document, {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    });
+    Object.defineProperty(globalThis, "fetch", {
+      value: vi.fn(async () => ({
+        ok: false,
+        json: async () => ({}),
+      })),
+      configurable: true,
+      writable: true,
+    });
+  });
+
+  afterEach(() => {
+    Reflect.deleteProperty(document, "activeElement");
+    Object.defineProperty(globalThis, "window", {
+      value: originalWindow,
+      configurable: true,
+    });
+    Object.defineProperty(globalThis, "localStorage", {
+      value: originalLocalStorage,
+      configurable: true,
+      writable: true,
+    });
+  });
+
+  it("renders CompanionView containing VrmStage, Header, and HubNav", async () => {
+    mockUseApp.mockReturnValue(createContext());
+
+    let tree: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(CompanionView));
+    });
+
+    const content = text(tree?.root);
+    // Should render the mock VrmViewer text
+    expect(content).toContain("VrmViewer");
+    // Should render the mock ChatModalView text
+    expect(content).toContain("ChatModalView");
+  });
+
+  it("renders centered companion header chat controls", async () => {
+    const setState = vi.fn();
+    const handleNewConversation = vi.fn(async () => {});
+    mockUseApp.mockReturnValue(
+      createContext({
+        setState,
+        handleNewConversation,
+      }),
+    );
+
+    let tree: TestRenderer.ReactTestRenderer;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(CompanionView));
+    });
+
+    const controls = tree?.root.findByProps({
+      "data-testid": "companion-header-chat-controls",
+    });
+    const voiceButton = tree?.root.find(
+      (node) =>
+        node.type === "button" && node.props["aria-label"] === "Agent voice on",
+    );
+    const newChatButton = tree?.root.find(
+      (node) =>
+        node.type === "button" && node.props["aria-label"] === "New Chat",
+    );
+
+    expect(controls).toBeDefined();
+    expect(String(controls.props.className)).not.toContain("rounded-full");
+    expect(String(controls.props.className)).not.toContain("border");
+    expect(voiceButton).toBeDefined();
+    expect(newChatButton).toBeDefined();
+    expect(String(newChatButton.props.className)).toContain("text-black");
+
+    await act(async () => {
+      voiceButton?.props.onClick();
+    });
+    expect(setState).toHaveBeenCalledWith("chatAgentVoiceMuted", true);
+
+    await act(async () => {
+      newChatButton?.props.onClick();
+    });
+    expect(handleNewConversation).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps the shared companion scene wrapper height-bounded", async () => {
+    mockUseApp.mockReturnValue(createContext());
+
+    let tree: TestRenderer.ReactTestRenderer | undefined;
+    await act(async () => {
+      tree = TestRenderer.create(
+        React.createElement(
+          CompanionSceneHost,
+          { active: false },
+          React.createElement("div", null, "Child"),
+        ),
+      );
+    });
+
+    const root = tree?.root.findByProps({ "data-testid": "companion-root" });
+    expect(String(root?.props.className)).toContain("h-full");
+    expect(String(root?.props.className)).toContain("min-h-0");
+    expect(String(root?.props.className)).toContain("flex");
+    expect(String(root?.props.className)).toContain("overflow-hidden");
+  });
+
+  it("pins companion mode to fast and hides the fast/pro toggle", async () => {
+    const context = createContext();
+    mockUseApp.mockReturnValue(context);
+
+    let tree: TestRenderer.ReactTestRenderer | undefined;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(CompanionView));
+    });
+
+    expect(
+      tree?.root.findAllByProps({
+        "data-testid": "chat-mode-toggle-companion",
+      }),
+    ).toHaveLength(0);
+    expect(context.setState).toHaveBeenCalledWith("chatMode", "simple");
+  });
+
+  it("orbits the companion camera from transcript drag and resets on release", async () => {
+    mockUseApp.mockReturnValue(createContext());
+
+    let tree: TestRenderer.ReactTestRenderer | null = null;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(CompanionView));
+    });
+
+    const setDragOrbitTarget = vi.fn();
+    const resetDragOrbit = vi.fn();
+    const setCompanionZoomNormalized = vi.fn();
+    await act(async () => {
+      const ready = viewerPropsRef.current?.onEngineReady as
+        | ((value: unknown) => void)
+        | undefined;
+      ready?.({
+        setPaused: vi.fn(),
+        setCameraAnimation: vi.fn(),
+        setPointerParallaxEnabled: vi.fn(),
+        setDragOrbitTarget,
+        resetDragOrbit,
+        setCompanionZoomNormalized,
+      });
+    });
+
+    expect(setCompanionZoomNormalized).toHaveBeenCalledWith(1);
+    setDragOrbitTarget.mockClear();
+    resetDragOrbit.mockClear();
+
+    expect(tree).not.toBeNull();
+    const root = tree?.root.findByProps({
+      "data-testid": "companion-root",
+    });
+    const currentTarget = {
+      setPointerCapture: vi.fn(),
+      releasePointerCapture: vi.fn(),
+      hasPointerCapture: vi.fn(() => true),
+      clientWidth: 1440,
+      clientHeight: 900,
+    };
+    const preventDefault = vi.fn();
+
+    await act(async () => {
+      root?.props.onPointerDownCapture({
+        target: document.createElement("div"),
+        currentTarget,
+        pointerId: 7,
+        clientX: 200,
+        clientY: 300,
+      });
+      root?.props.onPointerMoveCapture({
+        target: document.createElement("div"),
+        currentTarget,
+        pointerId: 7,
+        clientX: 560,
+        clientY: 120,
+        preventDefault,
+      });
+      root?.props.onPointerUpCapture({
+        target: document.createElement("div"),
+        currentTarget,
+        pointerId: 7,
+      });
+    });
+
+    expect(currentTarget.setPointerCapture).toHaveBeenCalledWith(7);
+    expect(setDragOrbitTarget).toHaveBeenCalledTimes(1);
+    const [yaw, pitch] = setDragOrbitTarget.mock.calls[0];
+    expect(yaw).toBeCloseTo(0.3375);
+    expect(pitch).toBeCloseTo(0.17);
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+    expect(resetDragOrbit).toHaveBeenCalledTimes(1);
+    expect(currentTarget.releasePointerCapture).toHaveBeenCalledWith(7);
+  });
+
+  it("ignores drag capture inside marked no-camera-drag controls", async () => {
+    mockUseApp.mockReturnValue(createContext());
+
+    let tree: TestRenderer.ReactTestRenderer | null = null;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(CompanionView));
+    });
+
+    const setDragOrbitTarget = vi.fn();
+    await act(async () => {
+      const ready = viewerPropsRef.current?.onEngineReady as
+        | ((value: unknown) => void)
+        | undefined;
+      ready?.({
+        setPaused: vi.fn(),
+        setCameraAnimation: vi.fn(),
+        setPointerParallaxEnabled: vi.fn(),
+        setDragOrbitTarget,
+        resetDragOrbit: vi.fn(),
+        setCompanionZoomNormalized: vi.fn(),
+      });
+    });
+    setDragOrbitTarget.mockClear();
+
+    const root = tree?.root.findByProps({
+      "data-testid": "companion-root",
+    });
+    const currentTarget = {
+      setPointerCapture: vi.fn(),
+      releasePointerCapture: vi.fn(),
+      hasPointerCapture: vi.fn(() => false),
+      clientWidth: 1440,
+      clientHeight: 900,
+    };
+    const composerControl = document.createElement("div");
+    composerControl.setAttribute("data-no-camera-drag", "true");
+
+    await act(async () => {
+      root?.props.onPointerDownCapture({
+        target: composerControl,
+        currentTarget,
+        pointerId: 7,
+        clientX: 200,
+        clientY: 300,
+      });
+      root?.props.onPointerMoveCapture({
+        target: composerControl,
+        currentTarget,
+        pointerId: 7,
+        clientX: 560,
+        clientY: 120,
+        preventDefault: vi.fn(),
+      });
+    });
+
+    expect(currentTarget.setPointerCapture).not.toHaveBeenCalled();
+    expect(setDragOrbitTarget).not.toHaveBeenCalled();
+  });
+
+  it("zooms the companion camera from root wheel input, including over overlay UI", async () => {
+    mockUseApp.mockReturnValue(createContext());
+
+    let tree: TestRenderer.ReactTestRenderer | null = null;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(CompanionView));
+    });
+
+    const setCompanionZoomNormalized = vi.fn();
+    await act(async () => {
+      const ready = viewerPropsRef.current?.onEngineReady as
+        | ((value: unknown) => void)
+        | undefined;
+      ready?.({
+        setPaused: vi.fn(),
+        setCameraAnimation: vi.fn(),
+        setPointerParallaxEnabled: vi.fn(),
+        setDragOrbitTarget: vi.fn(),
+        resetDragOrbit: vi.fn(),
+        setCompanionZoomNormalized,
+      });
+    });
+    setCompanionZoomNormalized.mockClear();
+
+    expect(tree).not.toBeNull();
+    const root = tree?.root.findByProps({
+      "data-testid": "companion-root",
+    });
+    const preventDefault = vi.fn();
+
+    await act(async () => {
+      root?.props.onWheelCapture({
+        deltaY: 120,
+        deltaMode: 0,
+        preventDefault,
+      });
+    });
+
+    const lastZoom =
+      setCompanionZoomNormalized.mock.calls.at(-1)?.[0] ?? Number.NaN;
+    expect(lastZoom).toBeCloseTo(5 / 6, 5);
+    expect(localStorage.setItem).toHaveBeenLastCalledWith(
+      COMPANION_ZOOM_STORAGE_KEY,
+      String(lastZoom),
+    );
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not zoom the companion camera while a text entry is focused", async () => {
+    mockUseApp.mockReturnValue(createContext());
+
+    let tree: TestRenderer.ReactTestRenderer | null = null;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(CompanionView));
+    });
+
+    const setCompanionZoomNormalized = vi.fn();
+    await act(async () => {
+      const ready = viewerPropsRef.current?.onEngineReady as
+        | ((value: unknown) => void)
+        | undefined;
+      ready?.({
+        setPaused: vi.fn(),
+        setCameraAnimation: vi.fn(),
+        setPointerParallaxEnabled: vi.fn(),
+        setDragOrbitTarget: vi.fn(),
+        resetDragOrbit: vi.fn(),
+        setCompanionZoomNormalized,
+      });
+    });
+    setCompanionZoomNormalized.mockClear();
+
+    const root = tree?.root.findByProps({
+      "data-testid": "companion-root",
+    });
+    const focusedTextEntry = document.createElement("textarea");
+    Object.defineProperty(document, "activeElement", {
+      configurable: true,
+      value: focusedTextEntry,
+    });
+    const preventDefault = vi.fn();
+
+    await act(async () => {
+      root?.props.onWheelCapture({
+        ctrlKey: true,
+        deltaY: -90,
+        deltaMode: 0,
+        preventDefault,
+      });
+    });
+
+    expect(setCompanionZoomNormalized).not.toHaveBeenCalled();
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+  });
+
+  it("zooms the companion camera from pinch input", async () => {
+    mockUseApp.mockReturnValue(createContext());
+
+    let tree: TestRenderer.ReactTestRenderer | null = null;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(CompanionView));
+    });
+
+    const setCompanionZoomNormalized = vi.fn();
+    const resetDragOrbit = vi.fn();
+    const currentTarget = {
+      setPointerCapture: vi.fn(),
+      releasePointerCapture: vi.fn(),
+      hasPointerCapture: vi.fn(() => true),
+      clientWidth: 1440,
+      clientHeight: 900,
+    };
+
+    await act(async () => {
+      const ready = viewerPropsRef.current?.onEngineReady as
+        | ((value: unknown) => void)
+        | undefined;
+      ready?.({
+        setPaused: vi.fn(),
+        setCameraAnimation: vi.fn(),
+        setPointerParallaxEnabled: vi.fn(),
+        setDragOrbitTarget: vi.fn(),
+        resetDragOrbit,
+        setCompanionZoomNormalized,
+      });
+    });
+
+    const root = tree?.root.findByProps({
+      "data-testid": "companion-root",
+    });
+
+    await act(async () => {
+      root?.props.onPointerDownCapture({
+        currentTarget,
+        pointerType: "touch",
+        pointerId: 11,
+        clientX: 200,
+        clientY: 300,
+        preventDefault: vi.fn(),
+      });
+      root?.props.onPointerDownCapture({
+        currentTarget,
+        pointerType: "touch",
+        pointerId: 12,
+        clientX: 320,
+        clientY: 300,
+        preventDefault: vi.fn(),
+      });
+      root?.props.onPointerMoveCapture({
+        currentTarget,
+        pointerType: "touch",
+        pointerId: 12,
+        clientX: 260,
+        clientY: 300,
+        preventDefault: vi.fn(),
+      });
+    });
+
+    const zoomCalls = setCompanionZoomNormalized.mock.calls
+      .map(([value]: [number]) => value)
+      .filter((value) => value < 1);
+    expect(resetDragOrbit).toHaveBeenCalledTimes(1);
+    expect(zoomCalls.at(-1)).toBeLessThan(0.9);
+  });
+
+  it("restores persisted companion zoom on mount", async () => {
+    localStorage.setItem(COMPANION_ZOOM_STORAGE_KEY, "0.62");
+    mockUseApp.mockReturnValue(createContext());
+
+    let tree: TestRenderer.ReactTestRenderer | null = null;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(CompanionView));
+    });
+
+    const setCompanionZoomNormalized = vi.fn();
+    await act(async () => {
+      const ready = viewerPropsRef.current?.onEngineReady as
+        | ((value: unknown) => void)
+        | undefined;
+      ready?.({
+        setPaused: vi.fn(),
+        setCameraAnimation: vi.fn(),
+        setPointerParallaxEnabled: vi.fn(),
+        setDragOrbitTarget: vi.fn(),
+        resetDragOrbit: vi.fn(),
+        setCompanionZoomNormalized,
+      });
+    });
+
+    expect(tree).not.toBeNull();
+    expect(setCompanionZoomNormalized).toHaveBeenCalledWith(0.62);
+  });
+
+  it("uses a dedicated non-selectable drag surface for camera orbit", async () => {
+    mockUseApp.mockReturnValue(createContext());
+
+    let tree: TestRenderer.ReactTestRenderer | null = null;
+    await act(async () => {
+      tree = TestRenderer.create(React.createElement(CompanionView));
+    });
+
+    const dragLayer = tree?.root.findByProps({
+      "data-testid": "companion-camera-drag-surface",
+    });
+
+    expect(dragLayer?.props.className).toContain("select-none");
+    expect(dragLayer?.props.style).toMatchObject({
+      touchAction: "none",
+      userSelect: "none",
+      WebkitUserSelect: "none",
+    });
+  });
+});