devextreme/esm/__internal/scheduler/appointments_new/appointment/agenda_appointment.test.js

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/scheduler/appointments_new/appointment/agenda_appointment.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/
 */
import {
    afterEach,
    beforeEach,
    describe,
    expect,
    it,
    jest
} from "@jest/globals";
import $ from "../../../../core/renderer";
import fx from "../../../common/core/animation/fx";
import {
    getBaseAppointmentViewProperties
} from "../__mock__/base_appointment_view";
import {
    AGENDA_APPOINTMENT_CLASSES,
    APPOINTMENT_CLASSES,
    APPOINTMENT_TYPE_CLASSES
} from "../const";
import {
    AgendaAppointmentView
} from "./agenda_appointment";
const getProperties = (appointmentData, targetedAppointmentData) => {
    const baseProperties = getBaseAppointmentViewProperties(appointmentData, targetedAppointmentData);
    return Object.assign({}, baseProperties, {
        modifiers: {
            isLastInGroup: false
        },
        geometry: {
            height: 50,
            width: "100%"
        },
        getResourcesValues: () => Promise.resolve([])
    })
};
const createAgendaAppointment = async properties => {
    const $element = $(".root");
    const instance = new AgendaAppointmentView($element, properties);
    await new Promise(process.nextTick);
    return instance
};
const defaultAppointmentData = {
    text: "Test appointment",
    startDate: new Date(2024, 0, 1, 9, 0),
    endDate: new Date(2024, 0, 1, 10, 0)
};
describe("AgendaAppointment", () => {
    beforeEach(() => {
        fx.off = true;
        const $container = $("<div>").addClass("container").appendTo(document.body);
        $("<div>").addClass("root").appendTo($container)
    });
    afterEach(() => {
        $(".container").remove();
        fx.off = false;
        jest.useRealTimers()
    });
    describe("Classes", () => {
        it.each([true, false])("should have correct class for modifiers.lastInGroup = %o", async isLastInGroup => {
            const instance = await createAgendaAppointment(Object.assign({}, getProperties(defaultAppointmentData), {
                modifiers: {
                    isLastInGroup: isLastInGroup
                }
            }));
            expect(instance.$element().hasClass(AGENDA_APPOINTMENT_CLASSES.LAST_IN_DATE)).toBe(isLastInGroup)
        });
        it("should have has-resource class when resource color is applied", async () => {
            const instance = await createAgendaAppointment(Object.assign({}, getProperties(defaultAppointmentData), {
                getResourceColor: () => Promise.resolve("red")
            }));
            expect(instance.$element().hasClass(APPOINTMENT_TYPE_CLASSES.HAS_RESOURCE)).toBe(true)
        })
    });
    describe("Geometry", () => {
        it("should apply geometry on init", async () => {
            const instance = await createAgendaAppointment(Object.assign({}, getProperties(defaultAppointmentData), {
                geometry: {
                    width: "100%",
                    height: 50
                }
            }));
            const $element = instance.$element();
            expect($element.css("width")).toBe("100%");
            expect($element.css("height")).toBe("50px")
        })
    });
    describe("Title", () => {
        it.each([{
            text: "Test title",
            expected: "Test title"
        }, {
            text: void 0,
            expected: "(No subject)"
        }, {
            text: "",
            expected: "(No subject)"
        }])("should have correct title text for appointment text = %o", async _ref => {
            let {
                text: text,
                expected: expected
            } = _ref;
            const instance = await createAgendaAppointment(getProperties(Object.assign({}, defaultAppointmentData, {
                text: text
            })));
            const $title = instance.$element().find(`.${APPOINTMENT_CLASSES.TITLE}`);
            expect($title.text()).toBe(expected)
        })
    });
    describe("Date text", () => {
        it("should have correct date text", async () => {
            const instance = await createAgendaAppointment(getProperties(Object.assign({}, defaultAppointmentData, {
                startDate: new Date(2024, 0, 1, 9, 0),
                endDate: new Date(2024, 0, 1, 10, 0)
            })));
            const $date = instance.$element().find(`.${APPOINTMENT_CLASSES.DATE}`);
            expect($date.text()).toBe("9:00 AM - 10:00 AM")
        })
    });
    describe("Recurrence", () => {
        it.each([true, false])("should have correct recurrence icon visibility for isRecurring = %o", async isRecurring => {
            const appointmentData = isRecurring ? Object.assign({}, defaultAppointmentData, {
                recurrenceRule: "FREQ=DAILY"
            }) : defaultAppointmentData;
            const instance = await createAgendaAppointment(getProperties(appointmentData));
            const $icon = instance.$element().find(`.${APPOINTMENT_CLASSES.RECURRENCE_ICON}`);
            expect($icon.length).toBe(isRecurring ? 1 : 0)
        })
    });
    describe("All Day", () => {
        it.each([true, false])("should have correct all day text visibility for allDay = %o", async isAllDay => {
            const appointmentData = Object.assign({}, defaultAppointmentData, {
                allDay: isAllDay
            });
            const instance = await createAgendaAppointment(getProperties(appointmentData));
            const $allDayText = instance.$element().find(`.${APPOINTMENT_CLASSES.ALL_DAY_TEXT}`);
            expect($allDayText.length).toBe(isAllDay ? 1 : 0)
        })
    });
    describe("Resources", () => {
        it("should apply resource color", async () => {
            const instance = await createAgendaAppointment(Object.assign({}, getProperties(defaultAppointmentData), {
                getResourceColor: () => Promise.resolve("rgb(255, 0, 0)")
            }));
            const $marker = instance.$element().find(`.${AGENDA_APPOINTMENT_CLASSES.MARKER}`);
            expect($marker.css("backgroundColor")).toBe("rgb(255, 0, 0)")
        });
        it("should render resource list", async () => {
            const instance = await createAgendaAppointment(Object.assign({}, getProperties(defaultAppointmentData), {
                getResourcesValues: () => Promise.resolve([{
                    label: "roomId",
                    values: ["Room 1"]
                }, {
                    label: "ownerId",
                    values: ["Owner 1"]
                }])
            }));
            const $resourceItems = instance.$element().find(`.${AGENDA_APPOINTMENT_CLASSES.RESOURCE_ITEM}`);
            expect($resourceItems.length).toBe(2);
            expect($resourceItems.eq(0).text()).toBe("roomId:Room 1");
            expect($resourceItems.eq(1).text()).toBe("ownerId:Owner 1")
        });
        it("should not render resource list if there are no resources", async () => {
            const instance = await createAgendaAppointment(Object.assign({}, getProperties(defaultAppointmentData), {
                getResourcesValues: () => Promise.resolve([])
            }));
            const $resourceItems = instance.$element().find(`.${AGENDA_APPOINTMENT_CLASSES.RESOURCE_ITEM}`);
            expect($resourceItems.length).toBe(0)
        })
    });
    describe("Geometry", () => {
        it("should have correct height and width", async () => {
            const instance = await createAgendaAppointment(Object.assign({}, getProperties(Object.assign({}, defaultAppointmentData)), {
                geometry: {
                    height: 60,
                    width: "80%"
                }
            }));
            expect(instance.$element().css("height")).toBe("60px");
            expect(instance.$element().css("width")).toBe("80%")
        })
    })
});