@elizaos/app-core 2.0.0-alpha.52 → 2.0.0-alpha.53

package/test/app/settings-sections.e2e.test.ts

@@ -1,614 +0,0 @@
-/**
- * E2E tests for Settings Sections.
- *
- * Tests cover all 14 settings sections:
- * 1. Appearance (theme selection)
- * 2. AI Model (provider, model selection)
- * 3. Integrations (GitHub, coding agents)
- * 4. Media (image, video, audio providers)
- * 5. Voice (TTS/STT configuration)
- * 6. Permissions
- * 7. Updates
- * 8. Cloud integration
- * 9-14. Advanced options
- */
-
-// @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.fn();
-
-vi.mock("@elizaos/app-core/state", () => ({
-  useApp: () => mockUseApp(),
-  THEMES: [
-    { id: "milady", label: "Milady" },
-    { id: "dark", label: "Dark" },
-    { id: "light", label: "Light" },
-    { id: "solarized", label: "Solarized" },
-  ],
-}));
-
-vi.mock("@elizaos/app-core/components", async () => {
-  const actual = await vi.importActual<
-    typeof import("@elizaos/app-core/components")
-  >("@elizaos/app-core/components");
-  return {
-    ...actual,
-  };
-});
-
-vi.mock("@elizaos/app-core/components/ConfigPageView", () => ({
-  ConfigPageView: () =>
-    React.createElement("div", { "data-testid": "config-page" }, "ConfigPage"),
-}));
-
-vi.mock("@elizaos/app-core/components/CodingAgentSettingsSection", () => ({
-  CodingAgentSettingsSection: () =>
-    React.createElement("div", null, "CodingAgentSettingsSection"),
-}));
-
-vi.mock("@elizaos/app-core/components/MediaSettingsSection", () => ({
-  MediaSettingsSection: () =>
-    React.createElement(
-      "div",
-      { "data-testid": "media-settings" },
-      "MediaSettingsSection",
-    ),
-}));
-
-vi.mock("@elizaos/app-core/components/ElizaCloudDashboard", () => ({
-  CloudDashboard: () => React.createElement("div", null, "ElizaCloudDashboard"),
-}));
-
-vi.mock("@elizaos/app-core/components/PermissionsSection", () => ({
-  PermissionsSection: () =>
-    React.createElement(
-      "div",
-      { "data-testid": "permissions" },
-      "PermissionsSection",
-    ),
-}));
-
-vi.mock("@elizaos/app-core/components/ProviderSwitcher", () => ({
-  ProviderSwitcher: () =>
-    React.createElement(
-      "div",
-      { "data-testid": "provider-switcher" },
-      "ProviderSwitcher",
-    ),
-}));
-
-vi.mock("@elizaos/app-core/components/VoiceConfigView", () => ({
-  VoiceConfigView: () =>
-    React.createElement(
-      "div",
-      { "data-testid": "voice-config" },
-      "VoiceConfigView",
-    ),
-}));
-
-import { SettingsView } from "@elizaos/app-core/components/SettingsView";
-
-type SettingsState = {
-  // Cloud
-  elizaCloudEnabled: boolean;
-  elizaCloudConnected: boolean;
-  elizaCloudCredits: number;
-  elizaCloudCreditsLow: boolean;
-  elizaCloudCreditsCritical: boolean;
-  elizaCloudTopUpUrl: string;
-  elizaCloudUserId: string;
-  elizaCloudLoginBusy: boolean;
-  elizaCloudLoginError: string;
-  cloudDisconnecting: boolean;
-  // Plugins
-  plugins: Array<{ name: string; enabled: boolean; description?: string }>;
-  pluginSaving: boolean;
-  pluginSaveSuccess: boolean;
-  // Theme
-  currentTheme: string;
-  uiLanguage: string;
-  // Other
-  [key: string]: unknown;
-};
-
-function createSettingsState(): SettingsState {
-  return {
-    elizaCloudEnabled: true,
-    elizaCloudConnected: false,
-    elizaCloudCredits: 100,
-    elizaCloudCreditsLow: false,
-    elizaCloudCreditsCritical: false,
-    elizaCloudTopUpUrl: "https://example.com/topup",
-    elizaCloudUserId: "",
-    elizaCloudLoginBusy: false,
-    elizaCloudLoginError: "",
-    cloudDisconnecting: false,
-    plugins: [
-      {
-        name: "@elizaos/plugin-discord",
-        enabled: true,
-        description: "Discord connector",
-      },
-      {
-        name: "@elizaos/plugin-telegram",
-        enabled: false,
-        description: "Telegram connector",
-      },
-    ],
-    pluginSaving: false,
-    pluginSaveSuccess: false,
-    currentTheme: "milady",
-    uiLanguage: "en",
-  };
-}
-
-const sharedLoadDropStatus = vi.fn().mockResolvedValue(undefined);
-
-function createUseAppMock(
-  state: SettingsState,
-  overrides: Record<string, unknown> = {},
-) {
-  return {
-    t: (k: string) => k,
-    ...state,
-    exportBusy: false,
-    exportPassword: "",
-    exportIncludeLogs: false,
-    exportError: null,
-    exportSuccess: null,
-    triggers: [],
-    triggersLoading: false,
-    triggersSaving: false,
-    triggerRunsById: {},
-    triggerHealth: null,
-    triggerError: null,
-    importBusy: false,
-    importPassword: "",
-    importFile: null,
-    importError: null,
-    importSuccess: null,
-    loadPlugins: vi.fn(),
-    loadTriggers: vi.fn(async () => {}),
-    createTrigger: vi.fn(async () => null),
-    updateTrigger: vi.fn(async () => null),
-    deleteTrigger: vi.fn(async () => true),
-    runTriggerNow: vi.fn(async () => true),
-    loadTriggerRuns: vi.fn(async () => {}),
-    loadTriggerHealth: vi.fn(async () => {}),
-    handlePluginToggle: vi.fn().mockImplementation((pluginName: string) => {
-      const plugin = state.plugins.find((p) => p.name === pluginName);
-      if (plugin) plugin.enabled = !plugin.enabled;
-    }),
-    setTheme: (theme: string) => {
-      state.currentTheme = theme;
-    },
-    setUiLanguage: (language: string) => {
-      state.uiLanguage = language;
-    },
-    setActionNotice: vi.fn(),
-    setTab: vi.fn(),
-    loadUpdateStatus: vi.fn(),
-    handlePluginConfigSave: vi.fn(),
-    handleCloudLogin: vi.fn(),
-    handleCloudDisconnect: vi.fn(),
-    handleReset: vi.fn(),
-    handleAgentExport: vi.fn(),
-    handleAgentImport: vi.fn(),
-    loadDropStatus: sharedLoadDropStatus,
-    setState: (key: string, value: unknown) => {
-      state[key] = value;
-    },
-    ...overrides,
-  };
-}
-
-describe("SettingsView Sections", () => {
-  let state: SettingsState;
-  let _themeSwitched: string | null;
-  let handleResetCalled: boolean;
-
-  beforeEach(() => {
-    state = createSettingsState();
-    _themeSwitched = null;
-    handleResetCalled = false;
-
-    (
-      globalThis as typeof globalThis & {
-        window?: Window & typeof globalThis;
-      }
-    ).window = {
-      confirm: () => true,
-    } as Window & typeof globalThis;
-
-    globalThis.fetch = vi.fn().mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve({ success: true, data: [] }),
-    }) as unknown as typeof fetch;
-
-    const cachedMock = createUseAppMock(state, {
-      setTheme: (theme: string) => {
-        _themeSwitched = theme;
-        state.currentTheme = theme;
-      },
-      handleReset: async () => {
-        handleResetCalled = true;
-      },
-    });
-
-    mockUseApp.mockReset();
-    mockUseApp.mockImplementation(() => cachedMock);
-  });
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // Section 2: AI Model / Provider
-  // ─────────────────────────────────────────────────────────────────────────
-
-  describe("AI Model Section", () => {
-    it("renders provider switcher section", async () => {
-      let tree: TestRenderer.ReactTestRenderer | null = null;
-
-      await act(async () => {
-        tree = TestRenderer.create(React.createElement(SettingsView));
-      });
-
-      const providerSection = tree?.root.findAll(
-        (node) => node.props?.["data-testid"] === "provider-switcher",
-      );
-      expect(providerSection.length).toBeGreaterThanOrEqual(0);
-    });
-  });
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // Section 3: Media Settings
-  // ─────────────────────────────────────────────────────────────────────────
-
-  describe("Media Settings Section", () => {
-    it("renders media settings section", async () => {
-      let tree: TestRenderer.ReactTestRenderer | null = null;
-
-      await act(async () => {
-        tree = TestRenderer.create(React.createElement(SettingsView));
-      });
-
-      const mediaSection = tree?.root.findAll(
-        (node) => node.props?.["data-testid"] === "media-settings",
-      );
-      expect(mediaSection.length).toBeGreaterThanOrEqual(0);
-    });
-  });
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // Section 4: Voice Settings
-  // ─────────────────────────────────────────────────────────────────────────
-
-  describe("Voice Settings Section", () => {
-    it("renders voice config section", async () => {
-      let tree: TestRenderer.ReactTestRenderer | null = null;
-
-      await act(async () => {
-        tree = TestRenderer.create(React.createElement(SettingsView));
-      });
-
-      const voiceSection = tree?.root.findAll(
-        (node) => node.props?.["data-testid"] === "voice-config",
-      );
-      expect(voiceSection.length).toBeGreaterThanOrEqual(0);
-    });
-  });
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // Section 5: Permissions
-  // ─────────────────────────────────────────────────────────────────────────
-
-  describe("Permissions Section", () => {
-    it("renders permissions section", async () => {
-      let tree: TestRenderer.ReactTestRenderer | null = null;
-
-      await act(async () => {
-        tree = TestRenderer.create(React.createElement(SettingsView));
-      });
-
-      const permSection = tree?.root.findAll(
-        (node) => node.props?.["data-testid"] === "permissions",
-      );
-      expect(permSection.length).toBeGreaterThanOrEqual(0);
-    });
-  });
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // Section 6: Cloud Integration
-  // ─────────────────────────────────────────────────────────────────────────
-
-  describe("Cloud Integration Section", () => {
-    it("shows login button when not connected", async () => {
-      state.elizaCloudConnected = false;
-
-      let tree: TestRenderer.ReactTestRenderer | null = null;
-
-      await act(async () => {
-        tree = TestRenderer.create(React.createElement(SettingsView));
-      });
-
-      const _loginButtons = tree?.root.findAll(
-        (node) =>
-          node.type === "button" &&
-          node.children.some(
-            (c) =>
-              typeof c === "string" &&
-              (c.toLowerCase().includes("login") ||
-                c.toLowerCase().includes("connect")),
-          ),
-      );
-      // May or may not have login button depending on cloud state
-      expect(tree).not.toBeNull();
-    });
-
-    it("shows disconnect button when connected", async () => {
-      state.elizaCloudConnected = true;
-      state.elizaCloudUserId = "user-123";
-
-      let tree: TestRenderer.ReactTestRenderer | null = null;
-
-      await act(async () => {
-        tree = TestRenderer.create(React.createElement(SettingsView));
-      });
-
-      const _disconnectButtons = tree?.root.findAll(
-        (node) =>
-          node.type === "button" &&
-          node.children.some(
-            (c) =>
-              typeof c === "string" && c.toLowerCase().includes("disconnect"),
-          ),
-      );
-      expect(tree).not.toBeNull();
-    });
-
-    it("shows credits when connected", async () => {
-      state.elizaCloudConnected = true;
-      state.elizaCloudCredits = 500;
-
-      let tree: TestRenderer.ReactTestRenderer | null = null;
-
-      await act(async () => {
-        tree = TestRenderer.create(React.createElement(SettingsView));
-      });
-
-      // Credits should be displayed somewhere
-      expect(tree).not.toBeNull();
-    });
-  });
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // Section 7: Danger Zone (already tested in settings-reset.e2e.test.ts)
-  // ─────────────────────────────────────────────────────────────────────────
-
-  describe("Danger Zone Section", () => {
-    it("renders danger zone with reset button", async () => {
-      let tree: TestRenderer.ReactTestRenderer | null = null;
-
-      await act(async () => {
-        tree = TestRenderer.create(React.createElement(SettingsView));
-      });
-
-      const dangerText = tree?.root.findAll(
-        (node) =>
-          node.type === "span" &&
-          node.children.some((c) => c === "settings.dangerZone"),
-      );
-      expect(dangerText.length).toBeGreaterThan(0);
-    });
-
-    it("reset button triggers handleReset", async () => {
-      let tree: TestRenderer.ReactTestRenderer | null = null;
-
-      await act(async () => {
-        tree = TestRenderer.create(React.createElement(SettingsView));
-      });
-
-      const resetButton = tree?.root.findAll(
-        (node) =>
-          node.type === "button" &&
-          node.children.some((c) => typeof c === "string" && c === "Reset"),
-      )[0];
-
-      if (resetButton) {
-        await act(async () => {
-          resetButton.props.onClick();
-        });
-        expect(handleResetCalled).toBe(true);
-      }
-    });
-  });
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // Section 8: Navigation / Sidebar
-  // ─────────────────────────────────────────────────────────────────────────
-
-  describe("Settings Navigation", () => {
-    it("renders settings sidebar with section links", async () => {
-      let tree: TestRenderer.ReactTestRenderer | null = null;
-
-      await act(async () => {
-        tree = TestRenderer.create(React.createElement(SettingsView));
-      });
-
-      // Should have navigation buttons/links
-      const navButtons = tree?.root.findAll((node) => node.type === "button");
-      expect(navButtons.length).toBeGreaterThan(0);
-    });
-
-    it("keeps the jump rail large-screen only and uses a single shared search field", async () => {
-      let tree: TestRenderer.ReactTestRenderer | null = null;
-
-      await act(async () => {
-        tree = TestRenderer.create(React.createElement(SettingsView));
-      });
-
-      const shell = tree?.root
-        .findAllByType("div")
-        .find((node) => node.props.className?.includes("settings-shell"));
-      expect(shell?.props.className).toContain("min-h-full");
-      expect(shell?.props.className).not.toContain("overflow-y-auto");
-      expect(shell?.props.className).not.toContain("overflow-x-hidden");
-
-      const aside = tree?.root.findByType("aside");
-      expect(aside?.props.className).toContain("hidden");
-      expect(aside?.props.className).toContain("xl:flex");
-      expect(aside?.props.className).toContain("xl:sticky");
-      expect(aside?.props.className).toContain("xl:top-0");
-
-      const nav = tree?.root.findByType("nav");
-      expect(nav?.props.className).not.toContain("overflow-y-auto");
-
-      const searchInputs = tree?.root.findAll(
-        (node) =>
-          node.type === "input" &&
-          node.props?.placeholder === "settings.searchPlaceholder",
-      );
-      expect(searchInputs).toHaveLength(1);
-    });
-
-    it("does not render a redundant settings heading", async () => {
-      let tree: TestRenderer.ReactTestRenderer | null = null;
-
-      await act(async () => {
-        tree = TestRenderer.create(React.createElement(SettingsView));
-      });
-
-      const allText = JSON.stringify(tree?.toJSON());
-
-      expect(allText).not.toContain("nav.settings");
-      expect(allText).not.toContain("settings.customizeExperience");
-    });
-
-    it("renders all expected section labels", async () => {
-      let tree: TestRenderer.ReactTestRenderer | null = null;
-
-      await act(async () => {
-        tree = TestRenderer.create(React.createElement(SettingsView));
-      });
-
-      const expectedSections = [
-        "settings.sections.voice.label",
-        "nav.advanced",
-      ];
-      const allText = JSON.stringify(tree?.toJSON());
-
-      for (const section of expectedSections) {
-        expect(allText).toContain(section);
-      }
-    });
-  });
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // Section 9: Export/Import (Advanced)
-  // ─────────────────────────────────────────────────────────────────────────
-
-  describe("Export/Import Section", () => {
-    it("renders export button in advanced section", async () => {
-      let tree: TestRenderer.ReactTestRenderer | null = null;
-
-      await act(async () => {
-        tree = TestRenderer.create(React.createElement(SettingsView));
-      });
-
-      const exportButtons = tree?.root.findAll(
-        (node) =>
-          node.type === "button" &&
-          node.children.some(
-            (c) =>
-              (typeof c === "object" &&
-                c?.children?.some(
-                  (cc: unknown) =>
-                    typeof cc === "string" && cc.includes("Export"),
-                )) ||
-              (typeof c === "string" && c.includes("Export")),
-          ),
-      );
-      expect(exportButtons.length).toBeGreaterThanOrEqual(0);
-    });
-
-    it("renders import button in advanced section", async () => {
-      let tree: TestRenderer.ReactTestRenderer | null = null;
-
-      await act(async () => {
-        tree = TestRenderer.create(React.createElement(SettingsView));
-      });
-
-      const importButtons = tree?.root.findAll(
-        (node) =>
-          node.type === "button" &&
-          node.children.some(
-            (c) =>
-              (typeof c === "object" &&
-                c?.children?.some(
-                  (cc: unknown) =>
-                    typeof cc === "string" && cc.includes("Import"),
-                )) ||
-              (typeof c === "string" && c.includes("Import")),
-          ),
-      );
-      expect(importButtons.length).toBeGreaterThanOrEqual(0);
-    });
-  });
-
-  // ─────────────────────────────────────────────────────────────────────────
-  // Search functionality
-  // ─────────────────────────────────────────────────────────────────────────
-
-  describe("Settings Search", () => {
-    it("renders search input", async () => {
-      let tree: TestRenderer.ReactTestRenderer | null = null;
-
-      await act(async () => {
-        tree = TestRenderer.create(React.createElement(SettingsView));
-      });
-
-      const searchInputs = tree?.root.findAll(
-        (node) =>
-          node.type === "input" &&
-          (node.props.placeholder?.toLowerCase().includes("search") ||
-            node.props.type === "search"),
-      );
-      expect(searchInputs.length).toBeGreaterThanOrEqual(0);
-    });
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Integration: Settings Persistence
-// ---------------------------------------------------------------------------
-
-describe("Settings Persistence", () => {
-  let state: SettingsState;
-
-  beforeEach(() => {
-    state = createSettingsState();
-
-    mockUseApp.mockReset();
-    mockUseApp.mockImplementation(() => createUseAppMock(state));
-  });
-
-  it("theme selection persists in state", async () => {
-    const setTheme = mockUseApp().setTheme;
-    setTheme("solarized");
-    expect(state.currentTheme).toBe("solarized");
-  });
-
-  it("multiple language changes update state correctly", async () => {
-    const setUiLanguage = mockUseApp().setUiLanguage;
-
-    setUiLanguage("es");
-    expect(state.uiLanguage).toBe("es");
-
-    setUiLanguage("ko");
-    expect(state.uiLanguage).toBe("ko");
-
-    setUiLanguage("en");
-    expect(state.uiLanguage).toBe("en");
-  });
-});

package/test/app/shared-format.test.ts

@@ -1,44 +0,0 @@
-import {
-  autoLabel,
-  formatByteSize,
-  formatDateTime,
-  formatDurationMs,
-  formatShortDate,
-  formatTime,
-} from "@elizaos/app-core/components";
-import { describe, expect, it } from "vitest";
-
-describe("shared format helpers", () => {
-  it("formats bytes with readable units", () => {
-    expect(formatByteSize(0)).toBe("0 B");
-    expect(formatByteSize(1024)).toBe("1.0 KB");
-    expect(formatByteSize(1024 * 1024)).toBe("1.0 MB");
-    expect(formatByteSize(1024 ** 3)).toBe("1.0 GB");
-  });
-
-  it("formats durations", () => {
-    expect(formatDurationMs(12_000)).toBe("12s");
-    expect(formatDurationMs(90_000)).toBe("2m");
-    expect(formatDurationMs(3_600_000)).toBe("1h");
-    expect(formatDurationMs(90_000_000)).toBe("1.0d");
-    expect(formatDurationMs(0, { fallback: "n/a" })).toBe("n/a");
-  });
-
-  it("formats date and short-date values", () => {
-    const value = "2026-02-13T00:00:00.000Z";
-
-    expect(formatDateTime(value, { locale: "en-US" })).toContain("2026");
-    expect(formatShortDate(value, { locale: "en-US" })).toContain("2026");
-    expect(formatTime(value, { locale: "en-US" })).toContain(":");
-  });
-});
-
-describe("shared labels", () => {
-  it("normalizes plugin env keys with prefix stripping", () => {
-    expect(autoLabel("MY_PLUGIN_API_KEY", "my-plugin")).toBe("API Key");
-    expect(autoLabel("MYPLUGIN_SECRET_TOKEN", "my-plugin")).toBe(
-      "Secret Token",
-    );
-    expect(autoLabel("PLAIN_KEY", "any-plugin")).toBe("Plain Key");
-  });
-});