ui: add test to redesigned date-range-picker component

packages/ui/src/components/date-picker/date-picker-calendar.test.tsx

@@ -0,0 +1,91 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import DatePickerCalendar from "./date-picker-calendar";
+import { MONTH_NAMES } from "../calendar/option-data/months";
+import userEvent from "@testing-library/user-event";
+
+describe("Date Range 2 month Calendar", () => {
+  const todayDate = new Date();
+
+  beforeEach(async () => {
+    render(
+      <DatePickerCalendar
+        key="date-range-calendar-test"
+        initDate={todayDate}
+        startDate={null}
+        endDate={null}
+        setStartDate={() => {}}
+        setEndDate={() => {}}
+        handleReset={() => {}}
+      />,
+    );
+  });
+
+  test("renders Back Arrow Icon", () => {
+    expect(screen.getByTestId("ArrowBackIosNewIcon")).toBeInTheDocument();
+  });
+
+  test("renders Forward Arrow Icon", () => {
+    expect(screen.getByTestId("ArrowForwardIosIcon")).toBeInTheDocument();
+  });
+
+  test("renders current month and next month", () => {
+    const currMonthIdx = todayDate.getMonth();
+    const nextMonthIdx = (currMonthIdx + 1) % 12;
+
+    expect(screen.getByText(MONTH_NAMES[currMonthIdx])).toBeInTheDocument();
+    expect(screen.getByText(MONTH_NAMES[nextMonthIdx])).toBeInTheDocument();
+  });
+
+  test("render current month's year and next month's year", () => {
+    const currMonthIdx = todayDate.getMonth();
+    const nextMonthIdx = (currMonthIdx + 1) % 12;
+
+    expect(screen.getByText(MONTH_NAMES[currMonthIdx])).toBeInTheDocument();
+    expect(screen.getByText(MONTH_NAMES[nextMonthIdx])).toBeInTheDocument();
+  });
+});
+
+describe("Date Range Call to Action ", () => {
+  const date = new Date("11-25-2024");
+  const user = userEvent.setup();
+  beforeEach(async () => {
+    render(
+      <DatePickerCalendar
+        key="date-range-calendar-test"
+        initDate={date}
+        startDate={null}
+        endDate={null}
+        setStartDate={() => {}}
+        setEndDate={() => {}}
+        handleReset={() => {}}
+      />,
+    );
+  });
+
+  test("renders current month and next month", () => {
+    expect(screen.getByText("November")).toBeInTheDocument();
+    expect(screen.getByText("December")).toBeInTheDocument();
+    expect(screen.getByText((_, ele) => ele?.textContent === "2024")).toBeInTheDocument();
+  });
+
+  test("render December 2024 and January 2025 when Forward Arrow is pressed", async () => {
+    const nextMonthButton = screen.getByRole("button", { name: /next-months/i });
+    await user.click(nextMonthButton);
+
+    expect(screen.getByText("December")).toBeInTheDocument();
+    expect(screen.getByText("2024")).toBeInTheDocument();
+
+    expect(screen.getByText("January")).toBeInTheDocument();
+    expect(screen.getByText("2025")).toBeInTheDocument();
+  });
+
+  test("render October 2024 and November 2024 when Forward Arrow is pressed", async () => {
+    const nextMonthButton = screen.getByRole("button", { name: /prev-months/i });
+    await user.click(nextMonthButton);
+
+    expect(screen.getByText("October")).toBeInTheDocument();
+    expect(screen.getByText("November")).toBeInTheDocument();
+    expect(screen.getByText((_, ele) => ele?.textContent === "2024")).toBeInTheDocument();
+  });
+});

packages/ui/src/components/date-picker/date-picker-suggestions.test.tsx

@@ -0,0 +1,17 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import DatePickerSuggestions from "./date-picker-suggestions";
+
+describe("Date Input", () => {
+  beforeEach(() => {
+    render(<DatePickerSuggestions onSuggestionChange={(value) => console.log(value)} />);
+  });
+
+  test("renders radio group and all it's options", () => {
+    expect(screen.getByLabelText("Past 1 Year"));
+    expect(screen.getByLabelText("Year to Date"));
+    expect(screen.getByLabelText("3 Months"));
+    expect(screen.getByLabelText("1 Month"));
+    expect(screen.queryByLabelText("It's over 9000")).not.toBeInTheDocument();
+  });
+});

packages/ui/src/components/date-picker/date-picker.test.tsx

@@ -0,0 +1,74 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import DatePicker from "./date-picker";
+import userEvent from "@testing-library/user-event";
+
+describe("Date Input", () => {
+  beforeEach(() => {
+    render(
+      <DatePicker key="date-picker-init-test" onDateRangeValueChange={(value) => console.log(JSON.stringify(value))} />,
+    );
+  });
+
+  test("renders DateRangeIcon", () => {
+    expect(screen.getByTestId("DateRangeIcon")).toBeInTheDocument();
+  });
+
+  test("renders start date text", () => {
+    expect(screen.getByText("start date")).toBeInTheDocument();
+  });
+  -test("renders ChevronRightIcon", () => {
+    expect(screen.getByTestId("ChevronRightIcon")).toBeInTheDocument();
+  });
+
+  test("renders end date text", () => {
+    expect(screen.getByText("end date")).toBeInTheDocument();
+  });
+});
+
+describe("Date Input's Modal", () => {
+  const user = userEvent.setup();
+  beforeEach(async () => {
+    render(
+      <DatePicker
+        key="date-picker-modal-test"
+        onDateRangeValueChange={(value) => console.log(JSON.stringify(value))}
+      />,
+    );
+
+    const dateRangeModalTrigger = screen.getByLabelText("open-date-range-modal");
+    await user.click(dateRangeModalTrigger);
+  });
+
+  test("renders date-range-picker trigger button", () => {
+    expect(screen.getByLabelText("open-date-range-modal")).toBeInTheDocument();
+  });
+
+  test("renders Exact button", async () => {
+    expect(screen.getByRole("button", { name: /Exact/i })).toBeInTheDocument();
+  });
+
+  test("renders Suggestions button", () => {
+    expect(screen.getByRole("button", { name: /Suggestions/i })).toBeInTheDocument();
+  });
+
+  test("renders Reset button", () => {
+    expect(screen.getByRole("button", { name: /reset/i })).toBeInTheDocument();
+  });
+
+  test("renders Clear button", () => {
+    expect(screen.getByRole("button", { name: /cancel/i })).toBeInTheDocument();
+  });
+
+  test("renders Apply button", () => {
+    expect(screen.getByRole("button", { name: /apply/i })).toBeInTheDocument();
+  });
+
+  test("renders Start Date Label Text", () => {
+    expect(screen.getByText("Start Date")).toBeInTheDocument();
+  });
+
+  test("renders End Date Label Text", () => {
+    expect(screen.getByText("End Date")).toBeInTheDocument();
+  });
+});