devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
158 lines (156 loc) • 6.22 kB
JavaScript
/**
* DevExtreme (cjs/__internal/grids/new/card_view/header_panel/options.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 _inferno = require("inferno");
var _sortable = require("../../grid_core/inferno_wrappers/sortable");
var _di = require("../di.test_utils");
var _options_controller = require("../options_controller.mock");
var _view = require("./view");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const setup = config => {
const rootElement = document.createElement("div");
rootElement.classList.add("test-container");
const context = (0, _di.getContext)(config);
const optionsController = context.get(_options_controller.OptionsControllerMock);
const headerPanelView = context.get(_view.HeaderPanelView);
headerPanelView.render(rootElement);
(0, _inferno.rerender)();
return {
optionsController: optionsController,
headerPanelView: headerPanelView,
rootElement: rootElement
}
};
(0, _globals.describe)("Options", () => {
(0, _globals.describe)("headerPanel", () => {
(0, _globals.describe)("dragging", () => {
(0, _globals.it)("should pass options to inner Sortable", () => {
const renderSpy = _globals.jest.spyOn(_sortable.Sortable.prototype, "render");
setup({
columns: ["column1"],
allowColumnReordering: true,
headerPanel: {
dragging: {
dropFeedbackMode: "push",
scrollSpeed: 555,
scrollSensitivity: 111
}
}
});
(0, _globals.expect)(renderSpy.mock.calls[0][0]).toMatchObject({
dropFeedbackMode: "push",
scrollSpeed: 555,
scrollSensitivity: 111
})
})
});
(0, _globals.describe)("visible", () => {
(0, _globals.describe)("when it is false", () => {
(0, _globals.it)("should hide headerPanel", () => {
const {
rootElement: rootElement
} = setup({
columns: ["column1"],
headerPanel: {
visible: false
}
});
(0, _globals.expect)(rootElement).toMatchSnapshot()
})
});
(0, _globals.describe)("when it is true", () => {
(0, _globals.it)("should show headerPanel", () => {
const {
rootElement: rootElement
} = setup({
columns: ["column1"],
headerPanel: {
visible: true
}
});
(0, _globals.expect)(rootElement).toMatchSnapshot()
})
})
});
(0, _globals.describe)("itemTemplate", () => {
(0, _globals.it)("should override content of headerPanel item", () => {
const {
rootElement: rootElement
} = setup({
columns: ["column1"],
headerPanel: {
itemTemplate: _ref => {
let {
model: {
column: column
}
} = _ref;
return (0, _renderer.default)("<div>").addClass("my-class").text(column.caption).get(0)
}
}
});
(0, _globals.expect)(rootElement).toMatchSnapshot()
})
});
(0, _globals.describe)("itemCssClass", () => {
(0, _globals.it)("should add css class to headerPanel item", () => {
const {
rootElement: rootElement
} = setup({
columns: ["column1"],
headerPanel: {
itemCssClass: "my-class"
}
});
(0, _globals.expect)(rootElement.querySelector(".dx-scrollable")).toMatchSnapshot()
})
})
})
});
(0, _globals.describe)("ColumnProperties", () => {
(0, _globals.describe)("headerItemTemplate", () => {
(0, _globals.it)("should override content of headerPanel item", () => {
const {
rootElement: rootElement
} = setup({
columns: [{
dataField: "column1",
headerItemTemplate: _ref2 => {
let {
model: {
column: column
}
} = _ref2;
return (0, _renderer.default)("<div>").addClass("my-class").text(column.caption).get(0)
}
}]
});
(0, _globals.expect)(rootElement).toMatchSnapshot()
})
});
(0, _globals.describe)("headerItemCssClass", () => {
(0, _globals.it)("should override content of headerPanel item", () => {
const {
rootElement: rootElement
} = setup({
columns: [{
dataField: "column1",
headerItemCssClass: "my-css-class"
}]
});
(0, _globals.expect)(rootElement).toMatchSnapshot()
})
})
});