@copilotkit/react-core 1.55.3-canary.1776215089 → 1.55.3-canary.1776243725

package/src/v2/components/chat/__tests__/CopilotChatCopyButton.clipboard.test.tsx

@@ -0,0 +1,241 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { CopilotChatAssistantMessage } from "../CopilotChatAssistantMessage";
+import { CopilotChatUserMessage } from "../CopilotChatUserMessage";
+import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
+import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
+import { AssistantMessage, UserMessage } from "@ag-ui/core";
+
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <CopilotKitProvider>
+    <CopilotChatConfigurationProvider threadId="test-thread">
+      {children}
+    </CopilotChatConfigurationProvider>
+  </CopilotKitProvider>
+);
+
+const createAssistantMessage = (content: string): AssistantMessage => ({
+  id: "msg-assistant-1",
+  role: "assistant",
+  content,
+});
+
+const createUserMessage = (content: string): UserMessage => ({
+  id: "msg-user-1",
+  role: "user",
+  content,
+});
+
+describe("CopyButton clipboard behavior", () => {
+  let originalClipboard: Clipboard;
+
+  beforeEach(() => {
+    originalClipboard = navigator.clipboard;
+  });
+
+  afterEach(() => {
+    Object.defineProperty(navigator, "clipboard", {
+      value: originalClipboard,
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  describe("AssistantMessage CopyButton", () => {
+    it("shows copied state only after successful clipboard write", async () => {
+      const writeTextMock = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText: writeTextMock },
+        writable: true,
+        configurable: true,
+      });
+
+      const message = createAssistantMessage("Hello assistant");
+      render(
+        <TestWrapper>
+          <CopilotChatAssistantMessage message={message} />
+        </TestWrapper>,
+      );
+
+      const copyButton = screen.getByTestId("copilot-copy-button");
+      fireEvent.click(copyButton);
+
+      await waitFor(() => {
+        expect(writeTextMock).toHaveBeenCalledWith("Hello assistant");
+      });
+
+      // After successful write, should show check icon
+      await waitFor(() => {
+        const checkIcon = copyButton.querySelector(".lucide-check");
+        expect(checkIcon).not.toBeNull();
+      });
+    });
+
+    it("does NOT show copied state when clipboard API is unavailable", async () => {
+      Object.defineProperty(navigator, "clipboard", {
+        value: undefined,
+        writable: true,
+        configurable: true,
+      });
+
+      const message = createAssistantMessage("Hello assistant");
+      render(
+        <TestWrapper>
+          <CopilotChatAssistantMessage message={message} />
+        </TestWrapper>,
+      );
+
+      const copyButton = screen.getByTestId("copilot-copy-button");
+      fireEvent.click(copyButton);
+
+      // Wait a tick for any async handlers
+      await new Promise((r) => setTimeout(r, 50));
+
+      // Should still show copy icon (not check icon)
+      const checkIcon = copyButton.querySelector(".lucide-check");
+      expect(checkIcon).toBeNull();
+      const copyIcon = copyButton.querySelector(".lucide-copy");
+      expect(copyIcon).not.toBeNull();
+    });
+
+    it("logs error when clipboard write rejects", async () => {
+      const writeTextMock = vi
+        .fn()
+        .mockRejectedValue(new Error("Permission denied"));
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText: writeTextMock },
+        writable: true,
+        configurable: true,
+      });
+
+      const consoleSpy = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+
+      const message = createAssistantMessage("Hello assistant");
+      render(
+        <TestWrapper>
+          <CopilotChatAssistantMessage message={message} />
+        </TestWrapper>,
+      );
+
+      const copyButton = screen.getByTestId("copilot-copy-button");
+      fireEvent.click(copyButton);
+
+      await waitFor(() => {
+        expect(writeTextMock).toHaveBeenCalled();
+      });
+
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          "Failed to copy to clipboard:",
+          expect.any(Error),
+        );
+      });
+
+      // Should NOT show copied state when write failed
+      const checkIcon = copyButton.querySelector(".lucide-check");
+      expect(checkIcon).toBeNull();
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe("UserMessage CopyButton", () => {
+    it("shows copied state only after successful clipboard write", async () => {
+      const writeTextMock = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText: writeTextMock },
+        writable: true,
+        configurable: true,
+      });
+
+      const message = createUserMessage("Hello user");
+      render(
+        <TestWrapper>
+          <CopilotChatUserMessage message={message} />
+        </TestWrapper>,
+      );
+
+      const copyButton = screen.getByTestId("copilot-user-copy-button");
+      fireEvent.click(copyButton);
+
+      await waitFor(() => {
+        expect(writeTextMock).toHaveBeenCalledWith("Hello user");
+      });
+
+      await waitFor(() => {
+        const checkIcon = copyButton.querySelector(".lucide-check");
+        expect(checkIcon).not.toBeNull();
+      });
+    });
+
+    it("does NOT show copied state when clipboard API is unavailable", async () => {
+      Object.defineProperty(navigator, "clipboard", {
+        value: undefined,
+        writable: true,
+        configurable: true,
+      });
+
+      const message = createUserMessage("Hello user");
+      render(
+        <TestWrapper>
+          <CopilotChatUserMessage message={message} />
+        </TestWrapper>,
+      );
+
+      const copyButton = screen.getByTestId("copilot-user-copy-button");
+      fireEvent.click(copyButton);
+
+      await new Promise((r) => setTimeout(r, 50));
+
+      const checkIcon = copyButton.querySelector(".lucide-check");
+      expect(checkIcon).toBeNull();
+      const copyIcon = copyButton.querySelector(".lucide-copy");
+      expect(copyIcon).not.toBeNull();
+    });
+
+    it("logs error when clipboard write rejects", async () => {
+      const writeTextMock = vi
+        .fn()
+        .mockRejectedValue(new Error("Permission denied"));
+      Object.defineProperty(navigator, "clipboard", {
+        value: { writeText: writeTextMock },
+        writable: true,
+        configurable: true,
+      });
+
+      const consoleSpy = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+
+      const message = createUserMessage("Hello user");
+      render(
+        <TestWrapper>
+          <CopilotChatUserMessage message={message} />
+        </TestWrapper>,
+      );
+
+      const copyButton = screen.getByTestId("copilot-user-copy-button");
+      fireEvent.click(copyButton);
+
+      await waitFor(() => {
+        expect(writeTextMock).toHaveBeenCalled();
+      });
+
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          "Failed to copy to clipboard:",
+          expect.any(Error),
+        );
+      });
+
+      // Should NOT show copied state when write failed
+      const checkIcon = copyButton.querySelector(".lucide-check");
+      expect(checkIcon).toBeNull();
+
+      consoleSpy.mockRestore();
+    });
+  });
+});