devextreme/cjs/__internal/scheduler/appointments_new/view_item.test.js

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/__internal/scheduler/appointments_new/view_item.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 _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _fx = _interopRequireDefault(require("../../common/core/animation/fx"));
var _appointment_collector = require("./__mock__/appointment_collector");
var _base_appointment_view = require("./__mock__/base_appointment_view");

function _interopRequireDefault(e) {
    return e && e.__esModule ? e : {
        default: e
    }
}
const defaultAppointmentData = {
    title: "Test appointment",
    startDate: new Date(2024, 0, 1, 9, 0),
    endDate: new Date(2024, 0, 1, 10, 0)
};
_globals.describe.each(["BaseAppointment", "AppointmentCollector"])("ViewItem Common - %s", viewItemName => {
    (0, _globals.beforeEach)(() => {
        _fx.default.off = true;
        const $container = (0, _renderer.default)("<div>").addClass("container").appendTo(document.body);
        (0, _renderer.default)("<div>").addClass("root").appendTo($container)
    });
    (0, _globals.afterEach)(() => {
        (0, _renderer.default)(".container").remove();
        _fx.default.off = false;
        _globals.jest.useRealTimers()
    });
    const createViewItem = function() {
        let properties = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
        const baseProperties = {
            tabIndex: 0,
            sortedIndex: 0,
            onFocusIn: () => {},
            onFocusOut: () => {},
            onClick: () => {},
            onKeyDown: () => {}
        };
        if ("BaseAppointment" === viewItemName) {
            const extendedProperties = Object.assign({}, baseProperties, (0, _base_appointment_view.getBaseAppointmentViewProperties)(defaultAppointmentData), properties);
            return (0, _base_appointment_view.createBaseAppointment)(extendedProperties)
        }
        const extendedProperties = Object.assign({}, baseProperties, (0, _appointment_collector.getAppointmentCollectorProperties)([defaultAppointmentData]), properties);
        return Promise.resolve((0, _appointment_collector.createAppointmentCollector)(extendedProperties))
    };
    (0, _globals.describe)("Focus", () => {
        (0, _globals.it)("should have correct tabindex at init", async () => {
            const instance = await createViewItem({
                tabIndex: -1
            });
            (0, _globals.expect)(instance.$element().attr("tabindex")).toBe("-1")
        });
        (0, _globals.it)("should set tabindex attr on setTabIndex", async () => {
            const instance = await createViewItem({
                tabIndex: 2
            });
            instance.setTabIndex(2);
            (0, _globals.expect)(instance.$element().attr("tabindex")).toBe("2")
        });
        (0, _globals.it)("should have correct tabindex after setTabIndex(-1) when being focused", async () => {
            const instance = await createViewItem({
                tabIndex: 1
            });
            instance.$element().get(0).focus();
            instance.setTabIndex(-1);
            (0, _globals.expect)(instance.$element().attr("tabindex")).toBe("-1")
        });
        (0, _globals.it)("should have dx-state-focused class on focus", async () => {
            const instance = await createViewItem({
                tabIndex: 0
            });
            instance.$element().get(0).focus();
            (0, _globals.expect)(instance.$element().hasClass("dx-state-focused")).toBe(true)
        });
        (0, _globals.it)("should not have dx-state-focused class at init", async () => {
            const instance = await createViewItem({
                tabIndex: 0
            });
            (0, _globals.expect)(instance.$element().hasClass("dx-state-focused")).not.toBe(true)
        });
        (0, _globals.it)("should not have dx-state-focused class after unfocus", async () => {
            const instance = await createViewItem({
                tabIndex: 0
            });
            const element = instance.$element().get(0);
            element.focus();
            element.blur();
            (0, _globals.expect)(instance.$element().hasClass("dx-state-focused")).not.toBe(true)
        })
    });
    (0, _globals.describe)("Callbacks", () => {
        (0, _globals.it)("should call onFocusIn callback on focus", async () => {
            const onFocusIn = _globals.jest.fn();
            const instance = await createViewItem({
                onFocusIn: onFocusIn,
                tabIndex: 0
            });
            instance.$element().get(0).focus();
            (0, _globals.expect)(onFocusIn).toHaveBeenCalled()
        });
        (0, _globals.it)("should call onFocusOut callback on blur", async () => {
            const onFocusOut = _globals.jest.fn();
            const instance = await createViewItem({
                onFocusOut: onFocusOut,
                tabIndex: 0
            });
            const element = instance.$element().get(0);
            element.focus();
            element.blur();
            (0, _globals.expect)(onFocusOut).toHaveBeenCalled()
        });
        (0, _globals.it)("should call onKeyDown callback on enter key press", async () => {
            const onKeyDown = _globals.jest.fn();
            const instance = await createViewItem({
                onKeyDown: onKeyDown,
                tabIndex: 0
            });
            const element = instance.$element().get(0);
            element.click();
            element.dispatchEvent(new KeyboardEvent("keydown", {
                key: "Enter"
            }));
            (0, _globals.expect)(onKeyDown).toHaveBeenCalledWith(instance, _globals.expect.objectContaining({
                key: "Enter"
            }))
        })
    })
});