Skip to content

Commit ffe2b7f

Browse files
dmirgaevdmirgaev
committed
test(DataGrid): add integration tests
1 parent e5bbbeb commit ffe2b7f

File tree

2 files changed

+227
-46
lines changed

2 files changed

+227
-46
lines changed

‎packages/devextreme/js/__internal/grids/grid_core/columns_resizing_reordering/m_columns_resizing_reordering.integration.test.ts‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
import {
2+
afterEach, beforeEach, describe, expect, it, jest,
3+
} from '@jest/globals';
4+
import {
5+
end as dragEventEnd,
6+
move as dragEventMove,
7+
start as dragEventStart,
8+
} from '@js/common/core/events/drag';
9+
import type { dxElementWrapper } from '@js/core/renderer';
10+
import $ from '@js/core/renderer';
11+
import type { Properties as DataGridProperties } from '@js/ui/data_grid';
12+
import DataGrid from '@js/ui/data_grid';
13+
import errors from '@js/ui/widget/ui.errors';
14+
import { DataGridModel } from '@ts/grids/data_grid/__tests__/__mock__/model/data_grid';
15+
16+
const SELECTORS = {
17+
gridContainer: '#gridContainer',
18+
};
19+
20+
const GRID_CONTAINER_ID = 'gridContainer';
21+
22+
const createDataGrid = async (
23+
options: DataGridProperties = {},
24+
): Promise<{
25+
$container: dxElementWrapper;
26+
component: DataGridModel;
27+
instance: DataGrid;
28+
}> => new Promise((resolve) => {
29+
const $container = $('<div>')
30+
.attr('id', GRID_CONTAINER_ID)
31+
.appendTo(document.body);
32+
33+
const instance = new DataGrid($container.get(0) as HTMLDivElement, options);
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+
jest.useFakeTimers();
47+
jest.spyOn(errors, 'log').mockImplementation(jest.fn());
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+
};
59+
60+
describe('Performance optimization', () => {
61+
beforeEach(beforeTest);
62+
afterEach(afterTest);
63+
64+
const createGridWith200Columns = async (): Promise<{
65+
$container: dxElementWrapper;
66+
component: DataGridModel;
67+
instance: DataGrid;
68+
}> => {
69+
const columns = [
70+
{
71+
dataField: 'id', caption: 'ID', width: '100px', fixed: true,
72+
},
73+
{
74+
caption: 'Name',
75+
columns: [
76+
{ dataField: 'name.first', caption: 'First name', width: '150px' },
77+
{ dataField: 'name.last', caption: 'Last name', width: '150px' },
78+
],
79+
},
80+
...Array.from({ length: 198 }, (_, index) => ({
81+
dataField: `values.${index}`,
82+
caption: `Value ${index + 1}`,
83+
width: '100px',
84+
})),
85+
];
86+
87+
const dataSource = [
88+
{
89+
id: 1,
90+
name: { first: 'John', last: 'Doe' },
91+
values: Array.from({ length: 198 }, (_, index) => index + 1),
92+
},
93+
];
94+
95+
return createDataGrid({
96+
dataSource,
97+
columns,
98+
width: '100%',
99+
showBorders: true,
100+
showColumnLines: true,
101+
allowColumnResizing: true,
102+
allowColumnReordering: true,
103+
});
104+
};
105+
106+
describe('ColumnsResizerViewController', () => {
107+
it('should call "_pointCreated" 202 times when generating points by columns (1 fixed + 1 group + 2 group children + 198 regular)', async () => {
108+
const { instance } = await createGridWith200Columns();
109+
const columnsResizerController = (instance as any).getController('columnsResizer');
110+
111+
const pointCreatedSpy = jest.spyOn(columnsResizerController, '_pointCreated');
112+
113+
columnsResizerController.pointsByColumns();
114+
115+
expect(pointCreatedSpy).toHaveBeenCalledTimes(202);
116+
});
117+
118+
it('should call "getColumnElements" as many times as there are head rows', async () => {
119+
const { instance } = await createGridWith200Columns();
120+
const columnsResizerController = (instance as any).getController('columnsResizer');
121+
const columnHeadersView = (instance as any).getView('columnHeadersView');
122+
123+
const columnHeadersViewSpy = jest.spyOn(columnHeadersView, 'getColumnElements');
124+
125+
columnsResizerController.pointsByColumns();
126+
127+
expect(columnHeadersViewSpy).toHaveBeenCalledTimes(2);
128+
});
129+
});
130+
131+
describe('DraggingHeaderViewController', () => {
132+
const getDragEvent = (
133+
eventName: string,
134+
headerOffset: { left: number; top: number },
135+
dragOffset: { left: number; top: number },
136+
) => {
137+
const dragEndEvent = document.createEvent('CustomEvent') as any;
138+
139+
dragEndEvent.initCustomEvent(eventName, true, true);
140+
dragEndEvent.pageX = headerOffset.left + dragOffset.left;
141+
dragEndEvent.pageY = headerOffset.top + dragOffset.top;
142+
dragEndEvent.pointerType = 'mouse';
143+
144+
return dragEndEvent;
145+
};
146+
147+
it('should call "getBoundingRect" once for each dragging panel view', async () => {
148+
const { instance } = await createGridWith200Columns();
149+
const columnHeadersView = (instance as any).getView('columnHeadersView');
150+
const columnChooserView = (instance as any).getView('columnChooserView');
151+
const headerPanelView = (instance as any).getView('headerPanel');
152+
153+
const getBoundingViewMocks = [
154+
jest.spyOn(columnHeadersView, 'getBoundingRect'),
155+
jest.spyOn(columnChooserView, 'getBoundingRect'),
156+
jest.spyOn(headerPanelView, 'getBoundingRect'),
157+
];
158+
159+
const $headerCell = $(columnHeadersView.element()).find('.dx-header-row td').eq(5);
160+
const headerOffset = $headerCell.offset();
161+
162+
if (!headerOffset) {
163+
throw new Error('Header cell not found');
164+
}
165+
166+
const dragStartOffset = { left: 10, top: 10 };
167+
const dragStartEvent = getDragEvent(dragEventStart, headerOffset, dragStartOffset);
168+
$headerCell.get(0)?.dispatchEvent(dragStartEvent);
169+
170+
const dragMoveOffset = { left: 500, top: 10 };
171+
const dragMoveEvent = getDragEvent(dragEventMove, headerOffset, dragMoveOffset);
172+
$headerCell.get(0)?.dispatchEvent(dragMoveEvent);
173+
174+
const dragEndOffset = { left: 500, top: 10 };
175+
const dragEndEvent = getDragEvent(dragEventEnd, headerOffset, dragEndOffset);
176+
$headerCell.get(0)?.dispatchEvent(dragEndEvent);
177+
178+
getBoundingViewMocks.forEach((getBoundingViewMock) => {
179+
expect(getBoundingViewMock).toHaveBeenCalledTimes(1);
180+
});
181+
});
182+
});
183+
});

‎packages/devextreme/js/__internal/grids/grid_core/columns_resizing_reordering/utils.test.ts‎

Lines changed: 44 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -13,62 +13,60 @@ const getDraggingPanelMock = () => ({
1313
}),
1414
} as any);
1515

