review: fix datesAreWithinMaxRange, add it to utils, add tests

Author: hoorayimhelping

src/components/DatePicker/DateRangePicker.tsx

@@ -13,7 +13,7 @@ import { Body, CalendarRenderer, DateRangePickerInput, DateTableCell } from "./C
 import { Container } from "../Container/Container";
 import { Panel } from "../Panel/Panel";
 import { Icon } from "../Icon/Icon";
-import { DateRange, selectedDateFormatter } from "./utils";
+import { DateRange, datesAreWithinMaxRange, selectedDateFormatter } from "./utils";
 
 const PredefinedCalendarContainer = styled(Panel)`
   align-items: start;
@@ -57,17 +57,6 @@ const DateRangeTableCell = styled(DateTableCell)<{
     `}
 `;
 
-const datesAreWithinMaxRange = (
-  startDate: Date,
-  endDate: Date,
-  maxRangeLength: number
-): boolean => {
-  const daysDifference =
-    Math.abs(startDate.getTime() - endDate.getTime()) / (1000 * 60 * 60 * 24);
-
-  return daysDifference >= maxRangeLength;
-};
-
 interface CalendarProps {
   calendarBody: Body;
   closeDatepicker: () => void;
@@ -122,7 +111,7 @@ const Calendar = ({
           if (
             maxRangeLength > 1 &&
             startDate &&
-            datesAreWithinMaxRange(startDate, fullDate, maxRangeLength)
+            !datesAreWithinMaxRange(startDate, fullDate, maxRangeLength)
           ) {
             isDisabled = true;
           }

src/components/DatePicker/utils.test.ts

@@ -0,0 +1,26 @@
+import { datesAreWithinMaxRange } from "./utils";
+
+describe("DatePicker utils", () => {
+  describe("checking if two dates are fall within a range", () => {
+    it("returns true if the two dates are within the range", () => {
+      const date1 = new Date("07-01-2025");
+      const date2 = new Date("07-08-2025");
+
+      expect(datesAreWithinMaxRange(date1, date2, 15)).toBeTruthy();
+    });
+
+    it("returns false if the two dates are not within the range", () => {
+      const date1 = new Date("07-01-2025");
+      const date2 = new Date("07-31-2025");
+
+      expect(datesAreWithinMaxRange(date1, date2, 15)).toBeFalsy();
+    })
+
+    it("is inclusive with dates", () => {
+      const date1 = new Date("07-01-2025");
+      const date2 = new Date("07-16-2025");
+
+      expect(datesAreWithinMaxRange(date1, date2, 15)).toBeTruthy();
+    })
+  });
+});

src/components/DatePicker/utils.ts

@@ -49,3 +49,13 @@ export const getPredefinedMonthsByNumber = (numberOfMonths: number): Array<DateR
 
   return nextSixMonths;
 };
+
+export const datesAreWithinMaxRange = (
+  startDate: Date,
+  endDate: Date,
+  maxRangeLength: number
+): boolean => {
+  const daysDifference = Math.abs(dayjs(startDate).diff(dayjs(endDate), "days"));
+
+  return daysDifference <= maxRangeLength;
+};