Skip to content

Commit 4e8b72f

Browse files
RaushenRaushen
authored
T1320031 - DataGrid - Header filter icon is misaligned when using headerCellTemplate (#32328)
1 parent 08922e3 commit 4e8b72f

File tree

16 files changed

+220
-519
lines changed

16 files changed

+220
-519
lines changed

‎packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/utils.ts‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { jest } from '@jest/globals';
2+
import fx from '@js/common/core/animation/fx';
3+
import type { dxElementWrapper } from '@js/core/renderer';
4+
import $ from '@js/core/renderer';
5+
import type { Properties as DataGridProperties } from '@js/ui/data_grid';
6+
import DataGrid from '@js/ui/data_grid';
7+
import { DataGridModel } from '@ts/grids/data_grid/__tests__/__mock__/model/data_grid';
8+
9+
export const SELECTORS = {
10+
gridContainer: '#gridContainer',
11+
};
12+
13+
export const GRID_CONTAINER_ID = 'gridContainer';
14+
15+
export const createDataGrid = async (
16+
options: DataGridProperties = {},
17+
): Promise<{
18+
$container: dxElementWrapper;
19+
component: DataGridModel;
20+
instance: DataGrid;
21+
}> => new Promise((resolve) => {
22+
const $container = $('<div>')
23+
.attr('id', GRID_CONTAINER_ID)
24+
.appendTo(document.body);
25+
26+
const dataGridOptions: DataGridProperties = {
27+
keyExpr: 'id',
28+
...options,
29+
};
30+
31+
const instance = new DataGrid($container.get(0) as HTMLDivElement, dataGridOptions);
32+
const component = new DataGridModel($container.get(0) as HTMLElement);
33+
34+
jest.runAllTimers();
35+
36+
resolve({
37+
$container,
38+
component,
39+
instance,
40+
});
41+
});
42+
43+
export const beforeTest = (): void => {
44+
fx.off = true;
45+
jest.useFakeTimers();
46+
};
47+
48+
export const afterTest = (): void => {
49+
const $container = $(SELECTORS.gridContainer);
50+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
51+
const dataGrid = ($container as any).dxDataGrid('instance') as DataGrid;
52+
53+
dataGrid?.dispose();
54+
$container.remove();
55+
jest.clearAllMocks();
56+
jest.useRealTimers();
57+
fx.off = false;
58+
};
59+
60+
export const flushAsync = async (): Promise<void> => {
61+
jest.runAllTimers();
62+
await Promise.resolve();
63+
};

‎packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/model/cell/header_cell.ts‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1+
import type { HeaderCellAlignment } from './types';
2+
13
const SELECTORS = {
24
headerContent: 'text-content',
5+
alignmentRight: 'dx-text-content-alignment-right',
6+
alignmentLeft: 'dx-text-content-alignment-left',
37
};
48

59
export class HeaderCellModel {
@@ -17,6 +21,22 @@ export class HeaderCellModel {
1721
}
1822

1923
public getHeaderContent(): HTMLElement | null {
20-
return this.root?.querySelector(this.addWidgetPrefix(`.${SELECTORS.headerContent}`)) ?? null;
24+
return this.root?.querySelector(`.${this.addWidgetPrefix(SELECTORS.headerContent)}`) ?? null;
25+
}
26+
27+
public getAlignment(): HeaderCellAlignment {
28+
const content = this.getHeaderContent();
29+
const alignedRight = content?.classList.contains(SELECTORS.alignmentRight);
30+
const alignedLeft = content?.classList.contains(SELECTORS.alignmentLeft);
31+
const alignedCenter = alignedLeft && alignedRight;
32+
33+
switch (true) {
34+
case alignedCenter:
35+
return 'center';
36+
case alignedRight:
37+
return 'right';
38+
default:
39+
return 'left';
40+
}
2141
}
2242
}

‎packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/model/cell/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export type HeaderCellAlignment = 'left' | 'center' | 'right';

‎packages/devextreme/js/__internal/grids/grid_core/__tests__/grid.integration.test.ts‎

Lines changed: 6 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,12 @@
11
import {
2-
afterEach, beforeEach, describe, expect, it, jest,
2+
afterEach, beforeEach, describe, expect, it,
33
} from '@jest/globals';
4-
import fx from '@js/common/core/animation/fx';
5-
import type { dxElementWrapper } from '@js/core/renderer';
6-
import $ from '@js/core/renderer';
7-
import type { Properties as DataGridProperties } from '@js/ui/data_grid';
8-
import DataGrid from '@js/ui/data_grid';
9-
import { DataGridModel } from '@ts/grids/data_grid/__tests__/__mock__/model/data_grid';
104

11-
const SELECTORS = {
12-
gridContainer: '#gridContainer',
13-
};
14-
15-
const GRID_CONTAINER_ID = 'gridContainer';
16-
17-
const createDataGrid = async (
18-
options: DataGridProperties = {},
19-
): Promise<{
20-
$container: dxElementWrapper;
21-
component: DataGridModel;
22-
instance: DataGrid;
23-
}> => new Promise((resolve) => {
24-
const $container = $('<div>')
25-
.attr('id', GRID_CONTAINER_ID)
26-
.appendTo(document.body);
27-
28-
const dataGridOptions: DataGridProperties = {
29-
keyExpr: 'id',
30-
...options,
31-
};
32-
33-
const instance = new DataGrid($container.get(0) as HTMLDivElement, dataGridOptions);
34-
const component = new DataGridModel($container.get(0) as HTMLElement);
35-
36-
jest.runAllTimers();
37-
38-
resolve({
39-
$container,
40-
component,
41-
instance,
42-
});
43-
});
44-
45-
const beforeTest = (): void => {
46-
fx.off = true;
47-
jest.useFakeTimers();
48-
};
49-
50-
const afterTest = (): void => {
51-
const $container = $(SELECTORS.gridContainer);
52-
const dataGrid = ($container as any).dxDataGrid('instance') as DataGrid;
53-
54-
dataGrid.dispose();
55-
$container.remove();
56-
jest.clearAllMocks();
57-
jest.useRealTimers();
58-
fx.off = false;
59-
};
5+
import {
6+
afterTest,
7+
beforeTest,
8+
createDataGrid,
9+
} from './__mock__/helpers/utils';
6010

6111
describe('Grid', () => {
6212
beforeEach(beforeTest);

‎packages/devextreme/js/__internal/grids/grid_core/ai_column/__tests__/ai_column.integration.test.ts‎

Lines changed: 7 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,21 @@ import {
22
afterEach, beforeEach, describe, expect, it, jest,
33
} from '@jest/globals';
44
import type { GenerateGridColumnCommandResponse, RequestParams } from '@js/common/ai-integration';
5-
import type { dxElementWrapper } from '@js/core/renderer';
65
import $ from '@js/core/renderer';
76
import type { LoadOptions } from '@js/data';
87
import DataSource from '@js/data/data_source';
9-
import type { Properties as DataGridProperties } from '@js/ui/data_grid';
10-
import DataGrid from '@js/ui/data_grid';
118
import errors from '@js/ui/widget/ui.errors';
129
import { AIIntegration } from '@ts/core/ai_integration/core/ai_integration';
1310
import ArrayStore from '@ts/data/m_array_store';
14-
import { DataGridModel } from '@ts/grids/data_grid/__tests__/__mock__/model/data_grid';
1511

12+
import {
13+
afterTest,
14+
beforeTest as baseBeforeTest,
15+
createDataGrid,
16+
GRID_CONTAINER_ID,
17+
} from '../../__tests__/__mock__/helpers/utils';
1618
import { CLASSES } from '../const';
1719

18-
const SELECTORS = {
19-
gridContainer: '#gridContainer',
20-
};
21-
22-
const GRID_CONTAINER_ID = 'gridContainer';
23-
2420
const EMPTY_CELL_TEXT = '\u00A0';
2521

2622
const items = [
@@ -33,50 +29,12 @@ interface RequestResult {
3329
abort: () => void;
3430
}
3531

36-
const createDataGrid = async (
37-
options: DataGridProperties = {},
38-
): Promise<{
39-
$container: dxElementWrapper;
40-
component: DataGridModel;
41-
instance: DataGrid;
42-
}> => new Promise((resolve) => {
43-
const $container = $('<div>')
44-
.attr('id', GRID_CONTAINER_ID)
45-
.appendTo(document.body);
46-
47-
const dataGridOptions: DataGridProperties = {
48-
keyExpr: 'id',
49-
...options,
50-
};
51-
52-
const instance = new DataGrid($container.get(0) as HTMLDivElement, dataGridOptions);
53-
const component = new DataGridModel($container.get(0) as HTMLElement);
54-
55-
jest.runAllTimers();
56-
57-
resolve({
58-
$container,
59-
component,
60-
instance,
61-
});
62-
});
63-
6432
const beforeTest = (): void => {
65-
jest.useFakeTimers();
33+
baseBeforeTest();
6634
jest.spyOn(errors, 'log').mockImplementation(jest.fn());
6735
jest.spyOn(errors, 'Error').mockImplementation(() => ({}));
6836
};
6937

70-
const afterTest = (): void => {
71-
const $container = $(SELECTORS.gridContainer);
72-
const dataGrid = ($container as any).dxDataGrid('instance') as DataGrid;
73-
74-
dataGrid.dispose();
75-
$container.remove();
76-
jest.clearAllMocks();
77-
jest.useRealTimers();
78-
};
79-
8038
describe('Options', () => {
8139
beforeEach(beforeTest);
8240
afterEach(afterTest);

‎packages/devextreme/js/__internal/grids/grid_core/ai_column/__tests__/unsupported_base_properties.integration.test.ts‎

Lines changed: 6 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,14 @@ import {
44
import type { GenerateGridColumnCommandResponse } from '@js/common/ai-integration';
55
import type { dxElementWrapper } from '@js/core/renderer';
66
import $ from '@js/core/renderer';
7-
import type { Properties as DataGridProperties } from '@js/ui/data_grid';
8-
import DataGrid from '@js/ui/data_grid';
97
import errors from '@js/ui/widget/ui.errors';
108
import { AIIntegration } from '@ts/core/ai_integration/core/ai_integration';
11-
import { DataGridModel } from '@ts/grids/data_grid/__tests__/__mock__/model/data_grid';
129

13-
const SELECTORS = {
14-
gridContainer: '#gridContainer',
15-
};
16-
17-
const GRID_CONTAINER_ID = 'gridContainer';
10+
import {
11+
afterTest,
12+
beforeTest as baseBeforeTest,
13+
createDataGrid,
14+
} from '../../__tests__/__mock__/helpers/utils';
1815

1916
const dataSource = [
2017
{ id: 1, name: 'Item 1', value: 1 },
@@ -29,43 +26,11 @@ interface RequestResult {
2926
abort: () => void;
3027
}
3128

32-
const createDataGrid = async (
33-
options: DataGridProperties = {},
34-
): Promise<{
35-
$container: dxElementWrapper;
36-
component: DataGridModel;
37-
instance: DataGrid;
38-
}> => new Promise((resolve) => {
39-
const $container = $('<div>')
40-
.attr('id', GRID_CONTAINER_ID)
41-
.appendTo(document.body);
42-
43-
const instance = new DataGrid($container.get(0) as HTMLDivElement, options);
44-
const component = new DataGridModel($container.get(0) as HTMLElement);
45-
46-
jest.runAllTimers();
47-
resolve({
48-
$container,
49-
component,
50-
instance,
51-
});
52-
});
53-
5429
const beforeTest = (): void => {
55-
jest.useFakeTimers();
30+
baseBeforeTest();
5631
jest.spyOn(errors, 'log').mockImplementation(jest.fn());
5732
};
5833

59-
const afterTest = (): void => {
60-
const $container = $(SELECTORS.gridContainer);
61-
const dataGrid = ($container as any).dxDataGrid('instance') as DataGrid;
62-
63-
dataGrid.dispose();
64-
$container.remove();
65-
jest.clearAllMocks();
66-
jest.useRealTimers();
67-
};
68-
6934
describe('Unsupported properties', () => {
7035
beforeEach(beforeTest);
7136
afterEach(afterTest);

0 commit comments

Comments
 (0)