From 58cb4cf012b7293c703abf619ee1f376358b6d0d Mon Sep 17 00:00:00 2001
From: codomposer <akileus0902@gmail.com>
Date: Tue, 4 Nov 2025 10:54:52 -0500
Subject: [PATCH 1/3] add unit test to missing components

---
 src/test/calendar_container.test.tsx    |  90 ++++++++
 src/test/click_outside_wrapper.test.tsx | 169 ++++++++++++++
 src/test/input_time.test.tsx            | 214 +++++++++++++++++
 src/test/popper_component.test.tsx      | 292 ++++++++++++++++++++++++
 src/test/portal.test.tsx                | 157 +++++++++++++
 src/test/tab_loop.test.tsx              | 250 ++++++++++++++++++++
 src/test/with_floating.test.tsx         | 221 ++++++++++++++++++
 7 files changed, 1393 insertions(+)
 create mode 100644 src/test/calendar_container.test.tsx
 create mode 100644 src/test/click_outside_wrapper.test.tsx
 create mode 100644 src/test/input_time.test.tsx
 create mode 100644 src/test/popper_component.test.tsx
 create mode 100644 src/test/portal.test.tsx
 create mode 100644 src/test/tab_loop.test.tsx
 create mode 100644 src/test/with_floating.test.tsx

