diff --git a/e2e/testcafe-devextreme/helpers/changeTheme.ts b/e2e/testcafe-devextreme/helpers/changeTheme.ts index fb79b10a861d..f2c7b1daa2c2 100644 --- a/e2e/testcafe-devextreme/helpers/changeTheme.ts +++ b/e2e/testcafe-devextreme/helpers/changeTheme.ts @@ -1,10 +1,10 @@ import { ClientFunction } from 'testcafe'; -export const changeTheme = async (themeName: string): +export const changeTheme = async (t: TestController, themeName: string): Promise => ClientFunction( () => new Promise((resolve) => { (window as any).DevExpress.ui.themes.ready(resolve); (window as any).DevExpress.ui.themes.current(themeName); }), { dependencies: { themeName } }, -)(); +).with({ boundTestRun: t })(); diff --git a/e2e/testcafe-devextreme/helpers/themeUtils.ts b/e2e/testcafe-devextreme/helpers/themeUtils.ts index 69043ae40557..3b8755571b56 100644 --- a/e2e/testcafe-devextreme/helpers/themeUtils.ts +++ b/e2e/testcafe-devextreme/helpers/themeUtils.ts @@ -57,7 +57,7 @@ export async function testScreenshot( } = options ?? {}; if (isString(theme)) { - await changeTheme(theme); + await changeTheme(t, theme); await themeChanged?.(); } @@ -67,7 +67,7 @@ export async function testScreenshot( if (shouldTestInCompact) { const themeName = (theme ?? process.env.theme) ?? defaultThemeName; - await changeTheme(`${themeName}.compact`); + await changeTheme(t, `${themeName}.compact`); await compactCallBack?.(); @@ -77,6 +77,6 @@ export async function testScreenshot( } if (isString(theme) || shouldTestInCompact) { - await changeTheme(process.env.theme ?? defaultThemeName); + await changeTheme(t, process.env.theme ?? defaultThemeName); } } diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid contextmenu width (generic.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid contextmenu width (generic.light).png index cedbe2fb2507..756b7a5291f0 100644 Binary files a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid contextmenu width (generic.light).png and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid contextmenu width (generic.light).png differ diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - icon alignment (generic.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - icon alignment (generic.light).png new file mode 100644 index 000000000000..c6a89a5eee4c Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - icon alignment (generic.light).png differ diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - icon alignment (generic.light.compact).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - icon alignment (generic.light.compact).png new file mode 100644 index 000000000000..902e75509f49 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - icon alignment (generic.light.compact).png differ diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/headerFilter.ts b/e2e/testcafe-devextreme/tests/common/pivotGrid/headerFilter.ts index a0b50c23abe7..a54603b2c7a2 100644 --- a/e2e/testcafe-devextreme/tests/common/pivotGrid/headerFilter.ts +++ b/e2e/testcafe-devextreme/tests/common/pivotGrid/headerFilter.ts @@ -4,6 +4,7 @@ import HeaderFilter from 'devextreme-testcafe-models/dataGrid/headers/headerFilt import { createWidget } from '../../../helpers/createWidget'; import url from '../../../helpers/getPageUrl'; import { testScreenshot } from '../../../helpers/themeUtils'; +import { Themes } from '../../../helpers/themes'; import { sales } from './data'; fixture.disablePageReloads`pivotGrid_headerFilter` @@ -92,3 +93,84 @@ test('[T1284200] Should handle dxList "selectAll" when has unselected items on t visible: true, }, })); + +test.meta({ runInTheme: Themes.genericLight })('[T1336516] Field indicators align with the field caption in every area', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR); + + await t + .expect(pivotGrid.getFilterHeaderArea().getHeaderFilterIcon().element.exists) + .ok() + .expect(pivotGrid.getColumnHeaderArea().getHeaderFilterIcon().element.exists) + .ok() + .expect(pivotGrid.getRowHeaderArea().getHeaderFilterIcon().element.exists) + .ok(); + + await testScreenshot(t, takeScreenshot, 'headerFilter - icon alignment.png', { + element: pivotGrid.element, + shouldTestInCompact: true, + }); + + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => createWidget('dxPivotGrid', { + width: 1000, + allowFiltering: true, + allowSorting: true, + showBorders: true, + fieldChooser: { + enabled: false, + }, + fieldPanel: { + showColumnFields: true, + showDataFields: true, + showFilterFields: true, + showRowFields: true, + allowFieldDragging: false, + visible: true, + }, + dataSource: { + fields: [{ + caption: 'City', + dataField: 'city', + area: 'filter', + }, { + dataField: 'date', + dataType: 'date', + area: 'column', + }, { + groupName: 'date', + groupInterval: 'year', + expanded: true, + }, { + groupName: 'date', + groupInterval: 'quarter', + expanded: true, + }, { + groupName: 'date', + groupInterval: 'month', + }, { + caption: 'Region', + dataField: 'region', + area: 'row', + }, { + caption: 'Sales', + dataField: 'amount', + dataType: 'number', + summaryType: 'sum', + area: 'data', + }], + store: [{ + region: 'Africa', + city: 'Cairo', + amount: 500, + date: '2015-05-26', + }, { + region: 'South America', + city: 'Lima', + amount: 780, + date: '2015-05-07', + }], + }, +})); diff --git a/packages/devextreme-scss/scss/widgets/generic/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/generic/pivotGrid/_index.scss index 82fc3767fed5..59511ecc087c 100644 --- a/packages/devextreme-scss/scss/widgets/generic/pivotGrid/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/pivotGrid/_index.scss @@ -108,4 +108,12 @@ .dx-position-indicator { background-color: $pivotgrid-position-indicator-color; } + + .dx-column-indicators { + .dx-sort, + .dx-header-filter { + vertical-align: top; + line-height: inherit; + } + } }