OmniRoute/tests/unit/ui/engineConfigPage.test.tsx

// @vitest-environment jsdom
import React, { act } from "react";
import { createRoot } from "react-dom/client";
import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";

// ── Helpers ───────────────────────────────────────────────────────────────

const containers: HTMLElement[] = [];
const roots: Array<{ unmount: () => void }> = [];

function mountInContainer(ui: React.ReactElement): HTMLElement {
  const container = document.createElement("div");
  document.body.appendChild(container);
  containers.push(container);
  const root = createRoot(container);
  roots.push(root);
  act(() => {
    root.render(ui);
  });
  return container;
}

beforeEach(() => {
  (
    globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
  ).IS_REACT_ACT_ENVIRONMENT = true;
});

afterEach(async () => {
  // Restore mocks first so any in-flight fetch promises settle without blocking
  vi.restoreAllMocks();
  await act(async () => {
    while (roots.length > 0) {
      roots.pop()?.unmount();
    }
  });
  // Drain all remaining microtasks from effects that fired during unmount
  for (let i = 0; i < 10; i++) {
    await Promise.resolve();
  }
  while (containers.length > 0) {
    containers.pop()?.remove();
  }
  document.body.innerHTML = "";
});

// ── Mock fetch ────────────────────────────────────────────────────────────

const ENGINE_PAYLOAD = {
  engines: [
    {
      id: "headroom",
      name: "Headroom",
      description: "Headroom engine description",
      icon: "🗜️",
      stackable: true,
      stackPriority: 1,
      metadata: { description: "Headroom metadata description" },
      configSchema: [
        {
          key: "enabled",
          type: "boolean",
          label: "Enabled",
          defaultValue: true,
        },
        {
          key: "minRows",
          type: "number",
          label: "Min rows",
          defaultValue: 8,
          min: 1,
          max: 1000,
        },
      ],
    },
  ],
};

const COMBO_PAYLOAD = {
  id: "default",
  name: "Default",
  description: "Default combo",
  pipeline: [],
  languagePacks: [],
  outputMode: null,
};

const ANALYTICS_PAYLOAD = {
  engineId: "headroom",
  runs: 0,
  tokensSaved: 0,
  avgSavingsPercent: 0,
  days: 7,
};

const SETTINGS_PAYLOAD = {
  enabled: true,
  engines: { headroom: { enabled: true } },
  aggressive: {
    summarizerEnabled: true,
    maxTokensPerMessage: 2048,
    minSavingsThreshold: 0.05,
  },
};

function setupFetchMock() {
  vi.spyOn(globalThis, "fetch").mockImplementation(async (input: RequestInfo | URL) => {
    const url = input.toString();
    if (url.includes("/api/compression/engines")) {
      return new Response(JSON.stringify(ENGINE_PAYLOAD), {
        status: 200,
        headers: { "Content-Type": "application/json" },
      });
    }
    if (url.includes("/api/settings/compression")) {
      return new Response(JSON.stringify(SETTINGS_PAYLOAD), {
        status: 200,
        headers: { "Content-Type": "application/json" },
      });
    }
    if (url.includes("/api/context/combos/default")) {
      return new Response(JSON.stringify(COMBO_PAYLOAD), {
        status: 200,
        headers: { "Content-Type": "application/json" },
      });
    }
    if (url.includes("/api/context/analytics/engine")) {
      return new Response(JSON.stringify(ANALYTICS_PAYLOAD), {
        status: 200,
        headers: { "Content-Type": "application/json" },
      });
    }
    if (url.includes("/api/compression/preview")) {
      return new Response(
        JSON.stringify({
          original: "The original context contains duplicated details and verbose wording.",
          compressed: "Original context, deduplicated.",
          originalTokens: 11,
          compressedTokens: 4,
          savingsPct: 63.6,
          diff: [{ type: "removed", text: "duplicated details and verbose wording" }],
        }),
        { status: 200, headers: { "Content-Type": "application/json" } }
      );
    }
    return new Response(JSON.stringify({}), { status: 404 });
  });
}

// ── Tests ─────────────────────────────────────────────────────────────────

