Add tests for CalendarDay component

src/pages/book-session/components/calendar-day/CalendarDay.styles.tsx

@@ -0,0 +1,83 @@
+import { SxProps, alpha, styled } from "@mui/material";
+
+import { CalendarCell } from "@/pages/book-session/components/calendar-cell/CalendarCell";
+import { CalendarSize } from "@/pages/book-session/hooks/use-calendar/useCalendar.types";
+import theme from "@/theme/theme";
+
+type CalendarDayCellProps = {
+  isToday?: boolean;
+  isSelected?: boolean;
+  hasAvailableSessions?: boolean;
+  isAnotherMonth?: boolean;
+  calendarSize: CalendarSize;
+};
+
+export const CalendarDayCell = styled(CalendarCell, {
+  shouldForwardProp: prop =>
+    prop !== "isToday" &&
+    prop !== "isSelected" &&
+    prop !== "isAnotherMonth" &&
+    prop !== "hasAvailableSessions" &&
+    prop !== "calendarSize",
+})<CalendarDayCellProps>(({
+  isToday,
+  isSelected,
+  isAnotherMonth,
+  hasAvailableSessions = false,
+  calendarSize,
+}) => {
+  const outlineBoxShadow = "0 0 0 1px #ffffff, 0 0 0 3px #116dff";
+
+  const styles: Record<string, SxProps | string> = {
+    "&:focus-visible": {
+      boxShadow: outlineBoxShadow,
+    },
+    "&:disabled": {
+      color: "rgb(181, 180, 177)",
+      "&::after": {
+        content: "none",
+      },
+    },
+  };
+
+  const isMobileCalendar = calendarSize === "compact";
+
+  if (isMobileCalendar) {
+    styles["&:active"] = {
+      boxShadow: outlineBoxShadow,
+    };
+  }
+
+  const shouldDisplayDot = !isAnotherMonth && hasAvailableSessions;
+
+  if (shouldDisplayDot) {
+    styles["&::after"] = {
+      content: "''",
+      position: "absolute",
+      bottom: "4.5px",
+      width: "4px",
+      aspectRatio: "1 / 1",
+      borderRadius: "50%",
+      backgroundColor: theme.palette.secondary.main,
+    };
+  }
+
+  if (isSelected && !isAnotherMonth) {
+    styles.backgroundColor = theme.palette.secondary.main;
+    styles.color = theme.palette.primary.main;
+    styles["&:hover"] = {
+      opacity: 0.75,
+    };
+  } else {
+    if (isToday) {
+      styles.color = theme.palette.FieryOrange.main;
+    }
+    styles["&:hover"] = {
+      backgroundColor: isMobileCalendar
+        ? alpha(theme.palette.secondary.main, 0.1)
+        : alpha(theme.palette.FieryOrange.main, 0.1),
+    };
+  }
+
+  return styles;
+});

src/pages/book-session/components/calendar-day/CalendarDay.tsx

@@ -1,93 +1,12 @@
-import { SxProps, alpha } from "@mui/material";
-import { styled } from "@mui/material";
 import { format, isBefore, isToday, startOfToday } from "date-fns";
 
-import { CalendarCell } from "@/pages/book-session/components/calendar-cell/CalendarCell";
-import { useDatetimePickerContext } from "@/pages/book-session/context/datetime-picker-context/DatetimePickerProvider.tsx";
+import { CalendarDayCell } from "@/pages/book-session/components/calendar-day/CalendarDay.styles";
+import { useDatetimePickerContext } from "@/pages/book-session/context/datetime-picker-context/DatetimePickerProvider";
 import {
   CalendarSize,
   CalendarUtils,
 } from "@/pages/book-session/hooks/use-calendar/useCalendar.types";
 
