cal.pub0.org/packages/ui/components/form/date-range-picker/daterangepicker.test.tsx

78 lines
3.1 KiB
TypeScript
Raw Normal View History

/* eslint-disable playwright/missing-playwright-await */
import { render, fireEvent } from "@testing-library/react";
import { format } from "date-fns";
import { vi } from "vitest";
import DateRangePicker from "./DateRangePicker";
describe("Tests for DateRangePicker component", () => {
const startDate = new Date("2023-07-15");
const endDate = new Date("2023-07-20");
test("Should display the selected start and end dates", () => {
const { getByDisplayValue } = render(<DateRangePicker startDate={startDate} endDate={endDate} />);
const expectedStartDate = format(new Date(startDate), "yyyy-MM-dd");
const expectedEndDate = format(new Date(endDate), "yyyy-MM-dd");
expect(getByDisplayValue(expectedStartDate)).toBeInTheDocument();
expect(getByDisplayValue(expectedEndDate)).toBeInTheDocument();
});
test("Should disable the DateRangePicker when disabled prop is true", () => {
const { getByDisplayValue } = render(
<DateRangePicker startDate={startDate} endDate={endDate} disabled />
);
const startDateInput = getByDisplayValue(format(startDate, "yyyy-MM-dd")) as HTMLInputElement;
const endDateInput = getByDisplayValue(format(endDate, "yyyy-MM-dd")) as HTMLInputElement;
expect(startDateInput).toBeDisabled();
expect(endDateInput).toBeDisabled();
});
test("Should call the onDatesChange callback when the selected dates change", () => {
const startDate = new Date("2023-07-14");
const endDate = new Date("2023-07-19");
const mockOnDatesChange = vi.fn();
const { getByDisplayValue } = render(
<DateRangePicker startDate={startDate} endDate={endDate} onDatesChange={mockOnDatesChange} />
);
const startDateInput = getByDisplayValue(format(startDate, "yyyy-MM-dd")) as HTMLInputElement;
const endDateInput = getByDisplayValue(format(endDate, "yyyy-MM-dd")) as HTMLInputElement;
const newStartDate = new Date(startDate);
newStartDate.setDate(newStartDate.getDate() + 1);
const newEndDate = new Date(endDate);
newEndDate.setDate(newEndDate.getDate() + 1);
const eventStartDate = { target: { value: format(newStartDate, "yyyy-MM-dd") } };
const eventEndDate = { target: { value: format(newEndDate, "yyyy-MM-dd") } };
fireEvent.change(startDateInput, eventStartDate);
fireEvent.change(endDateInput, eventEndDate);
const formattedStartDate = mockOnDatesChange.mock.calls[0][0].startDate;
const formattedEndDate = mockOnDatesChange.mock.calls[1][0].endDate;
expect(mockOnDatesChange).toHaveBeenCalled();
expect(mockOnDatesChange).toHaveBeenCalledWith({
startDate: expect.any(Date),
endDate: expect.any(Date),
});
expect(formattedStartDate.getDate()).toEqual(newStartDate.getDate());
expect(formattedStartDate.getMonth()).toEqual(newStartDate.getMonth());
expect(formattedStartDate.getFullYear()).toEqual(newStartDate.getFullYear());
expect(formattedEndDate.getDate()).toEqual(newEndDate.getDate());
expect(formattedEndDate.getMonth()).toEqual(newEndDate.getMonth());
expect(formattedEndDate.getFullYear()).toEqual(newEndDate.getFullYear());
});
});
HTMLCanvasElement.prototype.getContext = vi.fn() as never;