devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
198 lines (196 loc) • 8.31 kB
JavaScript
/**
* DevExtreme (cjs/__internal/grids/new/card_view/widget.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/
*/
"use strict";
var _globals = require("@jest/globals");
var _renderer = _interopRequireDefault(require("../../../../core/renderer"));
var _inferno = require("inferno");
var _widget = require("./widget");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}(0, _globals.describe)("common", (() => {
(0, _globals.describe)("initial render", (() => {
(0, _globals.it)("should be successfull", (() => {
const container = document.createElement("div");
new _widget.CardView(container, {});
(0, _inferno.rerender)();
(0, _globals.expect)(container).toMatchSnapshot()
}))
}))
}));
(0, _globals.describe)("options", (() => {
(0, _globals.describe)("rtlEnabled", (() => {
const container = document.createElement("div");
new _widget.CardView(container, {
rtlEnabled: true,
pager: {
visible: true
}
});
(0, _globals.it)("should add dx-rtl class to container div", (() => {
(0, _globals.expect)(container.classList).toContain("dx-rtl")
}));
(0, _globals.it)("should pass rtlEnabled options to nested components", (() => {
(0, _globals.expect)((0, _renderer.default)(container).find(".dx-pagination").dxPagination("instance").option("rtlEnabled")).toBe(true)
}))
}))
}));
(0, _globals.describe)("regressions", (() => {
(0, _globals.it)("should not have leaks to defaultOptions after changing option", (() => {
const container = document.createElement("div");
let cardView = new _widget.CardView(container, {
keyExpr: "a",
dataSource: [{
a: "a"
}]
});
(0, _globals.expect)(cardView.option("pager.showPageSizeSelector")).toBe(false);
cardView.option("pager.showPageSizeSelector", true);
(0, _globals.expect)(cardView.option("pager.showPageSizeSelector")).toBe(true);
cardView.dispose();
cardView = new _widget.CardView(container, {
keyExpr: "a",
dataSource: [{
a: "a"
}]
});
(0, _globals.expect)(cardView.option("pager.showPageSizeSelector")).toBe(false)
}))
}));
(0, _globals.describe)("absence of multiple re-render", (() => {
const dataSource = [{
id: 1,
name: "Audi"
}, {
id: 2,
name: "BMW"
}];
const columns = [{
dataField: "id",
caption: "ID"
}, {
dataField: "name",
caption: "Name"
}];
(0, _globals.describe)("card template", (() => {
(0, _globals.it)("should render each card template not more than once per sort update", (() => {
const cardTemplate = _globals.jest.fn();
const container = document.createElement("div");
const cardView = new _widget.CardView(container, {
keyExpr: "id",
dataSource: dataSource,
columns: columns,
cardTemplate: cardTemplate,
sorting: {
mode: "single"
}
});
cardTemplate.mockClear();
cardView.columnOption("name", "sortOrder", "asc");
(0, _globals.expect)(cardTemplate).toBeCalledTimes(dataSource.length)
}));
(0, _globals.it)("should render each card template not more than once per filter update", (() => {
const cardTemplate = _globals.jest.fn();
const container = document.createElement("div");
const cardView = new _widget.CardView(container, {
keyExpr: "id",
dataSource: dataSource,
cardTemplate: cardTemplate,
columns: [...columns.slice(0, -1), {
dataField: "name",
caption: "Name",
filterValues: ["Audi"]
}],
headerFilter: {
visible: true
}
});
cardTemplate.mockClear();
cardView.clearFilter();
(0, _globals.expect)(cardTemplate).toBeCalledTimes(dataSource.length)
}));
(0, _globals.it)("should render each card template not more than once per search update", (() => {
const cardTemplate = _globals.jest.fn();
const foundCards = dataSource.filter((card => card.name.toLowerCase().includes("audi")));
const calledTimes = foundCards.length + dataSource.length;
const container = document.createElement("div");
const cardView = new _widget.CardView(container, {
keyExpr: "id",
dataSource: dataSource,
columns: columns,
cardTemplate: cardTemplate,
searchPanel: {
visible: true
}
});
cardTemplate.mockClear();
cardView.searchByText("audi");
cardView.searchByText("");
(0, _globals.expect)(cardTemplate).toBeCalledTimes(calledTimes)
}))
}));
(0, _globals.describe)("card footer template", (() => {
(0, _globals.it)("should render each card template not more than once per sort update", (() => {
const cardFooterTemplate = _globals.jest.fn();
const container = document.createElement("div");
const cardView = new _widget.CardView(container, {
keyExpr: "id",
dataSource: dataSource,
columns: columns,
cardFooterTemplate: cardFooterTemplate,
sorting: {
mode: "single"
}
});
cardFooterTemplate.mockClear();
cardView.columnOption("name", "sortOrder", "asc");
(0, _globals.expect)(cardFooterTemplate).toBeCalledTimes(dataSource.length)
}));
(0, _globals.it)("should render each card template not more than once per filter update", (() => {
const cardFooterTemplate = _globals.jest.fn();
const container = document.createElement("div");
const cardView = new _widget.CardView(container, {
keyExpr: "id",
dataSource: dataSource,
cardFooterTemplate: cardFooterTemplate,
columns: [...columns.slice(0, -1), {
dataField: "name",
caption: "Name",
filterValues: ["Audi"]
}],
headerFilter: {
visible: true
}
});
cardFooterTemplate.mockClear();
cardView.clearFilter();
(0, _globals.expect)(cardFooterTemplate).toBeCalledTimes(dataSource.length)
}));
(0, _globals.it)("should render each card template not more than once per search update", (() => {
const cardFooterTemplate = _globals.jest.fn();
const foundCards = dataSource.filter((card => card.name.toLowerCase().includes("audi")));
const calledTimes = foundCards.length + dataSource.length;
const container = document.createElement("div");
const cardView = new _widget.CardView(container, {
keyExpr: "id",
dataSource: dataSource,
columns: columns,
cardFooterTemplate: cardFooterTemplate,
searchPanel: {
visible: true
}
});
cardFooterTemplate.mockClear();
cardView.searchByText("audi");
cardView.searchByText("");
(0, _globals.expect)(cardFooterTemplate).toBeCalledTimes(calledTimes)
}))
}))
}));