@copilotkit/vue 1.57.1

package/src/v2/components/__tests__/A2UIMessageRenderer.test.ts

@@ -0,0 +1,271 @@
+import { describe, expect, it } from "vitest";
+import { defineComponent, h, ref } from "vue";
+import { render, waitFor } from "@testing-library/vue";
+import { createA2UIMessageRenderer } from "../A2UIMessageRenderer";
+import { CopilotKitKey } from "../../providers/keys";
+
+function copilotKitProvide() {
+  return {
+    [CopilotKitKey as symbol]: {
+      copilotkit: ref({
+        properties: {},
+        setProperties: () => undefined,
+        runAgent: async () => undefined,
+      }),
+      executingToolCallIds: ref(new Set()),
+      a2uiTheme: ref({}),
+      a2uiCatalog: ref(undefined),
+      a2uiLoadingComponent: ref(undefined),
+      a2uiIncludeSchema: ref(true),
+    },
+  };
+}
+
+describe("createA2UIMessageRenderer", () => {
+  it("returns loading state when no operations exist", () => {
+    const renderer = createA2UIMessageRenderer({ theme: {} });
+    const { getByTestId } = render(renderer.render, {
+      props: {
+        activityType: "a2ui-surface",
+        content: {},
+        message: {},
+        agent: {},
+      },
+    });
+    expect(getByTestId("a2ui-loading")).not.toBeNull();
+  });
+
+  it("default loading fallback renders header dot, 'Generating UI...' label, and three pulsing skeleton bars", () => {
+    const renderer = createA2UIMessageRenderer({ theme: {} });
+    const { getByTestId, getAllByTestId, container } = render(renderer.render, {
+      props: {
+        activityType: "a2ui-surface",
+        content: {},
+        message: {},
+        agent: {},
+      },
+    });
+
+    const root = getByTestId("a2ui-loading");
+    expect(root).not.toBeNull();
+    expect((root as HTMLElement).textContent ?? "").toContain(
+      "Generating UI...",
+    );
+
+    const dot = getByTestId("a2ui-loading-dot") as HTMLElement;
+    expect(dot.getAttribute("style") ?? "").toMatch(/cpk-a2ui-pulse/);
+
+    const bars = getAllByTestId("a2ui-loading-bar") as HTMLElement[];
+    expect(bars).toHaveLength(3);
+
+    const widthMatches = bars.map((bar) => {
+      const style = bar.getAttribute("style") ?? "";
+      const match = style.match(/width:\s*([\d.]+)%/);
+      expect(style).toMatch(/cpk-a2ui-pulse/);
+      return match ? Number(match[1]) : null;
+    });
+    expect(widthMatches).toEqual([80, 60, 40]);
+
+    const styleTag = container.querySelector("style");
+    expect(styleTag?.textContent ?? "").toContain("@keyframes cpk-a2ui-pulse");
+  });
+
+  it("renders custom loading component when provided", () => {
+    const CustomLoading = defineComponent({
+      name: "CustomLoading",
+      setup() {
+        return () => h("div", { "data-testid": "custom-loading" }, "Loading");
+      },
+    });
+    const renderer = createA2UIMessageRenderer({
+      theme: {},
+      loadingComponent: CustomLoading,
+    });
+    const { getByTestId } = render(renderer.render, {
+      props: {
+        activityType: "a2ui-surface",
+        content: {},
+        message: {},
+        agent: {},
+      },
+    });
+    expect(getByTestId("custom-loading")).not.toBeNull();
+  });
+
+  it("renders A2UI surface when operations exist", async () => {
+    const renderer = createA2UIMessageRenderer({ theme: {} });
+    const { container, getByTestId, queryByTestId } = render(renderer.render, {
+      props: {
+        activityType: "a2ui-surface",
+        content: {
+          a2ui_operations: [
+            {
+              version: "v0.9",
+              createSurface: {
+                surfaceId: "surface-1",
+                catalogId:
+                  "https://a2ui.org/specification/v0_9/basic_catalog.json",
+              },
+            },
+            {
+              version: "v0.9",
+              updateComponents: {
+                surfaceId: "surface-1",
+                components: [
+                  {
+                    id: "root",
+                    component: "Text",
+                    text: "Hello",
+                    variant: "body",
+                  },
+                ],
+              },
+            },
+          ],
+        },
+        message: {},
+        agent: {},
+      },
+      global: {
+        provide: copilotKitProvide(),
+      },
+    });
+    await waitFor(
+      () => {
+        expect(queryByTestId("a2ui-loading")).toBeNull();
+        expect(container.querySelector("[data-copilotkit]")).not.toBeNull();
+        expect(getByTestId("a2ui-activity-renderer")).not.toBeNull();
+      },
+      { timeout: 5000 },
+    );
+  });
+
+  it("updates rendered surface when operations change", async () => {
+    const renderer = createA2UIMessageRenderer({ theme: {} });
+    const mounted = render(renderer.render, {
+      props: {
+        activityType: "a2ui-surface",
+        content: {
+          a2ui_operations: [
+            {
+              version: "v0.9",
+              createSurface: {
+                surfaceId: "test",
+                catalogId:
+                  "https://a2ui.org/specification/v0_9/basic_catalog.json",
+              },
+            },
+            {
+              version: "v0.9",
+              updateComponents: {
+                surfaceId: "test",
+                components: [
+                  {
+                    id: "root",
+                    component: "Text",
+                    text: "Initial",
+                    variant: "body",
+                  },
+                ],
+              },
+            },
+          ],
+        },
+        message: {},
+        agent: {},
+      },
+      global: {
+        provide: copilotKitProvide(),
+      },
+    });
+
+    await waitFor(() => {
+      expect(
+        mounted.container.querySelector("[data-surface-id='test']"),
+      ).not.toBeNull();
+      expect(mounted.container.textContent ?? "").toContain("Initial");
+    });
+
+    await mounted.rerender({
+      activityType: "a2ui-surface",
+      content: {
+        a2ui_operations: [
+          {
+            version: "v0.9",
+            createSurface: {
+              surfaceId: "test",
+              catalogId:
+                "https://a2ui.org/specification/v0_9/basic_catalog.json",
+            },
+          },
+          {
+            version: "v0.9",
+            updateComponents: {
+              surfaceId: "test",
+              components: [
+                {
+                  id: "root",
+                  component: "Text",
+                  text: "Updated",
+                  variant: "body",
+                },
+              ],
+            },
+          },
+        ],
+      },
+      message: {},
+      agent: {},
+    });
+
+    await waitFor(() => {
+      const updatedSurface = mounted.container.querySelector(
+        "[data-surface-id='test']",
+      );
+      expect(updatedSurface).not.toBeNull();
+      expect(mounted.container.textContent ?? "").toContain("Updated");
+      // Text content flipped from "Initial" to "Updated" while the surface id
+      // stayed the same — proving an in-place update rather than a replacement.
+      expect(mounted.container.textContent ?? "").not.toContain("Initial");
+    });
+  });
+
+  it("renders multiple surfaces independently", async () => {
+    const renderer = createA2UIMessageRenderer({ theme: {} });
+    const { container } = render(renderer.render, {
+      props: {
+        activityType: "a2ui-surface",
+        content: {
+          a2ui_operations: [
+            {
+              version: "v0.9",
+              createSurface: {
+                surfaceId: "s1",
+                catalogId:
+                  "https://a2ui.org/specification/v0_9/basic_catalog.json",
+              },
+            },
+            {
+              version: "v0.9",
+              createSurface: {
+                surfaceId: "s2",
+                catalogId:
+                  "https://a2ui.org/specification/v0_9/basic_catalog.json",
+              },
+            },
+          ],
+        },
+        message: {},
+        agent: {},
+      },
+      global: {
+        provide: copilotKitProvide(),
+      },
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector("[data-surface-id='s1']")).not.toBeNull();
+      expect(container.querySelector("[data-surface-id='s2']")).not.toBeNull();
+    });
+  });
+});

