|
| 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 | +}); |
0 commit comments