Add tests for calendar and time edge cases

Author: martijnrusschen

src/test/calendar_test.test.tsx

@@ -221,6 +221,58 @@ describe("Calendar", () => {
     expect(isSameDay(instance?.state.date, openToDate)).toBeTruthy();
   });
 
+  it("should move pre-selection to first enabled day when month changes", () => {
+    const onSelect = jest.fn();
+    const setOpen = jest.fn();
+    const setPreSelection = jest.fn();
+    const filterDate = (date: Date) => date.getDate() >= 3;
+
+    const { instance } = getCalendar({
+      adjustDateOnChange: true,
+      onSelect,
+      setOpen,
+      setPreSelection,
+      filterDate,
+      selected: new Date("2024-01-15T00:00:00"),
+    });
+
+    const targetMonth = new Date("2024-02-01T00:00:00");
+    act(() => {
+      instance?.handleMonthChange(targetMonth);
+    });
+
+    const expectedDate = new Date("2024-02-03T00:00:00");
+    const [selectedDate] = onSelect.mock.calls[0];
+    expect(isSameDay(selectedDate, expectedDate)).toBe(true);
+    expect(setOpen).toHaveBeenCalledWith(true);
+    const [preSelectionDate] = setPreSelection.mock.calls[0];
+    expect(isSameDay(preSelectionDate, expectedDate)).toBe(true);
+    expect(instance?.state.isRenderAriaLiveMessage).toBe(true);
+  });
+
+  it("should fall back to provided month date when no enabled days exist", () => {
+    const onSelect = jest.fn();
+    const setPreSelection = jest.fn();
+    const filterDate = () => false;
+
+    const { instance } = getCalendar({
+      adjustDateOnChange: true,
+      onSelect,
+      setPreSelection,
+      filterDate,
+    });
+
+    const targetDate = new Date("2024-03-10T00:00:00");
+    act(() => {
+      instance?.handleMonthChange(targetDate);
+    });
+
+    const [fallbackSelected] = onSelect.mock.calls[0];
+    expect(isSameDay(fallbackSelected, targetDate)).toBe(true);
+    const [fallbackPreSelection] = setPreSelection.mock.calls[0];
+    expect(isSameDay(fallbackPreSelection, targetDate)).toBe(true);
+  });
+
   it("should open on openToDate date rather than selected date when both are specified", () => {
     const openToDate =
       parseDate("09/28/1993", DATE_FORMAT, undefined, false) ?? undefined;

src/test/click_outside_wrapper.test.tsx

@@ -148,6 +148,34 @@ describe("ClickOutsideWrapper", () => {
     expect(containerRef.current?.tagName).toBe("DIV");
   });
 
+  it("handles composedPath events (e.g. shadow DOM)", () => {
+    render(
+      <div>
+        <ClickOutsideWrapper onClickOutside={onClickOutsideMock}>
+          <div data-testid="inside">Inside</div>
+        </ClickOutsideWrapper>
+      </div>,
+    );
+
+    const outsideNode = document.createElement("div");
+    document.body.appendChild(outsideNode);
+
+    const event = new MouseEvent("mousedown", {
+      bubbles: true,
+      composed: true,
+    });
+    Object.defineProperty(event, "composed", { value: true });
+    Object.defineProperty(event, "composedPath", {
+      value: () => [outsideNode, document.body],
+    });
+
+    outsideNode.dispatchEvent(event);
+
+    expect(onClickOutsideMock).toHaveBeenCalled();
+
+    document.body.removeChild(outsideNode);
+  });
+
   it("cleans up event listener on unmount", () => {
     const removeEventListenerSpy = jest.spyOn(document, "removeEventListener");
 

src/test/filter_times_test.test.tsx

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import React from "react";
 
 import { getHours } from "../date_utils";
@@ -50,4 +50,42 @@ describe("TimeComponent", () => {
     ).every((time) => time.getAttribute("aria-disabled") === "true");
     expect(allDisabledTimeItemsHaveAriaDisabled).toBe(true);
   });
+
+  it("should block onChange for disabled times", () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <TimeComponent
+        onChange={onChange}
+        filterTime={(time) => getHours(time) !== HOUR_TO_DISABLE_IN_24_HR}
+      />,
+    );
+
+    const disabledTime = Array.from(
+      container.querySelectorAll(".react-datepicker__time-list-item"),
+    ).find((node) =>
+      node.classList.contains("react-datepicker__time-list-item--disabled"),
+    ) as HTMLElement;
+
+    fireEvent.click(disabledTime);
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("should call onChange for enabled times", () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <TimeComponent onChange={onChange} filterTime={() => true} />,
+    );
+
+    const enabledTime = Array.from(
+      container.querySelectorAll(".react-datepicker__time-list-item"),
+    ).find(
+      (node) =>
+        !node.classList.contains("react-datepicker__time-list-item--disabled"),
+    ) as HTMLElement;
+
+    fireEvent.click(enabledTime);
+
+    expect(onChange).toHaveBeenCalled();
+  });
 });