devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
201 lines (200 loc) • 7.62 kB
JavaScript
/**
* DevExtreme (esm/__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/
*/
import {
describe,
expect,
it,
jest
} from "@jest/globals";
import $ from "../../../../core/renderer";
import {
rerender
} from "inferno";
import {
CardView
} from "./widget";
describe("common", (() => {
describe("initial render", (() => {
it("should be successfull", (() => {
const container = document.createElement("div");
new CardView(container, {});
rerender();
expect(container).toMatchSnapshot()
}))
}))
}));
describe("options", (() => {
describe("rtlEnabled", (() => {
const container = document.createElement("div");
new CardView(container, {
rtlEnabled: true,
pager: {
visible: true
}
});
it("should add dx-rtl class to container div", (() => {
expect(container.classList).toContain("dx-rtl")
}));
it("should pass rtlEnabled options to nested components", (() => {
expect($(container).find(".dx-pagination").dxPagination("instance").option("rtlEnabled")).toBe(true)
}))
}))
}));
describe("regressions", (() => {
it("should not have leaks to defaultOptions after changing option", (() => {
const container = document.createElement("div");
let cardView = new CardView(container, {
keyExpr: "a",
dataSource: [{
a: "a"
}]
});
expect(cardView.option("pager.showPageSizeSelector")).toBe(false);
cardView.option("pager.showPageSizeSelector", true);
expect(cardView.option("pager.showPageSizeSelector")).toBe(true);
cardView.dispose();
cardView = new CardView(container, {
keyExpr: "a",
dataSource: [{
a: "a"
}]
});
expect(cardView.option("pager.showPageSizeSelector")).toBe(false)
}))
}));
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"
}];
describe("card template", (() => {
it("should render each card template not more than once per sort update", (() => {
const cardTemplate = jest.fn();
const container = document.createElement("div");
const cardView = new CardView(container, {
keyExpr: "id",
dataSource: dataSource,
columns: columns,
cardTemplate: cardTemplate,
sorting: {
mode: "single"
}
});
cardTemplate.mockClear();
cardView.columnOption("name", "sortOrder", "asc");
expect(cardTemplate).toBeCalledTimes(dataSource.length)
}));
it("should render each card template not more than once per filter update", (() => {
const cardTemplate = jest.fn();
const container = document.createElement("div");
const cardView = new 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();
expect(cardTemplate).toBeCalledTimes(dataSource.length)
}));
it("should render each card template not more than once per search update", (() => {
const cardTemplate = 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 CardView(container, {
keyExpr: "id",
dataSource: dataSource,
columns: columns,
cardTemplate: cardTemplate,
searchPanel: {
visible: true
}
});
cardTemplate.mockClear();
cardView.searchByText("audi");
cardView.searchByText("");
expect(cardTemplate).toBeCalledTimes(calledTimes)
}))
}));
describe("card footer template", (() => {
it("should render each card template not more than once per sort update", (() => {
const cardFooterTemplate = jest.fn();
const container = document.createElement("div");
const cardView = new CardView(container, {
keyExpr: "id",
dataSource: dataSource,
columns: columns,
cardFooterTemplate: cardFooterTemplate,
sorting: {
mode: "single"
}
});
cardFooterTemplate.mockClear();
cardView.columnOption("name", "sortOrder", "asc");
expect(cardFooterTemplate).toBeCalledTimes(dataSource.length)
}));
it("should render each card template not more than once per filter update", (() => {
const cardFooterTemplate = jest.fn();
const container = document.createElement("div");
const cardView = new 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();
expect(cardFooterTemplate).toBeCalledTimes(dataSource.length)
}));
it("should render each card template not more than once per search update", (() => {
const cardFooterTemplate = 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 CardView(container, {
keyExpr: "id",
dataSource: dataSource,
columns: columns,
cardFooterTemplate: cardFooterTemplate,
searchPanel: {
visible: true
}
});
cardFooterTemplate.mockClear();
cardView.searchByText("audi");
cardView.searchByText("");
expect(cardFooterTemplate).toBeCalledTimes(calledTimes)
}))
}))
}));