devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
200 lines (198 loc) • 6.28 kB
JavaScript
/**
* DevExtreme (esm/__internal/grids/new/grid_core/search/options.integration.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/
*/
import {
afterEach,
beforeEach,
describe,
expect,
it,
jest
} from "@jest/globals";
import {
Guid
} from "../../../../core/m_guid";
import CardView from "../../../../grids/new/card_view/widget";
import {
rerender
} from "inferno";
const SELECTORS = {
cardContent: "dx-cardview-card-content",
searchPanel: "dx-cardview-search-panel",
editorInput: "dx-texteditor-input"
};
const setup = function() {
let options = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
const container = document.createElement("div");
const cardView = new CardView(container, options);
rerender();
return {
container: container,
cardView: cardView
}
};
function getCardContent(container) {
rerender();
return container.querySelector(`.${SELECTORS.cardContent}`)
}
describe("Options", () => {
beforeEach(() => {
jest.spyOn(Guid.prototype, "_normalize").mockReturnValue("guidmock")
});
afterEach(() => {
jest.spyOn(Guid.prototype, "_normalize").mockRestore()
});
it("searchPanel.text (card contains match)", async () => {
const {
container: container,
cardView: cardView
} = setup({
dataSource: [{
Name: "John Doe"
}],
columns: ["Name"],
searchPanel: {
text: "John"
}
});
await cardView.dataController.waitLoaded();
rerender();
const content = getCardContent(container);
expect(content).toMatchSnapshot()
});
it("searchPanel.text (card not contains match)", async () => {
const {
container: container,
cardView: cardView
} = setup({
dataSource: [{
Name: "John Doe"
}],
columns: ["Name"],
searchPanel: {
text: "ABC"
}
});
await cardView.dataController.waitLoaded();
rerender();
const content = getCardContent(container);
expect(content).toMatchSnapshot()
});
it("searchPanel.highlightCaseSensitive = true", async () => {
const {
container: container,
cardView: cardView
} = setup({
dataSource: [{
Name: "John Doe john"
}],
columns: ["Name"],
searchPanel: {
text: "john",
highlightCaseSensitive: true
}
});
await cardView.dataController.waitLoaded();
const content = getCardContent(container);
expect(content).toMatchSnapshot()
});
it("searchPanel.highlightCaseSensitive = false", () => {
const {
container: container
} = setup({
dataSource: [{
Name: "John Doe john"
}],
columns: ["Name"],
searchPanel: {
text: "john",
highlightCaseSensitive: false
}
});
const content = getCardContent(container);
expect(content).toMatchSnapshot()
});
it("searchPanel.highlightSearchText = false", () => {
const {
container: container
} = setup({
dataSource: [{
Name: "John Doe john"
}],
columns: ["Name"],
searchPanel: {
text: "john",
highlightSearchText: false
}
});
const content = getCardContent(container);
expect(content).toMatchSnapshot()
});
it("searchPanel.width", () => {
const {
container: container
} = setup({
searchPanel: {
visible: true,
width: 333
}
});
rerender();
const searchPanel = container.querySelector(`.${SELECTORS.searchPanel}`);
expect(searchPanel).not.toBeNull();
expect(null === searchPanel || void 0 === searchPanel ? void 0 : searchPanel.getAttribute("style")).toContain("width: 333px")
});
it("searchPanel.placeholder", () => {
const {
container: container
} = setup({
searchPanel: {
visible: true,
placeholder: "Search here"
}
});
rerender();
const searchPanel = container.querySelector(`.${SELECTORS.searchPanel}`);
const searchInput = null === searchPanel || void 0 === searchPanel ? void 0 : searchPanel.querySelector(`.${SELECTORS.editorInput}`);
expect(null === searchInput || void 0 === searchInput ? void 0 : searchInput.getAttribute("placeholder")).toContain("Search here")
});
it("searchPanel.visible = false", () => {
const {
container: container
} = setup({
searchPanel: {
visible: false
}
});
rerender();
const searchPanel = container.querySelector(`.${SELECTORS.searchPanel}`);
expect(searchPanel).toBeNull()
});
it("searchPanel.searchVisibleColumnsOnly = true", () => {
const {
container: container
} = setup({
dataSource: [{
name: "John Doe john",
lastName: "last name"
}],
columns: ["name", {
dataField: "lastName",
visible: false
}],
searchPanel: {
visible: true,
text: "last",
searchVisibleColumnsOnly: true
}
});
rerender();
const content = container.querySelector(`.${SELECTORS.cardContent}`);
expect(content).toBeNull()
})
});