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

package/src/v2/components/chat/__tests__/CopilotModalHeader.slots.e2e.test.tsx

@@ -0,0 +1,484 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { CopilotModalHeader } from "../CopilotModalHeader";
+import { CopilotKitProvider } from "../../../providers/CopilotKitProvider";
+import { CopilotChatConfigurationProvider } from "../../../providers/CopilotChatConfigurationProvider";
+
+// Wrapper to provide required context
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <CopilotKitProvider>
+    <CopilotChatConfigurationProvider threadId="test-thread">
+      {children}
+    </CopilotChatConfigurationProvider>
+  </CopilotKitProvider>
+);
+
+describe("CopilotModalHeader Slot System E2E Tests", () => {
+  // ============================================================================
+  // 1. TAILWIND CLASS TESTS
+  // ============================================================================
+  describe("1. Tailwind Class Slot Override", () => {
+    describe("titleContent slot", () => {
+      it("should apply tailwind class string to titleContent", () => {
+        const { container } = render(
+          <TestWrapper>
+            <CopilotModalHeader
+              title="Test Title"
+              titleContent="text-2xl font-bold text-blue-600"
+            />
+          </TestWrapper>,
+        );
+
+        const title = container.querySelector(".text-2xl");
+        expect(title).toBeDefined();
+        expect(title?.classList.contains("font-bold")).toBe(true);
+        expect(title?.classList.contains("text-blue-600")).toBe(true);
+      });
+
+      it("should merge titleContent classes with defaults", () => {
+        const { container } = render(
+          <TestWrapper>
+            <CopilotModalHeader
+              title="Test Title"
+              titleContent="custom-title-class"
+            />
+          </TestWrapper>,
+        );
+
+        const title = container.querySelector(".custom-title-class");
+        expect(title).toBeDefined();
+        // Should still have default text-foreground
+        expect(title?.classList.contains("cpk:text-foreground")).toBe(true);
+      });
+    });
+
+    describe("closeButton slot", () => {
+      it("should apply tailwind class string to closeButton", () => {
+        const { container } = render(
+          <TestWrapper>
+            <CopilotModalHeader
+              title="Test Title"
+              closeButton="bg-red-100 hover:bg-red-200 text-red-600"
+            />
+          </TestWrapper>,
+        );
+
+        const closeBtn = container.querySelector(".bg-red-100");
+        expect(closeBtn).toBeDefined();
+        expect(closeBtn?.classList.contains("text-red-600")).toBe(true);
+      });
+
+      it("should override default rounded-full with custom border radius", () => {
+        const { container } = render(
+          <TestWrapper>
+            <CopilotModalHeader title="Test Title" closeButton="rounded-lg" />
+          </TestWrapper>,
+        );
+
+        const closeBtn = container.querySelector(".rounded-lg");
+        expect(closeBtn).toBeDefined();
+      });
+    });
+  });
+
+  // ============================================================================
+  // 2. PROPERTY PASSING TESTS
+  // ============================================================================
+  describe("2. Property Passing (onClick, disabled, etc.)", () => {
+    describe("titleContent slot", () => {
+      it("should pass custom props to titleContent", () => {
+        render(
+          <TestWrapper>
+            <CopilotModalHeader
+              title="Test Title"
+              titleContent={{ "data-testid": "custom-title" }}
+            />
+          </TestWrapper>,
+        );
+
+        const title = screen.queryByTestId("custom-title");
+        expect(title).toBeDefined();
+        expect(title?.textContent).toBe("Test Title");
+      });
+
+      it("should pass custom onClick to titleContent", () => {
+        const onClick = vi.fn();
+        render(
+          <TestWrapper>
+            <CopilotModalHeader
+              title="Click Me"
+              titleContent={{ onClick, "data-testid": "clickable-title" }}
+            />
+          </TestWrapper>,
+        );
+
+        const title = screen.queryByTestId("clickable-title");
+        if (title) {
+          fireEvent.click(title);
+          expect(onClick).toHaveBeenCalled();
+        }
+      });
+    });
+
+    describe("closeButton slot", () => {
+      it("should pass custom onClick that overrides default close behavior", () => {
+        const customOnClick = vi.fn();
+        const { container } = render(
+          <TestWrapper>
+            <CopilotModalHeader
+              title="Test Title"
+              closeButton={{ onClick: customOnClick }}
+            />
+          </TestWrapper>,
+        );
+
+        const closeBtn = container.querySelector('button[aria-label="Close"]');
+        if (closeBtn) {
+          fireEvent.click(closeBtn);
+          expect(customOnClick).toHaveBeenCalled();
+        }
+      });
+
+      it("should support disabled state on closeButton", () => {
+        const { container } = render(
+          <TestWrapper>
+            <CopilotModalHeader
+              title="Test Title"
+              closeButton={{ disabled: true }}
+            />
+          </TestWrapper>,
+        );
+
+        const closeBtn = container.querySelector('button[aria-label="Close"]');
+        if (closeBtn) {
+          expect(closeBtn.hasAttribute("disabled")).toBe(true);
+        }
+      });
+
+      it("should pass custom aria-label to closeButton", () => {
+        const { container } = render(
+          <TestWrapper>
+            <CopilotModalHeader
+              title="Test Title"
+              closeButton={{ "aria-label": "Dismiss dialog" }}
+            />
+          </TestWrapper>,
+        );
+
+        const closeBtn = container.querySelector(
+          'button[aria-label="Dismiss dialog"]',
+        );
+        expect(closeBtn).toBeDefined();
+      });
+    });
+  });
+
+  // ============================================================================
+  // 3. CUSTOM COMPONENT TESTS
+  // ============================================================================
+  describe("3. Custom Component Receiving Sub-components", () => {
+    it("should allow custom component for titleContent", () => {
+      const CustomTitle: React.FC<React.PropsWithChildren> = ({ children }) => (
+        <h1 data-testid="custom-title-component" className="my-custom-title">
+          {children}
+        </h1>
+      );
+
+      render(
+        <TestWrapper>
+          <CopilotModalHeader
+            title="Custom Header"
+            titleContent={CustomTitle as any}
+          />
+        </TestWrapper>,
+      );
+
+      const custom = screen.queryByTestId("custom-title-component");
+      expect(custom).toBeDefined();
+      expect(custom?.tagName).toBe("H1");
+      expect(custom?.textContent).toBe("Custom Header");
+    });
+
+    it("should allow custom component for closeButton", () => {
+      const CustomCloseButton: React.FC<
+        React.ButtonHTMLAttributes<HTMLButtonElement>
+      > = (props) => (
+        <button data-testid="custom-close-btn" {...props}>
+          X Close
+        </button>
+      );
+
+      render(
+        <TestWrapper>
+          <CopilotModalHeader
+            title="Test Title"
+            closeButton={CustomCloseButton as any}
+          />
+        </TestWrapper>,
+      );
+
+      const custom = screen.queryByTestId("custom-close-btn");
+      expect(custom).toBeDefined();
+      expect(custom?.textContent).toBe("X Close");
+    });
+
+    it("should call onClick when custom closeButton is clicked", () => {
+      const handleClose = vi.fn();
+      const CustomCloseButton: React.FC<
+        React.ButtonHTMLAttributes<HTMLButtonElement>
+      > = ({ onClick, ...props }) => (
+        <button
+          data-testid="custom-close-btn"
+          onClick={(e) => {
+            handleClose();
+            onClick?.(e);
+          }}
+          {...props}
+        >
+          Close
+        </button>
+      );
+
+      render(
+        <TestWrapper>
+          <CopilotModalHeader
+            title="Test Title"
+            closeButton={CustomCloseButton as any}
+          />
+        </TestWrapper>,
+      );
+
+      const closeBtn = screen.queryByTestId("custom-close-btn");
+      if (closeBtn) {
+        fireEvent.click(closeBtn);
+        expect(handleClose).toHaveBeenCalled();
+      }
+    });
+  });
+
+  // ============================================================================
+  // 4. CHILDREN RENDER FUNCTION (DRILL-DOWN) TESTS
+  // ============================================================================
+  describe("4. Children Render Function for Drill-down", () => {
+    it("should provide bound titleContent and closeButton via children render function", () => {
+      const childrenFn = vi.fn((props) => (
+        <div data-testid="children-render">
+          <div data-testid="received-title">{props.titleContent}</div>
+          <div data-testid="received-close">{props.closeButton}</div>
+        </div>
+      ));
+
+      render(
+        <TestWrapper>
+          <CopilotModalHeader title="Test Title">
+            {childrenFn}
+          </CopilotModalHeader>
+        </TestWrapper>,
+      );
+
+      expect(childrenFn).toHaveBeenCalled();
+      const callArgs = childrenFn.mock.calls[0][0];
+      expect(callArgs).toHaveProperty("titleContent");
+      expect(callArgs).toHaveProperty("closeButton");
+      expect(callArgs).toHaveProperty("title");
+
+      expect(screen.queryByTestId("children-render")).toBeDefined();
+    });
+
+    it("should pass resolved title through children render function", () => {
+      const childrenFn = vi.fn(() => <div />);
+
+      render(
+        <TestWrapper>
+          <CopilotModalHeader title="My Custom Title">
+            {childrenFn}
+          </CopilotModalHeader>
+        </TestWrapper>,
+      );
+
+      const callArgs = childrenFn.mock.calls[0][0];
+      expect(callArgs.title).toBe("My Custom Title");
+    });
+
+    it("should allow custom layout via children render function", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotModalHeader title="Custom Layout">
+            {({ titleContent, closeButton, title }) => (
+              <header
+                data-testid="custom-header-layout"
+                className="custom-header"
+              >
+                <div className="left-side">{closeButton}</div>
+                <div className="center">{titleContent}</div>
+                <div className="right-side">
+                  <span className="subtitle">Subtitle: {title}</span>
+                </div>
+              </header>
+            )}
+          </CopilotModalHeader>
+        </TestWrapper>,
+      );
+
+      const customLayout = screen.queryByTestId("custom-header-layout");
+      expect(customLayout).toBeDefined();
+      expect(container.querySelector(".left-side")).toBeDefined();
+      expect(container.querySelector(".center")).toBeDefined();
+      expect(container.querySelector(".right-side")).toBeDefined();
+      expect(customLayout?.textContent).toContain("Subtitle: Custom Layout");
+    });
+
+    it("should allow completely custom rendering without using provided components", () => {
+      render(
+        <TestWrapper>
+          <CopilotModalHeader title="Ignored Title">
+            {() => (
+              <nav data-testid="custom-nav">
+                <button>Back</button>
+                <span>Custom Nav Header</span>
+                <button>Menu</button>
+              </nav>
+            )}
+          </CopilotModalHeader>
+        </TestWrapper>,
+      );
+
+      const customNav = screen.queryByTestId("custom-nav");
+      expect(customNav).toBeDefined();
+      expect(customNav?.textContent).toContain("Custom Nav Header");
+      expect(screen.queryByText("Back")).toBeDefined();
+      expect(screen.queryByText("Menu")).toBeDefined();
+    });
+  });
+
+  // ============================================================================
+  // 5. CLASSNAME OVERRIDE TESTS
+  // ============================================================================
+  describe("5. className Override with Tailwind Strings", () => {
+    it("should apply className to header root element", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotModalHeader
+            title="Test Title"
+            className="custom-header-class bg-slate-100"
+          />
+        </TestWrapper>,
+      );
+
+      const header = container.querySelector(".custom-header-class");
+      expect(header).toBeDefined();
+      expect(header?.tagName).toBe("HEADER");
+      expect(header?.classList.contains("bg-slate-100")).toBe(true);
+    });
+
+    it("should override default border and padding", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotModalHeader title="Test Title" className="border-0 p-2" />
+        </TestWrapper>,
+      );
+
+      const header = container.querySelector(".border-0");
+      expect(header).toBeDefined();
+      expect(header?.classList.contains("p-2")).toBe(true);
+    });
+
+    it("should merge multiple slot classNames correctly", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotModalHeader
+            title="Test Title"
+            className="header-custom"
+            titleContent="title-custom"
+            closeButton="close-custom"
+          />
+        </TestWrapper>,
+      );
+
+      expect(container.querySelector(".header-custom")).toBeDefined();
+      expect(container.querySelector(".title-custom")).toBeDefined();
+      expect(container.querySelector(".close-custom")).toBeDefined();
+    });
+  });
+
+  // ============================================================================
+  // 6. INTEGRATION TESTS
+  // ============================================================================
+  describe("6. Integration Tests", () => {
+    it("should correctly render all slots with mixed customization", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotModalHeader
+            title="Full Test"
+            className="header-style"
+            titleContent="title-style"
+            closeButton="close-style"
+          />
+        </TestWrapper>,
+      );
+
+      expect(container.querySelector(".header-style")).toBeDefined();
+      expect(container.querySelector(".title-style")).toBeDefined();
+      expect(container.querySelector(".close-style")).toBeDefined();
+    });
+
+    it("should work with property objects and class strings mixed", () => {
+      const onClick = vi.fn();
+      const { container } = render(
+        <TestWrapper>
+          <CopilotModalHeader
+            title="Mixed Test"
+            titleContent="text-xl"
+            closeButton={{ onClick, className: "bg-gray-200" }}
+          />
+        </TestWrapper>,
+      );
+
+      expect(container.querySelector(".text-xl")).toBeDefined();
+
+      const closeBtn = container.querySelector(".bg-gray-200");
+      if (closeBtn) {
+        fireEvent.click(closeBtn);
+        expect(onClick).toHaveBeenCalled();
+      }
+    });
+
+    it("should use default title from configuration when not provided", () => {
+      render(
+        <TestWrapper>
+          <CopilotModalHeader />
+        </TestWrapper>,
+      );
+
+      // Should render with default "CopilotKit" title from CopilotChatDefaultLabels
+      const header = document.querySelector(
+        '[data-slot="copilot-modal-header"]',
+      );
+      expect(header).toBeDefined();
+    });
+
+    it("should render title content correctly", () => {
+      render(
+        <TestWrapper>
+          <CopilotModalHeader title="My Chat Header" />
+        </TestWrapper>,
+      );
+
+      expect(screen.getByText("My Chat Header")).toBeDefined();
+    });
+
+    it("should render close button with X icon", () => {
+      const { container } = render(
+        <TestWrapper>
+          <CopilotModalHeader title="Test" />
+        </TestWrapper>,
+      );
+
+      const closeBtn = container.querySelector('button[aria-label="Close"]');
+      expect(closeBtn).toBeDefined();
+      // Should contain an SVG icon
+      expect(closeBtn?.querySelector("svg")).toBeDefined();
+    });
+  });
+});