devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
142 lines (141 loc) • 5.54 kB
JavaScript
/**
* DevExtreme (esm/__internal/scheduler/appointments_new/view_item.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 {
createAppointmentCollector,
getAppointmentCollectorProperties
} from "./__mock__/appointment_collector";
import {
createBaseAppointment,
getBaseAppointmentViewProperties
} from "./__mock__/base_appointment_view";
const defaultAppointmentData = {
title: "Test appointment",
startDate: new Date(2024, 0, 1, 9, 0),
endDate: new Date(2024, 0, 1, 10, 0)
};
describe.each(["BaseAppointment", "AppointmentCollector"])("ViewItem Common - %s", viewItemName => {
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()
});
const createViewItem = function() {
let properties = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
const baseProperties = {
tabIndex: 0,
sortedIndex: 0,
onFocusIn: () => {},
onFocusOut: () => {},
onKeyDown: () => {}
};
if ("BaseAppointment" === viewItemName) {
const extendedProperties = Object.assign({}, baseProperties, getBaseAppointmentViewProperties(defaultAppointmentData), properties);
return createBaseAppointment(extendedProperties)
}
const extendedProperties = Object.assign({}, baseProperties, getAppointmentCollectorProperties([defaultAppointmentData]), properties);
return Promise.resolve(createAppointmentCollector(extendedProperties))
};
describe("Focus", () => {
it("should have correct tabindex at init", async () => {
const instance = await createViewItem({
tabIndex: -1
});
expect(instance.$element().attr("tabindex")).toBe("-1")
});
it("should set tabindex attr on setTabIndex", async () => {
const instance = await createViewItem({
tabIndex: 2
});
instance.setTabIndex(2);
expect(instance.$element().attr("tabindex")).toBe("2")
});
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);
expect(instance.$element().attr("tabindex")).toBe("-1")
});
it("should have dx-state-focused class on focus", async () => {
const instance = await createViewItem({
tabIndex: 0
});
instance.$element().get(0).focus();
expect(instance.$element().hasClass("dx-state-focused")).toBe(true)
});
it("should not have dx-state-focused class at init", async () => {
const instance = await createViewItem({
tabIndex: 0
});
expect(instance.$element().hasClass("dx-state-focused")).not.toBe(true)
});
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();
expect(instance.$element().hasClass("dx-state-focused")).not.toBe(true)
})
});
describe("Callbacks", () => {
it("should call onFocusIn callback on focus", async () => {
const onFocusIn = jest.fn();
const instance = await createViewItem({
onFocusIn: onFocusIn,
tabIndex: 0
});
instance.$element().get(0).focus();
expect(onFocusIn).toHaveBeenCalled()
});
it("should call onFocusOut callback on blur", async () => {
const onFocusOut = jest.fn();
const instance = await createViewItem({
onFocusOut: onFocusOut,
tabIndex: 0
});
const element = instance.$element().get(0);
element.focus();
element.blur();
expect(onFocusOut).toHaveBeenCalled()
});
it("should call onKeyDown callback on enter key press", async () => {
const onKeyDown = 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"
}));
expect(onKeyDown).toHaveBeenCalledWith(instance, expect.objectContaining({
key: "Enter"
}))
})
})
});