@elizaos/app-core 2.0.0-alpha.37

package/test/app/vrm-stage.test.tsx

@@ -0,0 +1,351 @@
+// @vitest-environment jsdom
+import React from "react";
+import TestRenderer, { act } from "react-test-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const viewerPropsRef: {
+  current: null | Record<string, unknown>;
+} = { current: null };
+let viewerRenderCount = 0;
+
+vi.mock("@elizaos/app-core/api", () => ({
+  client: {
+    onWsEvent: vi.fn(() => () => {}),
+  },
+}));
+
+vi.mock("@elizaos/app-core/events", () => ({
+  APP_EMOTE_EVENT: "milady:app-emote",
+  CHAT_AVATAR_VOICE_EVENT: "milady:chat-avatar-voice",
+  STOP_EMOTE_EVENT: "stop-emote",
+}));
+
+vi.mock("@elizaos/app-core/utils", () => ({
+  resolveAppAssetUrl: (path: string) => path,
+}));
+
+vi.mock("@elizaos/app-core/components/avatar/VrmViewer", () => ({
+  VrmViewer: (props: Record<string, unknown>) => {
+    viewerRenderCount++;
+    viewerPropsRef.current = props;
+    return React.createElement("div", null, "VrmViewer");
+  },
+}));
+
+vi.mock("@elizaos/app-core/components/AvatarLoader", () => ({
+  AvatarLoader: () => React.createElement("div", null, "AvatarLoader"),
+}));
+
+import { VrmStage } from "@elizaos/app-core/components/VrmStage";
+
+describe("VrmStage", () => {
+  beforeEach(() => {
+    viewerPropsRef.current = null;
+    viewerRenderCount = 0;
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("renders the stage layer without a stage-level opacity gate", async () => {
+    let tree: TestRenderer.ReactTestRenderer | null = null;
+    await act(async () => {
+      tree = TestRenderer.create(
+        React.createElement(VrmStage, {
+          vrmPath: "/vrms/milady-1.vrm.gz",
+          worldUrl: "/worlds/companion-day.spz",
+          fallbackPreviewUrl: "/vrms/previews/milady-1.png",
+          t: (key: string) => key,
+        }),
+      );
+    });
+
+    expect(tree).not.toBeNull();
+    const stageLayer = tree?.root.find(
+      (node) =>
+        node.type === "div" &&
+        node.props.style &&
+        Object.hasOwn(node.props.style, "opacity"),
+    );
+    expect(stageLayer?.props.style.opacity).toBe(1);
+  });
+
+  it("passes the shared chat voice state through to the companion avatar", async () => {
+    let tree: TestRenderer.ReactTestRenderer | null = null;
+    await act(async () => {
+      tree = TestRenderer.create(
+        React.createElement(VrmStage, {
+          vrmPath: "/vrms/milady-1.vrm.gz",
+          fallbackPreviewUrl: "/vrms/previews/milady-1.png",
+          t: (key: string) => key,
+        }),
+      );
+    });
+
+    await act(async () => {
+      window.dispatchEvent(
+        new CustomEvent("milady:chat-avatar-voice", {
+          detail: { mouthOpen: 0.42, isSpeaking: false },
+        }),
+      );
+    });
+
+    expect(tree).not.toBeNull();
+    expect(viewerPropsRef.current).toMatchObject({
+      mouthOpen: 0.42,
+      isSpeaking: false,
+    });
+  });
+
+  it("ignores duplicate chat voice events with the same payload", async () => {
+    await act(async () => {
+      TestRenderer.create(
+        React.createElement(VrmStage, {
+          vrmPath: "/vrms/milady-1.vrm.gz",
+          fallbackPreviewUrl: "/vrms/previews/milady-1.png",
+          t: (key: string) => key,
+        }),
+      );
+    });
+
+    await act(async () => {
+      window.dispatchEvent(
+        new CustomEvent("milady:chat-avatar-voice", {
+          detail: { mouthOpen: 0.4, isSpeaking: false },
+        }),
+      );
+    });
+
+    const renderCountAfterFirstEvent = viewerRenderCount;
+
+    await act(async () => {
+      window.dispatchEvent(
+        new CustomEvent("milady:chat-avatar-voice", {
+          detail: { mouthOpen: 0.4, isSpeaking: false },
+        }),
+      );
+    });
+
+    expect(viewerRenderCount).toBe(renderCountAfterFirstEvent);
+  });
+
+  it("disables canvas parallax and forwards the ready engine callback", async () => {
+    const handleEngineReady = vi.fn();
+    const setPaused = vi.fn();
+    const setCameraAnimation = vi.fn();
+    const setPointerParallaxEnabled = vi.fn();
+    const engine = {
+      setPaused,
+      setCameraAnimation,
+      setPointerParallaxEnabled,
+    };
+
+    await act(async () => {
+      TestRenderer.create(
+        React.createElement(VrmStage, {
+          vrmPath: "/vrms/milady-1.vrm.gz",
+          fallbackPreviewUrl: "/vrms/previews/milady-1.png",
+          onEngineReady: handleEngineReady,
+          t: (key: string) => key,
+        }),
+      );
+    });
+
+    expect(viewerPropsRef.current).not.toBeNull();
+    expect(viewerPropsRef.current?.pointerParallax).toBeUndefined();
+
+    await act(async () => {
+      const ready = viewerPropsRef.current?.onEngineReady as
+        | ((value: unknown) => void)
+        | undefined;
+      ready?.(engine);
+    });
+
+    expect(setPaused).toHaveBeenCalledWith(false);
+    expect(setCameraAnimation).toHaveBeenCalledTimes(1);
+    expect(setPointerParallaxEnabled).toHaveBeenCalledWith(false);
+    expect(handleEngineReady).toHaveBeenCalledWith(engine);
+  });
+
+  it("plays emotes from the shared app emote event", async () => {
+    const playEmote = vi.fn();
+    const engine = {
+      playEmote,
+      setPaused: vi.fn(),
+      setCameraAnimation: vi.fn(),
+      setPointerParallaxEnabled: vi.fn(),
+    };
+
+    await act(async () => {
+      TestRenderer.create(
+        React.createElement(VrmStage, {
+          vrmPath: "/vrms/milady-1.vrm.gz",
+          fallbackPreviewUrl: "/vrms/previews/milady-1.png",
+          t: (key: string) => key,
+        }),
+      );
+    });
+
+    await act(async () => {
+      const ready = viewerPropsRef.current?.onEngineReady as
+        | ((value: unknown) => void)
+        | undefined;
+      const state = viewerPropsRef.current?.onEngineState as
+        | ((value: unknown) => void)
+        | undefined;
+      ready?.(engine);
+      state?.({ vrmLoaded: true });
+    });
+
+    await act(async () => {
+      window.dispatchEvent(
+        new CustomEvent("milady:app-emote", {
+          detail: {
+            emoteId: "wave",
+            path: "/animations/emotes/waving-both-hands.glb",
+            duration: 2.5,
+            loop: false,
+          },
+        }),
+      );
+    });
+
+    expect(playEmote).toHaveBeenCalledWith(
+      "/animations/emotes/waving-both-hands.glb",
+      2.5,
+      false,
+    );
+  });
+
+  it("waves after the initial avatar reveal starts when enabled", async () => {
+    vi.useFakeTimers();
+    const playEmote = vi.fn();
+    const engine = {
+      playEmote,
+      setPaused: vi.fn(),
+      setCameraAnimation: vi.fn(),
+      setPointerParallaxEnabled: vi.fn(),
+    };
+
+    let tree: TestRenderer.ReactTestRenderer | null = null;
+
+    try {
+      await act(async () => {
+        tree = TestRenderer.create(
+          React.createElement(VrmStage, {
+            vrmPath: "/vrms/milady-1.vrm.gz",
+            fallbackPreviewUrl: "/vrms/previews/milady-1.png",
+            playWaveOnAvatarChange: true,
+            t: (key: string) => key,
+          }),
+        );
+      });
+
+      await act(async () => {
+        const ready = viewerPropsRef.current?.onEngineReady as
+          | ((value: unknown) => void)
+          | undefined;
+        ready?.(engine);
+      });
+
+      await act(async () => {
+        const onRevealStart = viewerPropsRef.current?.onRevealStart as
+          | (() => void)
+          | undefined;
+        onRevealStart?.();
+      });
+
+      expect(playEmote).not.toHaveBeenCalled();
+
+      await act(async () => {
+        vi.advanceTimersByTime(650);
+      });
+
+      expect(playEmote).toHaveBeenCalledTimes(1);
+      expect(playEmote).toHaveBeenCalledWith(
+        "/animations/emotes/waving-both-hands.glb",
+        2.5,
+        false,
+      );
+    } finally {
+      await act(async () => {
+        tree?.unmount();
+      });
+    }
+  });
+
+  it("waves after the avatar reveal starts when the stage switches characters", async () => {
+    vi.useFakeTimers();
+    const playEmote = vi.fn();
+    const engine = {
+      playEmote,
+      setPaused: vi.fn(),
+      setCameraAnimation: vi.fn(),
+      setPointerParallaxEnabled: vi.fn(),
+    };
+
+    let tree: TestRenderer.ReactTestRenderer | null = null;
+
+    try {
+      await act(async () => {
+        tree = TestRenderer.create(
+          React.createElement(VrmStage, {
+            vrmPath: "/vrms/milady-1.vrm.gz",
+            fallbackPreviewUrl: "/vrms/previews/milady-1.png",
+            playWaveOnAvatarChange: true,
+            t: (key: string) => key,
+          }),
+        );
+      });
+
+      await act(async () => {
+        const ready = viewerPropsRef.current?.onEngineReady as
+          | ((value: unknown) => void)
+          | undefined;
+        ready?.(engine);
+      });
+
+      await act(async () => {
+        tree?.update(
+          React.createElement(VrmStage, {
+            vrmPath: "/vrms/milady-2.vrm.gz",
+            fallbackPreviewUrl: "/vrms/previews/milady-2.png",
+            playWaveOnAvatarChange: true,
+            t: (key: string) => key,
+          }),
+        );
+      });
+
+      await act(async () => {
+        const onRevealStart = viewerPropsRef.current?.onRevealStart as
+          | (() => void)
+          | undefined;
+        onRevealStart?.();
+      });
+
+      expect(playEmote).not.toHaveBeenCalled();
+
+      await act(async () => {
+        vi.advanceTimersByTime(649);
+      });
+
+      expect(playEmote).not.toHaveBeenCalled();
+
+      await act(async () => {
+        vi.advanceTimersByTime(1);
+      });
+
+      expect(playEmote).toHaveBeenCalledTimes(1);
+      expect(playEmote).toHaveBeenCalledWith(
+        "/animations/emotes/waving-both-hands.glb",
+        2.5,
+        false,
+      );
+    } finally {
+      await act(async () => {
+        tree?.unmount();
+      });
+    }
+  });
+});

package/test/app/vrm-viewer.test.tsx

@@ -0,0 +1,298 @@
+// @vitest-environment jsdom
+import { StrictMode } from "react";
+import TestRenderer, { act } from "react-test-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@elizaos/app-core/utils", () => ({
+  resolveAppAssetUrl: (path: string) => path,
+}));
+
+vi.mock("@elizaos/app-core/components/avatar/VrmEngine", () => {
+  class MockVrmEngine {
+    static instances: MockVrmEngine[] = [];
+
+    loadVrmFromUrl = vi.fn(async () => {});
+    getState = vi.fn(() => ({
+      vrmLoaded: true,
+      vrmName: "milady-1.vrm.gz",
+      loadError: null,
+      idlePlaying: false,
+      idleTime: 0,
+      idleTracks: 0,
+    }));
+    setInteractionEnabled = vi.fn();
+    setCameraProfile = vi.fn();
+    setInteractionMode = vi.fn();
+    setPaused = vi.fn();
+    setPointerParallaxEnabled = vi.fn();
+    setPointerParallaxTarget = vi.fn();
+    resetPointerParallax = vi.fn();
+    setWorldUrl = vi.fn(async () => {});
+    resize = vi.fn();
+    dispose = vi.fn();
+    isInitialized = vi.fn(() => false);
+
+    private readyPromise: Promise<void>;
+    private resolveReadyPromise: () => void = () => {};
+
+    constructor() {
+      this.readyPromise = new Promise<void>((resolve) => {
+        this.resolveReadyPromise = resolve;
+      });
+      MockVrmEngine.instances.push(this);
+    }
+
+    setup = vi.fn(() => {});
+
+    whenReady = vi.fn(() => this.readyPromise);
+
+    resolveReady(): void {
+      this.resolveReadyPromise();
+    }
+  }
+
+  (
+    globalThis as {
+      __miladyVrmViewerMock?: { instances: MockVrmEngine[] };
+    }
+  ).__miladyVrmViewerMock = { instances: MockVrmEngine.instances };
+
+  return {
+    VrmEngine: MockVrmEngine,
+  };
+});
+
+import { VrmViewer } from "@elizaos/app-core/components/avatar/VrmViewer";
+
+type MockVrmEngineInstance = {
+  setWorldUrl: ReturnType<typeof vi.fn>;
+  loadVrmFromUrl: ReturnType<typeof vi.fn>;
+  resolveReady: () => void;
+};
+
+function getMockInstances(): MockVrmEngineInstance[] {
+  const store = (
+    globalThis as {
+      __miladyVrmViewerMock?: { instances: MockVrmEngineInstance[] };
+    }
+  ).__miladyVrmViewerMock;
+
+  if (!store) {
+    throw new Error("Expected VRM viewer mock store to be initialized.");
+  }
+
+  return store.instances;
+}
+
+describe("VrmViewer", () => {
+  beforeEach(() => {
+    (globalThis as { ResizeObserver?: unknown }).ResizeObserver = undefined;
+    const mockWindow = {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    } as unknown as Window & typeof globalThis;
+    globalThis.window = mockWindow;
+
+    (
+      globalThis as { requestAnimationFrame?: typeof requestAnimationFrame }
+    ).requestAnimationFrame = ((cb: FrameRequestCallback) =>
+      setTimeout(() => cb(0), 0)) as unknown as typeof requestAnimationFrame;
+    (
+      globalThis as { cancelAnimationFrame?: typeof cancelAnimationFrame }
+    ).cancelAnimationFrame = ((id: number) =>
+      clearTimeout(id)) as unknown as typeof cancelAnimationFrame;
+    getMockInstances().length = 0;
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("loads the same VRM path after StrictMode abort/remount", async () => {
+    let renderer: TestRenderer.ReactTestRenderer | null = null;
+
+    await act(async () => {
+      renderer = TestRenderer.create(
+        <StrictMode>
+          <VrmViewer vrmPath="/vrms/milady-1.vrm.gz" mouthOpen={0} />
+        </StrictMode>,
+        {
+          createNodeMock: (element) => {
+            if (element.type === "canvas") {
+              return {
+                getBoundingClientRect: () => ({
+                  width: 640,
+                  height: 480,
+                  top: 0,
+                  left: 0,
+                  bottom: 480,
+                  right: 640,
+                  x: 0,
+                  y: 0,
+                  toJSON: () => ({}),
+                }),
+              };
+            }
+            return null;
+          },
+        },
+      );
+    });
+
+    const instances = getMockInstances();
+
+    expect(instances.length).toBeGreaterThanOrEqual(2);
+
+    await act(async () => {
+      for (const instance of instances) {
+        instance.resolveReady();
+      }
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    const totalLoadCalls = instances.reduce(
+      (count, instance) => count + instance.loadVrmFromUrl.mock.calls.length,
+      0,
+    );
+    expect(totalLoadCalls).toBe(1);
+    expect(instances.at(-1)?.loadVrmFromUrl).toHaveBeenCalledWith(
+      "/vrms/milady-1.vrm.gz",
+      "milady-1.vrm.gz",
+    );
+
+    await act(async () => {
+      renderer?.unmount();
+    });
+  });
+
+  it("waits for the world load before revealing the VRM on initial world stages", async () => {
+    let renderer: TestRenderer.ReactTestRenderer | null = null;
+
+    await act(async () => {
+      renderer = TestRenderer.create(
+        <VrmViewer
+          vrmPath="/vrms/milady-1.vrm.gz"
+          worldUrl="/worlds/companion-day.spz"
+          mouthOpen={0}
+        />,
+        {
+          createNodeMock: (element) => {
+            if (element.type === "canvas") {
+              return {
+                getBoundingClientRect: () => ({
+                  width: 640,
+                  height: 480,
+                  top: 0,
+                  left: 0,
+                  bottom: 480,
+                  right: 640,
+                  x: 0,
+                  y: 0,
+                  toJSON: () => ({}),
+                }),
+              };
+            }
+            return null;
+          },
+        },
+      );
+    });
+
+    const [instance] = getMockInstances();
+    expect(instance).toBeTruthy();
+
+    await act(async () => {
+      instance?.resolveReady();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(instance?.setWorldUrl).toHaveBeenCalledWith(
+      "/worlds/companion-day.spz",
+    );
+    expect(instance?.loadVrmFromUrl).toHaveBeenCalledWith(
+      "/vrms/milady-1.vrm.gz",
+      "milady-1.vrm.gz",
+    );
+
+    const worldCallOrder =
+      instance?.setWorldUrl.mock.invocationCallOrder.at(-1) ?? 0;
+    const vrmCallOrder =
+      instance?.loadVrmFromUrl.mock.invocationCallOrder.at(-1) ?? 0;
+    expect(worldCallOrder).toBeLessThan(vrmCallOrder);
+
+    await act(async () => {
+      renderer?.unmount();
+    });
+  });
+
+  it("does not reload the VRM when only the world changes", async () => {
+    let renderer: TestRenderer.ReactTestRenderer | null = null;
+
+    await act(async () => {
+      renderer = TestRenderer.create(
+        <VrmViewer
+          vrmPath="/vrms/milady-1.vrm.gz"
+          worldUrl="/worlds/companion-day.spz"
+          mouthOpen={0}
+        />,
+        {
+          createNodeMock: (element) => {
+            if (element.type === "canvas") {
+              return {
+                getBoundingClientRect: () => ({
+                  width: 640,
+                  height: 480,
+                  top: 0,
+                  left: 0,
+                  bottom: 480,
+                  right: 640,
+                  x: 0,
+                  y: 0,
+                  toJSON: () => ({}),
+                }),
+              };
+            }
+            return null;
+          },
+        },
+      );
+    });
+
+    const [instance] = getMockInstances();
+    expect(instance).toBeTruthy();
+
+    await act(async () => {
+      instance?.resolveReady();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(instance?.loadVrmFromUrl).toHaveBeenCalledTimes(1);
+    expect(instance?.setWorldUrl).toHaveBeenCalledWith(
+      "/worlds/companion-day.spz",
+    );
+
+    await act(async () => {
+      renderer?.update(
+        <VrmViewer
+          vrmPath="/vrms/milady-1.vrm.gz"
+          worldUrl="/worlds/companion-night.spz"
+          mouthOpen={0}
+        />,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(instance?.loadVrmFromUrl).toHaveBeenCalledTimes(1);
+    expect(instance?.setWorldUrl).toHaveBeenLastCalledWith(
+      "/worlds/companion-night.spz",
+    );
+
+    await act(async () => {
+      renderer?.unmount();
+    });
+  });
+});