describe("EngineConfigPage", () => {
  it("renders the engine name after fetching engine list", async () => {
    setupFetchMock();
    const { EngineConfigPage } =
      await import("../../../src/shared/components/compression/EngineConfigPage");

    let container!: HTMLElement;
    await act(async () => {
      container = mountInContainer(<EngineConfigPage engineId="headroom" />);
    });

    // Flush any pending microtasks from effects
    await act(async () => {
      await Promise.resolve();
    });

    expect(container.textContent).toContain("Headroom");
  });

  it("does NOT render an engine on/off enable toggle (moved to the panel)", async () => {
    setupFetchMock();
    const { EngineConfigPage } =
      await import("../../../src/shared/components/compression/EngineConfigPage");

    let container!: HTMLElement;
    await act(async () => {
      container = mountInContainer(<EngineConfigPage engineId="headroom" />);
    });

    await act(async () => {
      await Promise.resolve();
    });

    // The on/off enable control now lives only in the panel (/dashboard/context/settings).
    expect(container.querySelector("[data-toggle='enable']")).toBeNull();
    expect(container.textContent).not.toContain("Enable layer");
  });

  it("renders the config form field label from fetched schema (EngineConfigForm mounted)", async () => {
    setupFetchMock();
    const { EngineConfigPage } =
      await import("../../../src/shared/components/compression/EngineConfigPage");

    let container!: HTMLElement;
    await act(async () => {
      container = mountInContainer(<EngineConfigPage engineId="headroom" />);
    });

    await act(async () => {
      await Promise.resolve();
    });

    // EngineConfigForm should render the "Min rows" field label from the schema
    expect(container.textContent).toContain("Min rows");
  });

  it("keeps detailed config but renders no engine enable checkbox", async () => {
    setupFetchMock();
    const { EngineConfigPage } =
      await import("../../../src/shared/components/compression/EngineConfigPage");

    let container!: HTMLElement;
    await act(async () => {
      container = mountInContainer(<EngineConfigPage engineId="headroom" />);
    });

    await act(async () => {
      await Promise.resolve();
    });

    // The on/off enable toggle (a checkbox with data-toggle="enable") is gone; the
    // detailed config form (the schema fields minus `enabled`) still renders.
    expect(container.querySelector("input[type='checkbox'][data-toggle='enable']")).toBeNull();
    expect(container.textContent).toContain("Min rows");
    expect(container.textContent).toContain("Configuration");
  });

  it("renders preview original, compressed text, and diff returned by the API", async () => {
    setupFetchMock();
    const { EngineConfigPage } =
      await import("../../../src/shared/components/compression/EngineConfigPage");
    let container!: HTMLElement;
    await act(async () => {
      container = mountInContainer(<EngineConfigPage engineId="headroom" />);
    });

    await act(async () => {
      await Promise.resolve();
    });

    const previewButton = Array.from(container.querySelectorAll("button")).find(
      (button) => button.textContent === "Preview"
    );
    expect(previewButton).toBeTruthy();

    await act(async () => {
      previewButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
      await Promise.resolve();
    });

    expect(container.textContent).toContain(
      "The original context contains duplicated details and verbose wording."
    );
    expect(container.textContent).toContain("Original context, deduplicated.");
    expect(container.textContent).toContain("Diff");
    expect(container.textContent).toContain("duplicated details and verbose wording");
  });

  it("shows empty-state text when analytics returns runs=0", async () => {
    setupFetchMock();
    const { EngineConfigPage } =
      await import("../../../src/shared/components/compression/EngineConfigPage");

    let container!: HTMLElement;
    await act(async () => {
      container = mountInContainer(<EngineConfigPage engineId="headroom" />);
    });

    await act(async () => {
      await Promise.resolve();
    });

    // Should show some "no data" copy
    const hasEmptyState =
      container.textContent?.includes("Sem dados") === true ||
      container.textContent?.includes("No data") === true;
    expect(hasEmptyState).toBe(true);
  });

  it("points to the Compression Settings panel for enabling the layer", async () => {
    setupFetchMock();
    const { EngineConfigPage } =
      await import("../../../src/shared/components/compression/EngineConfigPage");

    let container!: HTMLElement;
    await act(async () => {
      container = mountInContainer(<EngineConfigPage engineId="headroom" />);
    });

    await act(async () => {
      await Promise.resolve();
    });

    // The on/off + level live in the panel now; the page surfaces a link to it.
    const settingsLink = container.querySelector('a[href="/dashboard/context/settings"]');
    expect(settingsLink).not.toBeNull();
    expect(container.textContent).toContain("Compression Settings");
  });

  it("INVARIANT #1: handleSave writes the detailed sub-object to settings/compression, never PUTs combos/default", async () => {
    const AGGRESSIVE_PAYLOAD = {
      engines: [
        {
          id: "aggressive",
          name: "Aggressive",
          description: "Aggressive engine",
          icon: "🗜️",
          stackable: true,
          stackPriority: 30,
          metadata: { description: "Aggressive metadata" },
          configSchema: [
            { key: "enabled", type: "boolean", label: "Enabled", defaultValue: true },
            {
              key: "maxTokensPerMessage",
              type: "number",
              label: "Max tokens per message",
              defaultValue: 2048,
            },
          ],
        },
      ],
    };
    const settingsPuts: { body: Record<string, unknown> }[] = [];
    const comboWrites: { method: string }[] = [];
    vi.spyOn(globalThis, "fetch").mockImplementation(
      async (input: RequestInfo | URL, init?: RequestInit) => {
        const url = input.toString();
        if (url.includes("/api/compression/engines")) {
          return new Response(JSON.stringify(AGGRESSIVE_PAYLOAD), {
            status: 200,
            headers: { "Content-Type": "application/json" },
          });
        }
        if (url.includes("/api/settings/compression")) {
          if (init?.method === "PUT") {
            settingsPuts.push({ body: JSON.parse(init.body as string) });
          }
          return new Response(
            JSON.stringify({
              enabled: true,
              engines: { aggressive: { enabled: true } },
              aggressive: { maxTokensPerMessage: 2048 },
            }),
            { status: 200, headers: { "Content-Type": "application/json" } }
          );
        }
        if (url.includes("/api/context/combos/default")) {
          // A PUT/POST here would violate INVARIANT #1 (the route is a 410 shim).
          if (init?.method === "PUT" || init?.method === "POST") {
            comboWrites.push({ method: init.method });
          }
          return new Response(JSON.stringify(COMBO_PAYLOAD), {
            status: 200,
            headers: { "Content-Type": "application/json" },
          });
        }
        if (url.includes("/api/context/analytics/engine")) {
          return new Response(JSON.stringify(ANALYTICS_PAYLOAD), {
            status: 200,
            headers: { "Content-Type": "application/json" },
          });
        }
        return new Response(JSON.stringify({}), { status: 404 });
      }
    );

    const { EngineConfigPage } =
      await import("../../../src/shared/components/compression/EngineConfigPage");

    let container!: HTMLElement;
    await act(async () => {
      container = mountInContainer(<EngineConfigPage engineId="aggressive" />);
    });

    await act(async () => {
      await Promise.resolve();
    });

    const salvarBtn = Array.from(container.querySelectorAll("button")).find(
      (b) => b.textContent?.includes("Save") || b.textContent?.includes("Salvar")
    );
    expect(salvarBtn).toBeTruthy();
    await act(async () => {
      salvarBtn?.click();
    });
    await act(async () => {
      await Promise.resolve();
    });

    // INVARIANT #1: no write ever lands on the deprecated default-combo route.
    expect(comboWrites).toHaveLength(0);
    // The detailed config persists to the engine's sub-object on settings/compression.
    expect(settingsPuts.length).toBeGreaterThan(0);
    const aggressivePut = settingsPuts.find(
      (c) => typeof c.body.aggressive === "object" && c.body.aggressive !== null
    );
    expect(aggressivePut).toBeDefined();
  });

  it("does not crash when all fetch calls fail (fail-soft)", async () => {
    vi.spyOn(globalThis, "fetch").mockRejectedValue(new Error("Network error"));

    const { EngineConfigPage } =
      await import("../../../src/shared/components/compression/EngineConfigPage");

    let container!: HTMLElement;
    await act(async () => {
      container = mountInContainer(<EngineConfigPage engineId="headroom" />);
    });

    await act(async () => {
      await Promise.resolve();
    });

    // Component should still be mounted (not crashed)
    expect(container).toBeTruthy();
    expect(container.parentNode).toBeTruthy();
  });
});