@yh-ui/components 0.1.16 → 0.1.21

package/dist/ai-bubble/__tests__/ai-bubble.test.mjs

@@ -1,23 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { mount } from "@vue/test-utils";
-vi.mock("markdown-it", async () => {
-  class MockMd {
-    inline = {
-      ruler: {
-        after: vi.fn()
-      }
-    };
-    render(content) {
-      return `<p>${content}</p>`;
-    }
-  }
-  return { default: MockMd };
-});
-vi.mock("highlight.js", () => ({
-  default: { getLanguage: () => false, highlight: vi.fn() }
-}));
-vi.mock("highlight.js/styles/atom-one-dark.css", () => ({}));
-const { default: AiBubble } = await import("../src/ai-bubble.vue");
+import AiBubble from "../src/ai-bubble.vue";
 describe("YhAiBubble", () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -120,4 +103,291 @@ describe("YhAiBubble", () => {
     });
     expect(wrapper.find(".custom-avatar").exists()).toBe(true);
   });
+  it("should render multimodal content - image", () => {
+    const multimodal = [{ type: "image", url: "img.png", title: "test image" }];
+    const wrapper = mount(AiBubble, { props: { content: "", multimodal } });
+    expect(wrapper.find(".yh-ai-bubble__image-grid").exists()).toBe(true);
+  });
+  it("should render multimodal content - audio", async () => {
+    const multimodal = [{ type: "audio", url: "audio.mp3", title: "test audio" }];
+    const wrapper = mount(AiBubble, { props: { content: "", multimodal } });
+    expect(wrapper.find(".yh-ai-bubble__audio-player").exists()).toBe(true);
+    const playMock = vi.fn().mockResolvedValue(void 0);
+    const pauseMock = vi.fn();
+    class MockAudio {
+      play = playMock;
+      pause = pauseMock;
+      onended = null;
+    }
+    vi.stubGlobal("Audio", MockAudio);
+    await wrapper.find(".yh-ai-bubble__audio-player button").trigger("click");
+    expect(playMock).toHaveBeenCalled();
+    await wrapper.find(".yh-ai-bubble__audio-player button").trigger("click");
+    expect(pauseMock).toHaveBeenCalled();
+  });
+  it("should render multimodal content - file", () => {
+    const multimodal = [{ type: "file", url: "test.pdf", title: "test.pdf", size: "10KB" }];
+    const wrapper = mount(AiBubble, { props: { content: "", multimodal } });
+    expect(wrapper.find(".yh-ai-bubble__file-card").exists()).toBe(true);
+    expect(wrapper.html()).toContain("10KB");
+  });
+  it("should render JSON structured data", () => {
+    const structuredData = { type: "json", data: { name: "test" } };
+    const wrapper = mount(AiBubble, { props: { content: "", structuredData } });
+    expect(wrapper.find(".yh-ai-bubble__json-viewer").exists()).toBe(true);
+  });
+  it("should render thought-chain structured data", () => {
+    const structuredData = { type: "thought-chain", data: [] };
+    const wrapper = mount(AiBubble, { props: { content: "", structuredData } });
+    expect(wrapper.findComponent({ name: "YhAiThoughtChain" }).exists()).toBe(true);
+  });
+  it("should handle citation click", async () => {
+    const onCitationClick = vi.fn();
+    const cita = { id: 1, title: "link", url: "http://x.com" };
+    const wrapper = mount(AiBubble, {
+      props: { content: "test [1]", citations: [cita], onCitationClick }
+    });
+    await wrapper.find(".yh-ai-bubble__citation-item").trigger("click");
+    expect(onCitationClick).toHaveBeenCalledWith(cita);
+    const openSpy = vi.spyOn(window, "open").mockImplementation(() => null);
+    const wrapper2 = mount(AiBubble, {
+      props: { content: "test", citations: [cita] }
+    });
+    await wrapper2.find(".yh-ai-bubble__citation-item").trigger("click");
+    expect(openSpy).toHaveBeenCalledWith("http://x.com", "_blank");
+  });
+  it("should show citation tooltip on hover", async () => {
+    vi.useFakeTimers();
+    const cita = { id: "1", title: "ref 1", content: "detailed info" };
+    const wrapper = mount(AiBubble, {
+      props: { content: "test", citations: [cita] }
+    });
+    const mockEvent = {
+      target: {
+        classList: { contains: (c) => c === "yh-ai-citation" },
+        getAttribute: (a) => a === "data-id" ? "1" : null,
+        getBoundingClientRect: () => ({ top: 100, left: 100, width: 20 })
+      }
+    };
+    wrapper.vm.handleCitationHover(mockEvent);
+    expect(wrapper.vm.hoveredCitation).toEqual(cita);
+    wrapper.vm.handleCitationLeave(mockEvent);
+    vi.advanceTimersByTime(300);
+    expect(wrapper.vm.hoveredCitation).toBeNull();
+    vi.useRealTimers();
+  });
+  it("should handle code block actions - collapse", async () => {
+    const wrapper = mount(AiBubble);
+    const mockEvent = {
+      target: {
+        classList: { contains: (c) => c === "collapse-btn" || c === "code-action-btn" },
+        getAttribute: (a) => a === "data-id" ? "cb-1" : null
+      }
+    };
+    await wrapper.vm.handleCodeBlockAction(mockEvent);
+    expect(wrapper.vm.expandedCodeBlocks.has("cb-1")).toBe(true);
+  });
+  it("should trigger download on button click", async () => {
+    const openSpy = vi.spyOn(window, "open").mockImplementation(() => null);
+    const multimodal = [{ type: "file", url: "test.zip", title: "test" }];
+    const wrapper = mount(AiBubble, { props: { content: "", multimodal } });
+    await wrapper.find(".yh-ai-bubble__file-card button").trigger("click");
+    expect(openSpy).toHaveBeenCalledWith("test.zip", "_blank");
+  });
+  it("getFileIcon should return correct icons", () => {
+    const wrapper = mount(AiBubble);
+    const getFileIcon = wrapper.vm.getFileIcon;
+    expect(getFileIcon("test.pdf")).toBe("file-pdf");
+    expect(getFileIcon("test.xlsx")).toBe("file-excel");
+    expect(getFileIcon("test.docx")).toBe("file-word");
+    expect(getFileIcon("test.mp4")).toBe("file-video");
+    expect(getFileIcon("test.mp3")).toBe("file-audio");
+    expect(getFileIcon("test.txt")).toBe("file-txt");
+    expect(getFileIcon("unknown")).toBe("document");
+  });
+  it("should handle code block actions - copy", async () => {
+    const wrapper = mount(AiBubble, { props: { content: "```js\nconsole.log(1)\n```" } });
+    const copySpy = vi.spyOn(navigator.clipboard, "writeText").mockResolvedValue(void 0);
+    const mockEvent = {
+      target: {
+        classList: { contains: (c) => c === "code-action-btn" || c === "copy-btn" },
+        getAttribute: (a) => {
+          if (a === "data-code") return encodeURIComponent("console.log(1)");
+          if (a === "data-id") return "cb-1";
+          return null;
+        }
+      }
+    };
+    await wrapper.vm.handleCodeBlockAction(mockEvent);
+    expect(copySpy).toHaveBeenCalledWith("console.log(1)");
+  });
+  it("should handle code block actions - run", async () => {
+    const onRunCode = vi.fn().mockResolvedValue({ output: "done" });
+    const wrapper = mount(AiBubble, { props: { content: "```js\n1+1\n```", onRunCode } });
+    const mockEvent = {
+      target: {
+        classList: { contains: (c) => c === "code-action-btn" || c === "run-btn" },
+        getAttribute: (a) => {
+          if (a === "data-code") return encodeURIComponent("1+1");
+          if (a === "data-lang") return "js";
+          if (a === "data-id") return "cb-1";
+          return null;
+        }
+      }
+    };
+    await wrapper.vm.handleCodeBlockAction(mockEvent);
+    expect(onRunCode).toHaveBeenCalled();
+  });
+  it("should toggle code block expansion", () => {
+    const wrapper = mount(AiBubble);
+    wrapper.vm.toggleCodeBlock("cb-1");
+    expect(wrapper.vm.expandedCodeBlocks.has("cb-1")).toBe(true);
+    wrapper.vm.toggleCodeBlock("cb-1");
+    expect(wrapper.vm.expandedCodeBlocks.has("cb-1")).toBe(false);
+  });
+  it("should handle explain code block", async () => {
+    const onExplainCode = vi.fn().mockResolvedValue("explanation");
+    const wrapper = mount(AiBubble, { props: { onExplainCode } });
+    const mockEvent = {
+      target: {
+        classList: { contains: (c) => c === "explain-btn" || c === "code-action-btn" },
+        getAttribute: (a) => {
+          if (a === "data-code") return "code";
+          if (a === "data-lang") return "js";
+          if (a === "data-id") return "cb-1";
+          return null;
+        }
+      }
+    };
+    await wrapper.vm.handleCodeBlockAction(mockEvent);
+    expect(onExplainCode).toHaveBeenCalled();
+    expect(wrapper.vm.codeOutput["cb-1"]).toEqual(["explanation"]);
+  });
+  it("should handle code block actions - edit", async () => {
+    const mockEditor = {
+      dispose: vi.fn(),
+      getValue: vi.fn().mockReturnValue("edited code")
+    };
+    const mockMonaco = {
+      editor: {
+        create: vi.fn().mockReturnValue(mockEditor)
+      }
+    };
+    const wrapper = mount(AiBubble);
+    wrapper.vm.monaco = mockMonaco;
+    const mockEvent = {
+      target: {
+        classList: { contains: (c) => c === "code-action-btn" || c === "edit-btn" },
+        getAttribute: (a) => {
+          if (a === "data-code") return encodeURIComponent("raw context");
+          if (a === "data-lang") return "javascript";
+          if (a === "data-id") return "cb-1";
+          return null;
+        }
+      }
+    };
+    await wrapper.vm.handleCodeBlockAction(mockEvent);
+    expect(wrapper.vm.editingCodeBlock).toBe("cb-1");
+    await wrapper.vm.saveEditCode("cb-1");
+    expect(wrapper.vm.editingCodeBlock).toBeNull();
+  });
+  it("should handle onRunCode with async iterator", async () => {
+    const mockGenerator = async function* () {
+      yield { output: "chunk 1" };
+      yield { output: "chunk 2" };
+    };
+    const onRunCode = vi.fn().mockResolvedValue(mockGenerator());
+    const wrapper = mount(AiBubble, { props: { onRunCode } });
+    const mockEvent = {
+      target: {
+        classList: { contains: (c) => c === "run-btn" || c === "code-action-btn" },
+        getAttribute: (a) => {
+          if (a === "data-code") return "code";
+          if (a === "data-lang") return "js";
+          if (a === "data-id") return "cb-1";
+          return null;
+        }
+      }
+    };
+    await wrapper.vm.handleCodeBlockAction(mockEvent);
+    expect(onRunCode).toHaveBeenCalled();
+  });
+  it("should support streaming increments", async () => {
+    vi.useFakeTimers();
+    const onStreamComplete = vi.fn();
+    const wrapper = mount(AiBubble, {
+      props: {
+        content: "hello world",
+        typing: true,
+        streaming: true,
+        streamSpeed: 2,
+        streamInterval: 10,
+        onStreamComplete
+      }
+    });
+    vi.advanceTimersByTime(100);
+    await wrapper.vm.$nextTick();
+    expect(onStreamComplete).toHaveBeenCalled();
+    vi.useRealTimers();
+  });
+  it("should render table structured data", () => {
+    const structuredData = {
+      type: "table",
+      data: { headers: ["A", "B"], rows: [["1", "2"]] }
+    };
+    const wrapper = mount(AiBubble, { props: { content: "", structuredData } });
+    expect(wrapper.find("table").exists()).toBe(true);
+    expect(wrapper.find("th").text()).toBe("A");
+  });
+  it("should handle markdown=true but no mdi initialized", async () => {
+    const wrapper = mount(AiBubble, { props: { content: "hi", markdown: true } });
+    expect(wrapper.find(".yh-ai-bubble__markdown").exists()).toBe(true);
+  });
+  it("should handle multimodal download", async () => {
+    const openSpy = vi.spyOn(window, "open").mockImplementation(() => null);
+    const wrapper = mount(AiBubble);
+    wrapper.vm.handleDownload("test.zip");
+    expect(openSpy).toHaveBeenCalledWith("test.zip", "_blank");
+  });
+  it("should hit onBeforeUnmount", () => {
+    const wrapper = mount(AiBubble, { props: { content: "test" } });
+    wrapper.unmount();
+  });
+  it("should test escapeHtml utility", () => {
+    const wrapper = mount(AiBubble);
+    const escapeHtml = wrapper.vm.escapeHtml;
+    expect(escapeHtml(`<div>&"'</div>`)).toBe("&lt;div&gt;&amp;&quot;&#39;&lt;/div&gt;");
+  });
+  it("should support sentence stream mode", async () => {
+    vi.useFakeTimers();
+    const onStreamComplete = vi.fn();
+    mount(AiBubble, {
+      props: {
+        content: "Sentence one. Sentence two!",
+        typing: true,
+        streaming: true,
+        streamMode: "sentence",
+        onStreamComplete
+      }
+    });
+    vi.advanceTimersByTime(1e3);
+    expect(onStreamComplete).toHaveBeenCalled();
+    vi.useRealTimers();
+  });
+  it("should support paragraph stream mode", async () => {
+    vi.useFakeTimers();
+    const onStreamComplete = vi.fn();
+    mount(AiBubble, {
+      props: {
+        content: "Para one\n\nPara two",
+        typing: true,
+        streaming: true,
+        streamMode: "paragraph",
+        onStreamComplete
+      }
+    });
+    vi.advanceTimersByTime(1e3);
+    expect(onStreamComplete).toHaveBeenCalled();
+    vi.useRealTimers();
+  });
 });