devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
208 lines (207 loc) • 8.25 kB
JavaScript
/**
* DevExtreme (esm/__internal/scheduler/header/m_view_switcher.integration.test.js)
* Version: 25.2.5
* Build date: Fri Feb 20 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import {
afterEach,
describe,
expect,
it
} from "@jest/globals";
import $ from "../../../core/renderer";
import {
loadMessages,
locale
} from "../../../localization";
import Scheduler from "../../../ui/scheduler";
const SCHEDULER_CONTAINER_ID = "schedulerContainer";
const SELECTORS = {
schedulerContainer: "#schedulerContainer",
invisibleState: ".dx-state-invisible",
viewSwitcher: ".dx-scheduler-view-switcher",
viewSwitcherButton: ".dx-scheduler-view-switcher .dx-button",
viewButtonInDropdown: ".dx-scheduler-view-switcher-dropdown-button-content .dx-list-item"
};
const defaultViews = ["day", "week", "workWeek", "month", "timelineDay", "timelineWeek", "timelineWorkWeek", "timelineMonth", "agenda"];
const createScheduler = options => new Promise((resolve => {
const $container = $("<div>").attr("id", "schedulerContainer").appendTo(document.body);
let instance;
instance = new Scheduler($container.get(0), Object.assign({}, options, {
onContentReady: () => {
resolve({
$container: $container,
instance: instance
})
}
}))
}));
describe("ViewSwitcher", (() => {
afterEach((() => {
const $container = $(SELECTORS.schedulerContainer);
const scheduler = $container.dxScheduler("instance");
scheduler.dispose();
$container.remove()
}));
describe("Visibility", (() => {
it.each([{
useDropDownViewSwitcher: true,
views: ["day"],
currentView: "day",
expectedVisibility: false
}, {
useDropDownViewSwitcher: true,
views: ["day"],
currentView: "week",
expectedVisibility: false
}, {
useDropDownViewSwitcher: true,
views: [],
currentView: "day",
expectedVisibility: false
}, {
useDropDownViewSwitcher: true,
views: ["day", "week"],
currentView: "day",
expectedVisibility: true
}, {
useDropDownViewSwitcher: false,
views: ["day"],
currentView: "day",
expectedVisibility: false
}, {
useDropDownViewSwitcher: false,
views: ["day"],
currentView: "week",
expectedVisibility: false
}, {
useDropDownViewSwitcher: false,
views: [],
currentView: "day",
expectedVisibility: false
}, {
useDropDownViewSwitcher: false,
views: ["day", "week"],
currentView: "day",
expectedVisibility: true
}])("view switcher should be visible: $expectedVisibility, when useDropDownViewSwitcher: $useDropDownViewSwitcher views: $views, currentView: $currentView", (async _ref => {
let {
useDropDownViewSwitcher: useDropDownViewSwitcher,
views: views,
currentView: currentView,
expectedVisibility: expectedVisibility
} = _ref;
const {
$container: $container
} = await createScheduler({
useDropDownViewSwitcher: useDropDownViewSwitcher,
currentView: currentView,
views: views
});
const viewSwitcher = $container.find(SELECTORS.viewSwitcher);
expect(!viewSwitcher.is(SELECTORS.invisibleState)).toBe(expectedVisibility)
}))
}));
describe("Localization", (() => {
it("should display Russian view names when locale is set to Russian", (async () => {
loadMessages({
ru: {
"dxScheduler-switcherDay": "\u0414\u0435\u043d\u044c",
"dxScheduler-switcherWeek": "\u041d\u0435\u0434\u0435\u043b\u044f",
"dxScheduler-switcherMonth": "\u041c\u0435\u0441\u044f\u0446"
}
});
locale("ru");
const {
$container: $container
} = await createScheduler({
useDropDownViewSwitcher: false,
currentView: "day",
views: ["day", "week", "month"]
});
const buttons = $container.find(SELECTORS.viewSwitcherButton);
const buttonTexts = [];
buttons.each(((_, button) => {
buttonTexts.push($(button).text());
return true
}));
expect(buttonTexts).toContain("\u0414\u0435\u043d\u044c");
expect(buttonTexts).toContain("\u041d\u0435\u0434\u0435\u043b\u044f");
expect(buttonTexts).toContain("\u041c\u0435\u0441\u044f\u0446")
}));
it("should display Russian view names in dropdown switcher when locale is set to Russian", (async () => {
loadMessages({
ru: {
"dxScheduler-switcherDay": "\u0414\u0435\u043d\u044c",
"dxScheduler-switcherWeek": "\u041d\u0435\u0434\u0435\u043b\u044f",
"dxScheduler-switcherMonth": "\u041c\u0435\u0441\u044f\u0446"
}
});
locale("ru");
const {
$container: $container
} = await createScheduler({
useDropDownViewSwitcher: true,
currentView: "day",
views: ["day", "week", "month"]
});
const viewSwitcher = $container.find(SELECTORS.viewSwitcher);
const dropdown = viewSwitcher.find(".dx-dropdownbutton");
const buttonText = dropdown.find(".dx-button-text");
expect(buttonText.text()).toBe("\u0414\u0435\u043d\u044c")
}))
}));
it("currentView should equal type or name if it is set by config on switch, useDropDownViewSwitcher=false", (async () => {
const changes = [];
await createScheduler({
dataSource: [],
views: [...defaultViews, {
name: "Week 2",
type: "week"
}],
currentView: "timelineDay",
width: 1e4,
useDropDownViewSwitcher: false,
onOptionChanged: e => {
if ("currentView" === e.name) {
const currentView = e.component.option("currentView");
changes.push(currentView ?? "")
}
}
});
const buttons = document.querySelectorAll(SELECTORS.viewSwitcherButton);
buttons.forEach((button => {
button.click()
}));
expect(changes).toEqual([...defaultViews, "Week 2"])
}));
it("currentView should equal type or name if it is set by config on switch, useDropDownViewSwitcher=true", (async () => {
const changes = [];
await createScheduler({
dataSource: [],
views: [...defaultViews, {
name: "Week 2",
type: "week"
}],
currentView: "timelineDay",
useDropDownViewSwitcher: true,
onOptionChanged: e => {
if ("currentView" === e.name) {
const currentView = e.component.option("currentView");
changes.push(currentView ?? "")
}
}
});
const dropdown = document.querySelector(SELECTORS.viewSwitcherButton);
dropdown.click();
const buttons = document.querySelectorAll(SELECTORS.viewButtonInDropdown);
buttons.forEach((button => {
button.click();
dropdown.click()
}));
expect(changes).toEqual([...defaultViews, "Week 2"])
}))
}));