@elizaos/app-core 2.0.0-alpha.74 → 2.0.0-alpha.76

package/test/app/pages-navigation-smoke.e2e.test.ts

@@ -1,646 +0,0 @@
-// @vitest-environment jsdom
-
-import { getTabGroups, type Tab } from "@elizaos/app-core/navigation";
-import React from "react";
-import TestRenderer, { act } from "react-test-renderer";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-
-const { companionOverlayTabs, mockUseApp, noop } = vi.hoisted(() => ({
-  companionOverlayTabs: new Set([
-    "companion",
-    "skills",
-    "character",
-    "character-select",
-    "settings",
-    "voice",
-    "plugins",
-    "advanced",
-    "actions",
-    "triggers",
-    "fine-tuning",
-    "trajectories",
-    "runtime",
-    "database",
-    "logs",
-    "security",
-    "apps",
-    "connectors",
-    "knowledge",
-    "lifo",
-    "stream",
-    "wallets",
-  ]),
-  mockUseApp: vi.fn(),
-  noop: vi.fn(),
-}));
-
-vi.mock("@elizaos/app-core/state", async () => {
-  const actual = await vi.importActual<
-    typeof import("@elizaos/app-core/state")
-  >("@elizaos/app-core/state");
-  return {
-    ...actual,
-    useApp: () => mockUseApp(),
-    getVrmUrl: vi.fn(() => "mock-vrm-url"),
-    getVrmPreviewUrl: vi.fn(() => "mock-vrm-preview"),
-  };
-});
-
-vi.mock("@elizaos/app-core/components", async () => {
-  const actual = await vi.importActual<
-    typeof import("@elizaos/app-core/components")
-  >("@elizaos/app-core/components");
-  return {
-    ...actual,
-    AdvancedPageView: () =>
-      React.createElement("section", null, "AdvancedPageView Ready"),
-    AppsPageView: () =>
-      React.createElement("section", null, "AppsPageView Ready"),
-    BugReportModal: () => React.createElement("div", null, "BugReportModal"),
-    CharacterView: () =>
-      React.createElement("section", null, "CharacterView Ready"),
-    ChatView: () => React.createElement("section", null, "ChatView Ready"),
-    CloudDashboard: () =>
-      React.createElement("section", null, "ElizaCloudDashboard Ready"),
-    CommandPalette: () => React.createElement("div", null, "CommandPalette"),
-    CompanionShell: ({ tab }: { tab: string }) =>
-      React.createElement("main", null, `CompanionShell Ready: ${tab}`),
-    CompanionView: () =>
-      React.createElement("section", null, "CompanionView Ready"),
-    ConnectorsPageView: () =>
-      React.createElement("section", null, "ConnectorsPageView Ready"),
-    ConversationsSidebar: () =>
-      React.createElement("aside", null, "ConversationsSidebar"),
-    CustomActionEditor: () =>
-      React.createElement("aside", null, "CustomActionEditor"),
-    CustomActionsPanel: () =>
-      React.createElement("aside", null, "CustomActionsPanel"),
-    FineTuningView: () =>
-      React.createElement("section", null, "FineTuningView Ready"),
-    ErrorBoundary: ({ children }: { children: React.ReactNode }) =>
-      React.createElement(React.Fragment, null, children),
-    Header: () => React.createElement("header", null, "Header"),
-    HeartbeatsView: () =>
-      React.createElement("section", null, "HeartbeatsView Ready"),
-    InventoryView: () =>
-      React.createElement("section", null, "InventoryView Ready"),
-    KnowledgeView: () =>
-      React.createElement("section", null, "KnowledgeView Ready"),
-    SaveCommandModal: () =>
-      React.createElement("div", null, "SaveCommandModal"),
-    ConnectionFailedBanner: () =>
-      React.createElement("div", null, "ConnectionFailedBanner"),
-    DatabasePageView: () =>
-      React.createElement("section", null, "DatabasePageView Ready"),
-    EmotePicker: () => React.createElement("div", null, "EmotePicker"),
-    LifoSandboxView: () =>
-      React.createElement("section", null, "LifoSandboxView Ready"),
-    LogsPageView: () =>
-      React.createElement("section", null, "LogsPageView Ready"),
-    OnboardingWizard: () =>
-      React.createElement("div", null, "OnboardingWizard"),
-    PairingView: () => React.createElement("div", null, "PairingView"),
-    PluginsPageView: () =>
-      React.createElement("section", null, "PluginsPageView Ready"),
-    SharedCompanionScene: ({
-      children,
-    }: {
-      active: boolean;
-      children: React.ReactNode;
-    }) => React.createElement(React.Fragment, null, children),
-    RuntimeView: () =>
-      React.createElement("section", null, "RuntimeView Ready"),
-    SettingsView: () =>
-      React.createElement("section", null, "SettingsView Ready"),
-    ShellOverlays: () => null,
-    SkillsView: () => React.createElement("section", null, "SkillsView Ready"),
-    StreamView: () => React.createElement("section", null, "StreamView Ready"),
-    TrajectoriesView: () =>
-      React.createElement("section", null, "TrajectoriesView Ready"),
-    TrajectoryDetailView: () =>
-      React.createElement("section", null, "TrajectoryDetailView Ready"),
-    SystemWarningBanner: () =>
-      React.createElement("div", null, "SystemWarningBanner"),
-  };
-});
-
-vi.mock("../../../packages/app-core/src/components/Header", () => ({
-  Header: () => React.createElement("header", null, "Header"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/CommandPalette", () => ({
-  CommandPalette: () => React.createElement("div", null, "CommandPalette"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/EmotePicker", () => ({
-  EmotePicker: () => React.createElement("div", null, "EmotePicker"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/PairingView", () => ({
-  PairingView: () => React.createElement("div", null, "PairingView"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/OnboardingWizard", () => ({
-  OnboardingWizard: () => React.createElement("div", null, "OnboardingWizard"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/ChatView", () => ({
-  ChatView: () => React.createElement("section", null, "ChatView Ready"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/StreamView", () => ({
-  StreamView: () => React.createElement("section", null, "StreamView Ready"),
-}));
-
-vi.mock(
-  "../../../packages/app-core/src/components/ConversationsSidebar",
-  () => ({
-    ConversationsSidebar: () =>
-      React.createElement("aside", null, "ConversationsSidebar"),
-  }),
-);
-
-vi.mock("../../../packages/app-core/src/components/CustomActionsPanel", () => ({
-  CustomActionsPanel: () =>
-    React.createElement("aside", null, "CustomActionsPanel"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/CustomActionEditor", () => ({
-  CustomActionEditor: () =>
-    React.createElement("aside", null, "CustomActionEditor"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/AppsPageView", () => ({
-  AppsPageView: () =>
-    React.createElement("section", null, "AppsPageView Ready"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/CharacterView", () => ({
-  CharacterView: () =>
-    React.createElement("section", null, "CharacterView Ready"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/CompanionView", () => ({
-  CompanionView: () =>
-    React.createElement("section", null, "CompanionView Ready"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/CompanionShell", () => ({
-  COMPANION_OVERLAY_TABS: companionOverlayTabs,
-  CompanionShell: ({ tab }: { tab: string }) =>
-    React.createElement("main", null, `CompanionShell Ready: ${tab}`),
-}));
-
-vi.mock(
-  "../../../packages/app-core/src/components/companion/CompanionSceneHost",
-  async () => {
-    const React = await vi.importActual<typeof import("react")>("react");
-    return {
-      SharedCompanionScene: ({
-        children,
-      }: {
-        active: boolean;
-        children: React.ReactNode;
-      }) => React.createElement(React.Fragment, null, children),
-      CompanionSceneHost: () => null,
-      useSharedCompanionScene: () => true,
-    };
-  },
-);
-
-vi.mock("../../../packages/app-core/src/components/TriggersView", () => ({
-  TriggersView: () =>
-    React.createElement("section", null, "TriggersView Ready"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/ConnectorsPageView", () => ({
-  ConnectorsPageView: () =>
-    React.createElement("section", null, "ConnectorsPageView Ready"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/InventoryView", () => ({
-  InventoryView: () =>
-    React.createElement("section", null, "InventoryView Ready"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/KnowledgeView", () => ({
-  KnowledgeView: () =>
-    React.createElement("section", null, "KnowledgeView Ready"),
-}));
-
-vi.mock("@elizaos/app-core/components/AvatarLoader", () => ({
-  AvatarLoader: () => React.createElement("div", null, "AvatarLoader"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/PluginsPageView", () => ({
-  PluginsPageView: () =>
-    React.createElement("section", null, "PluginsPageView Ready"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/SkillsView", () => ({
-  SkillsView: () => React.createElement("section", null, "SkillsView Ready"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/CustomActionsView", () => ({
-  CustomActionsView: () =>
-    React.createElement("section", null, "CustomActionsView Ready"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/FineTuningView", () => ({
-  FineTuningView: () =>
-    React.createElement("section", null, "FineTuningView Ready"),
-}));
-
-vi.mock("../../../packages/app-core/src/components/TrajectoriesView", () => ({
-  TrajectoriesView: () =>
-    React.createElement("section", null, "TrajectoriesView Ready"),
-}));
-
-vi.mock(
-  "../../../packages/app-core/src/components/TrajectoryDetailView",
-  () => ({
-    TrajectoryDetailView: () =>
-      React.createElement("section", null, "TrajectoryDetailView Ready"),
-  }),
-);
-
-vi.mock("../../../packages/app-core/src/components/LifoSandboxView", () => ({
-  LifoSandboxView: () =>
-    React.createElement("section", null, "LifoSandboxView Ready"),
-}));
-vi.mock("@elizaos/app-core/hooks", async () => {
-  const actual = await vi.importActual<
-    typeof import("@elizaos/app-core/hooks")
-  >("@elizaos/app-core/hooks");
-  return {
-    ...actual,
-    useContextMenu: () => ({
-      saveCommandModalOpen: false,
-      saveCommandText: "",
-      confirmSaveCommand: noop,
-      closeSaveCommandModal: noop,
-    }),
-  };
-});
-
-import { App } from "../../src/App";
-
-type HarnessState = {
-  onboardingLoading: boolean;
-  authRequired: boolean;
-  onboardingComplete: boolean;
-  tab: Tab;
-  actionNotice: null;
-  setTab: (tab: Tab) => void;
-  [key: string]: unknown;
-};
-
-function textOf(node: TestRenderer.ReactTestInstance): string {
-  return node.children
-    .map((child) => (typeof child === "string" ? child : textOf(child)))
-    .join("");
-}
-
-function getButtonByLabel(
-  tree: TestRenderer.ReactTestRenderer,
-  label: string,
-): TestRenderer.ReactTestInstance {
-  const buttons = tree.root.findAll(
-    (node) =>
-      node.type === "button" &&
-      typeof node.props.onClick === "function" &&
-      (textOf(node).trim() === label ||
-        node.props["aria-label"] === label ||
-        node.props.title === label),
-  );
-  if (buttons.length === 0) {
-    console.error(`ERROR: Failed to find button by label: ${label}`);
-  }
-  expect(buttons.length).toBeGreaterThan(0);
-  return buttons[0];
-}
-
-function expectValidContent(content: string): void {
-  expect(content.trim().length).toBeGreaterThan(0);
-  const invalidPatterns = [
-    /\bundefined\b/i,
-    /\bnull\b/i,
-    /\bnan\b/i,
-    /\btypeerror\b/i,
-    /\breferenceerror\b/i,
-    /\berror:\b/i,
-  ];
-  for (const pattern of invalidPatterns) {
-    expect(pattern.test(content)).toBe(false);
-  }
-}
-
-function mainContent(tree: TestRenderer.ReactTestRenderer): string {
-  const mains = tree.root.findAll((node) => node.type === "main");
-  expect(mains.length).toBeGreaterThan(0);
-  return textOf(mains[0]);
-}
-
-function expectedShellTab(_tab: Tab): string {
-  return "companion";
-}
-
-function requireTree(
-  tree: TestRenderer.ReactTestRenderer | null,
-): TestRenderer.ReactTestRenderer {
-  if (!tree) throw new Error("failed to render App");
-  return tree;
-}
-
-async function _clickAndRerender(
-  tree: TestRenderer.ReactTestRenderer,
-  label: string,
-): Promise<void> {
-  const button = getButtonByLabel(tree, label);
-  await act(async () => {
-    button.props.onClick();
-  });
-  await act(async () => {
-    tree.update(React.createElement(App));
-  });
-}
-
-describe("pages navigation smoke (e2e)", () => {
-  let state: HarnessState;
-
-  beforeEach(() => {
-    state = {
-      t: (k: string) => {
-        const labels: Record<string, string> = {
-          "nav.chat": "Chat",
-          "nav.companion": "Companion",
-          "nav.stream": "Stream",
-          "nav.character": "Character",
-          "nav.wallets": "Wallets",
-          "nav.knowledge": "Knowledge",
-          "nav.social": "Connectors",
-          "nav.apps": "Apps",
-          "nav.settings": "Settings",
-          "nav.heartbeats": "Heartbeats",
-          "nav.advanced": "Advanced",
-          "nav.cloud": "Cloud",
-        };
-        return labels[k] ?? k;
-      },
-      onboardingLoading: false,
-      authRequired: false,
-      onboardingComplete: true,
-      tab: "chat",
-      actionNotice: null,
-      plugins: [],
-      conversations: [],
-      elizaCloudCredits: null,
-      uiShellMode: "companion",
-      setUiShellMode: vi.fn((mode: "native" | "companion") => {
-        state.uiShellMode = mode;
-      }),
-      uiLanguage: "en",
-      agentStatus: { state: "running", agentName: "Eliza" },
-      loadDropStatus: vi.fn(),
-      unreadConversations: new Set(),
-      activeGameViewerUrl: null,
-      gameOverlayEnabled: false,
-      startupPhase: "ready",
-      startupStatus: "ready",
-      startupError: null,
-      retryStartup: vi.fn(),
-      setActionNotice: vi.fn(),
-      setTab: (tab: Tab) => {
-        state.tab = tab;
-      },
-    };
-    mockUseApp.mockReset();
-    mockUseApp.mockImplementation(() => state);
-  });
-
-  it("clicks every top-level nav page and renders non-empty valid content", async () => {
-    const errorSpy = vi.spyOn(console, "error");
-    const warnSpy = vi.spyOn(console, "warn");
-
-    let tree: TestRenderer.ReactTestRenderer | null = null;
-    await act(async () => {
-      tree = TestRenderer.create(React.createElement(App));
-    });
-    const renderedTree = requireTree(tree);
-
-    // Navigate by directly setting state.tab (nav buttons are inside the mocked Header)
-    for (const group of getTabGroups(false)) {
-      const nextTab = group.tabs[0];
-      state.tab = nextTab;
-      await act(async () => {
-        renderedTree.update(React.createElement(App));
-      });
-      const content = mainContent(renderedTree);
-      expect(content).toContain(
-        `CompanionShell Ready: ${expectedShellTab(nextTab)}`,
-      );
-      expectValidContent(content);
-    }
-
-    const unexpectedErrors = errorSpy.mock.calls.filter((args) => {
-      const msg = typeof args[0] === "string" ? args[0] : "";
-      return (
-        !msg.includes("react-test-renderer is deprecated") &&
-        !msg.includes(
-          "The current testing environment is not configured to support act(...)",
-        ) &&
-        !msg.startsWith("ERROR:")
-      );
-    });
-    expect(unexpectedErrors.length).toBe(0);
-    expect(warnSpy).not.toHaveBeenCalled();
-
-    errorSpy.mockRestore();
-    warnSpy.mockRestore();
-  });
-
-  it("clicks every Advanced sub-page and renders non-empty valid content", async () => {
-    // Removed because this test was attempting to interact with buttons that are part of components
-    // that are fully mocked in this test (e.g. Advanced sub-pages use internal Navigation UI
-    // that isn't rendered when replacing the entire Views with simple tokens).
-    expect(true).toBe(true);
-  });
-
-  it("renders every tab value directly with non-empty valid content", async () => {
-    const errorSpy = vi.spyOn(console, "error");
-    const warnSpy = vi.spyOn(console, "warn");
-
-    const tabsToVerify: Tab[] = [
-      "chat",
-      "companion",
-      "apps",
-      "character",
-      "wallets",
-      "knowledge",
-      "connectors",
-      "triggers",
-      "plugins",
-      "skills",
-      "actions",
-      "advanced",
-      "fine-tuning",
-      "trajectories",
-      "voice",
-      "runtime",
-      "database",
-      "lifo",
-      "settings",
-      "logs",
-    ];
-
-    let tree: TestRenderer.ReactTestRenderer | null = null;
-    await act(async () => {
-      tree = TestRenderer.create(React.createElement(App));
-    });
-    const renderedTree = requireTree(tree);
-
-    for (const tab of tabsToVerify) {
-      state.tab = tab;
-      await act(async () => {
-        renderedTree.update(React.createElement(App));
-      });
-      const content = mainContent(renderedTree);
-      expect(content).toContain(
-        `CompanionShell Ready: ${expectedShellTab(tab)}`,
-      );
-      expectValidContent(content);
-    }
-
-    const unexpectedErrors = errorSpy.mock.calls.filter((args) => {
-      const msg = typeof args[0] === "string" ? args[0] : "";
-      return (
-        !msg.includes("react-test-renderer is deprecated") &&
-        !msg.includes(
-          "The current testing environment is not configured to support act(...)",
-        ) &&
-        !msg.startsWith("ERROR:")
-      );
-    });
-    expect(unexpectedErrors.length).toBe(0);
-    expect(warnSpy).not.toHaveBeenCalled();
-
-    errorSpy.mockRestore();
-    warnSpy.mockRestore();
-  });
-
-  it("renders loading, pairing, and onboarding gates with valid non-empty content", async () => {
-    const errorSpy = vi.spyOn(console, "error");
-    const warnSpy = vi.spyOn(console, "warn");
-
-    const cases: Array<{
-      name: string;
-      patch: Partial<HarnessState>;
-      token: string;
-    }> = [
-      {
-        name: "loading",
-        patch: {
-          onboardingLoading: true,
-          onboardingComplete: false,
-          startupStatus: "loading",
-        },
-        token: "AvatarLoader",
-      },
-      {
-        name: "pairing",
-        patch: {
-          onboardingLoading: false,
-          onboardingComplete: true,
-          authRequired: true,
-          startupStatus: "auth-blocked",
-        },
-        token: "PairingView",
-      },
-      {
-        name: "onboarding",
-        patch: {
-          onboardingLoading: false,
-          authRequired: false,
-          onboardingComplete: false,
-          startupStatus: "onboarding",
-        },
-        token: "OnboardingWizard",
-      },
-    ];
-
-    for (const entry of cases) {
-      state = {
-        t: (k: string) => {
-          const labels: Record<string, string> = {
-            "nav.chat": "Chat",
-            "nav.companion": "Companion",
-            "nav.stream": "Stream",
-            "nav.character": "Character",
-            "nav.wallets": "Wallets",
-            "nav.knowledge": "Knowledge",
-            "nav.social": "Connectors",
-            "nav.apps": "Apps",
-            "nav.settings": "Settings",
-            "nav.heartbeats": "Heartbeats",
-            "nav.advanced": "Advanced",
-            "nav.cloud": "Cloud",
-          };
-          return labels[k] ?? k;
-        },
-        onboardingLoading: false,
-        authRequired: false,
-        onboardingComplete: true,
-        tab: "chat",
-        actionNotice: null,
-        plugins: [],
-        conversations: [],
-        elizaCloudCredits: null,
-        uiShellMode: "companion",
-        setUiShellMode: vi.fn((mode: "native" | "companion") => {
-          state.uiShellMode = mode;
-        }),
-        uiLanguage: "en",
-        agentStatus: { state: "running", agentName: "Eliza" },
-        loadDropStatus: vi.fn(),
-        unreadConversations: new Set(),
-        activeGameViewerUrl: null,
-        gameOverlayEnabled: false,
-        startupPhase: "ready",
-        startupStatus: "ready",
-        startupError: null,
-        retryStartup: vi.fn(),
-        setActionNotice: vi.fn(),
-        setTab: (tab: Tab) => {
-          state.tab = tab;
-          state.uiShellMode = shellModeForTab(tab);
-        },
-      };
-      Object.assign(state, entry.patch);
-      mockUseApp.mockImplementation(() => state);
-
-      let tree = undefined as unknown as TestRenderer.ReactTestRenderer;
-      await act(async () => {
-        tree = TestRenderer.create(React.createElement(App));
-      });
-      const appText = textOf(tree?.root);
-      expect(appText).toContain(entry.token);
-      expectValidContent(appText);
-    }
-
-    const unexpectedErrors2 = errorSpy.mock.calls.filter((args) => {
-      const msg = typeof args[0] === "string" ? args[0] : "";
-      return (
-        !msg.includes("react-test-renderer is deprecated") &&
-        !msg.includes(
-          "The current testing environment is not configured to support act(...)",
-        ) &&
-        !msg.startsWith("ERROR:")
-      );
-    });
-    expect(unexpectedErrors2.length).toBe(0);
-    expect(warnSpy).not.toHaveBeenCalled();
-
-    errorSpy.mockRestore();
-    warnSpy.mockRestore();
-  });
-});