@sproutsocial/seeds-react-datepicker 1.0.51 → 1.1.0

package/src/__tests__/DatepickerContract.test.tsx

@@ -0,0 +1,269 @@
+import React from "react";
+import moment, { type Moment } from "moment";
+import {
+  render,
+  screen,
+  within,
+} from "@sproutsocial/seeds-react-testing-library";
+import { theme } from "@sproutsocial/seeds-react-theme";
+import { CalendarDay } from "../styles";
+import {
+  SingleDatePicker,
+  StatefulSingleDatePicker,
+} from "../SingleDatePicker";
+import { DateRangePicker, StatefulDateRangePicker } from "../DateRangePicker";
+
+/**
+ * Permanent contract tests for the Datepicker package.
+ *
+ * These freeze the observable public behavior of SingleDatePicker,
+ * DateRangePicker, and the day-cell styling contract, and must stay GREEN
+ * across the styled-components -> Tailwind hybrid migration.
+ *
+ * Determinism: the visible month, the day-of-week modifiers that decide the
+ * pill radii, and react-dates' English aria phrases all depend on ambient
+ * state. Pin a mid-month noon-UTC instant (no timezone offset can move it out
+ * of June 2026, and +/- a week stays inside the visible month) and the "en"
+ * locale.
+ */
+
+const FIXED_NOW = new Date("2026-06-15T12:00:00Z");
+
+// A Wednesday in the middle of June 2026: not the first day of the week, not
+// the first or last day of the month. Every pill-edge predicate is false for
+// it unless a modifier forces one, which is what makes it the right probe for
+// the "no declaration emitted" contract below.
+const MID_WEEK_DAY = moment("2026-06-17");
+
+const noop = () => {};
+
+const renderCalendarDay = (modifiers: string[], day = MID_WEEK_DAY) => {
+  const { container } = render(
+    <CalendarDay day={day} modifiers={new Set(modifiers)}>
+      {day.format("D")}
+    </CalendarDay>
+  );
+  return container.firstChild as HTMLElement;
+};
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest.setSystemTime(FIXED_NOW);
+  moment.locale("en");
+});
+
+describe("CalendarDay styling contract", () => {
+  it("renders the day contents in a single element", () => {
+    const day = renderCalendarDay([]);
+    expect(day.tagName).toBe("DIV");
+    expect(day).toHaveTextContent("17");
+  });
+
+  it("does not paint an unmodified day", () => {
+    const day = renderCalendarDay([]);
+    expect(day).toHaveStyleRule("background-color", undefined);
+    expect(day).toHaveStyleRule("color", undefined);
+  });
+
+  it("paints a selected day and gives it both pill edges", () => {
+    const day = renderCalendarDay(["selected"]);
+    expect(day).toHaveStyleRule(
+      "background-color",
+      theme.colors.container.background.selected
+    );
+    expect(day).toHaveStyleRule("color", theme.colors.text.inverse);
+    expect(day).toHaveStyleRule("margin-left", theme.space[200]);
+    expect(day).toHaveStyleRule("margin-right", theme.space[200]);
+    expect(day).toHaveStyleRule("border-top-left-radius", theme.radii.pill);
+    expect(day).toHaveStyleRule("border-bottom-left-radius", theme.radii.pill);
+    expect(day).toHaveStyleRule("border-top-right-radius", theme.radii.pill);
+    expect(day).toHaveStyleRule("border-bottom-right-radius", theme.radii.pill);
+  });
+
+  /**
+   * The interior of a selection emits NO margin/radius declaration at all —
+   * styled-components drops `margin-left: ${false && ...}` rather than writing
+   * `margin-left: 0`. A port that writes a zero fallback is a silent
+   * regression, so this asserts absence, not a zero value.
+   */
+  it("emits no edge declarations for the interior of a selected span", () => {
+    const day = renderCalendarDay(["selected-span"]);
+    expect(day).toHaveStyleRule(
+      "background-color",
+      theme.colors.container.background.selected
+    );
+    for (const property of [
+      "margin-left",
+      "margin-right",
+      "border-top-left-radius",
+      "border-bottom-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+    ]) {
+      expect(day).toHaveStyleRule(property, undefined);
+    }
+  });
+
+  it("gives a selected span a left pill on the first day of the week only", () => {
+    const day = renderCalendarDay(["selected-span", "first-day-of-week"]);
+    expect(day).toHaveStyleRule("margin-left", theme.space[200]);
+    expect(day).toHaveStyleRule("margin-right", undefined);
+  });
+
+  it("gives a selected span a right pill on the last day of the week only", () => {
+    const day = renderCalendarDay(["selected-span", "last-day-of-week"]);
+    expect(day).toHaveStyleRule("margin-right", theme.space[200]);
+    expect(day).toHaveStyleRule("margin-left", undefined);
+  });
+
+  it("pills the first and last day of the month inside a span", () => {
+    expect(
+      renderCalendarDay(["selected-span"], moment("2026-06-01"))
+    ).toHaveStyleRule("margin-left", theme.space[200]);
+    expect(
+      renderCalendarDay(["selected-span"], moment("2026-06-30"))
+    ).toHaveStyleRule("margin-right", theme.space[200]);
+  });
+
+  it("outlines a hovered in-range day", () => {
+    const day = renderCalendarDay(["hovered"]);
+    expect(day).toHaveStyleRule("margin", `0 ${theme.space[200]}`);
+    expect(day).toHaveStyleRule("border-radius", theme.radii.pill);
+    expect(day).toHaveStyleRule(
+      "border",
+      `1px solid ${theme.colors.container.border.selected}`
+    );
+  });
+
+  it("does not outline a hovered day that is out of range", () => {
+    const day = renderCalendarDay(["hovered", "blocked-out-of-range"]);
+    expect(day).toHaveStyleRule("border-radius", undefined);
+    expect(day).toHaveStyleRule("color", theme.colors.text.subtext);
+    expect(day).toHaveStyleRule("opacity", "0.4");
+    expect(day).toHaveStyleRule("pointer-events", "none");
+  });
+
+  it("dims an out-of-range day", () => {
+    const day = renderCalendarDay(["blocked-out-of-range"]);
+    expect(day).toHaveStyleRule("color", theme.colors.text.subtext);
+    expect(day).toHaveStyleRule("opacity", "0.4");
+    expect(day).toHaveStyleRule("pointer-events", "none");
+  });
+
+  it("prefers the selected treatment over out-of-range", () => {
+    const day = renderCalendarDay(["selected", "blocked-out-of-range"]);
+    expect(day).toHaveStyleRule("color", theme.colors.text.inverse);
+    expect(day).toHaveStyleRule("pointer-events", undefined);
+  });
+});
+
+describe("SingleDatePicker contract", () => {
+  it("announces the visible month in a live status region", () => {
+    render(<SingleDatePicker date={moment()} onDateChange={noop} />);
+    expect(screen.getByRole("status")).toHaveTextContent("June 2026");
+  });
+
+  it("renders one month of day cells carrying the day number", () => {
+    const { container } = render(
+      <SingleDatePicker date={moment()} onDateChange={noop} />
+    );
+    expect(container.querySelectorAll("[data-visible=true]")).toHaveLength(1);
+    expect(
+      within(screen.getByLabelText("Wednesday, June 17, 2026")).getByText("17")
+    ).toBeInTheDocument();
+  });
+
+  it("renders both month navigation controls with decorative icons", () => {
+    const { container } = render(
+      <SingleDatePicker date={moment()} onDateChange={noop} />
+    );
+    const previous = screen.getByLabelText(
+      "Move backward to switch to the previous month."
+    );
+    const next = screen.getByLabelText(
+      "Move forward to switch to the next month."
+    );
+    expect(previous).toHaveClass("DayPickerNavigation_button__horizontal");
+    expect(next).toHaveClass("DayPickerNavigation_button__horizontal");
+    expect(container.querySelectorAll(".seeds-icon[aria-hidden]")).toHaveLength(
+      2
+    );
+  });
+
+  it("hides the keyboard shortcuts panel by default", () => {
+    render(<SingleDatePicker date={moment()} onDateChange={noop} />);
+    expect(
+      screen.queryByLabelText("Open the keyboard shortcuts panel.")
+    ).toBeNull();
+  });
+
+  /**
+   * `commonDatePickerProps` is spread BEFORE `...rest`, so every default it
+   * supplies is overridable by the caller. That spread order is observable
+   * contract, not an implementation detail.
+   */
+  it("lets a caller override a default supplied by commonDatePickerProps", () => {
+    render(
+      <StatefulSingleDatePicker
+        date={moment()}
+        hideKeyboardShortcutsPanel={false}
+      />
+    );
+    expect(
+      screen.getByLabelText("Open the keyboard shortcuts panel.")
+    ).toBeInTheDocument();
+  });
+
+  it("lets a caller replace renderDayContents entirely", () => {
+    render(
+      <StatefulSingleDatePicker
+        date={moment()}
+        renderDayContents={(day: Moment) => <b>{`d${day.format("D")}`}</b>}
+      />
+    );
+    const cell = screen.getByLabelText("Wednesday, June 17, 2026");
+    expect(within(cell).getByText("d17")).toBeInTheDocument();
+    expect(cell.querySelector("b")).toBeInTheDocument();
+  });
+});
+
+describe("DateRangePicker contract", () => {
+  it("announces both visible months in a live status region", () => {
+    render(
+      <DateRangePicker
+        startDate={moment()}
+        focusedInput="startDate"
+        onDatesChange={noop}
+        onFocusChange={noop}
+      />
+    );
+    expect(screen.getByRole("status")).toHaveTextContent(
+      "June 2026, July 2026"
+    );
+  });
+
+  it("renders two months by default", () => {
+    const { container } = render(
+      <DateRangePicker
+        startDate={moment()}
+        focusedInput="startDate"
+        onDatesChange={noop}
+        onFocusChange={noop}
+      />
+    );
+    expect(container.querySelectorAll("[data-visible=true]")).toHaveLength(2);
+  });
+
+  it("lets a caller override the month count", () => {
+    const { container } = render(
+      <DateRangePicker
+        startDate={moment()}
+        focusedInput="startDate"
+        onDatesChange={noop}
+        onFocusChange={noop}
+        numberOfMonths={1}
+      />
+    );
+    expect(container.querySelectorAll("[data-visible=true]")).toHaveLength(1);
+  });
+});