78 lines
3.1 KiB
TypeScript
78 lines
3.1 KiB
TypeScript
|
/* 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;
|