@copilotkit/react-core 1.57.3 → 1.58.0-canary.thread-id-propagation

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

@@ -1,484 +0,0 @@
-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();
-    });
-  });
-});