Skip to content

Commit 7479f9e

Browse files
AmbrozyAmbrozy
authored
T1287521: fix area-label for pivot grid header filter (#29681)
Co-authored-by: Vladimir Bushmanov <vladimir.bushmanov@devexpress.com>
1 parent 55bb72d commit 7479f9e

12 files changed

Lines changed: 123 additions & 25 deletions

File tree

‎e2e/testcafe-devextreme/tests/pivotGrid/fieldPanel/T1287521_fields_aria_label.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import PivotGrid from 'devextreme-testcafe-models/pivotGrid';
2+
import { createWidget } from '../../../helpers/createWidget';
3+
import url from '../../../helpers/getPageUrl';
4+
5+
fixture.disablePageReloads`pivotGrid_fieldPanel_aria_label`
6+
.page(url(__dirname, '../../container.html'));
7+
8+
const PIVOT_GRID_SELECTOR = '#container';
9+
10+
test('Header fields should have correct aria-label', async (t) => {
11+
const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
12+
const rowHeader = pivotGrid.getRowHeaderArea();
13+
const columnHeader = pivotGrid.getColumnHeaderArea();
14+
const filterHeader = pivotGrid.getFilterHeaderArea();
15+
16+
await t
17+
.expect(rowHeader.getHeaderFilterIcon(0).ariaLabel)
18+
.eql('Show filter options for column \'Row1\'')
19+
.expect(rowHeader.getHeaderFilterIcon(1).ariaLabel)
20+
.eql('Show filter options for column \'Row2\'')
21+
.expect(columnHeader.getHeaderFilterIcon(0).ariaLabel)
22+
.eql('Show filter options for column \'Column1\'')
23+
.expect(columnHeader.getHeaderFilterIcon(1).ariaLabel)
24+
.eql('Show filter options for column \'Column2\'')
25+
.expect(filterHeader.getHeaderFilterIcon(0).ariaLabel)
26+
.eql('Show filter options for column \'Column3\'');
27+
}).before(async () => {
28+
await createWidget('dxPivotGrid', {
29+
allowFiltering: true,
30+
fieldPanel: {
31+
visible: true,
32+
},
33+
dataSource: {
34+
fields: [{
35+
dataField: 'row1',
36+
area: 'row',
37+
}, {
38+
dataField: 'row2',
39+
area: 'row',
40+
}, {
41+
dataField: 'column1',
42+
area: 'column',
43+
}, {
44+
dataField: 'column2',
45+
area: 'column',
46+
}, {
47+
dataField: 'column3',
48+
area: 'filter',
49+
}],
50+
store: [],
51+
},
52+
});
53+
});

‎e2e/testcafe-devextreme/tests/pivotGrid/fieldPanel/dragAndDropFieldItems.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ test('Field panel items markup in the middle of the drag-n-drop', async (t) => {
1616
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
1717

1818
const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
19-
const columnFirstAction = pivotGrid.getColumnHeaderArea().getAction();
20-
const rowFirstAction = pivotGrid.getRowHeaderArea().getAction();
21-
const dataFirstAction = pivotGrid.getDataHeaderArea().getAction();
19+
const columnFirstAction = pivotGrid.getColumnHeaderArea().getField();
20+
const rowFirstAction = pivotGrid.getRowHeaderArea().getField();
21+
const dataFirstAction = pivotGrid.getDataHeaderArea().getField();
2222

2323
await MouseUpEvents.disable(MouseAction.dragToOffset);
2424

‎e2e/testcafe-devextreme/tests/pivotGrid/headerFilter.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ test.meta({ unstable: true })('Header filter popup', async (t) => {
1515
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
1616
const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
1717

18-
await t.click(pivotGrid.getColumnHeaderArea().getHeaderFilterIcon());
18+
await t.click(pivotGrid.getColumnHeaderArea().getHeaderFilterIcon().element);
1919

2020
await testScreenshot(t, takeScreenshot, 'headerFilter - before scroll.png');
2121

@@ -59,7 +59,7 @@ test.meta({ unstable: true })('Header filter popup', async (t) => {
5959
test('[T1284200] Should handle dxList "selectAll" when has unselected items on the second page', async (t) => {
6060
const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
6161

62-
const filterIconElement = pivotGrid.getColumnHeaderArea().getHeaderFilterIcon();
62+
const filterIconElement = pivotGrid.getColumnHeaderArea().getHeaderFilterIcon().element;
6363
const headerFilter = new HeaderFilter();
6464
const list = headerFilter.getList();
6565

‎e2e/testcafe-devextreme/tests/pivotGrid/sort/localSort_T1150523.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ test('Should sort without DataSource reload if scrolling mode isn\'t virtual', a
5353
await t.addRequestHooks(requestLogger);
5454
const initialRequestCount = await requestLogger.count(() => true);
5555

56-
await t.click(pivotGrid.getColumnHeaderArea().getAction());
56+
await t.click(pivotGrid.getColumnHeaderArea().getField());
5757

5858
const afterSortRequestCount = await requestLogger.count(() => true);
5959
const requestCount = afterSortRequestCount - initialRequestCount;
@@ -94,7 +94,7 @@ test.meta({ unstable: true })('Should sort with DataSource reload if scrolling m
9494
await t.addRequestHooks(requestLogger);
9595
const initialRequestCount = await requestLogger.count(() => true);
9696

97-
await t.click(pivotGrid.getColumnHeaderArea().getAction());
97+
await t.click(pivotGrid.getColumnHeaderArea().getField());
9898

9999
const afterSortRequestCount = await requestLogger.count(() => true);
100100
const requestCount = afterSortRequestCount - initialRequestCount;

‎e2e/testcafe-devextreme/tests/pivotGrid/sort/sortWithSummaryDisplayMode_T1173442.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ test('Should apply sort changes to the markup if the "summaryDisplayMode" is set
1717
'T1173442_before_sort_with_summary_display_mode.png',
1818
{ element: pivotGrid.element },
1919
);
20-
await t.click(pivotGrid.getColumnHeaderArea().getAction());
21-
await t.click(pivotGrid.getRowHeaderArea().getAction());
20+
await t.click(pivotGrid.getColumnHeaderArea().getField());
21+
await t.click(pivotGrid.getRowHeaderArea().getField());
2222
await testScreenshot(
2323
t,
2424
takeScreenshot,

‎packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const processItems = function (groupItems, field) {
4343

4444
if (field.filterValues) {
4545
each(field.filterValues, (_, filterValue) => {
46-
filterValues.push(Array.isArray(filterValue) ? filterValue.join('/') : filterValue && filterValue.valueOf());
46+
filterValues.push(Array.isArray(filterValue) ? filterValue.join('/') : filterValue?.valueOf());
4747
});
4848
}
4949

@@ -53,7 +53,7 @@ const processItems = function (groupItems, field) {
5353
const preparedFilterValueByText = isTree ? map(items, (item) => item.text).reverse().join('/') : item.text;
5454

5555
item.value = isTree ? path.slice(0) : item.key || item.value;
56-
const preparedFilterValue = isTree ? path.join('/') : item.value && item.value.valueOf();
56+
const preparedFilterValue = isTree ? path.join('/') : item.value?.valueOf();
5757

5858
if (item.children) {
5959
item.items = item.children;
@@ -133,8 +133,7 @@ export class FieldChooserBase extends mixinWidget {
133133
_refreshDataSource() {
134134
const dataSource = this.option('dataSource');
135135

136-
if (dataSource
137-
&& dataSource.fields && dataSource.load/* instanceof DX.ui.dxPivotGrid.DataSource */) {
136+
if (dataSource?.fields && dataSource.load/* instanceof DX.ui.dxPivotGrid.DataSource */) {
138137
this._dataSource = dataSource;
139138
}
140139
}
@@ -189,6 +188,7 @@ export class FieldChooserBase extends mixinWidget {
189188
alignment: that.option('rtlEnabled') ? 'right' : 'left',
190189
sortOrder: field.sortOrder === 'desc' ? 'desc' : 'asc',
191190
allowSorting: field.allowSorting,
191+
caption: field.caption || field.dataField,
192192
},
193193
showColumnLines,
194194
});
@@ -202,6 +202,7 @@ export class FieldChooserBase extends mixinWidget {
202202
filterValues: mainGroupField.filterValues,
203203
allowFiltering: mainGroupField.allowFiltering && !field.groupIndex,
204204
allowSorting: field.allowSorting,
205+
caption: field.caption || field.dataField,
205206
},
206207
showColumnLines,
207208
});

‎packages/testcafe-models/pivotGrid/columnHeaderArea.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { Selector } from 'testcafe';
2+
import HeaderFilter from './headerFilter';
23

34
const CLASSES = {
45
columnHeader: 'dx-column-header',
5-
action: 'dx-pivotgrid-action',
6+
field: 'dx-area-field',
67
columnIndicators: 'dx-column-indicators',
78
headerFilter: {
89
icon: 'dx-header-filter',
@@ -19,8 +20,8 @@ export default class ColumnHeaderArea {
1920
this.element = selector.find(`.${CLASSES.columnHeader}`);
2021
}
2122

22-
getAction(idx = 0): Selector {
23-
return this.element.find(`.${CLASSES.action}`).nth(idx);
23+
getField(idx = 0): Selector {
24+
return this.element.find(`.${CLASSES.field}`).nth(idx);
2425
}
2526

2627
// todo: move header filter to seperate file
@@ -31,8 +32,8 @@ export default class ColumnHeaderArea {
3132
return Selector(`.${CLASSES.headerFilter.menu}`);
3233
}
3334

34-
getHeaderFilterIcon(idx = 0): Selector {
35-
return this.getAction(idx).find(`.${CLASSES.headerFilter.icon}`);
35+
getHeaderFilterIcon(idx = 0): HeaderFilter {
36+
return new HeaderFilter(this.getField(idx));
3637
}
3738

3839
getHeaderFilterScrollable(): Selector {

‎packages/testcafe-models/pivotGrid/dataHeaderArea.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default class DataHeaderArea {
1111
this.element = selector.find(`.${CLASSES.dataHeader}`);
1212
}
1313

14-
getAction(idx = 0): Selector {
14+
getField(idx = 0): Selector {
1515
return this.element.find(`.${CLASSES.field}.${CLASSES.box}`).nth(idx);
1616
}
1717
}

‎packages/testcafe-models/pivotGrid/filterHeaderArea.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import HeaderFilter from './headerFilter';
2+
3+
const CLASSES = {
4+
header: 'dx-pivotgrid-fields-area',
5+
field: 'dx-area-field',
6+
fieldButton: 'dx-header-filter',
7+
};
8+
9+
export default class FilterHeaderArea {
10+
private readonly element: Selector;
11+
12+
constructor(selector: Selector) {
13+
this.element = selector.find(`.${CLASSES.header}`);
14+
}
15+
16+
getField(idx = 0): Selector {
17+
return this.element.find(`.${CLASSES.field}`).nth(idx);
18+
}
19+
20+
getHeaderFilterIcon(idx = 0): HeaderFilter {
21+
return new HeaderFilter(this.getField(idx));
22+
}
23+
}

‎packages/testcafe-models/pivotGrid/headerFilter.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const CLASSES = {
2+
icon: 'dx-header-filter',
3+
};
4+
5+
export default class HeaderFilter {
6+
public readonly element: Selector;
7+
8+
public readonly ariaLabel: Promise<string | null>;
9+
10+
constructor(selector: Selector) {
11+
this.element = selector.find(`.${CLASSES.icon}`);
12+
this.ariaLabel = this.element.getAttribute('aria-label');
13+
}
14+
}

0 commit comments

Comments
 (0)