package/src/v2/components/__tests__/CopilotKitInspector.test.ts

@@ -0,0 +1,57 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { nextTick } from "vue";
+import { mount } from "@vue/test-utils";
+import { defineWebInspector } from "@copilotkit/web-inspector";
+import CopilotKitInspector from "../CopilotKitInspector.vue";
+import { CopilotKitCoreVue } from "../../lib/vue-core";
+
+async function settleInspectorLoad() {
+  await nextTick();
+  await vi.dynamicImportSettled();
+  await nextTick();
+}
+
+describe("CopilotKitInspector", () => {
+  beforeEach(() => {
+    vi.mocked(defineWebInspector).mockClear();
+  });
+
+  it("renders nothing until the web inspector module resolves", async () => {
+    const wrapper = mount(CopilotKitInspector);
+
+    expect(wrapper.html()).toBe("<!--v-if-->");
+
+    await settleInspectorLoad();
+
+    expect(wrapper.find("cpk-web-inspector").exists()).toBe(true);
+    expect(defineWebInspector).toHaveBeenCalledTimes(1);
+  });
+
+  it("forwards core and arbitrary attributes to the web inspector element", async () => {
+    const core = new CopilotKitCoreVue({
+      runtimeUrl: "/api/copilotkit",
+    });
+
+    const wrapper = mount(CopilotKitInspector, {
+      props: {
+        core,
+      },
+      attrs: {
+        "data-testid": "inspector",
+        "data-surface": "storybook",
+      },
+    });
+
+    await settleInspectorLoad();
+
+    const inspector = wrapper.get("cpk-web-inspector");
+    const resolvedCore = (
+      inspector.element as HTMLElement & { core?: CopilotKitCoreVue }
+    ).core;
+
+    expect(inspector.attributes("data-testid")).toBe("inspector");
+    expect(inspector.attributes("data-surface")).toBe("storybook");
+    expect(resolvedCore).toBeInstanceOf(CopilotKitCoreVue);
+    expect(resolvedCore?.runtimeUrl).toBe("/api/copilotkit");
+  });
+});