Skip to content

Commit b1ae416

Browse files
Alyar666Alyar666
authored
DataGrid - AI Column: Support column reordering (DevExpress#31179)
Co-authored-by: Alyar <>
1 parent bc8528f commit b1ae416

File tree

10 files changed

+315
-91
lines changed

10 files changed

+315
-91
lines changed

‎e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/columnChooser.functional.ts‎

Lines changed: 52 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -7,42 +7,24 @@ fixture.disablePageReloads`Ai Column - Column Chooser.Functional`
77

88
const DATA_GRID_SELECTOR = '#container';
99

10-
const checkCells = async (t, cells: Selector, expectedCells: string[]) => {
11-
const count = await cells.count;
12-
13-
await t.expect(cells.count).eql(expectedCells.length);
14-
15-
for (let i = 0; i < count; i += 1) {
16-
await t.expect(cells.nth(i).innerText).eql(expectedCells[i]);
17-
}
18-
};
19-
20-
const checkVisibleHeaders = async (t, headers: Selector, expectedCells: string[]) => {
21-
await checkCells(t, headers, expectedCells);
22-
};
23-
24-
const checkChooserColumns = async (t, chooserColumns: Selector, expectedCells: string[]) => {
25-
await checkCells(t, chooserColumns, expectedCells);
26-
};
27-
2810
test('The AI column can be hidden when columnChooser.mode is "dragAndDrop"', async (t) => {
2911
// arrange
3012
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
13+
const headerRow = dataGrid.getHeaders().getHeaderRow(0);
14+
const columnChooser = dataGrid.getColumnChooser();
3115

3216
await t.expect(dataGrid.isReady()).ok();
3317

34-
const headerCells = dataGrid.getHeaders().getHeaderRow(0).getHeaderCells();
35-
3618
// assert
3719
await t.expect(dataGrid.apiColumnOption('myAiColumn', 'visible')).ok();
38-
await checkVisibleHeaders(t, headerCells, ['AI Column', 'ID', 'Name', 'Value']);
20+
await t.expect(await headerRow.getHeaderTexts()).eql(['AI Column', 'ID', 'Name', 'Value']);
3921

4022
// act
4123
await dataGrid.apiShowColumnChooser();
4224

4325
// assert
44-
await t.expect(dataGrid.getColumnChooser().isOpened).ok();
45-
await checkChooserColumns(t, dataGrid.getColumnChooser().getColumns(), []);
26+
await t.expect(columnChooser.isOpened).ok();
27+
await t.expect(await columnChooser.getColumnTexts()).eql([]);
4628

4729
// act
4830
await t.dragToElement(
@@ -52,8 +34,8 @@ test('The AI column can be hidden when columnChooser.mode is "dragAndDrop"', asy
5234

5335
// assert
5436
await t.expect(dataGrid.apiColumnOption('myAiColumn', 'visible')).notOk();
55-
await checkVisibleHeaders(t, headerCells, ['ID', 'Name', 'Value']);
56-
await checkChooserColumns(t, dataGrid.getColumnChooser().getColumns(), ['AI Column']);
37+
await t.expect(await headerRow.getHeaderTexts()).eql(['ID', 'Name', 'Value']);
38+
await t.expect(await columnChooser.getColumnTexts()).eql(['AI Column']);
5739
}).before(async () => createWidget('dxDataGrid', {
5840
dataSource: [
5941
{ id: 1, name: 'Name 1', value: 10 },
@@ -81,21 +63,21 @@ test('The AI column can be hidden when columnChooser.mode is "dragAndDrop"', asy
8163
test('The AI column cannot be hidden when columnChooser.mode is "dragAndDrop" and allowHiding is false', async (t) => {
8264
// arrange
8365
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
66+
const headerRow = dataGrid.getHeaders().getHeaderRow(0);
67+
const columnChooser = dataGrid.getColumnChooser();
8468

8569
await t.expect(dataGrid.isReady()).ok();
8670

87-
const headerCells = dataGrid.getHeaders().getHeaderRow(0).getHeaderCells();
88-
8971
// assert
9072
await t.expect(dataGrid.apiColumnOption('myAiColumn', 'visible')).ok();
91-
await checkVisibleHeaders(t, headerCells, ['AI Column', 'ID', 'Name', 'Value']);
73+
await t.expect(await headerRow.getHeaderTexts()).eql(['AI Column', 'ID', 'Name', 'Value']);
9274

9375
// act
9476
await dataGrid.apiShowColumnChooser();
9577

9678
// assert
97-
await t.expect(dataGrid.getColumnChooser().isOpened).ok();
98-
await checkChooserColumns(t, dataGrid.getColumnChooser().getColumns(), []);
79+
await t.expect(columnChooser.isOpened).ok();
80+
await t.expect(await columnChooser.getColumnTexts()).eql([]);
9981

10082
// act
10183
await t.dragToElement(
@@ -105,8 +87,8 @@ test('The AI column cannot be hidden when columnChooser.mode is "dragAndDrop" an
10587

10688
// assert
10789
await t.expect(dataGrid.apiColumnOption('myAiColumn', 'visible')).ok();
108-
await checkVisibleHeaders(t, headerCells, ['AI Column', 'ID', 'Name', 'Value']);
109-
await checkChooserColumns(t, dataGrid.getColumnChooser().getColumns(), []);
90+
await t.expect(await headerRow.getHeaderTexts()).eql(['AI Column', 'ID', 'Name', 'Value']);
91+
await t.expect(await columnChooser.getColumnTexts()).eql([]);
11092
}).before(async () => createWidget('dxDataGrid', {
11193
dataSource: [
11294
{ id: 1, name: 'Name 1', value: 10 },
@@ -135,20 +117,18 @@ test('The AI column cannot be hidden when columnChooser.mode is "dragAndDrop" an
135117
test('The AI column can be hidden when columnChooser.mode is "select"', async (t) => {
136118
// arrange
137119
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
120+
const headerRow = dataGrid.getHeaders().getHeaderRow(0);
121+
const columnChooser = dataGrid.getColumnChooser();
138122

139123
await t.expect(dataGrid.isReady()).ok();
140124

141-
const headerCells = dataGrid.getHeaders().getHeaderRow(0).getHeaderCells();
142-
143125
// assert
144126
await t.expect(dataGrid.apiColumnOption('myAiColumn', 'visible')).ok();
145-
await checkVisibleHeaders(t, headerCells, ['AI Column', 'ID', 'Name', 'Value']);
127+
await t.expect(await headerRow.getHeaderTexts()).eql(['AI Column', 'ID', 'Name', 'Value']);
146128

147129
// act
148130
await dataGrid.apiShowColumnChooser();
149131

150-
const columnChooser = dataGrid.getColumnChooser();
151-
152132
// assert
153133
await t.expect(columnChooser.isOpened).ok();
154134

@@ -160,7 +140,7 @@ test('The AI column can be hidden when columnChooser.mode is "select"', async (t
160140
.expect(columnChooser.isCheckboxChecked(0)).notOk()
161141
.expect(dataGrid.apiColumnOption('myAiColumn', 'visible')).notOk();
162142

163-
await checkVisibleHeaders(t, headerCells, ['ID', 'Name', 'Value']);
143+
await t.expect(await headerRow.getHeaderTexts()).eql(['ID', 'Name', 'Value']);
164144
}).before(async () => createWidget('dxDataGrid', {
165145
dataSource: [
166146
{ id: 1, name: 'Name 1', value: 10 },
@@ -188,20 +168,18 @@ test('The AI column can be hidden when columnChooser.mode is "select"', async (t
188168
test('The AI column cannot be hidden when columnChooser.mode is "select" and allowHiding is false', async (t) => {
189169
// arrange
190170
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
171+
const headerRow = dataGrid.getHeaders().getHeaderRow(0);
172+
const columnChooser = dataGrid.getColumnChooser();
191173

192174
await t.expect(dataGrid.isReady()).ok();
193175

194-
const headerCells = dataGrid.getHeaders().getHeaderRow(0).getHeaderCells();
195-
196176
// assert
197177
await t.expect(dataGrid.apiColumnOption('myAiColumn', 'visible')).ok();
198-
await checkVisibleHeaders(t, headerCells, ['AI Column', 'ID', 'Name', 'Value']);
178+
await t.expect(await headerRow.getHeaderTexts()).eql(['AI Column', 'ID', 'Name', 'Value']);
199179

200180
// act
201181
await dataGrid.apiShowColumnChooser();
202182

203-
const columnChooser = dataGrid.getColumnChooser();
204-
205183
// assert
206184
await t
207185
.expect(columnChooser.isOpened)
@@ -240,32 +218,32 @@ test('The AI column cannot be hidden when columnChooser.mode is "select" and all
240218
test('The AI column can be shown when columnChooser.mode is "dragAndDrop"', async (t) => {
241219
// arrange
242220
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
221+
const headerRow = dataGrid.getHeaders().getHeaderRow(0);
222+
const columnChooser = dataGrid.getColumnChooser();
243223

244224
await t.expect(dataGrid.isReady()).ok();
245225

246-
const headerCells = dataGrid.getHeaders().getHeaderRow(0).getHeaderCells();
247-
248226
// assert
249227
await t.expect(dataGrid.apiColumnOption('myAiColumn', 'visible')).notOk();
250-
await checkVisibleHeaders(t, headerCells, ['ID', 'Name', 'Value']);
228+
await t.expect(await headerRow.getHeaderTexts()).eql(['ID', 'Name', 'Value']);
251229

252230
// act
253231
await dataGrid.apiShowColumnChooser();
254232

255233
// assert
256-
await t.expect(dataGrid.getColumnChooser().isOpened).ok();
257-
await checkChooserColumns(t, dataGrid.getColumnChooser().getColumns(), ['AI Column']);
234+
await t.expect(columnChooser.isOpened).ok();
235+
await t.expect(await columnChooser.getColumnTexts()).eql(['AI Column']);
258236

259237
// act
260238
await t.dragToElement(
261-
dataGrid.getColumnChooser().getColumn(0),
239+
columnChooser.getColumn(0),
262240
dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0).element,
263241
);
264242

265243
// assert
266244
await t.expect(dataGrid.apiColumnOption('myAiColumn', 'visible')).ok();
267-
await checkVisibleHeaders(t, headerCells, ['AI Column', 'ID', 'Name', 'Value']);
268-
await checkChooserColumns(t, dataGrid.getColumnChooser().getColumns(), []);
245+
await t.expect(await headerRow.getHeaderTexts()).eql(['AI Column', 'ID', 'Name', 'Value']);
246+
await t.expect(await columnChooser.getColumnTexts()).eql([]);
269247
}).before(async () => createWidget('dxDataGrid', {
270248
dataSource: [
271249
{ id: 1, name: 'Name 1', value: 10 },
@@ -294,23 +272,23 @@ test('The AI column can be shown when columnChooser.mode is "dragAndDrop"', asyn
294272
test('The AI column cannot be shown when columnChooser.mode is "dragAndDrop" and allowHiding is false', async (t) => {
295273
// arrange
296274
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
275+
const headerRow = dataGrid.getHeaders().getHeaderRow(0);
276+
const columnChooser = dataGrid.getColumnChooser();
297277

298278
await t.expect(dataGrid.isReady()).ok();
299279

300-
const headerCells = dataGrid.getHeaders().getHeaderRow(0).getHeaderCells();
301-
302280
// assert
303281
await t.expect(dataGrid.apiColumnOption('myAiColumn', 'visible')).notOk();
304-
await checkVisibleHeaders(t, headerCells, ['ID', 'Name', 'Value']);
282+
await t.expect(await headerRow.getHeaderTexts()).eql(['ID', 'Name', 'Value']);
305283

306284
// act
307285
await dataGrid.apiShowColumnChooser();
308286

309287
// assert
310288
await t
311-
.expect(dataGrid.getColumnChooser().isOpened).ok()
312-
.expect(dataGrid.getColumnChooser().isColumnDisabled(0)).ok();
313-
await checkChooserColumns(t, dataGrid.getColumnChooser().getColumns(), ['AI Column']);
289+
.expect(columnChooser.isOpened).ok()
290+
.expect(columnChooser.isColumnDisabled(0)).ok();
291+
await t.expect(await columnChooser.getColumnTexts()).eql(['AI Column']);
314292
}).before(async () => createWidget('dxDataGrid', {
315293
dataSource: [
316294
{ id: 1, name: 'Name 1', value: 10 },
@@ -340,20 +318,18 @@ test('The AI column cannot be shown when columnChooser.mode is "dragAndDrop" and
340318
test('The AI column can be shown when columnChooser.mode is "select"', async (t) => {
341319
// arrange
342320
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
321+
const headerRow = dataGrid.getHeaders().getHeaderRow(0);
322+
const columnChooser = dataGrid.getColumnChooser();
343323

344324
await t.expect(dataGrid.isReady()).ok();
345325

346-
const headerCells = dataGrid.getHeaders().getHeaderRow(0).getHeaderCells();
347-
348326
// assert
349327
await t.expect(dataGrid.apiColumnOption('myAiColumn', 'visible')).notOk();
350-
await checkVisibleHeaders(t, headerCells, ['ID', 'Name', 'Value']);
328+
await t.expect(await headerRow.getHeaderTexts()).eql(['ID', 'Name', 'Value']);
351329

352330
// act
353331
await dataGrid.apiShowColumnChooser();
354332

355-
const columnChooser = dataGrid.getColumnChooser();
356-
357333
// assert
358334
await t.expect(columnChooser.isOpened).ok();
359335

@@ -364,8 +340,7 @@ test('The AI column can be shown when columnChooser.mode is "select"', async (t)
364340
await t
365341
.expect(columnChooser.isCheckboxChecked(0)).ok()
366342
.expect(dataGrid.apiColumnOption('myAiColumn', 'visible')).ok();
367-
368-
await checkVisibleHeaders(t, headerCells, ['AI Column', 'ID', 'Name', 'Value']);
343+
await t.expect(await headerRow.getHeaderTexts()).eql(['AI Column', 'ID', 'Name', 'Value']);
369344
}).before(async () => createWidget('dxDataGrid', {
370345
dataSource: [
371346
{ id: 1, name: 'Name 1', value: 10 },
@@ -394,20 +369,18 @@ test('The AI column can be shown when columnChooser.mode is "select"', async (t)
394369
test('The AI column cannot be shown when columnChooser.mode is "select" and allowHiding is false', async (t) => {
395370
// arrange
396371
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
372+
const headerRow = dataGrid.getHeaders().getHeaderRow(0);
373+
const columnChooser = dataGrid.getColumnChooser();
397374

398375
await t.expect(dataGrid.isReady()).ok();
399376

400-
const headerCells = dataGrid.getHeaders().getHeaderRow(0).getHeaderCells();
401-
402377
// assert
403378
await t.expect(dataGrid.apiColumnOption('myAiColumn', 'visible')).notOk();
404-
await checkVisibleHeaders(t, headerCells, ['ID', 'Name', 'Value']);
379+
await t.expect(await headerRow.getHeaderTexts()).eql(['ID', 'Name', 'Value']);
405380

406381
// act
407382
await dataGrid.apiShowColumnChooser();
408383

409-
const columnChooser = dataGrid.getColumnChooser();
410-
411384
// assert
412385
await t
413386
.expect(columnChooser.isOpened)
@@ -447,21 +420,21 @@ test('The AI column cannot be shown when columnChooser.mode is "select" and allo
447420
test('The AI column should not be visible in column chooser when showInColumnChooser is false and columnChooser.mode is "dragAndDrop"', async (t) => {
448421
// arrange
449422
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
423+
const headerRow = dataGrid.getHeaders().getHeaderRow(0);
424+
const columnChooser = dataGrid.getColumnChooser();
450425

451426
await t.expect(dataGrid.isReady()).ok();
452427

453-
const headerCells = dataGrid.getHeaders().getHeaderRow(0).getHeaderCells();
454-
455428
// assert
456429
await t.expect(dataGrid.apiColumnOption('myAiColumn', 'visible')).notOk();
457-
await checkVisibleHeaders(t, headerCells, ['ID', 'Name', 'Value']);
430+
await t.expect(await headerRow.getHeaderTexts()).eql(['ID', 'Name', 'Value']);
458431

459432
// act
460433
await dataGrid.apiShowColumnChooser();
461434

462435
// assert
463-
await t.expect(dataGrid.getColumnChooser().isOpened).ok();
464-
await checkChooserColumns(t, dataGrid.getColumnChooser().getColumns(), []);
436+
await t.expect(columnChooser.isOpened).ok();
437+
await t.expect(await columnChooser.getColumnTexts()).eql([]);
465438
}).before(async () => createWidget('dxDataGrid', {
466439
dataSource: [
467440
{ id: 1, name: 'Name 1', value: 10 },
@@ -491,21 +464,21 @@ test('The AI column should not be visible in column chooser when showInColumnCho
491464
test('The AI column should not be visible in column chooser when showInColumnChooser is false and columnChooser.mode is "select"', async (t) => {
492465
// arrange
493466
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
467+
const headerRow = dataGrid.getHeaders().getHeaderRow(0);
468+
const columnChooser = dataGrid.getColumnChooser();
494469

495470
await t.expect(dataGrid.isReady()).ok();
496471

497-
const headerCells = dataGrid.getHeaders().getHeaderRow(0).getHeaderCells();
498-
499472
// assert
500473
await t.expect(dataGrid.apiColumnOption('myAiColumn', 'visible')).notOk();
501-
await checkVisibleHeaders(t, headerCells, ['ID', 'Name', 'Value']);
474+
await t.expect(await headerRow.getHeaderTexts()).eql(['ID', 'Name', 'Value']);
502475

503476
// act
504477
await dataGrid.apiShowColumnChooser();
505478

506479
// assert
507-
await t.expect(dataGrid.getColumnChooser().isOpened).ok();
508-
await checkChooserColumns(t, dataGrid.getColumnChooser().getColumns(), ['ID', 'Name', 'Value']);
480+
await t.expect(columnChooser.isOpened).ok();
481+
await t.expect(await columnChooser.getColumnTexts()).eql(['ID', 'Name', 'Value']);
509482
}).before(async () => createWidget('dxDataGrid', {
510483
dataSource: [
511484
{ id: 1, name: 'Name 1', value: 10 },

0 commit comments

Comments
 (0)