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

package/src/v2/components/chat/__tests__/CopilotChatCssClasses.test.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
+import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
+import CopilotChatMessageView from "../CopilotChatMessageView";
+import { CopilotChatAssistantMessage } from "../CopilotChatAssistantMessage";
+import { CopilotChatUserMessage } from "../CopilotChatUserMessage";
+import { CopilotChatInput } from "../CopilotChatInput";
+import { CopilotModalHeader } from "../CopilotModalHeader";
+import { CopilotChatToggleButton } from "../CopilotChatToggleButton";
+import { CopilotChatView } from "../CopilotChatView";
+import { AssistantMessage, Message, UserMessage } from "@ag-ui/core";
+
+const TEST_THREAD_ID = "test-thread";
+
+const renderWithProvider = (component: React.ReactElement) => {
+  return render(
+    <CopilotKitProvider>
+      <CopilotChatConfigurationProvider threadId={TEST_THREAD_ID}>
+        {component}
+      </CopilotChatConfigurationProvider>
+    </CopilotKitProvider>,
+  );
+};
+
+describe("v2 CopilotChat CSS class compatibility with v1", () => {
+  describe("CopilotChatMessageView", () => {
+    it("includes copilotKitMessages class", () => {
+      const messages: Message[] = [];
+
+      renderWithProvider(<CopilotChatMessageView messages={messages} />);
+
+      const messageList = screen.getByTestId("copilot-message-list");
+      expect(messageList.className).toContain("copilotKitMessages");
+    });
+  });
+
+  describe("CopilotChatAssistantMessage", () => {
+    it("includes copilotKitMessage and copilotKitAssistantMessage classes", () => {
+      const message: AssistantMessage = {
+        role: "assistant",
+        content: "Hello from the assistant",
+        id: "test-assistant-1",
+      };
+
+      renderWithProvider(<CopilotChatAssistantMessage message={message} />);
+
+      const el = screen.getByTestId("copilot-assistant-message");
+      expect(el.className).toContain("copilotKitMessage");
+      expect(el.className).toContain("copilotKitAssistantMessage");
+    });
+  });
+
+  describe("CopilotChatUserMessage", () => {
+    it("includes copilotKitMessage and copilotKitUserMessage classes", () => {
+      const message: UserMessage = {
+        role: "user",
+        content: "Hello from the user",
+        id: "test-user-1",
+      };
+
+      renderWithProvider(<CopilotChatUserMessage message={message} />);
+
+      const el = screen.getByTestId("copilot-user-message");
+      expect(el.className).toContain("copilotKitMessage");
+      expect(el.className).toContain("copilotKitUserMessage");
+    });
+  });
+
+  describe("CopilotChatInput", () => {
+    it("includes copilotKitInput class", () => {
+      renderWithProvider(<CopilotChatInput />);
+
+      const el = screen.getByTestId("copilot-chat-input");
+      expect(el.className).toContain("copilotKitInput");
+    });
+  });
+
+  describe("CopilotModalHeader", () => {
+    it("includes copilotKitHeader class", () => {
+      renderWithProvider(<CopilotModalHeader />);
+
+      const el = screen.getByTestId("copilot-modal-header");
+      expect(el.className).toContain("copilotKitHeader");
+    });
+  });
+
+  describe("CopilotChatToggleButton", () => {
+    it("includes copilotKitButton class", () => {
+      renderWithProvider(<CopilotChatToggleButton />);
+
+      const el = screen.getByTestId("copilot-chat-toggle");
+      expect(el.className).toContain("copilotKitButton");
+    });
+  });
+
+  describe("CopilotChatView", () => {
+    it("includes copilotKitChat class", () => {
+      renderWithProvider(
+        <CopilotChatView messages={[]} welcomeScreen={false} />,
+      );
+
+      const el = screen.getByTestId("copilot-chat");
+      expect(el.className).toContain("copilotKitChat");
+    });
+  });
+});