devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
915 lines (913 loc) • 51.9 kB
JavaScript
/**
* DevExtreme (cjs/__internal/scheduler/appointment_popup/appointment_popup.test.js)
* Version: 25.2.8
* Build date: Mon Jun 08 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
var _globals = require("@jest/globals");
var _localization = require("../../../localization");
var _dom = require("@testing-library/dom");
var _dom_component = _interopRequireDefault(require("../../core/widget/dom_component"));
var _fx = _interopRequireDefault(require("../../../common/core/animation/fx"));
var _create_appointment_popup = require("../__tests__/__mock__/create_appointment_popup");
var _m_mock_scheduler = require("../__tests__/__mock__/m_mock_scheduler");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}(0, _globals.describe)("Isolated AppointmentPopup environment", () => {
(0, _globals.beforeEach)(() => {
_fx.default.off = true
});
(0, _globals.afterEach)(() => {
(0, _create_appointment_popup.disposeAppointmentPopups)();
_fx.default.off = false
});
(0, _globals.it)("should render popup with form fields", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)();
(0, _globals.expect)(POM.element).toBeTruthy();
(0, _globals.expect)(POM.dxForm).toBeTruthy()
});
(0, _globals.it)("should display appointment data in form", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: {
text: "My Meeting",
startDate: new Date(2021, 3, 26, 9, 30),
endDate: new Date(2021, 3, 26, 11, 0)
}
});
(0, _globals.expect)(POM.getInputValue("subjectEditor")).toBe("My Meeting")
});
(0, _globals.it)("should have Save and Cancel buttons", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)();
(0, _globals.expect)(POM.saveButton).toBeTruthy();
(0, _globals.expect)(POM.cancelButton).toBeTruthy()
});
(0, _globals.it)("should call onSave callback on Save click", async () => {
const {
POM: POM,
callbacks: callbacks
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: {
text: "New Appointment",
startDate: new Date(2021, 3, 26, 9, 30),
endDate: new Date(2021, 3, 26, 11, 0)
}
});
POM.saveButton.click();
await new Promise(process.nextTick);
(0, _globals.expect)(callbacks.onSave).toHaveBeenCalledTimes(1);
(0, _globals.expect)(callbacks.onSave).toHaveBeenCalledWith(_globals.expect.objectContaining({
text: "New Appointment",
startDate: new Date(2021, 3, 26, 9, 30),
endDate: new Date(2021, 3, 26, 11, 0)
}))
});
(0, _globals.it)("should not call addAppointment or updateAppointment directly", async () => {
const {
POM: POM,
callbacks: callbacks
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: {
text: "Test",
startDate: new Date(2021, 3, 26, 9, 30),
endDate: new Date(2021, 3, 26, 11, 0)
}
});
POM.saveButton.click();
await new Promise(process.nextTick);
(0, _globals.expect)(callbacks.addAppointment).not.toHaveBeenCalled();
(0, _globals.expect)(callbacks.updateAppointment).not.toHaveBeenCalled()
});
(0, _globals.it)("should display title from config", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
title: "Edit Appointment"
});
const titleElement = POM.element.querySelector(".dx-toolbar-label");
(0, _globals.expect)(null === titleElement || void 0 === titleElement ? void 0 : titleElement.textContent).toBe("Edit Appointment")
});
(0, _globals.it)("should hide Save button when readOnly is true", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
readOnly: true
});
const saveButtons = POM.element.querySelectorAll(".dx-popup-done");
(0, _globals.expect)(saveButtons.length).toBe(0)
});
(0, _globals.it)("should show Save button when readOnly is false", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
readOnly: false
});
(0, _globals.expect)(POM.saveButton).toBeTruthy()
});
(0, _globals.it)("should hide popup on Cancel click", async () => {
const {
popup: popup,
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)();
const visibleBefore = popup.visible;
POM.cancelButton.click();
const visibleAfter = popup.visible;
(0, _globals.expect)(visibleBefore).toBe(true);
(0, _globals.expect)(visibleAfter).toBe(false)
});
(0, _globals.it)("should support composite onSave for exclude-from-series scenario", async () => {
const updateAppointment = _globals.jest.fn();
const addAppointment = _globals.jest.fn(() => Promise.resolve());
const sourceAppointment = {
text: "Series",
recurrenceRule: "FREQ=DAILY"
};
const updatedAppointment = {
text: "Series",
recurrenceException: "20210426"
};
const onSave = _globals.jest.fn(newAppointment => {
updateAppointment(sourceAppointment, updatedAppointment);
return addAppointment(newAppointment)
});
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: {
text: "Single occurrence",
startDate: new Date(2021, 3, 26, 9, 30),
endDate: new Date(2021, 3, 26, 11, 0)
},
title: "Edit Appointment",
onSave: onSave
});
POM.saveButton.click();
await new Promise(process.nextTick);
(0, _globals.expect)(onSave).toHaveBeenCalledTimes(1);
(0, _globals.expect)(updateAppointment).toHaveBeenCalledWith(sourceAppointment, updatedAppointment);
(0, _globals.expect)(addAppointment).toHaveBeenCalledWith(_globals.expect.objectContaining({
text: "Single occurrence"
}))
});
(0, _globals.describe)("allDay switch", () => {
const commonAppointment = {
text: "common-app",
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11)
};
const allDayAppointment = {
text: "all-day-app",
startDate: new Date(2017, 4, 1),
endDate: new Date(2017, 4, 1),
allDay: true
};
(0, _globals.it)("should be turned on when opening allDay appointment", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: allDayAppointment
});
(0, _globals.expect)(POM.getInputValue("allDayEditor")).toBe("true")
});
(0, _globals.it)("should be turned off when opening non-allDay appointment", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: commonAppointment
});
(0, _globals.expect)(POM.getInputValue("allDayEditor")).toBe("false")
});
(0, _globals.it)("should hide time editors when switched on", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: commonAppointment
});
const startTimeVisibleBefore = POM.isInputVisible("startTimeEditor");
const endTimeVisibleBefore = POM.isInputVisible("endTimeEditor");
POM.getInput("allDayEditor").click();
const startTimeVisibleAfter = POM.isInputVisible("startTimeEditor");
const endTimeVisibleAfter = POM.isInputVisible("endTimeEditor");
(0, _globals.expect)(startTimeVisibleBefore).toBe(true);
(0, _globals.expect)(endTimeVisibleBefore).toBe(true);
(0, _globals.expect)(startTimeVisibleAfter).toBe(false);
(0, _globals.expect)(endTimeVisibleAfter).toBe(false)
});
(0, _globals.it)("should show time editors when switched off", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: allDayAppointment
});
const startTimeVisibleBefore = POM.isInputVisible("startTimeEditor");
const endTimeVisibleBefore = POM.isInputVisible("endTimeEditor");
POM.getInput("allDayEditor").click();
const startTimeVisibleAfter = POM.isInputVisible("startTimeEditor");
const endTimeVisibleAfter = POM.isInputVisible("endTimeEditor");
(0, _globals.expect)(startTimeVisibleBefore).toBe(false);
(0, _globals.expect)(endTimeVisibleBefore).toBe(false);
(0, _globals.expect)(startTimeVisibleAfter).toBe(true);
(0, _globals.expect)(endTimeVisibleAfter).toBe(true)
});
(0, _globals.it)("should reset start to startDayHour and end via getCalculatedEndDate when switched off", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: commonAppointment,
startDayHour: 9
});
POM.getInput("allDayEditor").click();
POM.getInput("allDayEditor").click();
(0, _globals.expect)(POM.getInputValue("startDateEditor")).toBe("5/9/2017");
(0, _globals.expect)(POM.getInputValue("startTimeEditor")).toBe("9:00 AM");
(0, _globals.expect)(POM.getInputValue("endDateEditor")).toBe("5/9/2017");
(0, _globals.expect)(POM.getInputValue("endTimeEditor")).toBe("10:00 AM")
});
(0, _globals.it)("should reset to date-only values when switched on after toggling off", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: allDayAppointment
});
POM.getInput("allDayEditor").click();
POM.getInput("allDayEditor").click();
(0, _globals.expect)(POM.getInputValue("startDateEditor")).toBe("5/1/2017");
(0, _globals.expect)(POM.isInputVisible("startTimeEditor")).toBeFalsy();
(0, _globals.expect)(POM.getInputValue("endDateEditor")).toBe("5/1/2017");
(0, _globals.expect)(POM.isInputVisible("endTimeEditor")).toBeFalsy()
})
});
(0, _globals.describe)("startDate/endDate editors behavior", () => {
const testAppointment = {
text: "test app",
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11)
};
(0, _globals.it)("should update endDate when startDate is changed to a value greater than endDate", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: testAppointment
});
POM.setInputValue("startDateEditor", new Date(2017, 4, 10));
(0, _globals.expect)(POM.getInputValue("startTimeEditor")).toEqual("9:30 AM");
(0, _globals.expect)(POM.getInputValue("endDateEditor")).toEqual("5/10/2017");
(0, _globals.expect)(POM.getInputValue("endTimeEditor")).toEqual("11:00 AM")
});
(0, _globals.it)("should update endDate when startTime is changed to a value greater than endDate time", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: testAppointment
});
POM.setInputValue("startTimeEditor", new Date(2017, 4, 9, 12));
(0, _globals.expect)(POM.getInputValue("startDateEditor")).toEqual("5/9/2017");
(0, _globals.expect)(POM.getInputValue("endDateEditor")).toEqual("5/9/2017");
(0, _globals.expect)(POM.getInputValue("endTimeEditor")).toEqual("1:30 PM")
});
(0, _globals.it)("should update startDate when endDate is changed to a value less than startDate", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: testAppointment
});
POM.setInputValue("endDateEditor", new Date(2017, 4, 8));
(0, _globals.expect)(POM.getInputValue("startDateEditor")).toEqual("5/8/2017");
(0, _globals.expect)(POM.getInputValue("startTimeEditor")).toEqual("9:30 AM");
(0, _globals.expect)(POM.getInputValue("endTimeEditor")).toEqual("11:00 AM")
});
(0, _globals.it)("should update startDate when endTime is changed to a value less than startDate time", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: testAppointment
});
POM.setInputValue("endTimeEditor", new Date(2017, 4, 9, 9, 0));
(0, _globals.expect)(POM.getInputValue("startDateEditor")).toEqual("5/9/2017");
(0, _globals.expect)(POM.getInputValue("startTimeEditor")).toEqual("7:30 AM");
(0, _globals.expect)(POM.getInputValue("endDateEditor")).toEqual("5/9/2017")
});
(0, _globals.it)("should not update endDate when startDate is changed to a value less than endDate", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: testAppointment
});
POM.setInputValue("startDateEditor", new Date(2017, 4, 8));
(0, _globals.expect)(POM.getInputValue("startTimeEditor")).toEqual("9:30 AM");
(0, _globals.expect)(POM.getInputValue("endDateEditor")).toEqual("5/9/2017");
(0, _globals.expect)(POM.getInputValue("endTimeEditor")).toEqual("11:00 AM")
});
(0, _globals.it)("should not update endDate when startTime is changed to a value less than endDate time", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: testAppointment
});
POM.setInputValue("startTimeEditor", new Date(2017, 4, 9, 10, 0));
(0, _globals.expect)(POM.getInputValue("startDateEditor")).toEqual("5/9/2017");
(0, _globals.expect)(POM.getInputValue("endDateEditor")).toEqual("5/9/2017");
(0, _globals.expect)(POM.getInputValue("endTimeEditor")).toEqual("11:00 AM")
});
(0, _globals.it)("should not update startDate when endDate is changed to a value greater than startDate", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: testAppointment
});
POM.setInputValue("endDateEditor", new Date(2017, 4, 10));
(0, _globals.expect)(POM.getInputValue("startDateEditor")).toEqual("5/9/2017");
(0, _globals.expect)(POM.getInputValue("startTimeEditor")).toEqual("9:30 AM");
(0, _globals.expect)(POM.getInputValue("endTimeEditor")).toEqual("11:00 AM")
});
(0, _globals.it)("should not update startDate when endTime is changed to a value greater than startDate time", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: testAppointment
});
POM.setInputValue("endTimeEditor", new Date(2017, 4, 9, 12));
(0, _globals.expect)(POM.getInputValue("startDateEditor")).toEqual("5/9/2017");
(0, _globals.expect)(POM.getInputValue("startTimeEditor")).toEqual("9:30 AM");
(0, _globals.expect)(POM.getInputValue("endDateEditor")).toEqual("5/9/2017")
})
});
(0, _globals.it)("should propagate firstDayOfWeek to editor calendars and recurrence week day buttons", async () => {
var _POM$dxForm$getEditor, _POM$dxForm$getEditor2, _POM$dxForm$getEditor3;
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: {
text: "common-app",
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11)
},
firstDayOfWeek: 1
});
POM.selectRepeatValue("weekly");
const startDateFDOW = null === (_POM$dxForm$getEditor = POM.dxForm.getEditor("startDateEditor")) || void 0 === _POM$dxForm$getEditor ? void 0 : _POM$dxForm$getEditor.option("calendarOptions.firstDayOfWeek");
const endDateFDOW = null === (_POM$dxForm$getEditor2 = POM.dxForm.getEditor("endDateEditor")) || void 0 === _POM$dxForm$getEditor2 ? void 0 : _POM$dxForm$getEditor2.option("calendarOptions.firstDayOfWeek");
const recurrenceStartFDOW = null === (_POM$dxForm$getEditor3 = POM.dxForm.getEditor("recurrenceStartDateEditor")) || void 0 === _POM$dxForm$getEditor3 ? void 0 : _POM$dxForm$getEditor3.option("calendarOptions.firstDayOfWeek");
const weekDayButtonsText = POM.recurrenceWeekDayButtons.textContent;
(0, _globals.expect)(startDateFDOW).toBe(1);
(0, _globals.expect)(endDateFDOW).toBe(1);
(0, _globals.expect)(recurrenceStartFDOW).toBe(1);
(0, _globals.expect)(weekDayButtonsText).toBe("MTWTFSS")
});
(0, _globals.describe)("Validation", () => {
const commonAppointment = {
text: "common-app",
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11)
};
_globals.it.each(["startDateEditor", "startTimeEditor", "endDateEditor", "endTimeEditor"])("should block save when %s is empty", async editorName => {
const {
POM: POM,
callbacks: callbacks
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, commonAppointment)
});
POM.setInputValue(editorName, null);
POM.saveButton.click();
await Promise.resolve();
(0, _globals.expect)(callbacks.onSave).not.toHaveBeenCalled()
});
_globals.it.each(["startTimeEditor", "endDateEditor", "endTimeEditor"])("should block save in recurrence form when %s is empty", async editorName => {
const {
POM: POM,
callbacks: callbacks
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, commonAppointment)
});
POM.setInputValue(editorName, null);
POM.selectRepeatValue("daily");
POM.saveButton.click();
await Promise.resolve();
(0, _globals.expect)(callbacks.onSave).not.toHaveBeenCalled()
});
(0, _globals.it)("should not block save in recurrence form when startDateEditor is empty", async () => {
const {
POM: POM,
callbacks: callbacks
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, commonAppointment)
});
POM.setInputValue("startDateEditor", null);
POM.selectRepeatValue("daily");
const recurrenceStartDate = POM.getInputValue("recurrenceStartDateEditor");
(0, _globals.expect)(recurrenceStartDate).toBe("5/9/2017");
POM.saveButton.click();
await Promise.resolve();
(0, _globals.expect)(callbacks.onSave).toHaveBeenCalledTimes(1)
})
});
(0, _globals.describe)("Recurrence Form", () => {
const recurringAppointment = {
text: "recurring-app",
startDate: new Date(2017, 4, 1, 9, 30),
endDate: new Date(2017, 4, 1, 11),
recurrenceRule: "FREQ=DAILY;COUNT=5"
};
const baseAppointment = {
text: "Meeting",
startDate: new Date(2017, 4, 1, 10, 30),
endDate: new Date(2017, 4, 1, 11)
};
(0, _globals.it)("should allow opening recurrence settings when allowUpdating is false", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, recurringAppointment),
editing: {
allowUpdating: false
},
readOnly: true
});
const visibleBefore = POM.isRecurrenceGroupVisible();
POM.recurrenceSettingsButton.click();
const visibleAfter = POM.isRecurrenceGroupVisible();
(0, _globals.expect)(visibleBefore).toBe(false);
(0, _globals.expect)(visibleAfter).toBe(true)
});
(0, _globals.it)("should close repeat selectbox popup when navigating to recurrence group via settings button", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, recurringAppointment)
});
const repeatEditor = POM.dxForm.getEditor("repeatEditor");
POM.getInput("repeatEditor").click();
const openedBefore = null === repeatEditor || void 0 === repeatEditor ? void 0 : repeatEditor.option("opened");
POM.recurrenceSettingsButton.click();
const openedAfter = null === repeatEditor || void 0 === repeatEditor ? void 0 : repeatEditor.option("opened");
(0, _globals.expect)(openedBefore).toBe(true);
(0, _globals.expect)(openedAfter).toBe(false)
});
(0, _globals.it)("should have disabled week day buttons when allowUpdating is false", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, recurringAppointment, {
recurrenceRule: "FREQ=WEEKLY;BYDAY=WE,TU,TH,FR,SA"
}),
editing: {
allowUpdating: false
},
readOnly: true
});
POM.recurrenceSettingsButton.click();
const disabledButtons = POM.recurrenceWeekDayButtons.querySelectorAll(".dx-button.dx-state-disabled");
(0, _globals.expect)(disabledButtons.length).toBe(7)
});
(0, _globals.it)("should show recurrence group when repeat value is selected", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)();
POM.selectRepeatValue("weekly");
(0, _globals.expect)(POM.isMainGroupVisible()).toBe(false);
(0, _globals.expect)(POM.isRecurrenceGroupVisible()).toBe(true)
});
(0, _globals.it)("should restore main group when back button is clicked", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)();
POM.selectRepeatValue("weekly");
POM.backButton.click();
(0, _globals.expect)(POM.isMainGroupVisible()).toBe(true);
(0, _globals.expect)(POM.isRecurrenceGroupVisible()).toBe(false)
});
(0, _globals.it)("should set inert attribute on hidden group when switching forms", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)();
POM.selectRepeatValue("weekly");
(0, _globals.expect)(POM.mainGroup.getAttribute("inert")).toBe("true");
(0, _globals.expect)(POM.recurrenceGroup.getAttribute("inert")).toBeNull();
POM.backButton.click();
(0, _globals.expect)(POM.mainGroup.getAttribute("inert")).toBeNull();
(0, _globals.expect)(POM.recurrenceGroup.getAttribute("inert")).toBe("true")
});
(0, _globals.it)("should adjust popup height when switching to recurrence form", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)();
POM.selectRepeatValue("weekly");
(0, _globals.expect)(typeof POM.component.option("height")).toBe("number")
});
(0, _globals.it)("should reset popup height to auto when returning to main form", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)();
POM.selectRepeatValue("weekly");
POM.backButton.click();
(0, _globals.expect)(POM.component.option("height")).toBe("auto")
});
(0, _globals.it)("should open main form when opening recurring appointment", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, recurringAppointment)
});
(0, _globals.expect)(POM.isMainGroupVisible()).toBe(true);
(0, _globals.expect)(POM.isRecurrenceGroupVisible()).toBe(false)
});
(0, _globals.describe)("State", () => {
(0, _globals.it)("should have correct input values for appointment with hour frequency", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, baseAppointment, {
recurrenceRule: "FREQ=HOURLY;INTERVAL=2;COUNT=10"
})
});
(0, _globals.expect)(POM.getInputValue("repeatEditor")).toBe("Hourly");
POM.recurrenceSettingsButton.click();
(0, _globals.expect)(POM.getInputValue("recurrenceStartDateEditor")).toBe("5/1/2017");
(0, _globals.expect)(POM.getInputValue("recurrenceCountEditor")).toBe("2");
(0, _globals.expect)(POM.getInputValue("recurrencePeriodEditor")).toBe("Hour(s)");
(0, _globals.expect)(POM.getInputValue("recurrenceEndCountEditor")).toBe("10 occurrence(s)")
});
(0, _globals.it)("should have correct input values for appointment with daily frequency", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, baseAppointment, {
recurrenceRule: "FREQ=DAILY;INTERVAL=2;COUNT=10"
})
});
(0, _globals.expect)(POM.getInputValue("repeatEditor")).toBe("Daily");
POM.recurrenceSettingsButton.click();
(0, _globals.expect)(POM.getInputValue("recurrenceStartDateEditor")).toBe("5/1/2017");
(0, _globals.expect)(POM.getInputValue("recurrenceCountEditor")).toBe("2");
(0, _globals.expect)(POM.getInputValue("recurrencePeriodEditor")).toBe("Day(s)");
(0, _globals.expect)(POM.getInputValue("recurrenceEndCountEditor")).toBe("10 occurrence(s)")
});
(0, _globals.it)("should have correct input values for appointment with week frequency", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, baseAppointment, {
recurrenceRule: "FREQ=WEEKLY;INTERVAL=2;BYDAY=MO,WE,FR;COUNT=10"
})
});
(0, _globals.expect)(POM.getInputValue("repeatEditor")).toBe("Weekly");
POM.recurrenceSettingsButton.click();
(0, _globals.expect)(POM.getInputValue("recurrenceStartDateEditor")).toBe("5/1/2017");
(0, _globals.expect)(POM.getInputValue("recurrenceCountEditor")).toBe("2");
(0, _globals.expect)(POM.getInputValue("recurrencePeriodEditor")).toBe("Week(s)");
(0, _globals.expect)(POM.getWeekDaysSelection()).toEqual([false, true, false, true, false, true, false]);
(0, _globals.expect)(POM.getInputValue("recurrenceEndCountEditor")).toBe("10 occurrence(s)")
});
(0, _globals.it)("should have correct input values for appointment with monthly frequency", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, baseAppointment, {
recurrenceRule: "FREQ=MONTHLY;INTERVAL=2;BYMONTHDAY=1;COUNT=10"
})
});
(0, _globals.expect)(POM.getInputValue("repeatEditor")).toBe("Monthly");
POM.recurrenceSettingsButton.click();
(0, _globals.expect)(POM.getInputValue("recurrenceStartDateEditor")).toBe("5/1/2017");
(0, _globals.expect)(POM.getInputValue("recurrenceCountEditor")).toBe("2");
(0, _globals.expect)(POM.getInputValue("recurrencePeriodEditor")).toBe("Month(s)");
(0, _globals.expect)(POM.getInputValue("recurrenceDayOfMonthEditor")).toBe("1");
(0, _globals.expect)(POM.getInputValue("recurrenceEndCountEditor")).toBe("10 occurrence(s)")
});
(0, _globals.it)("should have correct input values for appointment with yearly frequency", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, baseAppointment, {
recurrenceRule: "FREQ=YEARLY;INTERVAL=2;BYMONTHDAY=1;BYMONTH=5;COUNT=10"
})
});
(0, _globals.expect)(POM.getInputValue("repeatEditor")).toBe("Yearly");
POM.recurrenceSettingsButton.click();
(0, _globals.expect)(POM.getInputValue("recurrenceStartDateEditor")).toBe("5/1/2017");
(0, _globals.expect)(POM.getInputValue("recurrenceCountEditor")).toBe("2");
(0, _globals.expect)(POM.getInputValue("recurrencePeriodEditor")).toBe("Year(s)");
(0, _globals.expect)(POM.getInputValue("recurrenceDayOfYearDayEditor")).toBe("1");
(0, _globals.expect)(POM.getInputValue("recurrenceDayOfYearMonthEditor")).toBe("May");
(0, _globals.expect)(POM.getInputValue("recurrenceEndCountEditor")).toBe("10 occurrence(s)")
});
(0, _globals.it)("T1325870: should use current locale for recurrence editors after locale change", async () => {
const currentLocale = (0, _localization.locale)();
(0, _localization.loadMessages)({
de: {
"dxScheduler-recurrenceYearly": "custom yearly",
"dxScheduler-recurrenceRepeatYearly": "custom repeat yearly"
}
});
(0, _localization.locale)("de");
try {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, baseAppointment, {
recurrenceRule: "FREQ=YEARLY;INTERVAL=2;BYMONTHDAY=1;BYMONTH=5;COUNT=10"
})
});
(0, _globals.expect)(POM.getInputValue("repeatEditor")).toBe("custom yearly");
POM.recurrenceSettingsButton.click();
(0, _globals.expect)(POM.getInputValue("recurrencePeriodEditor")).toBe("Custom repeat yearly");
(0, _globals.expect)(POM.getInputValue("recurrenceDayOfYearMonthEditor")).toBe("Mai")
} finally {
(0, _localization.locale)(currentLocale)
}
});
(0, _globals.it)("should have correct input values for appointment with no end", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, baseAppointment, {
recurrenceRule: "FREQ=DAILY;INTERVAL=2"
})
});
POM.recurrenceSettingsButton.click();
(0, _globals.expect)(POM.getInputValue("recurrenceRepeatEndEditor")).toBe("never")
});
(0, _globals.it)("should have correct input values for appointment with end by date", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, baseAppointment, {
recurrenceRule: "FREQ=DAILY;INTERVAL=2;UNTIL=20170601T000000Z"
})
});
POM.recurrenceSettingsButton.click();
(0, _globals.expect)(POM.getInputValue("recurrenceRepeatEndEditor")).toBe("until");
(0, _globals.expect)(POM.getInputValue("recurrenceEndUntilEditor")).toBe("6/1/2017")
});
(0, _globals.it)("should have correct input values for appointment with end by count", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, baseAppointment, {
recurrenceRule: "FREQ=DAILY;INTERVAL=2;COUNT=10"
})
});
POM.recurrenceSettingsButton.click();
(0, _globals.expect)(POM.getInputValue("recurrenceRepeatEndEditor")).toBe("count");
(0, _globals.expect)(POM.getInputValue("recurrenceEndCountEditor")).toBe("10 occurrence(s)")
})
});
(0, _globals.describe)("Repeat End Values Preservation", () => {
(0, _globals.it)("should preserve count value when switching between recurrence types", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, baseAppointment)
});
POM.selectRepeatValue("daily");
POM.setInputValue("recurrenceRepeatEndEditor", "count");
POM.setInputValue("recurrenceEndCountEditor", 15);
POM.backButton.click();
POM.selectRepeatValue("weekly");
POM.recurrenceSettingsButton.click();
(0, _globals.expect)(POM.getInputValue("recurrenceEndCountEditor")).toBe("15 occurrence(s)")
});
(0, _globals.it)("should preserve until value when switching between recurrence types", async () => {
const testUntilDate = new Date(2017, 5, 16);
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, baseAppointment)
});
POM.selectRepeatValue("daily");
POM.setInputValue("recurrenceRepeatEndEditor", "until");
POM.setInputValue("recurrenceEndUntilEditor", testUntilDate);
POM.backButton.click();
POM.selectRepeatValue("weekly");
POM.recurrenceSettingsButton.click();
(0, _globals.expect)(POM.getInputValue("recurrenceEndUntilEditor")).toBe("6/16/2017")
})
});
(0, _globals.describe)("Repeat End Editors Disabled State", () => {
_globals.it.each([
["never", "FREQ=DAILY"],
["until", "FREQ=DAILY;UNTIL=20170615T000000Z"],
["count", "FREQ=DAILY;COUNT=10"]
])("should set correct disabled state when repeatEnd is %s", async (repeatEndValue, recurrenceRule) => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, baseAppointment, {
recurrenceRule: recurrenceRule
})
});
POM.recurrenceSettingsButton.click();
const untilEditor = POM.dxForm.getEditor("recurrenceEndUntilEditor");
const countEditor = POM.dxForm.getEditor("recurrenceEndCountEditor");
(0, _globals.expect)(null === untilEditor || void 0 === untilEditor ? void 0 : untilEditor.option("disabled")).toBe("until" !== repeatEndValue);
(0, _globals.expect)(null === countEditor || void 0 === countEditor ? void 0 : countEditor.option("disabled")).toBe("count" !== repeatEndValue)
})
});
(0, _globals.describe)("FrequencyEditor focus", () => {
(0, _globals.afterEach)(() => {
_globals.jest.useRealTimers()
});
(0, _globals.it)("should not be focused when value is changed via API", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, recurringAppointment)
});
POM.recurrenceSettingsButton.click();
const frequencyEditor = POM.dxForm.getEditor("recurrencePeriodEditor");
const frequencyEditorInputElement = POM.getInput("recurrencePeriodEditor");
null === frequencyEditor || void 0 === frequencyEditor || frequencyEditor.option("value", "yearly");
(0, _globals.expect)(document.activeElement).not.toBe(frequencyEditorInputElement)
});
(0, _globals.it)("should be focused when value is changed via keyboard", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, recurringAppointment)
});
POM.recurrenceSettingsButton.click();
const frequencyEditorInputElement = POM.getInput("recurrencePeriodEditor");
frequencyEditorInputElement.click();
_globals.jest.useFakeTimers();
_dom.fireEvent.keyDown(frequencyEditorInputElement, {
key: "ArrowDown"
});
_globals.jest.runAllTimers();
(0, _globals.expect)(document.activeElement).toBe(frequencyEditorInputElement)
})
});
(0, _globals.it)("should set animation offset CSS variable when switching to recurrence form", async () => {
const originalGetComputedStyle = window.getComputedStyle;
const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
const originalGetClientRects = Element.prototype.getClientRects;
const originalIsVisible = _dom_component.default.prototype._isVisible;
try {
(0, _m_mock_scheduler.setupSchedulerTestEnvironment)({
height: 600,
classRects: {
"dx-form": {
top: 10
},
"dx-scheduler-form-main-group": {
top: 60
}
}
});
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)();
POM.selectRepeatValue("weekly");
const animationTop = POM.dxForm.$element()[0].style.getPropertyValue("--dx-scheduler-animation-top");
(0, _globals.expect)(animationTop).toBe("50px")
} finally {
window.getComputedStyle = originalGetComputedStyle;
Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
Element.prototype.getClientRects = originalGetClientRects;
_dom_component.default.prototype._isVisible = originalIsVisible
}
});
(0, _globals.it)("T1318550: editors with hidden outer label must have labelMode: hidden", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, baseAppointment, {
recurrenceRule: "FREQ=YEARLY;BYMONTHDAY=1;BYMONTH=5"
})
});
POM.recurrenceSettingsButton.click();
["recurrencePeriodEditor", "recurrenceRepeatEndEditor", "recurrenceEndUntilEditor", "recurrenceEndCountEditor", "recurrenceDayOfYearDayEditor"].forEach(name => {
var _POM$dxForm$getEditor4;
(0, _globals.expect)(null === (_POM$dxForm$getEditor4 = POM.dxForm.getEditor(name)) || void 0 === _POM$dxForm$getEditor4 ? void 0 : _POM$dxForm$getEditor4.option("labelMode")).toBe("hidden")
})
})
});
(0, _globals.describe)("Customize form items", () => {
const appointment = {
text: "Meeting",
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11)
};
(0, _globals.it)("should use default form items when editing.form.items is not configured", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, appointment)
});
const formItems = POM.dxForm.option("items") ?? [];
(0, _globals.expect)(formItems.length).toBeGreaterThan(0)
});
(0, _globals.it)("should produce empty form when editing.form.items is empty array", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, appointment),
editing: {
form: {
items: []
}
}
});
const formItems = POM.dxForm.option("items") ?? [];
(0, _globals.expect)(formItems.length).toBe(0)
});
(0, _globals.it)("should resolve named group when specified as string in items array", async () => {
var _formItems$;
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, appointment),
editing: {
form: {
items: ["mainGroup"]
}
}
});
const formItems = POM.dxForm.option("items") ?? [];
(0, _globals.expect)(formItems.length).toBe(1);
(0, _globals.expect)(null === (_formItems$ = formItems[0]) || void 0 === _formItems$ ? void 0 : _formItems$.name).toBe("mainGroup")
});
_globals.it.each([true, false])("should set group visibility to %s when specified in object config", async visible => {
var _formItems$2;
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, appointment),
editing: {
form: {
items: [{
name: "mainGroup",
visible: visible
}]
}
}
});
const formItems = POM.dxForm.option("items") ?? [];
(0, _globals.expect)(null === (_formItems$2 = formItems[0]) || void 0 === _formItems$2 ? void 0 : _formItems$2.visible).toBe(visible)
});
(0, _globals.it)("should filter group children to specified named items", async () => {
var _mainGroup$items, _mainGroup$items2, _mainGroup$items3;
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, appointment),
editing: {
form: {
items: [{
name: "mainGroup",
items: ["subjectGroup", "dateGroup"]
}]
}
}
});
const mainGroup = (POM.dxForm.option("items") ?? [])[0];
(0, _globals.expect)(null === mainGroup || void 0 === mainGroup || null === (_mainGroup$items = mainGroup.items) || void 0 === _mainGroup$items ? void 0 : _mainGroup$items.length).toBe(2);
(0, _globals.expect)(null === mainGroup || void 0 === mainGroup || null === (_mainGroup$items2 = mainGroup.items) || void 0 === _mainGroup$items2 || null === (_mainGroup$items2 = _mainGroup$items2[0]) || void 0 === _mainGroup$items2 ? void 0 : _mainGroup$items2.name).toBe("subjectGroup");
(0, _globals.expect)(null === mainGroup || void 0 === mainGroup || null === (_mainGroup$items3 = mainGroup.items) || void 0 === _mainGroup$items3 || null === (_mainGroup$items3 = _mainGroup$items3[1]) || void 0 === _mainGroup$items3 ? void 0 : _mainGroup$items3.name).toBe("dateGroup")
});
(0, _globals.it)("should produce empty children when items array in group config is empty", async () => {
var _mainGroup$items4;
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, appointment),
editing: {
form: {
items: [{
name: "mainGroup",
items: []
}]
}
}
});
const mainGroup = (POM.dxForm.option("items") ?? [])[0];
(0, _globals.expect)(null === mainGroup || void 0 === mainGroup || null === (_mainGroup$items4 = mainGroup.items) || void 0 === _mainGroup$items4 ? void 0 : _mainGroup$items4.length).toBe(0)
});
(0, _globals.it)("should create placeholder item for non-existent group name", async () => {
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({
appointmentData: Object.assign({}, appointment),
editing: {
form: {
items: ["nonExistentGroup"]
}
}
});
const formItems = POM.dxForm.option("items") ?? [];
(0, _globals.expect)(formItems.length).toBe(1)
});
(0, _globals.it)("should handle mixed string and object items", async () => {
var _formItems$3, _formItems$4, _formItems$5;
const {
POM: POM
} = await (0, _create_appointment_popup.createAppointmentPopup)({