-type CalendarDayCellProps = {
-  isToday?: boolean;
-  isSelected?: boolean;
-  hasAvailableSessions?: boolean;
-  isAnotherMonth?: boolean;
-  calendarSize: CalendarSize;
-};
-
-const CalendarDayCell = styled(CalendarCell, {
-  shouldForwardProp: prop =>
-    prop !== "isToday" &&
-    prop !== "isSelected" &&
-    prop !== "isAnotherMonth" &&
-    prop !== "hasAvailableSessions" &&
-    prop !== "calendarSize",
-})<CalendarDayCellProps>(({
-  theme,
-  isToday,
-  isSelected,
-  isAnotherMonth,
-  hasAvailableSessions = false,
-  calendarSize,
-}) => {
-  const outlineBoxShadow = "0 0 0 1px #ffffff, 0 0 0 3px #116dff";
-
-  const styles: Record<string, SxProps | string> = {
-    "&:focus-visible": {
-      boxShadow: outlineBoxShadow,
-    },
-    "&:disabled": {
-      color: "rgb(181, 180, 177)",
-      "&::after": {
-        content: "none",
-      },
-    },
-  };
-
-  const isMobileCalendar = calendarSize === "compact";
-
-  if (isMobileCalendar) {
-    styles["&:active"] = {
-      boxShadow: outlineBoxShadow,
-    };
-  }
-
-  const shouldDisplayDot = !isAnotherMonth && hasAvailableSessions;
-
-  if (shouldDisplayDot) {
-    styles["&::after"] = {
-      content: "''",
-      position: "absolute",
-      bottom: "4.5px",
-      width: "4px",
-      aspectRatio: "1 / 1",
-      borderRadius: "50%",
-      backgroundColor: theme.palette.secondary.main,
-    };
-  }
-
-  if (isSelected && !isAnotherMonth) {
-    styles.backgroundColor = theme.palette.secondary.main;
-    styles.color = theme.palette.primary.main;
-    styles["&:hover"] = {
-      opacity: 0.75,
-    };
-  } else {
-    if (isToday) {
-      styles.color = theme.palette.FieryOrange.main;
-    }
-    styles["&:hover"] = {
-      backgroundColor: isMobileCalendar
-        ? alpha(theme.palette.secondary.main, 0.1)
-        : alpha(theme.palette.FieryOrange.main, 0.1),
-    };
-  }
-
-  return styles;
-});
-
 type CalendarDayProps = {
   day: Date;
   utils: CalendarUtils;
@@ -106,21 +25,22 @@ export default function CalendarDay({
   const isAnotherMonth = checkAnotherMonth(day);
   const isSelected = checkSelected(day);
 
+  const handleClick = () => {
+    setSelectedDate(day);
+    setSelectedTime(null);
+  };
+
   return (
     <CalendarDayCell
       key={day.getTime()}
       calendarSize={calendarSize}
       disabled={isBefore(day, startOfToday()) || isAnotherMonth}
-      // comparing object references here because we use same object with debounce
       hasAvailableSessions={hasAvailableSessions}
       isAnotherMonth={isAnotherMonth}
       isToday={isToday(day)}
       isSelected={isSelected}
       disableRipple
-      onClick={() => {
-        setSelectedDate(day);
-        setSelectedTime(null);
-      }}
+      onClick={handleClick}
     >
       <time dateTime={format(day, "yyyy-MM-dd")}>{format(day, "d")}</time>
     </CalendarDayCell>

tests/unit/src/pages/book-session/components/calendar-day/CalendarDay.spec.tsx

@@ -0,0 +1,94 @@
+import { fireEvent, screen } from "@testing-library/react";
+
+import renderWithProviders from "@tests/unit/utils/renderWithProviders";
+import { addMonths, subMonths } from "date-fns";
+
+import CalendarDay from "@/pages/book-session/components/calendar-day/CalendarDay";
+import { useDatetimePickerContext } from "@/pages/book-session/context/datetime-picker-context/DatetimePickerProvider";
+import { CalendarUtils } from "@/pages/book-session/hooks/use-calendar/useCalendar.types";
+
+const mockSetSelectedDate = jest.fn();
+const mockSetSelectedTime = jest.fn();
+
+const mockStringDate = "2022-01-02";
+const mockDay = new Date(mockStringDate);
+
+const mockUtils: CalendarUtils = {
+  checkSelected: jest.fn(),
+  checkAnotherMonth: jest.fn(),
+  checkSamePage: jest.fn(),
+};
+
+jest.mock(
+  "@/pages/book-session/context/datetime-picker-context/DatetimePickerProvider"
+);
+
+const renderAndMock = (day = mockDay, isAnotherMonth = false) => {
+  (useDatetimePickerContext as jest.Mock).mockReturnValue({
+    setSelectedDate: mockSetSelectedDate,
+    setSelectedTime: mockSetSelectedTime,
+  });
+
+  (mockUtils.checkAnotherMonth as jest.Mock).mockReturnValue(isAnotherMonth);
+
+  renderWithProviders(
+    <CalendarDay
+      day={day}
+      utils={mockUtils}
+      hasAvailableSessions
+      calendarSize="normal"
+    />
+  );
+};
+
+describe("<CalendarDay />", () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(mockDay);
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  it("should render correctly", () => {
+    renderAndMock();
+
+    const timeElement = screen.getByRole("time");
+    expect(timeElement).toHaveAttribute("datetime", mockStringDate);
+    expect(timeElement).toHaveTextContent("2");
+  });
+
+  it("should update day and reset time at the same time correctly", () => {
+    renderAndMock();
+
+    const dayButton = screen.getByRole("button");
+    fireEvent.click(dayButton);
+
+    expect(mockSetSelectedDate).toHaveBeenCalledWith(mockDay);
+    expect(mockSetSelectedTime).toHaveBeenCalledWith(null);
+  });
+
+  it("should not be disabled if day is not in the past or another month", () => {
+    renderAndMock();
+
+    const dayButton = screen.getByRole("button");
+    expect(dayButton).not.toBeDisabled();
+  });
+
+  it("should be disabled if day is from another month", () => {
+    const prevMonthDay = subMonths(mockDay, 1);
+    renderAndMock(prevMonthDay);
+
+    const dayButton = screen.getByRole("button");
+    expect(dayButton).toBeDisabled();
+  });
+
+  it("should be disabled if day is from another future month", () => {
+    const prevMonthDay = addMonths(mockDay, 1);
+    renderAndMock(prevMonthDay, true);
+
+    const dayButton = screen.getByRole("button");
+    expect(dayButton).toBeDisabled();
+  });
+});