diff --git a/src/test/calendar_container.test.tsx b/src/test/calendar_container.test.tsx
new file mode 100644
index 000000000..a79514a2c
--- /dev/null
+++ b/src/test/calendar_container.test.tsx
@@ -0,0 +1,90 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import CalendarContainer from "../calendar_container";
+
+describe("CalendarContainer", () => {
+  it("renders with default props", () => {
+    const { container } = render(
+      <CalendarContainer>
+        <div>Test Content</div>
+      </CalendarContainer>,
+    );
+
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toBeTruthy();
+    expect(dialog?.getAttribute("aria-label")).toBe("Choose Date");
+    expect(dialog?.getAttribute("aria-modal")).toBe("true");
+    expect(dialog?.textContent).toBe("Test Content");
+  });
+
+  it("renders with showTimeSelectOnly prop", () => {
+    const { container } = render(
+      <CalendarContainer showTimeSelectOnly>
+        <div>Time Content</div>
+      </CalendarContainer>,
+    );
+
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog?.getAttribute("aria-label")).toBe("Choose Time");
+  });
+
+  it("renders with showTime prop", () => {
+    const { container } = render(
+      <CalendarContainer showTime>
+        <div>Date and Time Content</div>
+      </CalendarContainer>,
+    );
+
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog?.getAttribute("aria-label")).toBe("Choose Date and Time");
+  });
+
+  it("renders with both showTime and showTimeSelectOnly props", () => {
+    const { container } = render(
+      <CalendarContainer showTime showTimeSelectOnly>
+        <div>Content</div>
+      </CalendarContainer>,
+    );
+
+    const dialog = container.querySelector('[role="dialog"]');
+    // showTimeSelectOnly takes precedence
+    expect(dialog?.getAttribute("aria-label")).toBe("Choose Time");
+  });
+
+  it("applies custom className", () => {
+    const { container } = render(
+      <CalendarContainer className="custom-class">
+        <div>Content</div>
+      </CalendarContainer>,
+    );
+
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog?.className).toBe("custom-class");
+  });
+
+  it("renders children correctly", () => {
+    const { container } = render(
+      <CalendarContainer>
+        <div data-testid="child-1">Child 1</div>
+        <div data-testid="child-2">Child 2</div>
+      </CalendarContainer>,
+    );
+
+    expect(container.querySelector('[data-testid="child-1"]')).toBeTruthy();
+    expect(container.querySelector('[data-testid="child-2"]')).toBeTruthy();
+  });
+
+  it("renders with proper ARIA attributes", () => {
+    const { container } = render(
+      <CalendarContainer>
+        <div>Content</div>
+      </CalendarContainer>,
+    );
+
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog?.getAttribute("role")).toBe("dialog");
+    expect(dialog?.getAttribute("aria-modal")).toBe("true");
+    expect(dialog?.getAttribute("aria-label")).toBe("Choose Date");
+  });
+});
diff --git a/src/test/click_outside_wrapper.test.tsx b/src/test/click_outside_wrapper.test.tsx
new file mode 100644
index 000000000..c5967d51b
--- /dev/null
+++ b/src/test/click_outside_wrapper.test.tsx
@@ -0,0 +1,169 @@
+import { render, fireEvent } from "@testing-library/react";
+import React from "react";
+
+import { ClickOutsideWrapper } from "../click_outside_wrapper";
+
+describe("ClickOutsideWrapper", () => {
+  let onClickOutsideMock: jest.Mock;
+
+  beforeEach(() => {
+    onClickOutsideMock = jest.fn();
+  });
+
+  afterEach(() => {
+    onClickOutsideMock.mockClear();
+  });
+
+  it("renders children correctly", () => {
+    const { container } = render(
+      <ClickOutsideWrapper onClickOutside={onClickOutsideMock}>
+        <div data-testid="child">Test Content</div>
+      </ClickOutsideWrapper>,
+    );
+
+    expect(container.querySelector('[data-testid="child"]')).toBeTruthy();
+  });
+
+  it("calls onClickOutside when clicking outside the wrapper", () => {
+    const { container } = render(
+      <div>
+        <ClickOutsideWrapper onClickOutside={onClickOutsideMock}>
+          <div data-testid="inside">Inside</div>
+        </ClickOutsideWrapper>
+        <div data-testid="outside">Outside</div>
+      </div>,
+    );
+
+    const outsideElement = container.querySelector(
+      '[data-testid="outside"]',
+    ) as HTMLElement;
+    fireEvent.mouseDown(outsideElement);
+
+    expect(onClickOutsideMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not call onClickOutside when clicking inside the wrapper", () => {
+    const { container } = render(
+      <ClickOutsideWrapper onClickOutside={onClickOutsideMock}>
+        <div data-testid="inside">Inside</div>
+      </ClickOutsideWrapper>,
+    );
+
+    const insideElement = container.querySelector(
+      '[data-testid="inside"]',
+    ) as HTMLElement;
+    fireEvent.mouseDown(insideElement);
+
+    expect(onClickOutsideMock).not.toHaveBeenCalled();
+  });
+
+  it("applies custom className", () => {
+    const { container } = render(
+      <ClickOutsideWrapper
+        onClickOutside={onClickOutsideMock}
+        className="custom-class"
+      >
+        <div>Content</div>
+      </ClickOutsideWrapper>,
+    );
+
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper.className).toBe("custom-class");
+  });
+
+  it("applies custom style", () => {
+    const customStyle = { backgroundColor: "red", padding: "10px" };
+    const { container } = render(
+      <ClickOutsideWrapper
+        onClickOutside={onClickOutsideMock}
+        style={customStyle}
+      >
+        <div>Content</div>
+      </ClickOutsideWrapper>,
+    );
+
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper.style.backgroundColor).toBe("red");
+    expect(wrapper.style.padding).toBe("10px");
+  });
+
+  it("does not call onClickOutside when clicking on element with ignoreClass", () => {
+    const { container } = render(
+      <div>
+        <ClickOutsideWrapper
+          onClickOutside={onClickOutsideMock}
+          ignoreClass="ignore-me"
+        >
+          <div data-testid="inside">Inside</div>
+        </ClickOutsideWrapper>
+        <div className="ignore-me" data-testid="ignored">
+          Ignored
+        </div>
+      </div>,
+    );
+
+    const ignoredElement = container.querySelector(
+      '[data-testid="ignored"]',
+    ) as HTMLElement;
+    fireEvent.mouseDown(ignoredElement);
+
+    expect(onClickOutsideMock).not.toHaveBeenCalled();
+  });
+
+  it("calls onClickOutside when clicking on element without ignoreClass", () => {
+    const { container } = render(
+      <div>
+        <ClickOutsideWrapper
+          onClickOutside={onClickOutsideMock}
+          ignoreClass="ignore-me"
+        >
+          <div data-testid="inside">Inside</div>
+        </ClickOutsideWrapper>
+        <div className="not-ignored" data-testid="not-ignored">
+          Not Ignored
+        </div>
+      </div>,
+    );
+
+    const notIgnoredElement = container.querySelector(
+      '[data-testid="not-ignored"]',
+    ) as HTMLElement;
+    fireEvent.mouseDown(notIgnoredElement);
+
+    expect(onClickOutsideMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("uses containerRef when provided", () => {
+    const containerRef = React.createRef<HTMLDivElement>();
+    render(
+      <ClickOutsideWrapper
+        onClickOutside={onClickOutsideMock}
+        containerRef={containerRef}
+      >
+        <div>Content</div>
+      </ClickOutsideWrapper>,
+    );
+
+    expect(containerRef.current).toBeTruthy();
+    expect(containerRef.current?.tagName).toBe("DIV");
+  });
+
+  it("cleans up event listener on unmount", () => {
+    const removeEventListenerSpy = jest.spyOn(document, "removeEventListener");
+
+    const { unmount } = render(
+      <ClickOutsideWrapper onClickOutside={onClickOutsideMock}>
+        <div>Content</div>
+      </ClickOutsideWrapper>,
+    );
+
+    unmount();
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      "mousedown",
+      expect.any(Function),
+    );
+
+    removeEventListenerSpy.mockRestore();
+  });
+});
diff --git a/src/test/input_time.test.tsx b/src/test/input_time.test.tsx
new file mode 100644
index 000000000..401b9ff8a
--- /dev/null
+++ b/src/test/input_time.test.tsx
@@ -0,0 +1,214 @@
+import { render, fireEvent } from "@testing-library/react";
+import React from "react";
+
+import InputTime from "../input_time";
+
+describe("InputTime", () => {
+  it("renders with default props", () => {
+    const { container } = render(<InputTime />);
+
+    const timeInput = container.querySelector(
+      'input[type="time"]',
+    ) as HTMLInputElement;
+    expect(timeInput).toBeTruthy();
+    expect(timeInput.className).toBe("react-datepicker-time__input");
+    expect(timeInput.placeholder).toBe("Time");
+  });
+
+  it("renders with timeString prop", () => {
+    const { container } = render(<InputTime timeString="14:30" />);
+
+    const timeInput = container.querySelector(
+      'input[type="time"]',
+    ) as HTMLInputElement;
+    expect(timeInput.value).toBe("14:30");
+  });
+
+  it("renders with timeInputLabel prop", () => {
+    const { container } = render(<InputTime timeInputLabel="Select Time" />);
+
+    const label = container.querySelector(
+      ".react-datepicker-time__caption",
+    ) as HTMLElement;
+    expect(label.textContent).toBe("Select Time");
+  });
+
+  it("calls onChange when time is changed", () => {
+    const onChangeMock = jest.fn();
+    const { container } = render(
+      <InputTime onChange={onChangeMock} timeString="10:00" />,
+    );
+
+    const timeInput = container.querySelector(
+      'input[type="time"]',
+    ) as HTMLInputElement;
+    fireEvent.change(timeInput, { target: { value: "15:45" } });
+
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    const calledDate = onChangeMock.mock.calls[0][0];
+    expect(calledDate.getHours()).toBe(15);
+    expect(calledDate.getMinutes()).toBe(45);
+  });
+
+  it("updates state when timeString prop changes", () => {
+    const { container, rerender } = render(<InputTime timeString="10:00" />);
+
+    let timeInput = container.querySelector(
+      'input[type="time"]',
+    ) as HTMLInputElement;
+    expect(timeInput.value).toBe("10:00");
+
+    rerender(<InputTime timeString="16:30" />);
+
+    timeInput = container.querySelector(
+      'input[type="time"]',
+    ) as HTMLInputElement;
+    expect(timeInput.value).toBe("16:30");
+  });
+
+  it("uses provided date when onChange is called", () => {
+    const onChangeMock = jest.fn();
+    const testDate = new Date(2023, 5, 15, 10, 30);
+
+    const { container } = render(
+      <InputTime onChange={onChangeMock} date={testDate} timeString="10:30" />,
+    );
+
+    const timeInput = container.querySelector(
+      'input[type="time"]',
+    ) as HTMLInputElement;
+    fireEvent.change(timeInput, { target: { value: "14:45" } });
+
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    const calledDate = onChangeMock.mock.calls[0][0];
+    expect(calledDate.getFullYear()).toBe(2023);
+    expect(calledDate.getMonth()).toBe(5);
+    expect(calledDate.getDate()).toBe(15);
+    expect(calledDate.getHours()).toBe(14);
+    expect(calledDate.getMinutes()).toBe(45);
+  });
+
+  it("creates new date when no date prop is provided", () => {
+    const onChangeMock = jest.fn();
+    const { container } = render(
+      <InputTime onChange={onChangeMock} timeString="10:00" />,
+    );
+
+    const timeInput = container.querySelector(
+      'input[type="time"]',
+    ) as HTMLInputElement;
+    fireEvent.change(timeInput, { target: { value: "14:45" } });
+
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    const calledDate = onChangeMock.mock.calls[0][0];
+    expect(calledDate).toBeInstanceOf(Date);
+    expect(calledDate.getHours()).toBe(14);
+    expect(calledDate.getMinutes()).toBe(45);
+  });
+
+  it("renders custom time input when provided", () => {
+    const CustomTimeInput = ({
+      value,
+      onChange,
+    }: {
+      value: string;
+      onChange: (time: string) => void;
+    }) => (
+      <input
+        data-testid="custom-time-input"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    );
+
+    const { container } = render(
+      <InputTime
+        customTimeInput={<CustomTimeInput value="" onChange={() => {}} />}
+        timeString="12:00"
+      />,
+    );
+
+    const customInput = container.querySelector(
+      '[data-testid="custom-time-input"]',
+    ) as HTMLInputElement;
+    expect(customInput).toBeTruthy();
+    expect(customInput.value).toBe("12:00");
+  });
+
+  it("calls onChange with custom time input", () => {
+    const onChangeMock = jest.fn();
+    const CustomTimeInput = ({
+      value,
+      onChange,
+    }: {
+      value: string;
+      onChange: (time: string) => void;
+    }) => (
+      <input
+        data-testid="custom-time-input"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    );
+
+    const { container } = render(
+      <InputTime
+        onChange={onChangeMock}
+        customTimeInput={<CustomTimeInput value="" onChange={() => {}} />}
+        timeString="12:00"
+      />,
+    );
+
+    const customInput = container.querySelector(
+      '[data-testid="custom-time-input"]',
+    ) as HTMLInputElement;
+    fireEvent.change(customInput, { target: { value: "18:30" } });
+
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    const calledDate = onChangeMock.mock.calls[0][0];
+    expect(calledDate.getHours()).toBe(18);
+    expect(calledDate.getMinutes()).toBe(30);
+  });
+
+  it("focuses input when clicked", () => {
+    const { container } = render(<InputTime timeString="10:00" />);
+
+    const timeInput = container.querySelector(
+      'input[type="time"]',
+    ) as HTMLInputElement;
+    const focusSpy = jest.spyOn(timeInput, "focus");
+
+    fireEvent.click(timeInput);
+
+    expect(focusSpy).toHaveBeenCalled();
+    focusSpy.mockRestore();
+  });
+
+  it("uses timeString as fallback when onChange value is empty", () => {
+    const onChangeMock = jest.fn();
+    const { container } = render(
+      <InputTime onChange={onChangeMock} timeString="10:00" />,
+    );
+
+    const timeInput = container.querySelector(
+      'input[type="time"]',
+    ) as HTMLInputElement;
+    fireEvent.change(timeInput, { target: { value: "" } });
+
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders container with correct class names", () => {
+    const { container } = render(<InputTime />);
+
+    expect(
+      container.querySelector(".react-datepicker__input-time-container"),
+    ).toBeTruthy();
+    expect(
+      container.querySelector(".react-datepicker-time__input-container"),
+    ).toBeTruthy();
+    expect(
+      container.querySelector(".react-datepicker-time__input"),
+    ).toBeTruthy();
+  });
+});
diff --git a/src/test/popper_component.test.tsx b/src/test/popper_component.test.tsx
new file mode 100644
index 000000000..07786b47c
--- /dev/null
+++ b/src/test/popper_component.test.tsx
@@ -0,0 +1,292 @@
+import { render, fireEvent } from "@testing-library/react";
+import React from "react";
+
+import { PopperComponent } from "../popper_component";
+
+// Mock the withFloating HOC
+jest.mock("../with_floating", () => ({
+  __esModule: true,
+  default: <T,>(Component: React.ComponentType<T>) => Component,
+}));
+
+// Mock FloatingArrow component
+jest.mock("@floating-ui/react", () => ({
+  FloatingArrow: ({ className }: { className: string }) => (
+    <div data-testid="floating-arrow" className={className} />
+  ),
+}));
+
+describe("PopperComponent", () => {
+  const mockPopperProps = {
+    refs: {
+      reference: { current: null },
+      floating: { current: null },
+      setFloating: jest.fn(),
+      setReference: jest.fn(),
+      setPositionReference: jest.fn(),
+    },
+    floatingStyles: { position: "absolute" as const, top: 0, left: 0 },
+    placement: "bottom" as const,
+    strategy: "absolute" as const,
+    x: 0,
+    y: 0,
+    middlewareData: {},
+    isPositioned: true,
+    update: jest.fn(),
+    elements: {
+      reference: null,
+      floating: null,
+      domReference: null,
+    },
+    context: {} as any,
+    arrowRef: { current: null },
+  } as any;
+
+  const defaultProps = {
+    popperComponent: <div data-testid="popper-content">Popper Content</div>,
+    targetComponent: <div data-testid="target">Target</div>,
+    popperOnKeyDown: jest.fn(),
+    popperProps: mockPopperProps,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders target component", () => {
+    const { container } = render(<PopperComponent {...defaultProps} />);
+
+    expect(container.querySelector('[data-testid="target"]')).toBeTruthy();
+  });
+
+  it("renders target component with wrapper class", () => {
+    const { container } = render(<PopperComponent {...defaultProps} />);
+
+    const wrapper = container.querySelector(".react-datepicker-wrapper");
+    expect(wrapper).toBeTruthy();
+    expect(wrapper?.querySelector('[data-testid="target"]')).toBeTruthy();
+  });
+
+  it("applies custom wrapperClassName", () => {
+    const { container } = render(
+      <PopperComponent {...defaultProps} wrapperClassName="custom-wrapper" />,
+    );
+
+    const wrapper = container.querySelector(
+      ".react-datepicker-wrapper.custom-wrapper",
+    );
+    expect(wrapper).toBeTruthy();
+  });
+
+  it("hides popper when hidePopper is true", () => {
+    const { container } = render(
+      <PopperComponent {...defaultProps} hidePopper={true} />,
+    );
+
+    expect(container.querySelector('[data-testid="popper-content"]')).toBe(
+      null,
+    );
+  });
+
+  it("shows popper when hidePopper is false", () => {
+    const { container } = render(
+      <PopperComponent {...defaultProps} hidePopper={false} />,
+    );
+
+    expect(
+      container.querySelector('[data-testid="popper-content"]'),
+    ).toBeTruthy();
+  });
+
+  it("applies popper className", () => {
+    const { container } = render(
+      <PopperComponent
+        {...defaultProps}
+        hidePopper={false}
+        className="custom-popper"
+      />,
+    );
+
+    const popper = container.querySelector(
+      ".react-datepicker-popper.custom-popper",
+    );
+    expect(popper).toBeTruthy();
+  });
+
+  it("applies data-placement attribute", () => {
+    const { container } = render(
+      <PopperComponent {...defaultProps} hidePopper={false} />,
+    );
+
+    const popper = container.querySelector(".react-datepicker-popper");
+    expect(popper?.getAttribute("data-placement")).toBe("bottom");
+  });
+
+  it("calls popperOnKeyDown when key is pressed in popper", () => {
+    const onKeyDownMock = jest.fn();
+    const { container } = render(
+      <PopperComponent
+        {...defaultProps}
+        hidePopper={false}
+        popperOnKeyDown={onKeyDownMock}
+      />,
+    );
+
+    const popper = container.querySelector(
+      ".react-datepicker-popper",
+    ) as HTMLElement;
+    fireEvent.keyDown(popper, { key: "Escape" });
+
+    expect(onKeyDownMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders arrow when showArrow is true", () => {
+    const { container } = render(
+      <PopperComponent {...defaultProps} hidePopper={false} showArrow={true} />,
+    );
+
+    expect(
+      container.querySelector('[data-testid="floating-arrow"]'),
+    ).toBeTruthy();
+  });
+
+  it("does not render arrow when showArrow is false", () => {
+    const { container } = render(
+      <PopperComponent
+        {...defaultProps}
+        hidePopper={false}
+        showArrow={false}
+      />,
+    );
+
+    expect(container.querySelector('[data-testid="floating-arrow"]')).toBe(
+      null,
+    );
+  });
+
+  it("wraps popper in TabLoop when enableTabLoop is true", () => {
+    const { container } = render(
+      <PopperComponent
+        {...defaultProps}
+        hidePopper={false}
+        enableTabLoop={true}
+      />,
+    );
+
+    expect(container.querySelector(".react-datepicker__tab-loop")).toBeTruthy();
+  });
+
+  it("renders in portal when portalId is provided", () => {
+    const { container } = render(
+      <PopperComponent
+        {...defaultProps}
+        hidePopper={false}
+        portalId="test-portal"
+      />,
+    );
+
+    // Popper should not be in the main container
+    expect(container.querySelector('[data-testid="popper-content"]')).toBe(
+      null,
+    );
+
+    // Popper should be in the portal
+    const portalRoot = document.getElementById("test-portal");
+    expect(portalRoot).toBeTruthy();
+    expect(
+      portalRoot?.querySelector('[data-testid="popper-content"]'),
+    ).toBeTruthy();
+
+    // Cleanup
+    portalRoot?.remove();
+  });
+
+  it("does not render in portal when hidePopper is true even with portalId", () => {
+    const { container } = render(
+      <PopperComponent
+        {...defaultProps}
+        hidePopper={true}
+        portalId="test-portal-2"
+      />,
+    );
+
+    expect(container.querySelector('[data-testid="popper-content"]')).toBe(
+      null,
+    );
+    expect(document.getElementById("test-portal-2")).toBe(null);
+  });
+
+  it("wraps popper in custom container when popperContainer is provided", () => {
+    const CustomContainer: React.FC<{ children?: React.ReactNode }> = ({
+      children,
+    }) => <div data-testid="custom-container">{children}</div>;
+
+    const { container } = render(
+      <PopperComponent
+        {...defaultProps}
+        hidePopper={false}
+        popperContainer={CustomContainer}
+      />,
+    );
+
+    expect(
+      container.querySelector('[data-testid="custom-container"]'),
+    ).toBeTruthy();
+    expect(
+      container
+        .querySelector('[data-testid="custom-container"]')
+        ?.querySelector('[data-testid="popper-content"]'),
+    ).toBeTruthy();
+  });
+
+  it("applies floating styles to popper", () => {
+    const customStyles = {
+      position: "absolute" as const,
+      top: 100,
+      left: 200,
+    };
+
+    const customPopperProps = {
+      ...mockPopperProps,
+      floatingStyles: customStyles,
+    };
+
+    const { container } = render(
+      <PopperComponent
+        {...defaultProps}
+        hidePopper={false}
+        popperProps={customPopperProps}
+      />,
+    );
+
+    const popper = container.querySelector(
+      ".react-datepicker-popper",
+    ) as HTMLElement;
+    expect(popper.style.position).toBe("absolute");
+    expect(popper.style.top).toBe("100px");
+    expect(popper.style.left).toBe("200px");
+  });
+
+  it("renders with shadow DOM when portalHost is provided", () => {
+    const shadowHost = document.createElement("div");
+    document.body.appendChild(shadowHost);
+    const shadowRoot = shadowHost.attachShadow({ mode: "open" });
+
+    render(
+      <PopperComponent
+        {...defaultProps}
+        hidePopper={false}
+        portalId="shadow-portal"
+        portalHost={shadowRoot}
+      />,
+    );
+
+    const portalRoot = shadowRoot.getElementById("shadow-portal");
+    expect(portalRoot).toBeTruthy();
+    expect(
+      portalRoot?.querySelector('[data-testid="popper-content"]'),
+    ).toBeTruthy();
+
+    shadowHost.remove();
+  });
+});
diff --git a/src/test/portal.test.tsx b/src/test/portal.test.tsx
new file mode 100644
index 000000000..5793e3587
--- /dev/null
+++ b/src/test/portal.test.tsx
@@ -0,0 +1,157 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import Portal from "../portal";
+
+describe("Portal", () => {
+  afterEach(() => {
+    // Clean up any portal elements created during tests
+    const portalElements = document.querySelectorAll('[id^="test-portal"]');
+    portalElements.forEach((el) => el.remove());
+  });
+
+  it("renders children into a portal", () => {
+    const { container } = render(
+      <Portal portalId="test-portal-1">
+        <div data-testid="portal-content">Portal Content</div>
+      </Portal>,
+    );
+
+    // Content should not be in the original container
+    expect(container.querySelector('[data-testid="portal-content"]')).toBe(
+      null,
+    );
+
+    // Content should be in the portal
+    const portalRoot = document.getElementById("test-portal-1");
+    expect(portalRoot).toBeTruthy();
+    expect(
+      portalRoot?.querySelector('[data-testid="portal-content"]'),
+    ).toBeTruthy();
+  });
+
+  it("creates portal root if it doesn't exist", () => {
+    expect(document.getElementById("test-portal-2")).toBe(null);
+
+    render(
+      <Portal portalId="test-portal-2">
+        <div>Content</div>
+      </Portal>,
+    );
+
+    const portalRoot = document.getElementById("test-portal-2");
+    expect(portalRoot).toBeTruthy();
+    expect(portalRoot?.parentElement).toBe(document.body);
+  });
+
+  it("uses existing portal root if it exists", () => {
+    const existingPortal = document.createElement("div");
+    existingPortal.id = "test-portal-3";
+    document.body.appendChild(existingPortal);
+
+    render(
+      <Portal portalId="test-portal-3">
+        <div data-testid="content">Content</div>
+      </Portal>,
+    );
+
+    const portalRoot = document.getElementById("test-portal-3");
+    expect(portalRoot).toBe(existingPortal);
+    expect(portalRoot?.querySelector('[data-testid="content"]')).toBeTruthy();
+
+    existingPortal.remove();
+  });
+
+  it("removes portal content on unmount", () => {
+    const { unmount } = render(
+      <Portal portalId="test-portal-4">
+        <div data-testid="portal-content">Portal Content</div>
+      </Portal>,
+    );
+
+    const portalRoot = document.getElementById("test-portal-4");
+    expect(
+      portalRoot?.querySelector('[data-testid="portal-content"]'),
+    ).toBeTruthy();
+
+    unmount();
+
+    expect(portalRoot?.querySelector('[data-testid="portal-content"]')).toBe(
+      null,
+    );
+  });
+
+  it("renders multiple children correctly", () => {
+    render(
+      <Portal portalId="test-portal-5">
+        <div data-testid="child-1">Child 1</div>
+        <div data-testid="child-2">Child 2</div>
+        <span data-testid="child-3">Child 3</span>
+      </Portal>,
+    );
+
+    const portalRoot = document.getElementById("test-portal-5");
+    expect(portalRoot?.querySelector('[data-testid="child-1"]')).toBeTruthy();
+    expect(portalRoot?.querySelector('[data-testid="child-2"]')).toBeTruthy();
+    expect(portalRoot?.querySelector('[data-testid="child-3"]')).toBeTruthy();
+  });
+
+  it("works with shadow DOM when portalHost is provided", () => {
+    const shadowHost = document.createElement("div");
+    document.body.appendChild(shadowHost);
+    const shadowRoot = shadowHost.attachShadow({ mode: "open" });
+
+    render(
+      <Portal portalId="test-portal-shadow" portalHost={shadowRoot}>
+        <div data-testid="shadow-content">Shadow Content</div>
+      </Portal>,
+    );
+
+    const portalRoot = shadowRoot.getElementById("test-portal-shadow");
+    expect(portalRoot).toBeTruthy();
+    expect(
+      portalRoot?.querySelector('[data-testid="shadow-content"]'),
+    ).toBeTruthy();
+
+    shadowHost.remove();
+  });
+
+  it("appends to portalHost instead of document.body when provided", () => {
+    const customHost = document.createElement("div");
+    customHost.id = "custom-host";
+    document.body.appendChild(customHost);
+    const shadowRoot = customHost.attachShadow({ mode: "open" });
+
+    render(
+      <Portal portalId="test-portal-custom-host" portalHost={shadowRoot}>
+        <div data-testid="custom-host-content">Custom Host Content</div>
+      </Portal>,
+    );
+
+    const portalRoot = shadowRoot.getElementById("test-portal-custom-host");
+    expect(portalRoot).toBeTruthy();
+    expect(portalRoot?.parentNode).toBe(shadowRoot);
+
+    customHost.remove();
+  });
+
+  it("handles re-renders correctly", () => {
+    const { rerender } = render(
+      <Portal portalId="test-portal-6">
+        <div data-testid="content-1">Content 1</div>
+      </Portal>,
+    );
+
+    const portalRoot = document.getElementById("test-portal-6");
+    expect(portalRoot?.querySelector('[data-testid="content-1"]')).toBeTruthy();
+
+    rerender(
+      <Portal portalId="test-portal-6">
+        <div data-testid="content-2">Content 2</div>
+      </Portal>,
+    );
+
+    expect(portalRoot?.querySelector('[data-testid="content-1"]')).toBe(null);
+    expect(portalRoot?.querySelector('[data-testid="content-2"]')).toBeTruthy();
+  });
+});
diff --git a/src/test/tab_loop.test.tsx b/src/test/tab_loop.test.tsx
new file mode 100644
index 000000000..bb818d67c
--- /dev/null
+++ b/src/test/tab_loop.test.tsx
@@ -0,0 +1,250 @@
+import { render, fireEvent } from "@testing-library/react";
+import React from "react";
+
+import TabLoop from "../tab_loop";
+
+describe("TabLoop", () => {
+  it("renders children when enableTabLoop is true", () => {
+    const { container } = render(
+      <TabLoop enableTabLoop={true}>
+        <div data-testid="child">Test Content</div>
+      </TabLoop>,
+    );
+
+    expect(container.querySelector('[data-testid="child"]')).toBeTruthy();
+  });
+
+  it("renders children when enableTabLoop is false", () => {
+    const { container } = render(
+      <TabLoop enableTabLoop={false}>
+        <div data-testid="child">Test Content</div>
+      </TabLoop>,
+    );
+
+    expect(container.querySelector('[data-testid="child"]')).toBeTruthy();
+  });
+
+  it("renders tab loop wrapper when enableTabLoop is true", () => {
+    const { container } = render(
+      <TabLoop enableTabLoop={true}>
+        <div>Content</div>
+      </TabLoop>,
+    );
+
+    expect(container.querySelector(".react-datepicker__tab-loop")).toBeTruthy();
+    expect(
+      container.querySelector(".react-datepicker__tab-loop__start"),
+    ).toBeTruthy();
+    expect(
+      container.querySelector(".react-datepicker__tab-loop__end"),
+    ).toBeTruthy();
+  });
+
+  it("does not render tab loop wrapper when enableTabLoop is false", () => {
+    const { container } = render(
+      <TabLoop enableTabLoop={false}>
+        <div>Content</div>
+      </TabLoop>,
+    );
+
+    expect(container.querySelector(".react-datepicker__tab-loop")).toBe(null);
+    expect(container.querySelector(".react-datepicker__tab-loop__start")).toBe(
+      null,
+    );
+    expect(container.querySelector(".react-datepicker__tab-loop__end")).toBe(
+      null,
+    );
+  });
+
+  it("uses default enableTabLoop value when not provided", () => {
+    const { container } = render(
+      <TabLoop>
+        <div>Content</div>
+      </TabLoop>,
+    );
+
+    // Default is true
+    expect(container.querySelector(".react-datepicker__tab-loop")).toBeTruthy();
+  });
+
+  it("focuses last tabbable element when start sentinel is focused", () => {
+    const { container } = render(
+      <TabLoop enableTabLoop={true}>
+        <button data-testid="button-1">Button 1</button>
+        <button data-testid="button-2">Button 2</button>
+        <button data-testid="button-3">Button 3</button>
+      </TabLoop>,
+    );
+
+    const startSentinel = container.querySelector(
+      ".react-datepicker__tab-loop__start",
+    ) as HTMLElement;
+    const lastButton = container.querySelector(
+      '[data-testid="button-3"]',
+    ) as HTMLButtonElement;
+
+    const focusSpy = jest.spyOn(lastButton, "focus");
+    fireEvent.focus(startSentinel);
+
+    expect(focusSpy).toHaveBeenCalled();
+    focusSpy.mockRestore();
+  });
+
+  it("focuses first tabbable element when end sentinel is focused", () => {
+    const { container } = render(
+      <TabLoop enableTabLoop={true}>
+        <button data-testid="button-1">Button 1</button>
+        <button data-testid="button-2">Button 2</button>
+        <button data-testid="button-3">Button 3</button>
+      </TabLoop>,
+    );
+
+    const endSentinel = container.querySelector(
+      ".react-datepicker__tab-loop__end",
+    ) as HTMLElement;
+    const firstButton = container.querySelector(
+      '[data-testid="button-1"]',
+    ) as HTMLButtonElement;
+
+    const focusSpy = jest.spyOn(firstButton, "focus");
+    fireEvent.focus(endSentinel);
+
+    expect(focusSpy).toHaveBeenCalled();
+    focusSpy.mockRestore();
+  });
+
+  it("handles multiple tabbable element types", () => {
+    const { container } = render(
+      <TabLoop enableTabLoop={true}>
+        <button data-testid="button">Button</button>
+        <input data-testid="input" type="text" />
+        <select data-testid="select">
+          <option>Option</option>
+        </select>
+        <textarea data-testid="textarea" />
+        <a href="#" data-testid="link">
+          Link
+        </a>
+      </TabLoop>,
+    );
+
+    const endSentinel = container.querySelector(
+      ".react-datepicker__tab-loop__end",
+    ) as HTMLElement;
+    const firstButton = container.querySelector(
+      '[data-testid="button"]',
+    ) as HTMLButtonElement;
+
+    const focusSpy = jest.spyOn(firstButton, "focus");
+    fireEvent.focus(endSentinel);
+
+    expect(focusSpy).toHaveBeenCalled();
+    focusSpy.mockRestore();
+  });
+
+  it("ignores disabled elements", () => {
+    const { container } = render(
+      <TabLoop enableTabLoop={true}>
+        <button disabled data-testid="button-disabled">
+          Disabled
+        </button>
+        <button data-testid="button-enabled">Enabled</button>
+        <button data-testid="button-enabled-2">Enabled 2</button>
+      </TabLoop>,
+    );
+
+    const endSentinel = container.querySelector(
+      ".react-datepicker__tab-loop__end",
+    ) as HTMLElement;
+    const enabledButton = container.querySelector(
+      '[data-testid="button-enabled"]',
+    ) as HTMLButtonElement;
+
+    const focusSpy = jest.spyOn(enabledButton, "focus");
+    fireEvent.focus(endSentinel);
+
+    expect(focusSpy).toHaveBeenCalled();
+    focusSpy.mockRestore();
+  });
+
+  it("ignores elements with tabIndex -1", () => {
+    const { container } = render(
+      <TabLoop enableTabLoop={true}>
+        <button tabIndex={-1} data-testid="button-negative">
+          Negative TabIndex
+        </button>
+        <button data-testid="button-normal">Normal</button>
+        <button data-testid="button-normal-2">Normal 2</button>
+      </TabLoop>,
+    );
+
+    const endSentinel = container.querySelector(
+      ".react-datepicker__tab-loop__end",
+    ) as HTMLElement;
+    const normalButton = container.querySelector(
+      '[data-testid="button-normal"]',
+    ) as HTMLButtonElement;
+
+    const focusSpy = jest.spyOn(normalButton, "focus");
+    fireEvent.focus(endSentinel);
+
+    expect(focusSpy).toHaveBeenCalled();
+    focusSpy.mockRestore();
+  });
+
+  it("handles case with only one tabbable element", () => {
+    const { container } = render(
+      <TabLoop enableTabLoop={true}>
+        <button data-testid="single-button">Single Button</button>
+      </TabLoop>,
+    );
+
+    const startSentinel = container.querySelector(
+      ".react-datepicker__tab-loop__start",
+    ) as HTMLElement;
+
+    // Should not throw error with single element
+    expect(() => fireEvent.focus(startSentinel)).not.toThrow();
+  });
+
+  it("handles case with no tabbable elements", () => {
+    const { container } = render(
+      <TabLoop enableTabLoop={true}>
+        <div>No tabbable elements</div>
+      </TabLoop>,
+    );
+
+    const startSentinel = container.querySelector(
+      ".react-datepicker__tab-loop__start",
+    ) as HTMLElement;
+
+    // Should not throw error with no tabbable elements
+    expect(() => fireEvent.focus(startSentinel)).not.toThrow();
+  });
+
+  it("renders with custom tabIndex elements", () => {
+    const { container } = render(
+      <TabLoop enableTabLoop={true}>
+        <div tabIndex={0} data-testid="div-1">
+          Div 1
+        </div>
+        <div tabIndex={0} data-testid="div-2">
+          Div 2
+        </div>
+      </TabLoop>,
+    );
+
+    const endSentinel = container.querySelector(
+      ".react-datepicker__tab-loop__end",
+    ) as HTMLElement;
+    const firstDiv = container.querySelector(
+      '[data-testid="div-1"]',
+    ) as HTMLDivElement;
+
+    const focusSpy = jest.spyOn(firstDiv, "focus");
+    fireEvent.focus(endSentinel);
+
+    expect(focusSpy).toHaveBeenCalled();
+    focusSpy.mockRestore();
+  });
+});
diff --git a/src/test/with_floating.test.tsx b/src/test/with_floating.test.tsx
new file mode 100644
index 000000000..88324e24c
--- /dev/null
+++ b/src/test/with_floating.test.tsx
@@ -0,0 +1,221 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import withFloating from "../with_floating";
+
+import type { FloatingProps } from "../with_floating";
+
+// Mock @floating-ui/react
+jest.mock("@floating-ui/react", () => ({
+  useFloating: jest.fn(() => ({
+    placement: "bottom",
+    strategy: "absolute",
+    middlewareData: {},
+    x: 0,
+    y: 0,
+    isPositioned: true,
+    update: jest.fn(),
+    floatingStyles: { position: "absolute" as const, top: 0, left: 0 },
+    refs: {
+      reference: { current: null },
+      floating: { current: null },
+      setFloating: jest.fn(),
+      setReference: jest.fn(),
+    },
+    elements: {
+      reference: null,
+      floating: null,
+      domReference: null,
+    },
+    context: {},
+  })),
+  arrow: jest.fn(() => ({ name: "arrow", fn: jest.fn() })),
+  offset: jest.fn(() => ({ name: "offset", fn: jest.fn() })),
+  flip: jest.fn(() => ({ name: "flip", fn: jest.fn() })),
+  autoUpdate: jest.fn(),
+}));
+
+interface TestComponentProps extends FloatingProps {
+  testProp?: string;
+}
+
+const TestComponent: React.FC<TestComponentProps> = ({
+  testProp,
+  popperProps,
+}) => (
+  <div data-testid="test-component" data-test-prop={testProp}>
+    <div data-testid="placement">{popperProps.placement}</div>
+    <div data-testid="arrow-ref">
+      {popperProps.arrowRef.current ? "has-ref" : "no-ref"}
+    </div>
+  </div>
+);
+
+describe("withFloating", () => {
+  it("wraps component and provides popperProps", () => {
+    const WrappedComponent = withFloating(TestComponent);
+    const { container } = render(<WrappedComponent />);
+
+    expect(
+      container.querySelector('[data-testid="test-component"]'),
+    ).toBeTruthy();
+    expect(
+      container.querySelector('[data-testid="placement"]')?.textContent,
+    ).toBe("bottom");
+  });
+
+  it("passes through original props", () => {
+    const WrappedComponent = withFloating(TestComponent);
+    const { container } = render(<WrappedComponent testProp="custom-value" />);
+
+    const testComponent = container.querySelector(
+      '[data-testid="test-component"]',
+    );
+    expect(testComponent?.getAttribute("data-test-prop")).toBe("custom-value");
+  });
+
+  it("provides arrowRef in popperProps", () => {
+    const WrappedComponent = withFloating(TestComponent);
+    const { container } = render(<WrappedComponent />);
+
+    expect(
+      container.querySelector('[data-testid="arrow-ref"]')?.textContent,
+    ).toBe("no-ref");
+  });
+
+  it("sets hidePopper to true by default", () => {
+    const { useFloating } = require("@floating-ui/react");
+    const WrappedComponent = withFloating(TestComponent);
+    render(<WrappedComponent />);
+
+    expect(useFloating).toHaveBeenCalledWith(
+      expect.objectContaining({
+        open: false,
+      }),
+    );
+  });
+
+  it("respects hidePopper prop when set to false", () => {
+    const { useFloating } = require("@floating-ui/react");
+    const WrappedComponent = withFloating(TestComponent);
+    render(<WrappedComponent hidePopper={false} />);
+
+    expect(useFloating).toHaveBeenCalledWith(
+      expect.objectContaining({
+        open: true,
+      }),
+    );
+  });
+
+  it("passes popperPlacement to useFloating", () => {
+    const { useFloating } = require("@floating-ui/react");
+    const WrappedComponent = withFloating(TestComponent);
+    render(<WrappedComponent popperPlacement="top" />);
+
+    expect(useFloating).toHaveBeenCalledWith(
+      expect.objectContaining({
+        placement: "top",
+      }),
+    );
+  });
+
+  it("includes default middleware", () => {
+    const { useFloating, flip, offset, arrow } = require("@floating-ui/react");
+    const WrappedComponent = withFloating(TestComponent);
+    render(<WrappedComponent />);
+
+    expect(flip).toHaveBeenCalledWith({ padding: 15 });
+    expect(offset).toHaveBeenCalledWith(10);
+    expect(arrow).toHaveBeenCalled();
+    expect(useFloating).toHaveBeenCalledWith(
+      expect.objectContaining({
+        middleware: expect.arrayContaining([
+          expect.objectContaining({ name: "flip" }),
+          expect.objectContaining({ name: "offset" }),
+          expect.objectContaining({ name: "arrow" }),
+        ]),
+      }),
+    );
+  });
+
+  it("includes custom popperModifiers", () => {
+    const { useFloating } = require("@floating-ui/react");
+    const customModifier = { name: "custom", fn: jest.fn() };
+    const WrappedComponent = withFloating(TestComponent);
+    render(<WrappedComponent popperModifiers={[customModifier]} />);
+
+    expect(useFloating).toHaveBeenCalledWith(
+      expect.objectContaining({
+        middleware: expect.arrayContaining([
+          expect.objectContaining({ name: "custom" }),
+        ]),
+      }),
+    );
+  });
+
+  it("passes popperProps to useFloating", () => {
+    const { useFloating } = require("@floating-ui/react");
+    const customProps = { strategy: "fixed" as const };
+    const WrappedComponent = withFloating(TestComponent);
+    render(<WrappedComponent popperProps={customProps} />);
+
+    expect(useFloating).toHaveBeenCalledWith(
+      expect.objectContaining({
+        strategy: "fixed",
+      }),
+    );
+  });
+
+  it("sets whileElementsMounted to autoUpdate", () => {
+    const { useFloating, autoUpdate } = require("@floating-ui/react");
+    const WrappedComponent = withFloating(TestComponent);
+    render(<WrappedComponent />);
+
+    expect(useFloating).toHaveBeenCalledWith(
+      expect.objectContaining({
+        whileElementsMounted: autoUpdate,
+      }),
+    );
+  });
+
+  it("sets displayName correctly", () => {
+    const NamedComponent: React.FC<FloatingProps> = () => <div />;
+    NamedComponent.displayName = "MyComponent";
+
+    const WrappedComponent = withFloating(NamedComponent);
+    expect(WrappedComponent.displayName).toBe("withFloating(MyComponent)");
+  });
+
+  it("sets displayName from component name if displayName not set", () => {
+    function MyNamedFunction(_props: FloatingProps) {
+      return <div />;
+    }
+
+    const WrappedComponent = withFloating(MyNamedFunction);
+    expect(WrappedComponent.displayName).toBe("withFloating(MyNamedFunction)");
+  });
+
+  it("sets displayName to Component if no name available", () => {
+    const AnonymousComponent: React.FC<FloatingProps> = () => <div />;
+
+    const WrappedComponent = withFloating(AnonymousComponent);
+    expect(WrappedComponent.displayName).toBe(
+      "withFloating(AnonymousComponent)",
+    );
+  });
+
+  it("handles hidePopper boolean correctly", () => {
+    const { useFloating } = require("@floating-ui/react");
+    const WrappedComponent = withFloating(TestComponent);
+
+    const { rerender } = render(<WrappedComponent hidePopper={true} />);
+    expect(useFloating).toHaveBeenCalledWith(
+      expect.objectContaining({ open: false }),
+    );
+
+    rerender(<WrappedComponent hidePopper={false} />);
+    expect(useFloating).toHaveBeenCalledWith(
+      expect.objectContaining({ open: true }),
+    );
+  });
+});

From 645dace1637fec0a07c497d2f553cd21b346563a Mon Sep 17 00:00:00 2001
From: codomposer <akileus0902@gmail.com>
Date: Tue, 4 Nov 2025 11:08:38 -0500
Subject: [PATCH 2/3] fix lint errors

---
 src/test/popper_component.test.tsx |  2 +
 src/test/with_floating.test.tsx    | 93 +++++++++++++++---------------
 2 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/src/test/popper_component.test.tsx b/src/test/popper_component.test.tsx
index 07786b47c..be3ddbb13 100644
--- a/src/test/popper_component.test.tsx
+++ b/src/test/popper_component.test.tsx
@@ -38,8 +38,10 @@ describe("PopperComponent", () => {
       floating: null,
       domReference: null,
     },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     context: {} as any,
     arrowRef: { current: null },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } as any;
 
   const defaultProps = {
diff --git a/src/test/with_floating.test.tsx b/src/test/with_floating.test.tsx
index 88324e24c..df39efa3d 100644
--- a/src/test/with_floating.test.tsx
+++ b/src/test/with_floating.test.tsx
@@ -6,33 +6,40 @@ import withFloating from "../with_floating";
 import type { FloatingProps } from "../with_floating";
 
 // Mock @floating-ui/react
+const mockUseFloating = jest.fn(() => ({
+  placement: "bottom",
+  strategy: "absolute",
+  middlewareData: {},
+  x: 0,
+  y: 0,
+  isPositioned: true,
+  update: jest.fn(),
+  floatingStyles: { position: "absolute" as const, top: 0, left: 0 },
+  refs: {
+    reference: { current: null },
+    floating: { current: null },
+    setFloating: jest.fn(),
+    setReference: jest.fn(),
+  },
+  elements: {
+    reference: null,
+    floating: null,
+    domReference: null,
+  },
+  context: {},
+}));
+
+const mockArrow = jest.fn(() => ({ name: "arrow", fn: jest.fn() }));
+const mockOffset = jest.fn(() => ({ name: "offset", fn: jest.fn() }));
+const mockFlip = jest.fn(() => ({ name: "flip", fn: jest.fn() }));
+const mockAutoUpdate = jest.fn();
+
 jest.mock("@floating-ui/react", () => ({
-  useFloating: jest.fn(() => ({
-    placement: "bottom",
-    strategy: "absolute",
-    middlewareData: {},
-    x: 0,
-    y: 0,
-    isPositioned: true,
-    update: jest.fn(),
-    floatingStyles: { position: "absolute" as const, top: 0, left: 0 },
-    refs: {
-      reference: { current: null },
-      floating: { current: null },
-      setFloating: jest.fn(),
-      setReference: jest.fn(),
-    },
-    elements: {
-      reference: null,
-      floating: null,
-      domReference: null,
-    },
-    context: {},
-  })),
-  arrow: jest.fn(() => ({ name: "arrow", fn: jest.fn() })),
-  offset: jest.fn(() => ({ name: "offset", fn: jest.fn() })),
-  flip: jest.fn(() => ({ name: "flip", fn: jest.fn() })),
-  autoUpdate: jest.fn(),
+  useFloating: mockUseFloating,
+  arrow: mockArrow,
+  offset: mockOffset,
+  flip: mockFlip,
+  autoUpdate: mockAutoUpdate,
 }));
 
 interface TestComponentProps extends FloatingProps {
@@ -84,11 +91,10 @@ describe("withFloating", () => {
   });
 
   it("sets hidePopper to true by default", () => {
-    const { useFloating } = require("@floating-ui/react");
     const WrappedComponent = withFloating(TestComponent);
     render(<WrappedComponent />);
 
-    expect(useFloating).toHaveBeenCalledWith(
+    expect(mockUseFloating).toHaveBeenCalledWith(
       expect.objectContaining({
         open: false,
       }),
@@ -96,11 +102,10 @@ describe("withFloating", () => {
   });
 
   it("respects hidePopper prop when set to false", () => {
-    const { useFloating } = require("@floating-ui/react");
     const WrappedComponent = withFloating(TestComponent);
     render(<WrappedComponent hidePopper={false} />);
 
-    expect(useFloating).toHaveBeenCalledWith(
+    expect(mockUseFloating).toHaveBeenCalledWith(
       expect.objectContaining({
         open: true,
       }),
@@ -108,11 +113,10 @@ describe("withFloating", () => {
   });
 
   it("passes popperPlacement to useFloating", () => {
-    const { useFloating } = require("@floating-ui/react");
     const WrappedComponent = withFloating(TestComponent);
     render(<WrappedComponent popperPlacement="top" />);
 
-    expect(useFloating).toHaveBeenCalledWith(
+    expect(mockUseFloating).toHaveBeenCalledWith(
       expect.objectContaining({
         placement: "top",
       }),
@@ -120,14 +124,13 @@ describe("withFloating", () => {
   });
 
   it("includes default middleware", () => {
-    const { useFloating, flip, offset, arrow } = require("@floating-ui/react");
     const WrappedComponent = withFloating(TestComponent);
     render(<WrappedComponent />);
 
-    expect(flip).toHaveBeenCalledWith({ padding: 15 });
-    expect(offset).toHaveBeenCalledWith(10);
-    expect(arrow).toHaveBeenCalled();
-    expect(useFloating).toHaveBeenCalledWith(
+    expect(mockFlip).toHaveBeenCalledWith({ padding: 15 });
+    expect(mockOffset).toHaveBeenCalledWith(10);
+    expect(mockArrow).toHaveBeenCalled();
+    expect(mockUseFloating).toHaveBeenCalledWith(
       expect.objectContaining({
         middleware: expect.arrayContaining([
           expect.objectContaining({ name: "flip" }),
@@ -139,12 +142,11 @@ describe("withFloating", () => {
   });
 
   it("includes custom popperModifiers", () => {
-    const { useFloating } = require("@floating-ui/react");
     const customModifier = { name: "custom", fn: jest.fn() };
     const WrappedComponent = withFloating(TestComponent);
     render(<WrappedComponent popperModifiers={[customModifier]} />);
 
-    expect(useFloating).toHaveBeenCalledWith(
+    expect(mockUseFloating).toHaveBeenCalledWith(
       expect.objectContaining({
         middleware: expect.arrayContaining([
           expect.objectContaining({ name: "custom" }),
@@ -154,12 +156,11 @@ describe("withFloating", () => {
   });
 
   it("passes popperProps to useFloating", () => {
-    const { useFloating } = require("@floating-ui/react");
     const customProps = { strategy: "fixed" as const };
     const WrappedComponent = withFloating(TestComponent);
     render(<WrappedComponent popperProps={customProps} />);
 
-    expect(useFloating).toHaveBeenCalledWith(
+    expect(mockUseFloating).toHaveBeenCalledWith(
       expect.objectContaining({
         strategy: "fixed",
       }),
@@ -167,13 +168,12 @@ describe("withFloating", () => {
   });
 
   it("sets whileElementsMounted to autoUpdate", () => {
-    const { useFloating, autoUpdate } = require("@floating-ui/react");
     const WrappedComponent = withFloating(TestComponent);
     render(<WrappedComponent />);
 
-    expect(useFloating).toHaveBeenCalledWith(
+    expect(mockUseFloating).toHaveBeenCalledWith(
       expect.objectContaining({
-        whileElementsMounted: autoUpdate,
+        whileElementsMounted: mockAutoUpdate,
       }),
     );
   });
@@ -205,16 +205,15 @@ describe("withFloating", () => {
   });
 
   it("handles hidePopper boolean correctly", () => {
-    const { useFloating } = require("@floating-ui/react");
     const WrappedComponent = withFloating(TestComponent);
 
     const { rerender } = render(<WrappedComponent hidePopper={true} />);
-    expect(useFloating).toHaveBeenCalledWith(
+    expect(mockUseFloating).toHaveBeenCalledWith(
       expect.objectContaining({ open: false }),
     );
 
     rerender(<WrappedComponent hidePopper={false} />);
-    expect(useFloating).toHaveBeenCalledWith(
+    expect(mockUseFloating).toHaveBeenCalledWith(
       expect.objectContaining({ open: true }),
     );
   });

From a406b5f54ce80266efba7863c7502949839cf295 Mon Sep 17 00:00:00 2001
From: codomposer <akileus0902@gmail.com>
Date: Thu, 6 Nov 2025 13:44:37 -0500
Subject: [PATCH 3/3] fix error in test

---
 src/test/with_floating.test.tsx | 110 +++++++++++++++++++-------------
 1 file changed, 66 insertions(+), 44 deletions(-)

diff --git a/src/test/with_floating.test.tsx b/src/test/with_floating.test.tsx
index df39efa3d..2dd172f4d 100644
--- a/src/test/with_floating.test.tsx
+++ b/src/test/with_floating.test.tsx
@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 import React from "react";
 
 import withFloating from "../with_floating";
@@ -6,41 +6,49 @@ import withFloating from "../with_floating";
 import type { FloatingProps } from "../with_floating";
 
 // Mock @floating-ui/react
-const mockUseFloating = jest.fn(() => ({
-  placement: "bottom",
-  strategy: "absolute",
-  middlewareData: {},
-  x: 0,
-  y: 0,
-  isPositioned: true,
-  update: jest.fn(),
-  floatingStyles: { position: "absolute" as const, top: 0, left: 0 },
-  refs: {
-    reference: { current: null },
-    floating: { current: null },
-    setFloating: jest.fn(),
-    setReference: jest.fn(),
-  },
-  elements: {
-    reference: null,
-    floating: null,
-    domReference: null,
-  },
-  context: {},
+jest.mock("@floating-ui/react", () => ({
+  useFloating: jest.fn(() => ({
+    placement: "bottom",
+    strategy: "absolute",
+    middlewareData: {},
+    x: 0,
+    y: 0,
+    isPositioned: true,
+    update: jest.fn(),
+    floatingStyles: { position: "absolute" as const, top: 0, left: 0 },
+    refs: {
+      reference: { current: null },
+      floating: { current: null },
+      setFloating: jest.fn(),
+      setReference: jest.fn(),
+    },
+    elements: {
+      reference: null,
+      floating: null,
+      domReference: null,
+    },
+    context: {},
+  })),
+  arrow: jest.fn(() => ({ name: "arrow", fn: jest.fn() })),
+  offset: jest.fn(() => ({ name: "offset", fn: jest.fn() })),
+  flip: jest.fn(() => ({ name: "flip", fn: jest.fn() })),
+  autoUpdate: jest.fn(),
 }));
 
-const mockArrow = jest.fn(() => ({ name: "arrow", fn: jest.fn() }));
-const mockOffset = jest.fn(() => ({ name: "offset", fn: jest.fn() }));
-const mockFlip = jest.fn(() => ({ name: "flip", fn: jest.fn() }));
-const mockAutoUpdate = jest.fn();
-
-jest.mock("@floating-ui/react", () => ({
+// Get the mocked functions
+const {
   useFloating: mockUseFloating,
   arrow: mockArrow,
   offset: mockOffset,
   flip: mockFlip,
   autoUpdate: mockAutoUpdate,
-}));
+} = jest.requireMock("@floating-ui/react") as {
+  useFloating: jest.Mock;
+  arrow: jest.Mock;
+  offset: jest.Mock;
+  flip: jest.Mock;
+  autoUpdate: jest.Mock;
+};
 
 interface TestComponentProps extends FloatingProps {
   testProp?: string;
@@ -59,9 +67,10 @@ const TestComponent: React.FC<TestComponentProps> = ({
 );
 
 describe("withFloating", () => {
-  it("wraps component and provides popperProps", () => {
+  it("wraps component and provides popperProps", async () => {
     const WrappedComponent = withFloating(TestComponent);
     const { container } = render(<WrappedComponent />);
+    await waitFor(() => expect(container).toBeTruthy());
 
     expect(
       container.querySelector('[data-testid="test-component"]'),
@@ -71,9 +80,10 @@ describe("withFloating", () => {
     ).toBe("bottom");
   });
 
-  it("passes through original props", () => {
+  it("passes through original props", async () => {
     const WrappedComponent = withFloating(TestComponent);
     const { container } = render(<WrappedComponent testProp="custom-value" />);
+    await waitFor(() => expect(container).toBeTruthy());
 
     const testComponent = container.querySelector(
       '[data-testid="test-component"]',
@@ -81,18 +91,20 @@ describe("withFloating", () => {
     expect(testComponent?.getAttribute("data-test-prop")).toBe("custom-value");
   });
 
-  it("provides arrowRef in popperProps", () => {
+  it("provides arrowRef in popperProps", async () => {
     const WrappedComponent = withFloating(TestComponent);
     const { container } = render(<WrappedComponent />);
+    await waitFor(() => expect(container).toBeTruthy());
 
     expect(
       container.querySelector('[data-testid="arrow-ref"]')?.textContent,
     ).toBe("no-ref");
   });
 
-  it("sets hidePopper to true by default", () => {
+  it("sets hidePopper to true by default", async () => {
     const WrappedComponent = withFloating(TestComponent);
     render(<WrappedComponent />);
+    await waitFor(() => expect(mockUseFloating).toHaveBeenCalled());
 
     expect(mockUseFloating).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -101,9 +113,10 @@ describe("withFloating", () => {
     );
   });
 
-  it("respects hidePopper prop when set to false", () => {
+  it("respects hidePopper prop when set to false", async () => {
     const WrappedComponent = withFloating(TestComponent);
     render(<WrappedComponent hidePopper={false} />);
+    await waitFor(() => expect(mockUseFloating).toHaveBeenCalled());
 
     expect(mockUseFloating).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -112,9 +125,10 @@ describe("withFloating", () => {
     );
   });
 
-  it("passes popperPlacement to useFloating", () => {
+  it("passes popperPlacement to useFloating", async () => {
     const WrappedComponent = withFloating(TestComponent);
     render(<WrappedComponent popperPlacement="top" />);
+    await waitFor(() => expect(mockUseFloating).toHaveBeenCalled());
 
     expect(mockUseFloating).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -123,9 +137,10 @@ describe("withFloating", () => {
     );
   });
 
-  it("includes default middleware", () => {
+  it("includes default middleware", async () => {
     const WrappedComponent = withFloating(TestComponent);
     render(<WrappedComponent />);
+    await waitFor(() => expect(mockUseFloating).toHaveBeenCalled());
 
     expect(mockFlip).toHaveBeenCalledWith({ padding: 15 });
     expect(mockOffset).toHaveBeenCalledWith(10);
@@ -141,10 +156,11 @@ describe("withFloating", () => {
     );
   });
 
-  it("includes custom popperModifiers", () => {
+  it("includes custom popperModifiers", async () => {
     const customModifier = { name: "custom", fn: jest.fn() };
     const WrappedComponent = withFloating(TestComponent);
     render(<WrappedComponent popperModifiers={[customModifier]} />);
+    await waitFor(() => expect(mockUseFloating).toHaveBeenCalled());
 
     expect(mockUseFloating).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -155,10 +171,11 @@ describe("withFloating", () => {
     );
   });
 
-  it("passes popperProps to useFloating", () => {
+  it("passes popperProps to useFloating", async () => {
     const customProps = { strategy: "fixed" as const };
     const WrappedComponent = withFloating(TestComponent);
     render(<WrappedComponent popperProps={customProps} />);
+    await waitFor(() => expect(mockUseFloating).toHaveBeenCalled());
 
     expect(mockUseFloating).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -167,9 +184,10 @@ describe("withFloating", () => {
     );
   });
 
-  it("sets whileElementsMounted to autoUpdate", () => {
+  it("sets whileElementsMounted to autoUpdate", async () => {
     const WrappedComponent = withFloating(TestComponent);
     render(<WrappedComponent />);
+    await waitFor(() => expect(mockUseFloating).toHaveBeenCalled());
 
     expect(mockUseFloating).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -204,17 +222,21 @@ describe("withFloating", () => {
     );
   });
 
-  it("handles hidePopper boolean correctly", () => {
+  it("handles hidePopper boolean correctly", async () => {
     const WrappedComponent = withFloating(TestComponent);
 
     const { rerender } = render(<WrappedComponent hidePopper={true} />);
-    expect(mockUseFloating).toHaveBeenCalledWith(
-      expect.objectContaining({ open: false }),
+    await waitFor(() =>
+      expect(mockUseFloating).toHaveBeenCalledWith(
+        expect.objectContaining({ open: false }),
+      ),
     );
 
     rerender(<WrappedComponent hidePopper={false} />);
-    expect(mockUseFloating).toHaveBeenCalledWith(
-      expect.objectContaining({ open: true }),
+    await waitFor(() =>
+      expect(mockUseFloating).toHaveBeenCalledWith(
+        expect.objectContaining({ open: true }),
+      ),
     );
   });
 });