@octopusdeploy/design-system-components
Version:
The design systems component library.
130 lines (129 loc) • 6.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const testing_library_1 = require("@octopusdeploy/testing-library");
const react_1 = require("@testing-library/react");
const date_fns_1 = require("date-fns");
const vitest_1 = require("vitest");
const DatePicker_1 = require("../DatePicker");
(0, vitest_1.describe)("DatePicker", () => {
(0, vitest_1.it)("renders with placeholder text when no value is passed in", () => {
const datePicker = renderDatePicker({ label: "Select Date" });
datePicker.shouldHavePlaceholder("YYYY-MM-DD");
});
(0, vitest_1.it)("renders with initial value formatted correctly", () => {
const testDate = new Date();
const datePicker = renderDatePicker({ label: "Select Date", value: testDate });
datePicker.shouldHaveValue((0, date_fns_1.format)(testDate, "yyyy-MM-dd"));
});
(0, vitest_1.it)("renders as disabled when disabled prop is true", async () => {
const datePicker = renderDatePicker({ label: "Select Date", disabled: true });
datePicker.shouldBeDisabled();
datePicker.shouldHaveCalendarButtonDisabled();
});
(0, vitest_1.it)("calls onChange with correct date when valid date is typed", async () => {
const datePicker = renderDatePicker({ label: "Select Date" });
await datePicker.typeInInput("2025-06-15");
datePicker.shouldHaveCalledOnChangeWithDate(new Date(2025, 5, 15));
});
(0, vitest_1.it)("does not call onChange when invalid date is typed", async () => {
const datePicker = renderDatePicker({ label: "Select Date" });
await datePicker.typeInInput("2025-42-02");
datePicker.shouldNotHaveCalledOnChange();
});
(0, vitest_1.it)("does not call onChange when typing partial date", async () => {
const datePicker = renderDatePicker({ label: "Select Date" });
await datePicker.typeInInput("15/06");
datePicker.shouldNotHaveCalledOnChange();
});
(0, vitest_1.it)("opens calendar when calendar button is clicked", async () => {
const datePicker = renderDatePicker({ label: "Select Date" });
await datePicker.clickCalendarButton();
await datePicker.waitForCalendar();
datePicker.shouldShowCalendar();
});
(0, vitest_1.it)("calls onChange when a date is selected from calendar", async () => {
const datePicker = renderDatePicker({ label: "Select Date" });
await datePicker.clickCalendarButton();
await datePicker.waitForCalendar();
await datePicker.selectDayInCalendar(15);
datePicker.shouldHaveCalledOnChange();
});
(0, vitest_1.it)("updates input value when date is selected from calendar", async () => {
const testDate = new Date(2026, 1, 4); // 04/Feb/2026
const datePicker = renderDatePicker({ label: "Select Date", value: testDate });
await datePicker.clickCalendarButton();
await datePicker.waitForCalendar();
await datePicker.selectDayInCalendar(15);
datePicker.shouldHaveValue("2026-02-15");
});
(0, vitest_1.it)("closes calendar after selecting a date", async () => {
const testDate = new Date(2025, 5, 1);
const datePicker = renderDatePicker({ label: "Select Date", value: testDate });
await datePicker.clickCalendarButton();
await datePicker.waitForCalendar();
await datePicker.selectDayInCalendar(15);
await datePicker.waitForCalendarToBeClosed();
datePicker.shouldNotShowCalendar();
});
});
function renderDatePicker(options) {
const onChange = vitest_1.vi.fn();
(0, react_1.render)((0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { ...options, onChange: onChange }));
return getDatePickerInteractions(options.label, onChange);
}
function getDatePickerInteractions(label, onChange) {
const getInput = () => testing_library_1.domQueries.getTextInput(label);
const getCalendarButton = () => testing_library_1.domQueries.getButton("Toggle date picker's calendar");
const getCalendar = () => testing_library_1.domQueries.getDialog("Date picker calendar");
return {
shouldHavePlaceholder: (placeholder) => {
getInput().assertPlaceholderValue(placeholder);
},
shouldHaveValue: (value) => {
getInput().assertHasValue(value);
},
shouldBeDisabled: () => {
getInput().assertIsDisabled();
},
shouldHaveCalendarButtonDisabled: () => {
getCalendarButton().assertIsDisabled();
},
typeInInput: async (text) => {
await getInput().typeText(text);
},
shouldHaveCalledOnChange: () => {
expect(onChange).toHaveBeenCalled();
},
shouldHaveCalledOnChangeWithDate: (expectedDate) => {
expect(onChange).toHaveBeenCalled();
const calledDate = onChange.mock.calls[onChange.mock.calls.length - 1][0];
expect((0, date_fns_1.format)(calledDate, "yyyy-MM-dd")).toBe((0, date_fns_1.format)(expectedDate, "yyyy-MM-dd"));
},
shouldNotHaveCalledOnChange: () => {
expect(onChange).not.toHaveBeenCalled();
},
clickCalendarButton: async () => {
await getCalendarButton().click();
},
waitForCalendar: async () => {
await (0, react_1.waitFor)(() => {
getCalendar().assertIsInTheDocument();
});
},
shouldShowCalendar: () => {
testing_library_1.domQueries.getButton("Previous month").assertIsInTheDocument();
},
shouldNotShowCalendar: () => {
testing_library_1.domQueries.queryButton("Previous month").assertIsNotInTheDocument();
},
selectDayInCalendar: async (day) => {
await testing_library_1.domQueries.getButton(day.toString()).click();
},
waitForCalendarToBeClosed: async () => {
await (0, react_1.waitFor)(() => {
testing_library_1.domQueries.queryButton("Previous month").assertIsNotInTheDocument();
});
},
};
}