Cleanup and tests

Author: hoorayimhelping

src/components/DatePicker/Common.tsx

@@ -6,13 +6,7 @@ import { Container } from "../Container/Container";
 import { useCalendar, UseCalendarOptions } from "@h6s/calendar";
 import { IconButton } from "../IconButton/IconButton";
 import { Text } from "../Typography/Text/Text";
-
-const locale = "en-US";
-export const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
-  day: "2-digit",
-  month: "short",
-  year: "numeric",
-});
+import { headerDateFormatter, selectedDateFormatter, weekdayFormatter } from "./utils";
 
 const explicitWidth = "250px";
 
@@ -137,12 +131,6 @@ export const DateRangePickerInput = ({
   );
 };
 
-const weekdayFormatter = new Intl.DateTimeFormat(locale, { weekday: "short" });
-const headerDateFormatter = new Intl.DateTimeFormat(locale, {
-  month: "short",
-  year: "numeric",
-});
-
 const DatePickerContainer = styled(Container)`
   background: ${({ theme }) =>
     theme.click.datePicker.dateOption.color.background.default};

src/components/DatePicker/DateRangePicker.stories.tsx

@@ -1,34 +1,6 @@
 import { Args, Meta, StoryObj } from "@storybook/react";
-import { DateRange, DateRangePicker } from "./DateRangePicker";
-import dayjs from "dayjs";
-
-const getMonthsByNumber = (numberOfMonths: number): Array<DateRange> => {
-  const now = dayjs();
-
-  if (numberOfMonths < 0) {
-    const lastSixMonths: Array<DateRange> = [];
-    for (let i = 0; i < Math.abs(numberOfMonths); i++) {
-      const date = now.subtract(i, "month");
-      lastSixMonths.push({
-        startDate: date.startOf("month").toDate(),
-        endDate: i === 0 ? now.toDate() : date.endOf("month").toDate(),
-      });
-    }
-
-    return lastSixMonths.reverse();
-  }
-
-  const nextSixMonths: Array<DateRange> = [];
-  for (let i = 0; i < numberOfMonths; i++) {
-    const date = now.add(i, "month");
-    nextSixMonths.push({
-      startDate: date.startOf("month").toDate(),
-      endDate: i === 0 ? now.toDate() : date.endOf("month").toDate(),
-    });
-  }
-
-  return nextSixMonths;
-};
+import { DateRangePicker } from "./DateRangePicker";
+import { getPredefinedMonthsByNumber } from "./utils";
 
 const meta: Meta<typeof DateRangePicker> = {
   component: DateRangePicker,
@@ -98,6 +70,24 @@ export const DateRangeWithMaxRange: Story = {
     maxRangeLength: 15,
     predefinedDatesList: [],
   },
+   render: (args: Args) => {
+    const endDate = args.endDate ? new Date(args.endDate) : undefined;
+    const startDate = args.startDate ? new Date(args.startDate) : undefined;
+
+    return (
+      <DateRangePicker
+        key="default"
+        endDate={endDate}
+        disabled={args.disabled}
+        futureDatesDisabled={args.futureDatesDisabled}
+        futureStartDatesDisabled={args.futureStartDatesDisabled}
+        maxRangeLength={args.maxRangeLength}
+        onSelectDateRange={args.onSelectDateRange}
+        placeholder={args.placeholder}
+        startDate={startDate}
+      />
+    );
+  },
 };
 
 export const DateRangeFutureStartDatesDisabled: Story = {
@@ -111,7 +101,7 @@ export const PredefinedDatesLastSixMonths: Story = {
   render: (args: Args) => {
     const endDate = args.endDate ? new Date(args.endDate) : undefined;
     const startDate = args.startDate ? new Date(args.startDate) : undefined;
-    const predefinedDatesList = getMonthsByNumber(-6);
+    const predefinedDatesList = getPredefinedMonthsByNumber(-6);
 
     return (
       <DateRangePicker
@@ -134,7 +124,7 @@ export const PredefinedDatesNextSixMonths: Story = {
   render: (args: Args) => {
     const endDate = args.endDate ? new Date(args.endDate) : undefined;
     const startDate = args.startDate ? new Date(args.startDate) : undefined;
-    const predefinedDatesList = getMonthsByNumber(6);
+    const predefinedDatesList = getPredefinedMonthsByNumber(6);
 
     return (
       <DateRangePicker

src/components/DatePicker/DateRangePicker.test.tsx

@@ -1,6 +1,8 @@
 import { renderCUI } from "@/utils/test-utils";
 import { DateRangePicker } from "./DateRangePicker";
 import userEvent from "@testing-library/user-event";
+import { getPredefinedMonthsByNumber } from "./utils";
+import { fireEvent } from "@testing-library/dom";
 
 describe("DateRangePicker", () => {
   it("opens the calendar on click", async () => {
@@ -149,6 +151,28 @@ describe("DateRangePicker", () => {
 
       expect(handleSelectDate).not.toHaveBeenCalled();
     });
+
+    it("allows restricting the max range length", async () => {
+      const startDate = new Date("07-04-2020");
+      const handleSelectDate = vi.fn();
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      const { getByTestId, findByText } = renderCUI(
+        <DateRangePicker
+          startDate={startDate}
+          onSelectDateRange={handleSelectDate}
+          maxRangeLength={15}
+        />
+      );
+
+      user.click(getByTestId("daterangepicker-input"));
+      user.click(await findByText("25"));
+
+      expect(handleSelectDate).not.toHaveBeenCalled();
+
+      fireEvent.click(await findByText("15"));
+      expect(handleSelectDate).toHaveBeenCalled();
+    });
   });
 
   describe("predefined date ranges", () => {
@@ -160,7 +184,7 @@ describe("DateRangePicker", () => {
       vi.useRealTimers();
     });
 
-    it("doesn't show any preselected dates if the value isn't set", async () => {
+    it("doesn't show any preselected dates if the predefined dates list isn't set", async () => {
       const handleSelectDate = vi.fn();
 
       const { getByTestId, queryByTestId } = renderCUI(
@@ -172,33 +196,58 @@ describe("DateRangePicker", () => {
       expect(queryByTestId("predefined-dates-list")).not.toBeInTheDocument();
     });
 
-    it("shows dates in the past if the value is negative", async () => {
+    it("shows dates in the past if getPredefinedMonthsByNumber's value is negative", async () => {
       const handleSelectDate = vi.fn();
 
+      const predefinedDatesList = getPredefinedMonthsByNumber(-6);
       const { getByTestId, getByText } = renderCUI(
         <DateRangePicker
           onSelectDateRange={handleSelectDate}
-          predefinedDatesCount={-6}
+          predefinedDatesList={predefinedDatesList}
         />
       );
 
       await userEvent.click(getByTestId("daterangepicker-input"));
 
-      expect(getByText("Jul 2020")).toBeInTheDocument();
+      expect(getByText("Jul 01, 2020 - Jul 04, 2020")).toBeInTheDocument();
+      expect(getByText("Jun 2020")).toBeInTheDocument();
+      expect(getByText("May 2020")).toBeInTheDocument();
+      expect(getByText("Apr 2020")).toBeInTheDocument();
+      expect(getByText("Mar 2020")).toBeInTheDocument();
+      expect(getByText("Feb 2020")).toBeInTheDocument();
+    });
+
+    it("doesn't show a range of a single day when using the past six months and its the first of the month", async () => {
+      vi.setSystemTime(new Date("07-01-2020"));
+
+      const handleSelectDate = vi.fn();
+
+      const predefinedDatesList = getPredefinedMonthsByNumber(-6);
+      const { getByTestId, getByText, queryByText } = renderCUI(
+        <DateRangePicker
+          onSelectDateRange={handleSelectDate}
+          predefinedDatesList={predefinedDatesList}
+        />
+      );
+
+      await userEvent.click(getByTestId("daterangepicker-input"));
+
+      expect(queryByText("Jul")).not.toBeInTheDocument();
       expect(getByText("Jun 2020")).toBeInTheDocument();
       expect(getByText("May 2020")).toBeInTheDocument();
       expect(getByText("Apr 2020")).toBeInTheDocument();
       expect(getByText("Mar 2020")).toBeInTheDocument();
       expect(getByText("Feb 2020")).toBeInTheDocument();
     });
 
-    it("shows dates in the future if the value is positive", async () => {
+    it("shows dates in the future if getPredefinedMonthsByNumber's value is positive", async () => {
       const handleSelectDate = vi.fn();
 
+      const predefinedDatesList = getPredefinedMonthsByNumber(6);
       const { getByTestId, getByText } = renderCUI(
         <DateRangePicker
           onSelectDateRange={handleSelectDate}
-          predefinedDatesCount={6}
+          predefinedDatesList={predefinedDatesList}
         />
       );
 
@@ -212,69 +261,72 @@ describe("DateRangePicker", () => {
       expect(getByText("Dec 2020")).toBeInTheDocument();
     });
 
-    it("allows showing the full calendar", async () => {
+    it("shows the current current month if it's the first day of month if getPredefinedMonthsByNumber's value is positive", async () => {
+      vi.setSystemTime(new Date("07-01-2020"));
       const handleSelectDate = vi.fn();
 
-      const { getByTestId, getByText, queryByTestId } = renderCUI(
+      const predefinedDatesList = getPredefinedMonthsByNumber(6);
+      const { getByTestId, getByText } = renderCUI(
         <DateRangePicker
           onSelectDateRange={handleSelectDate}
-          predefinedDatesCount={-12}
+          predefinedDatesList={predefinedDatesList}
         />
       );
 
-      expect(queryByTestId("datepicker-calendar-container")).not.toBeInTheDocument();
-
       await userEvent.click(getByTestId("daterangepicker-input"));
-      await userEvent.click(getByText("Custom time period"));
 
-      expect(getByTestId("datepicker-calendar-container")).toBeInTheDocument();
+      expect(getByText("Jul 2020")).toBeInTheDocument();
+      expect(getByText("Aug 2020")).toBeInTheDocument();
+      expect(getByText("Sep 2020")).toBeInTheDocument();
+      expect(getByText("Oct 2020")).toBeInTheDocument();
+      expect(getByText("Nov 2020")).toBeInTheDocument();
+      expect(getByText("Dec 2020")).toBeInTheDocument();
     });
 
-    it("shows at maximum six dates in the past or future", async () => {
+    it("allows showing the full calendar", async () => {
       const handleSelectDate = vi.fn();
 
-      const { getByTestId, getByText, queryByText } = renderCUI(
+      const predefinedDatesList = getPredefinedMonthsByNumber(6);
+      const { getByTestId, getByText, queryByTestId } = renderCUI(
         <DateRangePicker
           onSelectDateRange={handleSelectDate}
-          predefinedDatesCount={-12}
+          predefinedDatesList={predefinedDatesList}
         />
       );
 
-      await userEvent.click(getByTestId("daterangepicker-input"));
+      expect(queryByTestId("datepicker-calendar-container")).not.toBeInTheDocument();
 
-      expect(getByText("Jul 2020")).toBeInTheDocument();
-      expect(getByText("Jun 2020")).toBeInTheDocument();
-      expect(getByText("May 2020")).toBeInTheDocument();
-      expect(getByText("Apr 2020")).toBeInTheDocument();
-      expect(getByText("Mar 2020")).toBeInTheDocument();
-      expect(getByText("Feb 2020")).toBeInTheDocument();
+      await userEvent.click(getByTestId("daterangepicker-input"));
+      await userEvent.click(getByText("Custom time period"));
 
-      expect(queryByText("Jan 2020")).not.toBeInTheDocument();
+      expect(getByTestId("datepicker-calendar-container")).toBeInTheDocument();
     });
 
     it("selects up to the current date if the current month is selected", async () => {
       const handleSelectDate = vi.fn();
 
+      const predefinedDatesList = getPredefinedMonthsByNumber(-6);
       const { getByTestId, getByText } = renderCUI(
         <DateRangePicker
           onSelectDateRange={handleSelectDate}
-          predefinedDatesCount={-6}
+          predefinedDatesList={predefinedDatesList}
         />
       );
 
       await userEvent.click(getByTestId("daterangepicker-input"));
 
-      await userEvent.click(getByText("Jul 2020"));
+      await userEvent.click(getByTestId("Jul 01, 2020 - Jul 04, 2020"));
       expect(getByText("Jul 01, 2020 – Jul 04, 2020")).toBeInTheDocument();
     });
 
     it("selects the full month if a date in the past or future is selected", async () => {
       const handleSelectDate = vi.fn();
 
+      const predefinedDatesList = getPredefinedMonthsByNumber(-6);
       const { getByTestId, getByText } = renderCUI(
         <DateRangePicker
           onSelectDateRange={handleSelectDate}
-          predefinedDatesCount={-6}
+          predefinedDatesList={predefinedDatesList}
         />
       );
 
@@ -287,10 +339,11 @@ describe("DateRangePicker", () => {
     it("shows the selected month if an entire month is manually selected", async () => {
       const handleSelectDate = vi.fn();
 
+      const predefinedDatesList = getPredefinedMonthsByNumber(-6);
       const { getByTestId, getAllByText, getByText } = renderCUI(
         <DateRangePicker
           onSelectDateRange={handleSelectDate}
-          predefinedDatesCount={-6}
+          predefinedDatesList={predefinedDatesList}
         />
       );
 
@@ -311,16 +364,17 @@ describe("DateRangePicker", () => {
       vi.setSystemTime(new Date("03-04-2020"));
       const handleSelectDate = vi.fn();
 
+      const predefinedDatesList = getPredefinedMonthsByNumber(-6);
       const { getByTestId, getByText } = renderCUI(
         <DateRangePicker
           onSelectDateRange={handleSelectDate}
-          predefinedDatesCount={-6}
+          predefinedDatesList={predefinedDatesList}
         />
       );
 
       await userEvent.click(getByTestId("daterangepicker-input"));
 
-      expect(getByText("Mar 2020")).toBeInTheDocument();
+      expect(getByText("Mar 01, 2020 - Mar 04, 2020")).toBeInTheDocument();
       expect(getByText("Feb 2020")).toBeInTheDocument();
       expect(getByText("Jan 2020")).toBeInTheDocument();
       expect(getByText("Dec 2019")).toBeInTheDocument();