devextreme/esm/__internal/scheduler/appointment_popup/appointment_popup.test.js

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/scheduler/appointment_popup/appointment_popup.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/
 */
import {
    afterEach,
    beforeEach,
    describe,
    expect,
    it,
    jest
} from "@jest/globals";
import fx from "../../../common/core/animation/fx";
import {
    createAppointmentPopup,
    disposeAppointmentPopups
} from "../__tests__/__mock__/create_appointment_popup";
describe("Isolated AppointmentPopup environment", () => {
    beforeEach(() => {
        fx.off = true
    });
    afterEach(() => {
        disposeAppointmentPopups();
        fx.off = false
    });
    it("should render popup with form fields", async () => {
        const {
            POM: POM
        } = await createAppointmentPopup();
        expect(POM.element).toBeTruthy();
        expect(POM.dxForm).toBeTruthy()
    });
    it("should display appointment data in form", async () => {
        const {
            POM: POM
        } = await createAppointmentPopup({
            appointmentData: {
                text: "My Meeting",
                startDate: new Date(2021, 3, 26, 9, 30),
                endDate: new Date(2021, 3, 26, 11, 0)
            }
        });
        expect(POM.getInputValue("subjectEditor")).toBe("My Meeting")
    });
    it("should have Save and Cancel buttons", async () => {
        const {
            POM: POM
        } = await createAppointmentPopup();
        expect(POM.saveButton).toBeTruthy();
        expect(POM.cancelButton).toBeTruthy()
    });
    it("should call onSave callback on Save click", async () => {
        const {
            POM: POM,
            callbacks: callbacks
        } = await createAppointmentPopup({
            appointmentData: {
                text: "New Appointment",
                startDate: new Date(2021, 3, 26, 9, 30),
                endDate: new Date(2021, 3, 26, 11, 0)
            }
        });
        POM.saveButton.click();
        expect(callbacks.onSave).toHaveBeenCalledTimes(1);
        expect(callbacks.onSave).toHaveBeenCalledWith(expect.objectContaining({
            text: "New Appointment",
            startDate: new Date(2021, 3, 26, 9, 30),
            endDate: new Date(2021, 3, 26, 11, 0)
        }))
    });
    it("should not call addAppointment or updateAppointment directly", async () => {
        const {
            POM: POM,
            callbacks: callbacks
        } = await createAppointmentPopup({
            appointmentData: {
                text: "Test",
                startDate: new Date(2021, 3, 26, 9, 30),
                endDate: new Date(2021, 3, 26, 11, 0)
            }
        });
        POM.saveButton.click();
        expect(callbacks.addAppointment).not.toHaveBeenCalled();
        expect(callbacks.updateAppointment).not.toHaveBeenCalled()
    });
    it("should display title from config", async () => {
        const {
            POM: POM
        } = await createAppointmentPopup({
            title: "Edit Appointment"
        });
        const titleElement = POM.element.querySelector(".dx-toolbar-label");
        expect(null === titleElement || void 0 === titleElement ? void 0 : titleElement.textContent).toBe("Edit Appointment")
    });
    it("should hide Save button when readOnly is true", async () => {
        const {
            POM: POM
        } = await createAppointmentPopup({
            readOnly: true
        });
        const saveButtons = POM.element.querySelectorAll(".dx-popup-done");
        expect(saveButtons.length).toBe(0)
    });
    it("should show Save button when readOnly is false", async () => {
        const {
            POM: POM
        } = await createAppointmentPopup({
            readOnly: false
        });
        expect(POM.saveButton).toBeTruthy()
    });
    it("should hide popup on Cancel click", async () => {
        const {
            popup: popup,
            POM: POM
        } = await createAppointmentPopup();
        expect(popup.visible).toBe(true);
        POM.cancelButton.click();
        expect(popup.visible).toBe(false)
    });
    it("should support composite onSave for exclude-from-series scenario", async () => {
        const updateAppointment = jest.fn();
        const addAppointment = jest.fn(() => Promise.resolve());
        const sourceAppointment = {
            text: "Series",
            recurrenceRule: "FREQ=DAILY"
        };
        const updatedAppointment = {
            text: "Series",
            recurrenceException: "20210426"
        };
        const onSave = jest.fn(newAppointment => {
            updateAppointment(sourceAppointment, updatedAppointment);
            return addAppointment(newAppointment)
        });
        const {
            POM: POM
        } = await 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();
        expect(onSave).toHaveBeenCalledTimes(1);
        expect(updateAppointment).toHaveBeenCalledWith(sourceAppointment, updatedAppointment);
        expect(addAppointment).toHaveBeenCalledWith(expect.objectContaining({
            text: "Single occurrence"
        }))
    })
});