@copilotkit/react-core 1.54.1 → 1.55.0-next.8

package/src/v2/__tests__/A2UIMessageRenderer.test.tsx

@@ -0,0 +1,176 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, act } from "@testing-library/react";
+import React, { useState } from "react";
+import type { Theme } from "@copilotkit/a2ui-renderer";
+
+vi.mock("../providers", () => ({
+  useCopilotKit: vi.fn(() => ({
+    copilotkit: {
+      properties: {},
+      setProperties: vi.fn(),
+      runAgent: vi.fn().mockResolvedValue(undefined),
+    },
+  })),
+}));
+
+describe("A2UIMessageRenderer rendering integration", () => {
+  it("should render A2UI surface content via React renderer", async () => {
+    const { createA2UIMessageRenderer } =
+      await import("../a2ui/A2UIMessageRenderer.js");
+    const renderer = createA2UIMessageRenderer({
+      theme: {} as Theme,
+    });
+
+    const content = {
+      operations: [
+        {
+          beginRendering: {
+            surfaceId: "test-surface",
+            root: "root",
+            styles: {},
+          },
+        },
+        {
+          surfaceUpdate: {
+            surfaceId: "test-surface",
+            components: [
+              { id: "root", text: { literalString: "Hello World" } },
+            ],
+          },
+        },
+      ],
+    };
+
+    const RenderComponent = renderer.render as React.FC<any>;
+    const TestWrapper = () => (
+      <RenderComponent content={content} agent={null} />
+    );
+
+    let container: HTMLElement;
+    await act(async () => {
+      const result = render(<TestWrapper />);
+      container = result.container;
+    });
+
+    const surfaceElement = container!.querySelector(
+      "[data-surface-id='test-surface']",
+    );
+    expect(surfaceElement).not.toBeNull();
+  });
+
+  it("should update surface when operations change", async () => {
+    const { createA2UIMessageRenderer } =
+      await import("../a2ui/A2UIMessageRenderer.js");
+    const renderer = createA2UIMessageRenderer({
+      theme: {} as Theme,
+    });
+    const RenderComponent = renderer.render as React.FC<any>;
+
+    let setContent: (content: any) => void;
+    const TestWrapper = () => {
+      const [content, _setContent] = useState({
+        operations: [
+          { beginRendering: { surfaceId: "test", root: "root", styles: {} } },
+          {
+            surfaceUpdate: {
+              surfaceId: "test",
+              components: [{ id: "root", text: { literalString: "Initial" } }],
+            },
+          },
+        ],
+      });
+      setContent = _setContent;
+      return <RenderComponent content={content} agent={null} />;
+    };
+
+    let container: HTMLElement;
+    await act(async () => {
+      const result = render(<TestWrapper />);
+      container = result.container;
+    });
+
+    const surfaceElement = container!.querySelector("[data-surface-id='test']");
+    expect(surfaceElement).not.toBeNull();
+
+    await act(async () => {
+      setContent({
+        operations: [
+          { beginRendering: { surfaceId: "test", root: "root", styles: {} } },
+          {
+            surfaceUpdate: {
+              surfaceId: "test",
+              components: [{ id: "root", text: { literalString: "Updated" } }],
+            },
+          },
+        ],
+      });
+    });
+
+    const updatedSurface = container!.querySelector("[data-surface-id='test']");
+    expect(updatedSurface).not.toBeNull();
+  });
+
+  it("should return null when no operations are provided", async () => {
+    const { createA2UIMessageRenderer } =
+      await import("../a2ui/A2UIMessageRenderer.js");
+    const renderer = createA2UIMessageRenderer({
+      theme: {} as Theme,
+    });
+    const RenderComponent = renderer.render as React.FC<any>;
+
+    const TestWrapper = () => (
+      <RenderComponent content={{ operations: [] }} agent={null} />
+    );
+
+    let container: HTMLElement;
+    await act(async () => {
+      const result = render(<TestWrapper />);
+      container = result.container;
+    });
+
+    expect(container!.querySelector("[data-surface-id]")).toBeNull();
+  });
+
+  it("should render multiple surfaces independently", async () => {
+    const { createA2UIMessageRenderer } =
+      await import("../a2ui/A2UIMessageRenderer.js");
+    const renderer = createA2UIMessageRenderer({
+      theme: {} as Theme,
+    });
+    const RenderComponent = renderer.render as React.FC<any>;
+
+    const content = {
+      operations: [
+        { beginRendering: { surfaceId: "s1", root: "r1", styles: {} } },
+        { beginRendering: { surfaceId: "s2", root: "r2", styles: {} } },
+        {
+          surfaceUpdate: {
+            surfaceId: "s1",
+            components: [{ id: "r1", text: { literalString: "Surface 1" } }],
+          },
+        },
+        {
+          surfaceUpdate: {
+            surfaceId: "s2",
+            components: [{ id: "r2", text: { literalString: "Surface 2" } }],
+          },
+        },
+      ],
+    };
+
+    const TestWrapper = () => (
+      <RenderComponent content={content} agent={null} />
+    );
+
+    let container: HTMLElement;
+    await act(async () => {
+      const result = render(<TestWrapper />);
+      container = result.container;
+    });
+
+    const surface1 = container!.querySelector("[data-surface-id='s1']");
+    const surface2 = container!.querySelector("[data-surface-id='s2']");
+    expect(surface1).not.toBeNull();
+    expect(surface2).not.toBeNull();
+  });
+});

