@octopusdeploy/design-system-components
Version:
The design systems component library.
110 lines (109 loc) • 5.94 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
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 user_event_1 = __importDefault(require("@testing-library/user-event"));
const vitest_1 = require("vitest");
const DeprecatedDatePicker_1 = require("../DeprecatedDatePicker");
(0, vitest_1.describe)("DeprecatedDatePicker", () => {
(0, vitest_1.describe)("inline variant", () => {
(0, vitest_1.test)("uses the provided format for the date picker input", () => {
const datePicker = renderDatePicker(new Date("2023-05-09T00:00:00"), { label: "Test Date", format: "EEEE, MMMM dd, yyyy" });
datePicker.assertHasDateText("Tuesday, May 09, 2023");
});
(0, vitest_1.test)("changes the date without needing confirmation", async () => {
const datePicker = renderDatePicker(new Date("2023-05-09T00:00:00"), { label: "Test Date" });
await datePicker.openPickerDialog();
await datePicker.clickDayOfMonth(10);
datePicker.assertDateChangedTo(new Date("2023-05-10T00:00:00"));
});
//We shouldn't really need to check the label, as the label should become the accessible name and the means of finding the input, but unfortunately
//the material/date-pickers component doesn't nest the input in the label element and doesn't provide a `for` attribute which necessitates us having
//to test this seperately.
//TODO: Remove this test when we upgrade to @mui/x-date-pickers as the new pickers are accessible
(0, vitest_1.test)("uses the specified label", () => {
const label = "Test Date Label";
const datePicker = renderDatePicker(new Date("2023-05-09T00:00:00"), { label });
datePicker.assertHasLabel(label);
});
(0, vitest_1.test)("includes invalid accessibility attributes when invalid", () => {
const datePicker = renderDatePicker(new Date("2023-05-09T00:00:00"), { label: "Test Date", error: "The date is invalid" });
datePicker.assertHasInvalidAriaAttributes();
});
(0, vitest_1.test)("shows the provided error message", () => {
const error = "The date is invalid";
const datePicker = renderDatePicker(new Date("2023-05-09T00:00:00"), { label: "Test Date", error });
datePicker.assertHasErrorMessage(error);
});
(0, vitest_1.test)("can be disabled", () => {
const datePicker = renderDatePicker(new Date("2023-05-09T00:00:00"), { label: "Test Date", disabled: true });
datePicker.assertIsDisabled();
});
(0, vitest_1.test)("can't select a date before the minimum specified date", async () => {
const datePicker = renderDatePicker(new Date("2023-05-09T00:00:00"), { label: "Test Date", minDate: new Date("2023-05-09T00:00:00") });
await datePicker.openPickerDialog();
await datePicker.clickDayOfMonth(11);
datePicker.assertDayIsDisabled(8);
datePicker.assertDateChangedTo(new Date("2023-05-11T00:00:00"));
});
});
});
function renderDatePicker(value, { format, label, error, disabled, minDate }) {
const onChange = vitest_1.vi.fn();
(0, react_1.render)((0, jsx_runtime_1.jsx)(DeprecatedDatePicker_1.DeprecatedDatePicker, { value: value, onChange: onChange, format: format, label: label, error: error, disabled: disabled, minDate: minDate }));
return getInteractions(label, onChange);
}
function getInteractions(label, onChange) {
const getInput = () => {
return testing_library_1.domQueries.getTextInput(undefined);
};
const getOpenCalendarButton = () => {
return testing_library_1.domQueries.getButton(label);
};
const interactions = {
openPickerDialog: async () => {
const openCalendarButton = getOpenCalendarButton();
await openCalendarButton.click();
},
assertHasDateText(value) {
const input = getInput();
(0, vitest_1.expect)(input.value).toBe(value);
},
assertDateWasNotChanged() {
//TODO: replace with .not. assertion. For some reason our types don't pick up not assertions
(0, vitest_1.expect)(onChange).toHaveBeenCalledTimes(0);
},
clickDayOfMonth: async (day) => {
await user_event_1.default.click(react_1.screen.getByRole("gridcell", { name: day.toString() }));
},
assertDateChangedTo(value) {
(0, vitest_1.expect)(onChange).toHaveBeenCalledTimes(1);
(0, vitest_1.expect)(onChange).toHaveBeenCalledWith(value);
},
assertHasLabel(label) {
(0, vitest_1.expect)(react_1.screen.getByText(label)).toBeInTheDocument();
},
assertHasInvalidAriaAttributes() {
const input = getInput();
(0, vitest_1.expect)(input.innerElement).toHaveAttribute("aria-invalid", "true");
},
assertHasErrorMessage(message) {
(0, vitest_1.expect)(react_1.screen.getByText(new RegExp(message, "i"))).toBeInTheDocument();
},
assertDayIsDisabled(day) {
//The underlying date picker uses a class to disable the button via pointer events
//as opposed to actually disabling the button, which makes it extremely awkward
//to assert on.
(0, vitest_1.expect)(() => testing_library_1.domQueries.getButton(day.toString()).click()).toThrow();
},
assertIsDisabled() {
const input = getInput();
input.assertIsDisabled();
},
};
return interactions;
}