devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
188 lines (187 loc) • 7.99 kB
JavaScript
/**
* DevExtreme (esm/__internal/grids/new/grid_core/accessibility/render.test.js)
* Version: 25.1.3
* Build date: Wed Jun 25 2025
*
* Copyright (c) 2012 - 2025 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 CardView from "../../../../grids/new/card_view/widget";
import {
rerender
} from "inferno";
const SELECTORS = {
cardView: ".dx-cardview",
rootContainer: ".dx-cardview-root-container",
statusContainer: '[role="status"]',
headerPanelContent: ".dx-cardview-headerpanel-content",
headerItem: ".dx-cardview-header-item",
card: ".dx-cardview-card"
};
const rootQuerySelector = selector => document.body.querySelector(selector);
const setup = function() {
let options = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
const container = document.createElement("div");
const {
body: body
} = document;
body.append(container);
const cardView = new CardView(container, options);
rerender();
return cardView
};
describe("Accessibility attributes", (() => {
afterEach((() => {
var _$;
const cardView = rootQuerySelector(SELECTORS.cardView);
null === (_$ = $(cardView ?? void 0)) || void 0 === _$ || _$.dxCardView("dispose")
}));
describe("Root descriprion", (() => {
it("should be displayed on the root container", (() => {
const cardView = setup({
dataSource: [{
A: "A_0",
B: "B_0"
}, {
A: "A_1",
B: "B_1"
}, {
A: "A_2",
B: "B_2"
}, {
A: "A_3",
B: "B_3"
}, {
A: "A_4",
B: "B_4"
}],
columns: ["A", "B"]
});
const rootContainer = rootQuerySelector(SELECTORS.rootContainer);
expect(null === rootContainer || void 0 === rootContainer ? void 0 : rootContainer.getAttribute("role")).toBe("group");
expect(null === rootContainer || void 0 === rootContainer ? void 0 : rootContainer.getAttribute("aria-label")).toBe("Card view with 5 cards. Each card has 2 fields");
cardView.option("filterValue", ["A", "=", "A_1"]);
expect(null === rootContainer || void 0 === rootContainer ? void 0 : rootContainer.getAttribute("aria-label")).toBe("Card view with 1 cards. Each card has 2 fields");
cardView.columnOption("B", "visible", false);
expect(null === rootContainer || void 0 === rootContainer ? void 0 : rootContainer.getAttribute("aria-label")).toBe("Card view with 1 cards. Each card has 1 fields")
}))
}));
describe("Status description", (() => {
it.skip("should be displayed on the status container", (() => {
const cardView = setup({
dataSource: [{
A: "A_0"
}, {
A: "A_1"
}, {
A: "A_2"
}, {
A: "A_3"
}, {
A: "A_4"
}],
columns: ["A"]
});
const statusContainer = rootQuerySelector(SELECTORS.statusContainer);
expect(statusContainer).not.toBeNull();
expect(null === statusContainer || void 0 === statusContainer ? void 0 : statusContainer.innerHTML).toBe("");
cardView.option("filterValue", ["A", "=", "A_1"]);
expect(null === statusContainer || void 0 === statusContainer ? void 0 : statusContainer.innerHTML).toBe("Card view with 1 cards. Each card has 1 fields");
cardView.option("filterValue", null);
expect(null === statusContainer || void 0 === statusContainer ? void 0 : statusContainer.innerHTML).toBe("Card view with 5 cards. Each card has 1 fields");
cardView.option("paging", {
pageSize: 2
});
expect(null === statusContainer || void 0 === statusContainer ? void 0 : statusContainer.innerHTML).toBe("Card view with 5 cards. Each card has 1 fields");
cardView.option("paging", {
pageIndex: 2
});
expect(null === statusContainer || void 0 === statusContainer ? void 0 : statusContainer.innerHTML).toBe("Card view with 5 cards. Each card has 1 fields")
}))
}));
describe("Header panel", (() => {
it("should be represented as menubar", (() => {
setup({
dataSource: [{
A: "A_0"
}, {
A: "A_1"
}, {
A: "A_2"
}, {
A: "A_3"
}, {
A: "A_4"
}],
columns: ["A"]
});
const headerPanelContent = rootQuerySelector(SELECTORS.headerPanelContent);
expect(null === headerPanelContent || void 0 === headerPanelContent ? void 0 : headerPanelContent.getAttribute("role")).toBe("menubar")
}));
it("should contain header panel item with their state", (() => {
setup({
dataSource: [{
A: "A_0"
}, {
A: "A_1"
}, {
A: "A_2"
}, {
A: "A_3"
}, {
A: "A_4"
}],
columns: [{
dataField: "A",
sortOrder: "desc",
sortIndex: 0
}]
});
const headerItem = rootQuerySelector(SELECTORS.headerItem);
expect(null === headerItem || void 0 === headerItem ? void 0 : headerItem.getAttribute("aria-label")).toBe("Field name A, Sorted in descending order, Sort index 1")
}))
}));
describe("Card description", (() => {
it("should take into account its position and status", (() => {
const cardView = setup({
dataSource: [{
A: "A_0"
}, {
A: "A_1"
}, {
A: "A_2"
}, {
A: "A_3"
}, {
A: "A_4"
}],
columns: ["A"],
editing: {
allowUpdating: true
},
selection: {
mode: "multiple"
}
});
const firstCard = rootQuerySelector(SELECTORS.card);
expect(null === firstCard || void 0 === firstCard ? void 0 : firstCard.getAttribute("role")).toBe("application");
expect(null === firstCard || void 0 === firstCard ? void 0 : firstCard.getAttribute("aria-roledescription")).toBe("Editable card");
expect(null === firstCard || void 0 === firstCard ? void 0 : firstCard.getAttribute("aria-label")).toBe("Row 1, column 1, Not selected");
cardView.option("selection", {
mode: "none"
});
expect(null === firstCard || void 0 === firstCard ? void 0 : firstCard.getAttribute("aria-label")).toBe("Row 1, column 1");
cardView.option("editing", {
allowUpdating: false
});
expect(null === firstCard || void 0 === firstCard ? void 0 : firstCard.getAttribute("aria-roledescription")).toBe("Card")
}))
}))
}));