16-
describe('m_columns_resizing_reordering/utils.test.ts', () => {
17-
describe('getDraggingPanelBoundingRects', () => {
18-
it('returns equal amount of elements in tuple', () => {
19-
const draggingPanels = [
20-
getDraggingPanelMock(),
21-
getDraggingPanelMock(),
22-
getDraggingPanelMock(),
23-
];
24-
const result = getDraggingPanelBoundingRects(draggingPanels);
16+
describe('getDraggingPanelBoundingRects', () => {
17+
it('returns equal amount of elements in tuple', () => {
18+
const draggingPanels = [
19+
getDraggingPanelMock(),
20+
getDraggingPanelMock(),
21+
getDraggingPanelMock(),
22+
];
23+
const result = getDraggingPanelBoundingRects(draggingPanels);
2524

26-
expect(result?.length).toBe(draggingPanels.length);
27-
});
25+
expect(result?.length).toBe(draggingPanels.length);
26+
});
2827

29-
it('returns the same dragging panel objects', () => {
30-
const draggingPanels = [
31-
getDraggingPanelMock(),
32-
getDraggingPanelMock(),
33-
getDraggingPanelMock(),
34-
];
35-
const result = getDraggingPanelBoundingRects(draggingPanels);
28+
it('returns the same dragging panel objects', () => {
29+
const draggingPanels = [
30+
getDraggingPanelMock(),
31+
getDraggingPanelMock(),
32+
getDraggingPanelMock(),
33+
];
34+
const result = getDraggingPanelBoundingRects(draggingPanels);
3635

37-
expect(result).not.toBeNull();
38-
result?.forEach((draggingPanelBoundingRect, index) => {
39-
expect(draggingPanelBoundingRect.draggingPanel).toBe(draggingPanels[index]);
40-
});
36+
expect(result).not.toBeNull();
37+
result?.forEach((draggingPanelBoundingRect, index) => {
38+
expect(draggingPanelBoundingRect.draggingPanel).toBe(draggingPanels[index]);
4139
});
40+
});
4241

43-
it('returns filtered tuple without empty objects', () => {
44-
const draggingPanels = [
45-
getDraggingPanelMock(),
46-
undefined,
47-
getDraggingPanelMock(),
48-
null,
49-
];
50-
const result = getDraggingPanelBoundingRects(draggingPanels);
42+
it('returns filtered tuple without empty objects', () => {
43+
const draggingPanels = [
44+
getDraggingPanelMock(),
45+
undefined,
46+
getDraggingPanelMock(),
47+
null,
48+
];
49+
const result = getDraggingPanelBoundingRects(draggingPanels);
5150

52-
expect(result?.length).toBe(draggingPanels.filter(Boolean).length);
53-
});
51+
expect(result?.length).toBe(draggingPanels.filter(Boolean).length);
52+
});
5453

55-
it('returns null if the result is empty array', () => {
56-
const draggingPanels = [undefined, null] as any[];
57-
const result = getDraggingPanelBoundingRects(draggingPanels);
54+
it('returns null if the result is empty array', () => {
55+
const draggingPanels = [undefined, null] as any[];
56+
const result = getDraggingPanelBoundingRects(draggingPanels);
5857

59-
expect(result).toBeNull();
60-
});
58+
expect(result).toBeNull();
59+
});
6160

62-
it('returns null if draggingPanels array is empty', () => {
63-
const draggingPanels = [] as any[];
64-
const result = getDraggingPanelBoundingRects(draggingPanels);
61+
it('returns null if draggingPanels array is empty', () => {
62+
const draggingPanels = [] as any[];
63+
const result = getDraggingPanelBoundingRects(draggingPanels);
6564

66-
expect(result).toBeNull();
67-
});
65+
expect(result).toBeNull();
66+
});
6867

69-
it('returns null if draggingPanels is null or undefined', () => {
70-
expect(getDraggingPanelBoundingRects(undefined as any)).toBeNull();
71-
expect(getDraggingPanelBoundingRects(null as any)).toBeNull();
72-
});
68+
it('returns null if draggingPanels is null or undefined', () => {
69+
expect(getDraggingPanelBoundingRects(undefined as any)).toBeNull();
70+
expect(getDraggingPanelBoundingRects(null as any)).toBeNull();
7371
});
7472
});

0 commit comments

Comments
 (0)