Skip to content

Commit 7b5bc5d

Browse files
Alyar666Alyar666
authored
DataGrid: Fix the banded Columns' vertical borders (T1318812) (#32802)
Co-authored-by: Alyar <>
1 parent edbd117 commit 7b5bc5d

195 files changed

Lines changed: 1245 additions & 311 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

e2e/testcafe-devextreme/tests/dataGrid/common/adaptiveRow.ts renamed to e2e/testcafe-devextreme/tests/dataGrid/common/adaptivity/functional.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import DataGrid from 'devextreme-testcafe-models/dataGrid';
2-
import url from '../../../helpers/getPageUrl';
3-
import { createWidget } from '../../../helpers/createWidget';
2+
import url from '../../../../helpers/getPageUrl';
3+
import { createWidget } from '../../../../helpers/createWidget';
44

5-
fixture.disablePageReloads`Adaptive Row`
6-
.page(url(__dirname, '../../container.html'));
5+
fixture.disablePageReloads`Adaptivity.Functional`
6+
.page(url(__dirname, '../../../container.html'));
77

88
test.meta({ browserSize: [400, 400] })('Should be shown and hidden when the window is resized', async (t) => {
99
const dataGrid = new DataGrid('#container');

‎e2e/testcafe-devextreme/tests/dataGrid/common/adaptivity/matrix.functional.ts‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
import DataGrid from 'devextreme-testcafe-models/dataGrid';
2+
import url from '../../../../helpers/getPageUrl';
3+
import { createWidget } from '../../../../helpers/createWidget';
4+
import type { RowBorderExpectation } from '../../helpers/domUtils';
5+
import {
6+
checkDataCellBorders, checkFilterCellBorders, checkHeaderCellBorders, checkSummaryCellBorders,
7+
} from '../../helpers/domUtils';
8+
9+
fixture.disablePageReloads`Adaptivity.Matrix.Functional`
10+
.page(url(__dirname, '../../../container.html'));
11+
12+
const GRID_CONTAINER = '#container';
13+
14+
const configs = [{
15+
showColumnLines: true,
16+
rtlEnabled: false,
17+
}, {
18+
showColumnLines: false,
19+
rtlEnabled: false,
20+
}, {
21+
showColumnLines: true,
22+
rtlEnabled: true,
23+
}, {
24+
showColumnLines: false,
25+
rtlEnabled: true,
26+
}];
27+
28+
// Check vertical borders of data cells
29+
configs.forEach((
30+
{ showColumnLines, rtlEnabled }: { showColumnLines: boolean; rtlEnabled: boolean; },
31+
): void => {
32+
test(`Headers and Filter cells should have correct borders when there is the first hidden header (showColumnLines: ${showColumnLines}, rtl: ${rtlEnabled})`, async (t) => {
33+
const dataGrid = new DataGrid(GRID_CONTAINER);
34+
const getExpectedBorders = (): RowBorderExpectation[] => {
35+
if (showColumnLines) {
36+
return [
37+
{
38+
rowIndex: 0,
39+
cells: [
40+
{ columnIndex: 0, name: 'Col 1', expected: [0, 0] },
41+
{ columnIndex: 1, name: 'Col 2', expected: rtlEnabled ? [1, 0] : [0, 1] },
42+
{ columnIndex: 2, name: 'Col 3', expected: [1, 1] },
43+
],
44+
},
45+
];
46+
}
47+
48+
return [
49+
{
50+
rowIndex: 0,
51+
cells: [
52+
{ columnIndex: 0, name: 'Col 1', expected: [0, 0] },
53+
{ columnIndex: 1, name: 'Col 2', expected: [0, 0] },
54+
{ columnIndex: 2, name: 'Col 3', expected: [0, 0] },
55+
],
56+
},
57+
];
58+
};
59+
const expectedBorders = getExpectedBorders();
60+
61+
await t.expect(dataGrid.isReady()).ok();
62+
await checkHeaderCellBorders(t, dataGrid, expectedBorders);
63+
await checkFilterCellBorders(t, dataGrid, expectedBorders);
64+
}).before(async () => {
65+
await createWidget('dxDataGrid', {
66+
dataSource: [
67+
{
68+
Col1: 'Data A', Col2: 'Desc A', Col3: 'Group 1', Col4: 'X', Col5: 100, Col6: 50,
69+
},
70+
{
71+
Col1: 'Data B', Col2: 'Desc B', Col3: 'Group 1', Col4: 'Y', Col5: 200, Col6: 20,
72+
},
73+
{
74+
Col1: 'Data C', Col2: 'Desc C', Col3: 'Group 2', Col4: 'Z', Col5: 300, Col6: 10,
75+
},
76+
],
77+
columns: [
78+
{ dataField: 'Col1', hidingPriority: 0 },
79+
{ dataField: 'Col2' },
80+
{ dataField: 'Col3' },
81+
],
82+
width: 250,
83+
filterRow: { visible: true },
84+
showColumnLines,
85+
rtlEnabled,
86+
columnWidth: 100,
87+
});
88+
});
89+
90+
test(`Data cells should have correct borders when there is the first hidden header (showColumnLines: ${showColumnLines}, rtl: ${rtlEnabled})`, async (t) => {
91+
const dataGrid = new DataGrid(GRID_CONTAINER);
92+
const getExpectedBorders = (): RowBorderExpectation[] => {
93+
if (showColumnLines) {
94+
return [
95+
{
96+
rowIndex: 0,
97+
cells: [
98+
{ columnIndex: 0, name: 'Col 1', expected: [0, 0] },
99+
{ columnIndex: 1, name: 'Col 2', expected: rtlEnabled ? [1, 0] : [0, 1] },
100+
// The last visible data column has the dx-last-data-cell class.
101+
// This class removes the border on the right. For some reason,
102+
// the headers don't have this class. But everything looks fine visually.
103+
{ columnIndex: 2, name: 'Col 3', expected: [1, 0] },
104+
],
105+
},
106+
];
107+
}
108+
109+
return [
110+
{
111+
rowIndex: 0,
112+
cells: [
113+
{ columnIndex: 0, name: 'Col 1', expected: [0, 0] },
114+
{ columnIndex: 1, name: 'Col 2', expected: [0, 0] },
115+
{ columnIndex: 2, name: 'Col 3', expected: [0, 0] },
116+
],
117+
},
118+
];
119+
};
120+
const expectedBorders = getExpectedBorders();
121+
122+
await t.expect(dataGrid.isReady()).ok();
123+
await checkDataCellBorders(t, dataGrid, expectedBorders);
124+
}).before(async () => {
125+
await createWidget('dxDataGrid', {
126+
dataSource: [
127+
{
128+
Col1: 'Data A', Col2: 'Desc A', Col3: 'Group 1', Col4: 'X', Col5: 100, Col6: 50,
129+
},
130+
{
131+
Col1: 'Data B', Col2: 'Desc B', Col3: 'Group 1', Col4: 'Y', Col5: 200, Col6: 20,
132+
},
133+
{
134+
Col1: 'Data C', Col2: 'Desc C', Col3: 'Group 2', Col4: 'Z', Col5: 300, Col6: 10,
135+
},
136+
],
137+
columns: [
138+
{ dataField: 'Col1', hidingPriority: 0 },
139+
{ dataField: 'Col2' },
140+
{ dataField: 'Col3' },
141+
],
142+
width: 250,
143+
showColumnLines,
144+
rtlEnabled,
145+
columnWidth: 100,
146+
});
147+
});
148+
149+
test(`Summary cells should have correct borders when there is the first hidden header (showColumnLines: ${showColumnLines}, rtl: ${rtlEnabled})`, async (t) => {
150+
const dataGrid = new DataGrid(GRID_CONTAINER);
151+
const expectedSummaryCellBorders: RowBorderExpectation[] = [{
152+
rowIndex: 0,
153+
cells: [
154+
{ columnIndex: 0, name: 'Col 1', expected: [0, 0] },
155+
{ columnIndex: 1, name: 'Col 2', expected: [0, 0] },
156+
{ columnIndex: 2, name: 'Col 3', expected: [0, 0] },
157+
],
158+
}];
159+
160+
await t.expect(dataGrid.isReady()).ok();
161+
await checkSummaryCellBorders(t, dataGrid, expectedSummaryCellBorders);
162+
}).before(async () => {
163+
await createWidget('dxDataGrid', {
164+
dataSource: [
165+
{
166+
Col1: 'Data A', Col2: 'Desc A', Col3: 'Group 1', Col4: 'X', Col5: 100, Col6: 50,
167+
},
168+
{
169+
Col1: 'Data B', Col2: 'Desc B', Col3: 'Group 1', Col4: 'Y', Col5: 200, Col6: 20,
170+
},
171+
{
172+
Col1: 'Data C', Col2: 'Desc C', Col3: 'Group 2', Col4: 'Z', Col5: 300, Col6: 10,
173+
},
174+
],
175+
columns: [
176+
{ dataField: 'Col1', hidingPriority: 0 },
177+
{ dataField: 'Col2' },
178+
{ dataField: 'Col3' },
179+
],
180+
width: 250,
181+
summary: {
182+
totalItems: [{
183+
column: 'Col2',
184+
summaryType: 'count',
185+
}],
186+
},
187+
showColumnLines,
188+
rtlEnabled,
189+
columnWidth: 100,
190+
});
191+
});
192+
});

0 commit comments

Comments
 (0)