devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
955 lines (953 loc) • 156 kB
JavaScript
/**
* DevExtreme (cjs/__internal/scheduler/appointment_popup/appointment_popup.integration.test.js)
* Version: 25.2.7
* Build date: Tue May 05 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 _date = _interopRequireDefault(require("../../../common/core/localization/date"));
var _custom_store = require("../../../common/data/custom_store");
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _localization = require("../../../localization");
var _toMilliseconds = require("../../utils/toMilliseconds");
var _fx = _interopRequireDefault(require("../../../common/core/animation/fx"));
var _create_scheduler = require("../__tests__/__mock__/create_scheduler");
var _m_mock_scheduler = require("../__tests__/__mock__/m_mock_scheduler");
var _constants = require("../utils/options/constants");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const CLASSES = {
icon: "dx-scheduler-form-icon",
hidden: "dx-hidden",
scheduler: "dx-scheduler",
mainGroupHidden: "dx-scheduler-form-main-group-hidden",
recurrenceGroupHidden: "dx-scheduler-form-recurrence-group-hidden"
};
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 commonAppointment = {
text: "common-app",
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11)
};
const disabledAppointment = {
text: "disabled-app",
startDate: new Date(2017, 4, 22, 9, 30),
endDate: new Date(2017, 4, 22, 11, 30),
disabled: true
};
const allDayAppointment = {
text: "all-day-app",
startDate: new Date(2017, 4, 1),
endDate: new Date(2017, 4, 1),
allDay: true
};
const getDefaultConfig = () => ({
dataSource: [],
views: ["month"],
currentView: "month",
currentDate: new Date(2017, 4, 25),
firstDayOfWeek: 1,
startDayHour: 9,
height: 600,
width: 600
});
(0, _globals.describe)("Appointment Form", () => {
(0, _globals.beforeEach)(() => {
_fx.default.off = true;
(0, _m_mock_scheduler.setupSchedulerTestEnvironment)({
height: 600
})
});
(0, _globals.afterEach)(() => {
const $scheduler = (0, _renderer.default)(document.querySelector(`.${CLASSES.scheduler}`));
$scheduler.dxScheduler("dispose");
document.body.innerHTML = "";
_fx.default.off = false;
_globals.jest.useRealTimers()
});
(0, _globals.describe)("Changes saving/canceling", () => {
(0, _globals.it)("should update appointment on save button click", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
dataSource: [Object.assign({}, commonAppointment)]
}));
const dataSource = scheduler.getDataSource();
const item = dataSource.items()[0];
scheduler.showAppointmentPopup(item);
POM.popup.setInputValue("subjectEditor", "New Subject");
POM.popup.saveButton.click();
(0, _globals.expect)(dataSource.items()[0]).toMatchObject(Object.assign({}, commonAppointment, {
text: "New Subject"
}))
});
(0, _globals.it)("should not update appointment on cancel button click", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
dataSource: [Object.assign({}, commonAppointment)]
}));
const dataSource = scheduler.getDataSource();
const item = dataSource.items()[0];
scheduler.showAppointmentPopup(item);
POM.popup.setInputValue("subjectEditor", "New Subject");
POM.popup.cancelButton.click();
(0, _globals.expect)(dataSource.items()[0]).toMatchObject(commonAppointment)
});
(0, _globals.it)("should update recurring appointment on save button click in recurrence form", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
dataSource: [Object.assign({}, recurringAppointment)]
}));
const dataSource = scheduler.getDataSource();
const item = dataSource.items()[0];
scheduler.showAppointmentPopup(item);
POM.popup.editSeriesButton.click();
POM.popup.setInputValue("subjectEditor", "New Subject");
POM.popup.recurrenceSettingsButton.click();
POM.popup.saveButton.click();
(0, _globals.expect)(dataSource.items()[0]).toMatchObject(Object.assign({}, recurringAppointment, {
text: "New Subject"
}))
});
(0, _globals.it)("should not update recurring appointment on cancel button click in recurrence form", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
dataSource: [Object.assign({}, recurringAppointment)]
}));
const dataSource = scheduler.getDataSource();
const item = dataSource.items()[0];
scheduler.showAppointmentPopup(item);
POM.popup.editSeriesButton.click();
POM.popup.setInputValue("subjectEditor", "New Subject");
POM.popup.recurrenceSettingsButton.click();
POM.popup.cancelButton.click();
(0, _globals.expect)(dataSource.items()[0]).toMatchObject(recurringAppointment)
});
(0, _globals.it)("should update appointment recurrence rule changes on save button click", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
dataSource: [Object.assign({}, commonAppointment)]
}));
const dataSource = scheduler.getDataSource();
const item = dataSource.items()[0];
scheduler.showAppointmentPopup(item);
POM.popup.selectRepeatValue("daily");
POM.popup.saveButton.click();
(0, _globals.expect)(dataSource.items()[0]).toMatchObject(Object.assign({}, commonAppointment, {
recurrenceRule: "FREQ=DAILY"
}))
});
(0, _globals.it)("should not update appointment recurrence rule changes on cancel button click", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
dataSource: [Object.assign({}, commonAppointment)]
}));
const dataSource = scheduler.getDataSource();
const item = dataSource.items()[0];
scheduler.showAppointmentPopup(item);
POM.popup.selectRepeatValue("daily");
POM.popup.cancelButton.click();
(0, _globals.expect)(dataSource.items()[0]).toMatchObject(commonAppointment)
});
(0, _globals.it)("should not update recurrence rule on save button click if recurrence rule was not changed", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
dataSource: [Object.assign({}, recurringAppointment)]
}));
const dataSource = scheduler.getDataSource();
const item = dataSource.items()[0];
scheduler.showAppointmentPopup(item);
POM.popup.editSeriesButton.click();
POM.popup.saveButton.click();
(0, _globals.expect)(dataSource.items()[0]).toMatchObject(recurringAppointment)
});
(0, _globals.it)("should update recurrence rule on save button click if repeat editor value was set to never", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
dataSource: [Object.assign({}, recurringAppointment)]
}));
const dataSource = scheduler.getDataSource();
const item = dataSource.items()[0];
scheduler.showAppointmentPopup(item);
POM.popup.editSeriesButton.click();
POM.popup.selectRepeatValue("never");
POM.popup.saveButton.click();
(0, _globals.expect)(dataSource.items()[0]).toMatchObject(Object.assign({}, recurringAppointment, {
recurrenceRule: ""
}))
});
(0, _globals.it)("should update appointment when data source is a custom store", async () => {
const appointment = Object.assign({}, commonAppointment, {
id: 0
});
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
dataSource: {
store: {
type: "array",
key: "id",
data: [appointment]
}
}
}));
scheduler.showAppointmentPopup(appointment);
POM.popup.setInputValue("subjectEditor", "Updated subject");
scheduler.hideAppointmentPopup(true);
const items = scheduler.getDataSource().items();
(0, _globals.expect)(items).toHaveLength(1);
(0, _globals.expect)(items[0]).toMatchObject(Object.assign({}, appointment, {
text: "Updated subject"
}))
});
(0, _globals.it)("should create appointment when data source is a custom store", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
dataSource: {
store: {
type: "array",
key: "id",
data: []
}
}
}));
scheduler.showAppointmentPopup();
POM.popup.setInputValue("subjectEditor", "New subject");
POM.popup.setInputValue("startDateEditor", new Date(2017, 4, 25, 9, 0));
POM.popup.setInputValue("startTimeEditor", new Date(2017, 4, 25, 9, 0));
POM.popup.setInputValue("endDateEditor", new Date(2017, 4, 25, 10, 0));
POM.popup.setInputValue("endTimeEditor", new Date(2017, 4, 25, 10, 0));
POM.popup.setInputValue("descriptionEditor", "New appointment description");
scheduler.hideAppointmentPopup(true);
const items = scheduler.getDataSource().items();
(0, _globals.expect)(items).toHaveLength(1);
(0, _globals.expect)(items[0]).toMatchObject({
text: "New subject",
startDate: new Date(2017, 4, 25, 9, 0),
endDate: new Date(2017, 4, 25, 10, 0),
description: "New appointment description"
})
});
(0, _globals.it)("should update resource value on save button click", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
dataSource: [{
text: "Resource test app",
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11),
roomId: 1
}],
resources: [{
fieldExpr: "roomId",
dataSource: [{
text: "Room 1",
id: 1,
color: "#00af2c"
}, {
text: "Room 2",
id: 2,
color: "#56ca85"
}, {
text: "Room 3",
id: 3,
color: "#8ecd3c"
}]
}]
}));
const dataSource = scheduler.getDataSource();
const item = dataSource.items()[0];
scheduler.showAppointmentPopup(item);
POM.popup.setInputValue("roomId", 2);
POM.popup.saveButton.click();
(0, _globals.expect)(dataSource.items()[0].roomId).toBe(2)
});
(0, _globals.it)("should create separate appointment when saving single appointment from series", async () => {
const appointment = {
text: "recurring-app",
startDate: "2017-05-01T09:30:00.000Z",
endDate: "2017-05-01T11:00:00.000Z",
recurrenceRule: "FREQ=DAILY;COUNT=5"
};
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
dataSource: [Object.assign({}, appointment)]
}));
const dataSource = scheduler.getDataSource();
POM.openPopupByDblClick("recurring-app");
POM.popup.editAppointmentButton.click();
POM.popup.setInputValue("subjectEditor", "single appointment");
scheduler.hideAppointmentPopup(true);
(0, _globals.expect)(dataSource.items()).toHaveLength(2);
(0, _globals.expect)(dataSource.items()[0]).toEqual(Object.assign({}, appointment, {
recurrenceException: "20170501T093000Z"
}));
(0, _globals.expect)(dataSource.items()[1]).toEqual(Object.assign({}, appointment, {
text: "single appointment",
recurrenceRule: "",
allDay: false
}))
})
});
(0, _globals.describe)("Validation", () => {
_globals.it.each(["startDateEditor", "startTimeEditor", "endDateEditor", "endTimeEditor"])("should not close popup on save button click when %s is empty", async editorName => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(getDefaultConfig());
scheduler.showAppointmentPopup(Object.assign({}, commonAppointment));
POM.popup.setInputValue(editorName, null);
POM.popup.saveButton.click();
(0, _globals.expect)(POM.isPopupVisible()).toBe(true)
});
_globals.it.each(["startTimeEditor", "endDateEditor", "endTimeEditor"])("should not close popup on save button click in recurrence form when %s editor is empty", async editorName => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(getDefaultConfig());
scheduler.showAppointmentPopup(Object.assign({}, commonAppointment));
POM.popup.setInputValue(editorName, null);
POM.popup.selectRepeatValue("daily");
POM.popup.saveButton.click();
(0, _globals.expect)(POM.isPopupVisible()).toBe(true)
});
(0, _globals.it)("should close popup on save button click in recurrence form when startEditor editor is empty", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(getDefaultConfig());
scheduler.showAppointmentPopup(Object.assign({}, commonAppointment));
POM.popup.setInputValue("startDateEditor", null);
POM.popup.selectRepeatValue("daily");
(0, _globals.expect)(POM.popup.getInputValue("recurrenceStartDateEditor")).toBe("5/9/2017");
POM.popup.saveButton.click();
(0, _globals.expect)(POM.isPopupVisible()).toBe(false)
})
});
(0, _globals.describe)("State", () => {
(0, _globals.it)("should create a new form instance on each popup opening", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(getDefaultConfig());
scheduler.showAppointmentPopup(commonAppointment);
const firstFormInstance = POM.popup.dxForm;
POM.popup.cancelButton.click();
scheduler.showAppointmentPopup(commonAppointment);
const secondFormInstance = POM.popup.dxForm;
(0, _globals.expect)(secondFormInstance).not.toBe(firstFormInstance)
});
(0, _globals.it)("should have correct editor values when opening for empty date cell - 1", async () => {
const {
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
currentView: "week"
}));
POM.dblClickDateTableCell(0, 0);
(0, _globals.expect)(POM.popup.getInputValue("subjectEditor")).toBe("");
(0, _globals.expect)(POM.popup.getInputValue("startDateEditor")).toBe("5/22/2017");
(0, _globals.expect)(POM.popup.getInputValue("startTimeEditor")).toBe("9:00 AM");
(0, _globals.expect)(POM.popup.getInputValue("endDateEditor")).toBe("5/22/2017");
(0, _globals.expect)(POM.popup.getInputValue("endTimeEditor")).toBe("9:30 AM");
(0, _globals.expect)(POM.popup.getInputValue("allDayEditor")).toBe("false");
(0, _globals.expect)(POM.popup.getInputValue("descriptionEditor")).toBe("")
});
(0, _globals.it)("should have correct editor values when opening for empty date cell - 2", async () => {
const {
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
currentView: "week"
}));
POM.dblClickDateTableCell(1, 1);
(0, _globals.expect)(POM.popup.getInputValue("subjectEditor")).toBe("");
(0, _globals.expect)(POM.popup.getInputValue("startDateEditor")).toBe("5/23/2017");
(0, _globals.expect)(POM.popup.getInputValue("startTimeEditor")).toBe("9:30 AM");
(0, _globals.expect)(POM.popup.getInputValue("endDateEditor")).toBe("5/23/2017");
(0, _globals.expect)(POM.popup.getInputValue("endTimeEditor")).toBe("10:00 AM");
(0, _globals.expect)(POM.popup.getInputValue("allDayEditor")).toBe("false");
(0, _globals.expect)(POM.popup.getInputValue("descriptionEditor")).toBe("")
});
(0, _globals.it)("should have correct editor values when opening for empty all day cell", async () => {
const {
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
currentView: "week"
}));
POM.dblClickAllDayTableCell(1);
(0, _globals.expect)(POM.popup.getInputValue("subjectEditor")).toBe("");
(0, _globals.expect)(POM.popup.getInputValue("startDateEditor")).toBe("5/23/2017");
(0, _globals.expect)(POM.popup.isInputVisible("startTimeEditor")).toBe(false);
(0, _globals.expect)(POM.popup.getInputValue("endDateEditor")).toBe("5/23/2017");
(0, _globals.expect)(POM.popup.isInputVisible("endTimeEditor")).toBe(false);
(0, _globals.expect)(POM.popup.getInputValue("allDayEditor")).toBe("true");
(0, _globals.expect)(POM.popup.getInputValue("descriptionEditor")).toBe("")
})
});
(0, _globals.describe)("Readonly state", () => {
(0, _globals.it)("form should be readonly when editing.allowUpdating is false", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
editing: {
allowUpdating: false
}
}));
scheduler.showAppointmentPopup(Object.assign({}, commonAppointment));
(0, _globals.expect)(POM.popup.dxForm.option("readOnly")).toBe(true)
});
(0, _globals.it)("form should not be readonly when editing.allowUpdating is false and adding a new appointment", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
editing: {
allowUpdating: false,
allowAdding: true
}
}));
scheduler.showAppointmentPopup(Object.assign({}, commonAppointment), true);
(0, _globals.expect)(POM.popup.dxForm.option("readOnly")).toBe(false)
});
(0, _globals.it)("form should be readonly after adding new appointment if editing.allowUpdating is false", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
editing: {
allowUpdating: false,
allowAdding: true
}
}));
const dataSource = scheduler.getDataSource();
scheduler.showAppointmentPopup(Object.assign({}, commonAppointment), true);
scheduler.hideAppointmentPopup(true);
const item = dataSource.items()[0];
scheduler.showAppointmentPopup(item);
(0, _globals.expect)(POM.popup.dxForm.option("readOnly")).toBe(true)
});
(0, _globals.it)("form should be readonly when appointment is disabled", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
dataSource: [Object.assign({}, disabledAppointment)]
}));
const dataSource = scheduler.getDataSource();
const item = dataSource.items()[0];
scheduler.showAppointmentPopup(item);
(0, _globals.expect)(POM.popup.dxForm.option("readOnly")).toBe(true)
})
});
(0, _globals.describe)("startDate/endDate editors behavior", () => {
_globals.it.each([
["startDateEditor", "startTimeEditor"],
["endDateEditor", "endTimeEditor"],
["startTimeEditor", "startDateEditor"],
["endTimeEditor", "endDateEditor"]
])("when %s value is set to null, %s value should not be null", async (dateEditorName, timeEditorName) => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(getDefaultConfig());
scheduler.showAppointmentPopup(Object.assign({}, commonAppointment));
POM.popup.setInputValue(dateEditorName, null);
(0, _globals.expect)(POM.popup.getInputValue(timeEditorName)).not.toBeNull()
});
(0, _globals.it)("should update endDate when startDate is changed to a value greater than endDate", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(getDefaultConfig());
scheduler.showAppointmentPopup({
text: "test app",
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11)
});
POM.popup.setInputValue("startDateEditor", new Date(2017, 4, 10));
(0, _globals.expect)(POM.popup.getInputValue("startTimeEditor")).toEqual("9:30 AM");
(0, _globals.expect)(POM.popup.getInputValue("endDateEditor")).toEqual("5/10/2017");
(0, _globals.expect)(POM.popup.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 {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(getDefaultConfig());
scheduler.showAppointmentPopup({
text: "test app",
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11)
});
POM.popup.setInputValue("startTimeEditor", new Date(2017, 4, 9, 12));
(0, _globals.expect)(POM.popup.getInputValue("startDateEditor")).toEqual("5/9/2017");
(0, _globals.expect)(POM.popup.getInputValue("endDateEditor")).toEqual("5/9/2017");
(0, _globals.expect)(POM.popup.getInputValue("endTimeEditor")).toEqual("1:30 PM")
});
(0, _globals.it)("should update startDate when endDate is changed to a value less than startDate", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(getDefaultConfig());
scheduler.showAppointmentPopup({
text: "test app",
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11)
});
POM.popup.setInputValue("endDateEditor", new Date(2017, 4, 8));
(0, _globals.expect)(POM.popup.getInputValue("startDateEditor")).toEqual("5/8/2017");
(0, _globals.expect)(POM.popup.getInputValue("startTimeEditor")).toEqual("9:30 AM");
(0, _globals.expect)(POM.popup.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 {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(getDefaultConfig());
scheduler.showAppointmentPopup({
text: "test app",
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11)
});
POM.popup.setInputValue("endTimeEditor", new Date(2017, 4, 9, 9, 0));
(0, _globals.expect)(POM.popup.getInputValue("startDateEditor")).toEqual("5/9/2017");
(0, _globals.expect)(POM.popup.getInputValue("startTimeEditor")).toEqual("7:30 AM");
(0, _globals.expect)(POM.popup.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 {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(getDefaultConfig());
scheduler.showAppointmentPopup({
text: "test app",
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11)
});
POM.popup.setInputValue("startDateEditor", new Date(2017, 4, 8));
(0, _globals.expect)(POM.popup.getInputValue("startTimeEditor")).toEqual("9:30 AM");
(0, _globals.expect)(POM.popup.getInputValue("endDateEditor")).toEqual("5/9/2017");
(0, _globals.expect)(POM.popup.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 {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(getDefaultConfig());
scheduler.showAppointmentPopup({
text: "test app",
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11)
});
POM.popup.setInputValue("startTimeEditor", new Date(2017, 4, 9, 10, 0));
(0, _globals.expect)(POM.popup.getInputValue("startDateEditor")).toEqual("5/9/2017");
(0, _globals.expect)(POM.popup.getInputValue("endDateEditor")).toEqual("5/9/2017");
(0, _globals.expect)(POM.popup.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 {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(getDefaultConfig());
scheduler.showAppointmentPopup({
text: "test app",
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11)
});
POM.popup.setInputValue("endDateEditor", new Date(2017, 4, 10));
(0, _globals.expect)(POM.popup.getInputValue("startDateEditor")).toEqual("5/9/2017");
(0, _globals.expect)(POM.popup.getInputValue("startTimeEditor")).toEqual("9:30 AM");
(0, _globals.expect)(POM.popup.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 {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(getDefaultConfig());
scheduler.showAppointmentPopup({
text: "test app",
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11)
});
POM.popup.setInputValue("endTimeEditor", new Date(2017, 4, 9, 12));
(0, _globals.expect)(POM.popup.getInputValue("startDateEditor")).toEqual("5/9/2017");
(0, _globals.expect)(POM.popup.getInputValue("startTimeEditor")).toEqual("9:30 AM");
(0, _globals.expect)(POM.popup.getInputValue("endDateEditor")).toEqual("5/9/2017")
})
});
_globals.describe.each([
["Field expressions", "customField"],
["Nested field expressions", "nested.customField"]
])("%s", exprValue => {
_globals.it.each([
["textExpr", "subjectEditor", "qwerty"],
["allDayExpr", "allDayEditor", true],
["startDateTimeZoneExpr", "startDateTimeZoneEditor", "Pacific/Midway"],
["endDateTimeZoneExpr", "endDateTimeZoneEditor", "Pacific/Midway"],
["descriptionExpr", "descriptionEditor", "qwerty"]
])("should update correct field if %s is defined", async (fieldExpr, editorName, value) => {
const defaultField = _constants.DEFAULT_SCHEDULER_OPTIONS[fieldExpr];
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
editing: {
allowUpdating: true,
allowTimeZoneEditing: true
},
[fieldExpr]: exprValue
}));
scheduler.showAppointmentPopup();
POM.popup.setInputValue(editorName, value);
scheduler.hideAppointmentPopup(true);
const customFieldValue = scheduler.option(`dataSource[0].${exprValue}`);
const defaultFieldValue = scheduler.option(`dataSource[0].${defaultField}`);
(0, _globals.expect)(customFieldValue).toBe(value);
(0, _globals.expect)(defaultFieldValue).toBeUndefined()
});
_globals.it.each([
["startDateExpr", "startDateEditor", "startTimeEditor"],
["endDateExpr", "endDateEditor", "endTimeEditor"]
])("should update correct field if %s is defined", async (fieldExpr, dateEditorName, timeEditorName) => {
const value = new Date(2017, 4, 9, 9, 30);
const defaultField = _constants.DEFAULT_SCHEDULER_OPTIONS[fieldExpr];
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
editing: {
allowUpdating: true,
allowTimeZoneEditing: true
},
[fieldExpr]: exprValue
}));
scheduler.showAppointmentPopup();
POM.popup.setInputValue(dateEditorName, value);
POM.popup.setInputValue(timeEditorName, value);
scheduler.hideAppointmentPopup(true);
const customFieldValue = scheduler.option(`dataSource[0].${exprValue}`);
const defaultFieldValue = scheduler.option(`dataSource[0].${defaultField}`);
(0, _globals.expect)(customFieldValue).toEqual(new Date(value));
(0, _globals.expect)(defaultFieldValue).toBeUndefined()
});
(0, _globals.it)("should update correct field if recurrenceRuleExpr is defined", async () => {
const fieldExpr = "recurrenceRuleExpr";
const defaultField = _constants.DEFAULT_SCHEDULER_OPTIONS.recurrenceRuleExpr;
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
editing: {
allowUpdating: true,
allowTimeZoneEditing: true
},
[fieldExpr]: exprValue
}));
scheduler.showAppointmentPopup();
POM.popup.selectRepeatValue("daily");
scheduler.hideAppointmentPopup(true);
const customFieldValue = scheduler.option(`dataSource[0].${exprValue}`);
const defaultFieldValue = scheduler.option(`dataSource[0].${defaultField}`);
(0, _globals.expect)(customFieldValue).toBe("FREQ=DAILY");
(0, _globals.expect)(defaultFieldValue).toBeUndefined()
});
(0, _globals.it)("should update correct resource field if fieldExpr for resource is defined", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
editing: {
allowUpdating: true,
allowTimeZoneEditing: true
},
resources: [{
fieldExpr: exprValue,
allowMultiple: false,
dataSource: [{
text: "Room 1",
id: 1,
color: "#00af2c"
}, {
text: "Room 2",
id: 2,
color: "#56ca85"
}, {
text: "Room 3",
id: 3,
color: "#8ecd3c"
}]
}]
}));
scheduler.showAppointmentPopup();
POM.popup.setInputValue(exprValue, 2);
scheduler.hideAppointmentPopup(true);
const customFieldValue = scheduler.option(`dataSource[0].${exprValue}`);
const defaultFieldValue = scheduler.option("dataSource[0].roomId");
(0, _globals.expect)(customFieldValue).toBe(2);
(0, _globals.expect)(defaultFieldValue).toBeUndefined()
})
});
(0, _globals.describe)("allDay switch", () => {
(0, _globals.it)("should be turned on when opening allDay appointment", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(getDefaultConfig());
scheduler.showAppointmentPopup(allDayAppointment);
(0, _globals.expect)(POM.popup.getInputValue("allDayEditor")).toBe("true")
});
(0, _globals.it)("should be turned off when opening non-allDay appointment", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(getDefaultConfig());
scheduler.showAppointmentPopup(commonAppointment);
(0, _globals.expect)(POM.popup.getInputValue("allDayEditor")).toBe("false")
});
(0, _globals.it)("should hide time editors when switched on", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(getDefaultConfig());
scheduler.showAppointmentPopup(commonAppointment);
(0, _globals.expect)(POM.popup.isInputVisible("startDateEditor")).toBeTruthy();
(0, _globals.expect)(POM.popup.isInputVisible("startTimeEditor")).toBeTruthy();
(0, _globals.expect)(POM.popup.isInputVisible("endDateEditor")).toBeTruthy();
(0, _globals.expect)(POM.popup.isInputVisible("endTimeEditor")).toBeTruthy();
POM.popup.getInput("allDayEditor").click();
(0, _globals.expect)(POM.popup.isInputVisible("startDateEditor")).toBeTruthy();
(0, _globals.expect)(POM.popup.isInputVisible("startTimeEditor")).toBeFalsy();
(0, _globals.expect)(POM.popup.isInputVisible("endDateEditor")).toBeTruthy();
(0, _globals.expect)(POM.popup.isInputVisible("endTimeEditor")).toBeFalsy()
});
(0, _globals.it)("should show time editors when switched off", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(getDefaultConfig());
scheduler.showAppointmentPopup(allDayAppointment);
(0, _globals.expect)(POM.popup.isInputVisible("startDateEditor")).toBeTruthy();
(0, _globals.expect)(POM.popup.isInputVisible("startTimeEditor")).toBeFalsy();
(0, _globals.expect)(POM.popup.isInputVisible("endDateEditor")).toBeTruthy();
(0, _globals.expect)(POM.popup.isInputVisible("endTimeEditor")).toBeFalsy();
POM.popup.getInput("allDayEditor").click();
(0, _globals.expect)(POM.popup.isInputVisible("startDateEditor")).toBeTruthy();
(0, _globals.expect)(POM.popup.isInputVisible("startTimeEditor")).toBeTruthy();
(0, _globals.expect)(POM.popup.isInputVisible("endDateEditor")).toBeTruthy();
(0, _globals.expect)(POM.popup.isInputVisible("endTimeEditor")).toBeTruthy()
});
(0, _globals.it)("should set correct dates when switching on then off in day view", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
currentView: "day"
}));
scheduler.showAppointmentPopup(commonAppointment);
POM.popup.getInput("allDayEditor").click();
POM.popup.getInput("allDayEditor").click();
(0, _globals.expect)(POM.popup.getInputValue("startDateEditor")).toBe("5/9/2017");
(0, _globals.expect)(POM.popup.getInputValue("startTimeEditor")).toBe("9:00 AM");
(0, _globals.expect)(POM.popup.getInputValue("endDateEditor")).toBe("5/9/2017");
(0, _globals.expect)(POM.popup.getInputValue("endTimeEditor")).toBe("9:30 AM")
});
(0, _globals.it)("should set correct dates when switching off then on in day view", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
currentView: "day"
}));
scheduler.showAppointmentPopup(allDayAppointment);
POM.popup.getInput("allDayEditor").click();
POM.popup.getInput("allDayEditor").click();
(0, _globals.expect)(POM.popup.getInputValue("startDateEditor")).toBe("5/1/2017");
(0, _globals.expect)(POM.popup.isInputVisible("startTimeEditor")).toBeFalsy();
(0, _globals.expect)(POM.popup.getInputValue("endDateEditor")).toBe("5/1/2017");
(0, _globals.expect)(POM.popup.isInputVisible("endTimeEditor")).toBeFalsy()
});
(0, _globals.it)("should set correct dates when switching on then off in month view", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
currentView: "month"
}));
scheduler.showAppointmentPopup(commonAppointment);
POM.popup.getInput("allDayEditor").click();
POM.popup.getInput("allDayEditor").click();
(0, _globals.expect)(POM.popup.getInputValue("startDateEditor")).toBe("5/9/2017");
(0, _globals.expect)(POM.popup.getInputValue("startTimeEditor")).toBe("9:00 AM");
(0, _globals.expect)(POM.popup.getInputValue("endDateEditor")).toBe("5/10/2017");
(0, _globals.expect)(POM.popup.getInputValue("endTimeEditor")).toBe("12:00 AM")
});
(0, _globals.it)("should set correct dates when switching off then on in month view", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
currentView: "month"
}));
scheduler.showAppointmentPopup(allDayAppointment);
POM.popup.getInput("allDayEditor").click();
POM.popup.getInput("allDayEditor").click();
(0, _globals.expect)(POM.popup.getInputValue("startDateEditor")).toBe("5/1/2017");
(0, _globals.expect)(POM.popup.isInputVisible("startTimeEditor")).toBeFalsy();
(0, _globals.expect)(POM.popup.getInputValue("endDateEditor")).toBe("5/1/2017");
(0, _globals.expect)(POM.popup.isInputVisible("endTimeEditor")).toBeFalsy()
})
});
(0, _globals.describe)("Timezone Editors", () => {
(0, _globals.it)("should have correct timezone editors values", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
editing: {
allowUpdating: true,
allowTimeZoneEditing: true
}
}));
scheduler.showAppointmentPopup({
text: "Watercolor Landscape",
startDate: new Date("2020-06-01T17:30:00.000Z"),
endDate: new Date("2020-06-01T19:00:00.000Z"),
startDateTimeZone: "Etc/GMT+10",
endDateTimeZone: "US/Alaska"
});
(0, _globals.expect)(POM.popup.getInputValue("startDateTimeZoneEditor")).toBe("Etc/GMT+10");
(0, _globals.expect)(POM.popup.getInputValue("endDateTimeZoneEditor")).toBe("US/Alaska")
});
(0, _globals.it)("should be shown when editing.allowTimeZoneEditing is true", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
editing: {
allowTimeZoneEditing: true
}
}));
scheduler.showAppointmentPopup(commonAppointment);
(0, _globals.expect)(POM.popup.isInputVisible("startDateTimeZoneEditor")).toBeTruthy();
(0, _globals.expect)(POM.popup.isInputVisible("endDateTimeZoneEditor")).toBeTruthy()
});
(0, _globals.it)("should be hidden when editing.allowTimeZoneEditing is false", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
editing: {
allowTimeZoneEditing: false
}
}));
scheduler.showAppointmentPopup(commonAppointment);
(0, _globals.expect)(POM.popup.isInputVisible("startDateTimeZoneEditor")).toBeFalsy();
(0, _globals.expect)(POM.popup.isInputVisible("endDateTimeZoneEditor")).toBeFalsy()
});
(0, _globals.it)("change of startTimeZone value should trigger endTimeZone value change", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
editing: {
allowTimeZoneEditing: true
}
}));
scheduler.showAppointmentPopup(commonAppointment);
POM.popup.setInputValue("startDateTimeZoneEditor", "America/Los_Angeles");
(0, _globals.expect)(POM.popup.getInputValue("startDateTimeZoneEditor")).toBe("America/Los_Angeles");
(0, _globals.expect)(POM.popup.getInputValue("endDateTimeZoneEditor")).toBe("America/Los_Angeles")
});
(0, _globals.it)("change of endTimeZone value should not trigger startTimeZone value change", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
editing: {
allowTimeZoneEditing: true
}
}));
scheduler.showAppointmentPopup(commonAppointment);
POM.popup.setInputValue("startDateTimeZoneEditor", "America/Los_Angeles");
POM.popup.setInputValue("endDateTimeZoneEditor", "America/New_York");
(0, _globals.expect)(POM.popup.getInputValue("startDateTimeZoneEditor")).toBe("America/Los_Angeles");
(0, _globals.expect)(POM.popup.getInputValue("endDateTimeZoneEditor")).toBe("America/New_York")
})
});
(0, _globals.describe)("Resources", () => {
(0, _globals.it)("should have correct resource editor value", async () => {
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
dataSource: [{
text: "Resource test app",
startDate: new Date(2017, 4, 9, 9, 30),
endDate: new Date(2017, 4, 9, 11),
roomId: 2
}],
resources: [{
fieldExpr: "roomId",
dataSource: [{
text: "Room 1",
id: 1,
color: "#00af2c"
}, {
text: "Room 2",
id: 2,
color: "#56ca85"
}, {
text: "Room 3",
id: 3,
color: "#8ecd3c"
}]
}]
}));
const dataSource = scheduler.getDataSource();
const item = dataSource.items()[0];
scheduler.showAppointmentPopup(item);
(0, _globals.expect)(POM.popup.getInputValue("roomId")).toBe("Room 2")
});
(0, _globals.it)("should create resourceEditorsGroup when resources have no custom icons", async () => {
var _resourcesGroup$items;
const {
scheduler: scheduler,
POM: POM
} = await (0, _create_scheduler.createScheduler)(Object.assign({}, getDefaultConfig(), {
resources: [{
fieldExpr: "roomId"
}, {
fieldExpr: "ownerId"
}]