package/src/v2/__tests__/globalSetup.ts

@@ -0,0 +1,14 @@
+/**
+ * Runs once in Node before test workers start.
+ * Ensures `window` exists on globalThis so any code that runs during module
+ * resolution (e.g. when Vitest discovers tests) does not throw "window is not defined".
+ * CI can load test files in the main process before jsdom is available in workers.
+ */
+export default function globalSetup() {
+  if (
+    typeof globalThis !== "undefined" &&
+    typeof (globalThis as any).window === "undefined"
+  ) {
+    (globalThis as any).window = globalThis as any;
+  }
+}

package/src/v2/__tests__/setup.ts

@@ -0,0 +1,93 @@
+// Test setup file for Vitest
+// Add any global test configuration here
+import { afterEach, vi } from "vitest";
+import { cleanup } from "@testing-library/react";
+import React from "react";
+
+// Mock ResizeObserver which is not available in jsdom
+global.ResizeObserver = class ResizeObserver {
+  constructor(callback: ResizeObserverCallback) {
+    // Store callback for potential future use
+    this.callback = callback;
+  }
+  callback: ResizeObserverCallback;
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+// Mock scrollIntoView which is not available in jsdom
+HTMLElement.prototype.scrollIntoView = vi.fn();
+
+// Ensure we cleanup between tests to avoid lingering handles
+afterEach(() => {
+  cleanup();
+});
+
+// Mock canvas getContext used by audio recorder during tests
+HTMLCanvasElement.prototype.getContext = function (contextId: any) {
+  if (contextId === "2d") {
+    return {
+      fillRect: () => {},
+      clearRect: () => {},
+      getImageData: () => ({ data: [] }),
+      putImageData: () => {},
+      createImageData: () => ({ data: [] }),
+      setTransform: () => {},
+      drawImage: () => {},
+      save: () => {},
+      restore: () => {},
+      beginPath: () => {},
+      closePath: () => {},
+      moveTo: () => {},
+      lineTo: () => {},
+      stroke: () => {},
+      translate: () => {},
+      scale: () => {},
+      rotate: () => {},
+      arc: () => {},
+      fill: () => {},
+      measureText: (text: string) => ({ width: text.length * 8 }),
+      transform: () => {},
+      rect: () => {},
+      clip: () => {},
+    } as unknown as CanvasRenderingContext2D;
+  }
+  return null;
+} as any;
+
+// Simplify Radix tooltip behavior to avoid act() noise in jsdom
+vi.mock("@radix-ui/react-tooltip", async () => {
+  const forward = (
+    renderFn: React.ForwardRefRenderFunction<HTMLElement, any>,
+  ) => React.forwardRef(renderFn);
+
+  const SimpleProvider: React.FC<{ children?: React.ReactNode }> = ({
+    children,
+  }) => React.createElement(React.Fragment, null, children);
+
+  const SimplePortal: React.FC<{ children?: React.ReactNode }> = ({
+    children,
+  }) => React.createElement(React.Fragment, null, children);
+
+  const createWrapper = () =>
+    forward(
+      ({ children, asChild, sideOffset: _sideOffset, ...rest }: any, ref) => {
+        if (asChild && React.isValidElement(children)) {
+          return React.cloneElement(children, { ref, ...rest });
+        }
+        return React.createElement("div", { ref, ...rest }, children);
+      },
+    );
+
+  const passthrough = createWrapper();
+
+  return {
+    Provider: SimpleProvider,
+    Root: passthrough,
+    Trigger: passthrough,
+    Content: passthrough,
+    Portal: SimplePortal,
+    Arrow: () => null,
+  };
+});