@elizaos/app-core 2.0.0-alpha.73 → 2.0.0-alpha.75

package/test/app/plugins-ui.e2e.test.ts

@@ -1,605 +0,0 @@
-/**
- * E2E tests for Plugins UI (PluginsView, PluginsPageView).
- *
- * Tests cover:
- * 1. Plugin listing
- * 2. Plugin enable/disable toggle
- * 3. Plugin configuration
- * 4. Plugin search/filter
- * 5. Plugin marketplace
- * 6. Plugin installation
- */
-
-import http from "node:http";
-// @vitest-environment jsdom
-import React from "react";
-import TestRenderer, { act } from "react-test-renderer";
-import {
-  afterAll,
-  beforeAll,
-  beforeEach,
-  describe,
-  expect,
-  it,
-  vi,
-} from "vitest";
-
-// ---------------------------------------------------------------------------
-// Part 1: API Tests for Plugin Endpoints
-// ---------------------------------------------------------------------------
-
-async function req(
-  port: number,
-  method: string,
-  path: string,
-  body?: Record<string, unknown>,
-): Promise<{ status: number; data: Record<string, unknown> }> {
-  return new Promise((resolve, reject) => {
-    const payload = body ? JSON.stringify(body) : undefined;
-    const r = http.request(
-      {
-        hostname: "127.0.0.1",
-        port,
-        path,
-        method,
-        headers: {
-          "Content-Type": "application/json",
-          ...(payload ? { "Content-Length": Buffer.byteLength(payload) } : {}),
-        },
-      },
-      (res) => {
-        const chunks: Buffer[] = [];
-        res.on("data", (c: Buffer) => chunks.push(c));
-        res.on("end", () => {
-          const raw = Buffer.concat(chunks).toString("utf-8");
-          let data: Record<string, unknown> = {};
-          try {
-            data = JSON.parse(raw) as Record<string, unknown>;
-          } catch {
-            data = { _raw: raw };
-          }
-          resolve({ status: res.statusCode ?? 0, data });
-        });
-      },
-    );
-    r.on("error", reject);
-    if (payload) r.write(payload);
-    r.end();
-  });
-}
-
-function createPluginTestServer(): Promise<{
-  port: number;
-  close: () => Promise<void>;
-  getPlugins: () => Array<{ name: string; enabled: boolean }>;
-}> {
-  const plugins = [
-    {
-      name: "@elizaos/plugin-openai",
-      enabled: true,
-      tags: ["llm"],
-      description: "OpenAI provider",
-    },
-    {
-      name: "@elizaos/plugin-anthropic",
-      enabled: false,
-      tags: ["llm"],
-      description: "Anthropic provider",
-    },
-    {
-      name: "@elizaos/plugin-discord",
-      enabled: true,
-      tags: ["connector"],
-      description: "Discord connector",
-    },
-    {
-      name: "@elizaos/plugin-telegram",
-      enabled: false,
-      tags: ["connector"],
-      description: "Telegram connector",
-    },
-    {
-      name: "@elizaos/plugin-image-gen",
-      enabled: false,
-      tags: ["media"],
-      description: "Image generation",
-    },
-  ];
-
-  const json = (res: http.ServerResponse, data: unknown, status = 200) => {
-    res.writeHead(status, {
-      "Content-Type": "application/json",
-      "Access-Control-Allow-Origin": "*",
-    });
-    res.end(JSON.stringify(data));
-  };
-
-  const readBody = (r: http.IncomingMessage): Promise<string> =>
-    new Promise((ok) => {
-      const c: Buffer[] = [];
-      r.on("data", (d: Buffer) => c.push(d));
-      r.on("end", () => ok(Buffer.concat(c).toString()));
-    });
-
-  const routes: Record<
-    string,
-    (
-      req: http.IncomingMessage,
-      res: http.ServerResponse,
-    ) => Promise<void> | void
-  > = {
-    "GET /api/plugins": (_r, res) => json(res, { plugins }),
-    "POST /api/plugins/toggle": async (r, res) => {
-      const body = JSON.parse(await readBody(r)) as Record<string, unknown>;
-      const plugin = plugins.find((p) => p.name === body.name);
-      if (plugin) {
-        plugin.enabled = !plugin.enabled;
-        json(res, { ok: true, enabled: plugin.enabled });
-      } else {
-        json(res, { error: "Plugin not found" }, 404);
-      }
-    },
-    "POST /api/plugins/config": async (r, res) => {
-      const body = JSON.parse(await readBody(r)) as Record<string, unknown>;
-      // Simulate config save
-      json(res, { ok: true, name: body.name });
-    },
-    "GET /api/plugins/marketplace": (_r, res) =>
-      json(res, {
-        available: [
-          {
-            name: "@elizaos/plugin-voice",
-            description: "Voice synthesis",
-            installed: false,
-          },
-          {
-            name: "@elizaos/plugin-web3",
-            description: "Web3 integration",
-            installed: false,
-          },
-        ],
-      }),
-    "POST /api/plugins/install": async (r, res) => {
-      const body = JSON.parse(await readBody(r)) as Record<string, unknown>;
-      plugins.push({
-        name: body.name as string,
-        enabled: false,
-        tags: [],
-        description: "Newly installed plugin",
-      });
-      json(res, { ok: true });
-    },
-    "POST /api/plugins/uninstall": async (r, res) => {
-      const body = JSON.parse(await readBody(r)) as Record<string, unknown>;
-      const idx = plugins.findIndex((p) => p.name === body.name);
-      if (idx !== -1) {
-        plugins.splice(idx, 1);
-        json(res, { ok: true });
-      } else {
-        json(res, { error: "Plugin not found" }, 404);
-      }
-    },
-  };
-
-  const server = http.createServer(async (rq, rs) => {
-    if (rq.method === "OPTIONS") {
-      rs.writeHead(204, {
-        "Access-Control-Allow-Origin": "*",
-        "Access-Control-Allow-Methods": "*",
-        "Access-Control-Allow-Headers": "*",
-      });
-      rs.end();
-      return;
-    }
-    const key = `${rq.method} ${new URL(rq.url ?? "/", "http://localhost").pathname}`;
-    const handler = routes[key];
-    if (handler) {
-      await handler(rq, rs);
-    } else {
-      json(rs, { error: "Not found" }, 404);
-    }
-  });
-
-  return new Promise((ok) => {
-    server.listen(0, "127.0.0.1", () => {
-      const addr = server.address();
-      ok({
-        port: typeof addr === "object" && addr ? addr.port : 0,
-        close: () => new Promise<void>((r) => server.close(() => r())),
-        getPlugins: () =>
-          plugins.map((p) => ({ name: p.name, enabled: p.enabled })),
-      });
-    });
-  });
-}
-
-describe("Plugin API", () => {
-  let port: number;
-  let close: () => Promise<void>;
-  let getPlugins: () => Array<{ name: string; enabled: boolean }>;
-
-  beforeAll(async () => {
-    ({ port, close, getPlugins } = await createPluginTestServer());
-  });
-
-  afterAll(async () => {
-    await close();
-  });
-
-  it("GET /api/plugins returns plugin list", async () => {
-    const { status, data } = await req(port, "GET", "/api/plugins");
-    expect(status).toBe(200);
-    expect(Array.isArray(data.plugins)).toBe(true);
-  });
-
-  it("POST /api/plugins/toggle enables plugin", async () => {
-    const plugin = getPlugins().find((p) => p.name.includes("anthropic"));
-    const wasEnabled = plugin?.enabled;
-
-    const { status, data } = await req(port, "POST", "/api/plugins/toggle", {
-      name: "@elizaos/plugin-anthropic",
-    });
-
-    expect(status).toBe(200);
-    expect(data.ok).toBe(true);
-    expect(
-      getPlugins().find((p) => p.name.includes("anthropic"))?.enabled,
-    ).toBe(!wasEnabled);
-  });
-
-  it("POST /api/plugins/config saves configuration", async () => {
-    const { status, data } = await req(port, "POST", "/api/plugins/config", {
-      name: "@elizaos/plugin-openai",
-      config: { apiKey: "test-key" },
-    });
-
-    expect(status).toBe(200);
-    expect(data.ok).toBe(true);
-  });
-
-  it("GET /api/plugins/marketplace returns available plugins", async () => {
-    const { status, data } = await req(port, "GET", "/api/plugins/marketplace");
-    expect(status).toBe(200);
-    expect(Array.isArray(data.available)).toBe(true);
-  });
-
-  it("POST /api/plugins/install adds new plugin", async () => {
-    const initialCount = getPlugins().length;
-
-    const { status, data } = await req(port, "POST", "/api/plugins/install", {
-      name: "@elizaos/plugin-new",
-    });
-
-    expect(status).toBe(200);
-    expect(data.ok).toBe(true);
-    expect(getPlugins().length).toBe(initialCount + 1);
-  });
-
-  it("POST /api/plugins/uninstall removes plugin", async () => {
-    const initialCount = getPlugins().length;
-
-    const { status, data } = await req(port, "POST", "/api/plugins/uninstall", {
-      name: "@elizaos/plugin-new",
-    });
-
-    expect(status).toBe(200);
-    expect(data.ok).toBe(true);
-    expect(getPlugins().length).toBe(initialCount - 1);
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Part 2: UI Tests for PluginsView
-// ---------------------------------------------------------------------------
-
-const { mockUseApp } = vi.hoisted(() => ({
-  mockUseApp: vi.fn(),
-}));
-
-vi.mock("@elizaos/app-core/state", async () => {
-  const actual = await vi.importActual("@elizaos/app-core/state");
-  return {
-    ...actual,
-    useApp: () => mockUseApp(),
-  };
-});
-
-vi.mock("@elizaos/app-core/api", () => ({
-  client: {
-    getPlugins: vi.fn().mockResolvedValue([]),
-    togglePlugin: vi.fn().mockResolvedValue({ ok: true }),
-    savePluginConfig: vi.fn().mockResolvedValue({ ok: true }),
-    onWsEvent: vi.fn().mockReturnValue(() => {}),
-    runPluginAction: vi.fn().mockResolvedValue({ ok: true }),
-    installPlugin: vi.fn().mockResolvedValue({ ok: true }),
-    testPluginConfig: vi.fn().mockResolvedValue({ ok: true }),
-  },
-}));
-
-vi.mock("@elizaos/app-core/config", () => ({
-  ConfigRenderer: () => React.createElement("div", null, "ConfigRenderer"),
-  defaultRegistry: {},
-}));
-
-vi.mock("@elizaos/app-core/components/WhatsAppQrOverlay", () => ({
-  WhatsAppQrOverlay: () =>
-    React.createElement("div", null, "WhatsAppQrOverlay"),
-}));
-
-import { PluginsView } from "@elizaos/app-core/components/PluginsView";
-
-type PluginInfo = {
-  id: string;
-  name: string;
-  enabled: boolean;
-  category: string;
-  description?: string;
-  parameters?: Array<{ key: string; required: boolean; isSet: boolean }>;
-  configUiHints?: Record<string, unknown>;
-};
-
-type PluginState = {
-  plugins: PluginInfo[];
-  pluginStatusFilter: string;
-  pluginSearch: string;
-  pluginSettingsOpen: Set<string>;
-  pluginSaving: boolean;
-  pluginSaveSuccess: boolean;
-};
-
-function createPluginUIState(): PluginState {
-  return {
-    plugins: [
-      {
-        id: "plugin-openai",
-        name: "@elizaos/plugin-openai",
-        enabled: true,
-        category: "ai-provider",
-        description: "OpenAI",
-      },
-      {
-        id: "plugin-anthropic",
-        name: "@elizaos/plugin-anthropic",
-        enabled: false,
-        category: "ai-provider",
-        description: "Anthropic",
-      },
-      {
-        id: "plugin-discord",
-        name: "@elizaos/plugin-discord",
-        enabled: true,
-        category: "connector",
-        description: "Discord",
-      },
-    ],
-    pluginStatusFilter: "all",
-    pluginSearch: "",
-    pluginSettingsOpen: new Set<string>(),
-    pluginSaving: false,
-    pluginSaveSuccess: false,
-  };
-}
-
-describe("PluginsView UI", () => {
-  let state: PluginState;
-
-  beforeEach(() => {
-    state = createPluginUIState();
-
-    mockUseApp.mockReset();
-    mockUseApp.mockImplementation(() => ({
-      t: (k: string) => k,
-      ...state,
-      loadPlugins: vi.fn(),
-      handlePluginToggle: vi.fn().mockImplementation((name: string) => {
-        const plugin = state.plugins.find((p) => p.name === name);
-        if (plugin) plugin.enabled = !plugin.enabled;
-      }),
-      handlePluginConfigSave: vi.fn(),
-      setActionNotice: vi.fn(),
-      setState: vi.fn(),
-    }));
-  });
-
-  it("renders PluginsView", async () => {
-    let tree: TestRenderer.ReactTestRenderer | null = null;
-
-    await act(async () => {
-      tree = TestRenderer.create(React.createElement(PluginsView));
-    });
-
-    expect(tree).not.toBeNull();
-  });
-
-  it("displays plugin names", async () => {
-    let tree: TestRenderer.ReactTestRenderer | null = null;
-
-    await act(async () => {
-      tree = TestRenderer.create(React.createElement(PluginsView));
-    });
-
-    const _allText = JSON.stringify(tree?.toJSON());
-    // Should contain plugin-related text
-    expect(tree).not.toBeNull();
-  });
-
-  it("renders search/filter input", async () => {
-    let tree: TestRenderer.ReactTestRenderer | null = null;
-
-    await act(async () => {
-      tree = TestRenderer.create(React.createElement(PluginsView));
-    });
-
-    const inputs = tree?.root.findAll(
-      (node) =>
-        node.type === "input" &&
-        (node.props.placeholder?.toLowerCase().includes("search") ||
-          node.props.placeholder?.toLowerCase().includes("filter")),
-    );
-    expect(inputs.length).toBeGreaterThanOrEqual(0);
-  });
-
-  it("shows saving state when pluginSaving is true", async () => {
-    state.pluginSaving = true;
-
-    let tree: TestRenderer.ReactTestRenderer | null = null;
-
-    await act(async () => {
-      tree = TestRenderer.create(React.createElement(PluginsView));
-    });
-
-    expect(tree).not.toBeNull();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Part 3: Plugin Toggle Integration Tests
-// ---------------------------------------------------------------------------
-
-describe("Plugin Toggle Integration", () => {
-  let state: PluginState;
-
-  beforeEach(() => {
-    state = createPluginUIState();
-
-    mockUseApp.mockReset();
-    mockUseApp.mockImplementation(() => ({
-      ...state,
-      loadPlugins: vi.fn(),
-      handlePluginToggle: (name: string) => {
-        const plugin = state.plugins.find((p) => p.name === name);
-        if (plugin) {
-          plugin.enabled = !plugin.enabled;
-        }
-      },
-      handlePluginConfigSave: vi.fn(),
-    }));
-  });
-
-  it("toggling plugin updates enabled state", () => {
-    const toggleFn = mockUseApp().handlePluginToggle;
-    const openaiPlugin = state.plugins.find((p) => p.name.includes("openai"));
-
-    expect(openaiPlugin?.enabled).toBe(true);
-    toggleFn("@elizaos/plugin-openai");
-    expect(openaiPlugin?.enabled).toBe(false);
-  });
-
-  it("toggling disabled plugin enables it", () => {
-    const toggleFn = mockUseApp().handlePluginToggle;
-    const anthropicPlugin = state.plugins.find((p) =>
-      p.name.includes("anthropic"),
-    );
-
-    expect(anthropicPlugin?.enabled).toBe(false);
-    toggleFn("@elizaos/plugin-anthropic");
-    expect(anthropicPlugin?.enabled).toBe(true);
-  });
-
-  it("multiple toggles work correctly", () => {
-    const toggleFn = mockUseApp().handlePluginToggle;
-
-    toggleFn("@elizaos/plugin-openai");
-    toggleFn("@elizaos/plugin-openai");
-
-    expect(state.plugins.find((p) => p.name.includes("openai"))?.enabled).toBe(
-      true,
-    );
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Part 4: Plugin Filter Integration Tests
-// ---------------------------------------------------------------------------
-
-describe("Plugin Filter Integration", () => {
-  let state: PluginState;
-
-  beforeEach(() => {
-    state = createPluginUIState();
-
-    mockUseApp.mockReset();
-    mockUseApp.mockImplementation(() => ({
-      ...state,
-      loadPlugins: vi.fn(),
-      handlePluginToggle: vi.fn(),
-      handlePluginConfigSave: vi.fn(),
-      filterPlugins: (query: string) => {
-        return state.plugins.filter(
-          (p) =>
-            p.name.toLowerCase().includes(query.toLowerCase()) ||
-            p.description?.toLowerCase().includes(query.toLowerCase()),
-        );
-      },
-    }));
-  });
-
-  it("filtering by name returns matching plugins", () => {
-    const filterFn = mockUseApp().filterPlugins;
-    const results = filterFn("openai");
-
-    expect(results.length).toBe(1);
-    expect(results[0].name).toContain("openai");
-  });
-
-  it("filtering by tag returns matching plugins", () => {
-    const filterFn = mockUseApp().filterPlugins;
-    const results = filterFn("llm");
-
-    // LLM doesn't match name but would match tags
-    expect(results.length).toBeGreaterThanOrEqual(0);
-  });
-
-  it("filtering with no match returns empty", () => {
-    const filterFn = mockUseApp().filterPlugins;
-    const results = filterFn("nonexistent_xyz");
-
-    expect(results.length).toBe(0);
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Part 5: Plugin Configuration Tests
-// ---------------------------------------------------------------------------
-
-describe("Plugin Configuration", () => {
-  let state: PluginState;
-  let configSaved: { name: string; config: Record<string, unknown> } | null;
-
-  beforeEach(() => {
-    state = createPluginUIState();
-    configSaved = null;
-
-    mockUseApp.mockReset();
-    mockUseApp.mockImplementation(() => ({
-      ...state,
-      loadPlugins: vi.fn(),
-      handlePluginToggle: vi.fn(),
-      handlePluginConfigSave: async (
-        name: string,
-        config: Record<string, unknown>,
-      ) => {
-        configSaved = { name, config };
-        state.pluginSaving = false;
-        state.pluginSaveSuccess = true;
-      },
-    }));
-  });
-
-  it("saving config captures plugin name and config", async () => {
-    const saveFn = mockUseApp().handlePluginConfigSave;
-
-    await saveFn("@elizaos/plugin-openai", { apiKey: "test-key" });
-
-    expect(configSaved?.name).toBe("@elizaos/plugin-openai");
-    expect(configSaved?.config.apiKey).toBe("test-key");
-  });
-
-  it("saving config updates success state", async () => {
-    const saveFn = mockUseApp().handlePluginConfigSave;
-
-    await saveFn("@elizaos/plugin-anthropic", { model: "claude-3" });
-
-    expect(state.pluginSaveSuccess).toBe(true);
-  });
-});