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

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/scheduler/appointment_popup/customize_form_items.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 {
    describe,
    expect,
    it
} from "@jest/globals";
import {
    customizeFormItems
} from "./m_customize_form_items";
const subjectGroup = {
    name: "subjectGroup",
    itemType: "group",
    cssClass: "dx-scheduler-form-subject-group dx-scheduler-form-group-with-icon"
};
const dateGroup = {
    name: "dateGroup",
    itemType: "group",
    cssClass: "dx-scheduler-form-date-range-group dx-scheduler-form-group-with-icon"
};
const repeatGroup = {
    name: "repeatGroup",
    itemType: "group",
    cssClass: "dx-scheduler-form-repeat-group dx-scheduler-form-group-with-icon"
};
const resourcesGroup = {
    name: "resourcesGroup",
    itemType: "group",
    cssClass: "dx-scheduler-form-resources-group dx-scheduler-form-group-with-icon"
};
const descriptionGroup = {
    name: "descriptionGroup",
    itemType: "group",
    cssClass: "dx-scheduler-form-description-group dx-scheduler-form-group-with-icon"
};
const mainGroup = {
    items: [subjectGroup, dateGroup, repeatGroup, resourcesGroup, descriptionGroup],
    name: "mainGroup",
    itemType: "group",
    cssClass: "dx-scheduler-form-main-group",
    colSpan: 1
};
const recurrenceGroup = {
    name: "recurrenceGroup",
    itemType: "group",
    cssClass: "dx-scheduler-form-recurrence-group dx-scheduler-form-recurrence-hidden",
    colSpan: 1
};
const mainTestCase = [mainGroup, recurrenceGroup];
describe("customizeFormItems", () => {
    it("should return original items when no customization provided", () => {
        const result = customizeFormItems(mainTestCase);
        expect(result).toEqual(mainTestCase)
    });
    it("should not mutate original data", () => {
        var _mainGroup$items, _mainGroup$items2;
        const originalMainTestCase = JSON.parse(JSON.stringify(mainTestCase));
        const originalMainGroup = JSON.parse(JSON.stringify(mainGroup));
        const originalSubjectGroup = JSON.parse(JSON.stringify(subjectGroup));
        expect(mainGroup.items).toBe(mainGroup.items);
        customizeFormItems(mainTestCase, ["mainGroup"]);
        customizeFormItems(mainTestCase, ["subjectGroup", "dateGroup"]);
        customizeFormItems(mainTestCase, [{
            name: "mainGroup",
            items: []
        }]);
        customizeFormItems(mainTestCase, [{
            name: "mainGroup",
            items: ["subjectGroup"]
        }]);
        expect(mainTestCase).toEqual(originalMainTestCase);
        expect(mainGroup).toEqual(originalMainGroup);
        expect(subjectGroup).toEqual(originalSubjectGroup);
        expect(mainGroup.items).toHaveLength(5);
        expect(null === (_mainGroup$items = mainGroup.items) || void 0 === _mainGroup$items ? void 0 : _mainGroup$items[0]).toBe(subjectGroup);
        expect(null === (_mainGroup$items2 = mainGroup.items) || void 0 === _mainGroup$items2 ? void 0 : _mainGroup$items2[1]).toBe(dateGroup)
    });
    it("should show only mainGroup when specified by object", () => {
        const result = customizeFormItems(mainTestCase, [{
            name: "mainGroup"
        }]);
        expect(result).toEqual([mainGroup])
    });
    it("should show only mainGroup when specified by string", () => {
        const result = customizeFormItems(mainTestCase, ["mainGroup"]);
        expect(result).toEqual([mainGroup])
    });
    it("should extract specific items from parent group", () => {
        const result = customizeFormItems(mainTestCase, ["subjectGroup", "dateGroup"]);
        expect(result).toEqual([subjectGroup, dateGroup])
    });
    it("should create empty mainGroup when items array is empty", () => {
        const result = customizeFormItems(mainTestCase, [{
            name: "mainGroup",
            items: [],
            visible: false
        }]);
        expect(result).toEqual([Object.assign({}, mainGroup, {
            items: [],
            visible: false
        })])
    });
    it("should change order of top-level groups", () => {
        const result = customizeFormItems(mainTestCase, ["recurrenceGroup", "mainGroup"]);
        expect(result).toEqual([recurrenceGroup, mainGroup])
    });
    it("should extract item from group and change order", () => {
        const result = customizeFormItems(mainTestCase, ["subjectGroup", "recurrenceGroup", "mainGroup"]);
        const expectedMainGroup = Object.assign({}, mainGroup, {
            items: [dateGroup, repeatGroup, resourcesGroup, descriptionGroup]
        });
        expect(result).toEqual([subjectGroup, recurrenceGroup, expectedMainGroup])
    });
    it("should extract multiple items from parent group", () => {
        const result = customizeFormItems(mainTestCase, ["subjectGroup", "repeatGroup", "mainGroup"]);
        const expectedMainGroup = Object.assign({}, mainGroup, {
            items: [dateGroup, resourcesGroup, descriptionGroup]
        });
        expect(result).toEqual([subjectGroup, repeatGroup, expectedMainGroup])
    });
    it("should create custom form item when name not found", () => {
        const result = customizeFormItems(mainTestCase, ["customItem"]);
        expect(result).toEqual([{
            name: "customItem",
            itemType: "simple",
            dataField: "customItem",
            editorType: "dxTextBox"
        }])
    });
    it("should create custom group with children", () => {
        const result = customizeFormItems(mainTestCase, [{
            name: "customGroup",
            itemType: "group",
            items: ["child1", "child2"]
        }]);
        expect(result).toEqual([{
            name: "customGroup",
            itemType: "group",
            items: [{
                name: "child1",
                itemType: "simple",
                dataField: "child1",
                editorType: "dxTextBox"
            }, {
                name: "child2",
                itemType: "simple",
                dataField: "child2",
                editorType: "dxTextBox"
            }]
        }])
    });
    it("should create custom group with visibility control", () => {
        const result = customizeFormItems(mainTestCase, [{
            name: "hiddenGroup",
            itemType: "group",
            visible: false,
            items: ["field1"]
        }]);
        expect(result).toEqual([{
            name: "hiddenGroup",
            itemType: "group",
            visible: false,
            items: [{
                name: "field1",
                itemType: "simple",
                dataField: "field1",
                editorType: "dxTextBox"
            }]
        }])
    });
    it("should customize mainGroup with specific items as array", () => {
        const result = customizeFormItems(mainTestCase, [{
            name: "mainGroup",
            items: ["subjectGroup", "dateGroup"]
        }]);
        expect(result).toEqual([Object.assign({}, mainGroup, {
            items: [subjectGroup, dateGroup]
        })])
    });
    it("should customize mainGroup with specific items as objects", () => {
        const result = customizeFormItems(mainTestCase, [{
            name: "mainGroup",
            items: [{
                name: "subjectGroup"
            }, {
                name: "dateGroup"
            }]
        }]);
        expect(result).toEqual([Object.assign({}, mainGroup, {
            items: [subjectGroup, dateGroup]
        })])
    });
    it("should create nested custom groups", () => {
        const result = customizeFormItems(mainTestCase, [{
            name: "mainGroup",
            items: [{
                name: "several",
                itemType: "group",
                items: ["subjectGroup"]
            }, "dateGroup"]
        }]);
        expect(result).toEqual([Object.assign({}, mainGroup, {
            items: [{
                name: "several",
                itemType: "group",
                items: [subjectGroup]
            }, dateGroup]
        })])
    });
    it("should set item visibility property", () => {
        const result = customizeFormItems(mainTestCase, [{
            name: "mainGroup",
            items: [{
                name: "subjectGroup",
                visible: false
            }, {
                name: "dateGroup"
            }]
        }]);
        expect(result).toEqual([Object.assign({}, mainGroup, {
            items: [Object.assign({}, subjectGroup, {
                visible: false
            }), dateGroup]
        })])
    })
});