From 79366fab02ac0ed031cff450dc4804c5c964e09d Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 22 Dec 2023 22:06:30 -0500 Subject: [PATCH] chore: remove unused functions from legacy TreeColumns depth code - the legacy TreeColumns depth was removed in PR #775 but some functions were missed and should be removed, they are `getHeadersWidthL()` and `getHeadersWidthR()` - found these unused functions while adding unit tests for SlickGrid --- .../src/core/__tests__/slickGrid.spec.ts | 163 +++++++++++++++++- packages/common/src/core/slickGrid.ts | 50 +----- 2 files changed, 163 insertions(+), 50 deletions(-) diff --git a/packages/common/src/core/__tests__/slickGrid.spec.ts b/packages/common/src/core/__tests__/slickGrid.spec.ts index 8fc02f721..534b331d8 100644 --- a/packages/common/src/core/__tests__/slickGrid.spec.ts +++ b/packages/common/src/core/__tests__/slickGrid.spec.ts @@ -1,10 +1,26 @@ import { SlickCellSelectionModel, SlickRowSelectionModel } from '../../extensions'; import { Column, FormatterResultWithHtml, FormatterResultWithText, GridOption } from '../../interfaces'; +import { SlickEventData } from '../slickCore'; import { SlickDataView } from '../slickDataview'; import { SlickGrid } from '../slickGrid'; jest.useFakeTimers(); +const gridId = 'grid1'; +const gridUid = 'slickgrid_124343'; +const containerId = 'demo-container'; +const template = + `
+
+
+
+
+
+
+
+
+
`; + describe('SlickGrid core file', () => { let container: HTMLElement; let grid: SlickGrid; @@ -12,6 +28,7 @@ describe('SlickGrid core file', () => { beforeEach(() => { container = document.createElement('div'); container.id = 'myGrid'; + container.innerHTML = template; document.body.appendChild(container); }); @@ -67,6 +84,7 @@ describe('SlickGrid core file', () => { expect(grid).toBeTruthy(); expect(vpElms.length).toBe(4); + expect(grid.getViewport()).toBeTruthy(); expect(grid.getViewports().length).toBe(4); expect(vpElms[0].classList.contains('slick-viewport')).toBeTruthy(); expect(vpElms[0].classList.contains('vp-class1')).toBeTruthy(); @@ -424,13 +442,10 @@ describe('SlickGrid core file', () => { describe('plugins', () => { const columns = [{ id: 'firstName', field: 'firstName', name: 'First Name' }] as Column[]; const options = { enableCellNavigation: true, devMode: { ownerNodeIndex: 0 } } as GridOption; - const dv = new SlickDataView({}); - const cellNodeElm = document.createElement('div'); it('should be able to register a plugin', () => { const rowSelectionModel = new SlickRowSelectionModel(); - const cellSelectionModel = new SlickCellSelectionModel(); - grid = new SlickGrid(container, dv, columns, options); + grid = new SlickGrid(container, [], columns, options); grid.setSelectionModel(rowSelectionModel); rowSelectionModel.init(grid); @@ -453,11 +468,149 @@ describe('SlickGrid core file', () => { const rowSelectSpy = jest.spyOn(rowSelectionModel, 'destroy'); const cellSelectionModel = new SlickCellSelectionModel(); - grid = new SlickGrid(container, dv, columns, options); + grid = new SlickGrid(container, [], columns, options); grid.setSelectionModel(rowSelectionModel); grid.setSelectionModel(cellSelectionModel); expect(rowSelectSpy).toHaveBeenCalled(); }); }); + + describe('Node Getters', () => { + const columns = [{ id: 'firstName', field: 'firstName', name: 'First Name' }] as Column[]; + const options = { enableCellNavigation: true, devMode: { ownerNodeIndex: 0 } } as GridOption; + + describe('getActiveCanvasNode() function', () => { + it('should return undefined when calling the method when the Event does not include any target', () => { + grid = new SlickGrid(container, [], columns, options); + const mockEvent = new CustomEvent('click'); + const result = grid.getActiveCanvasNode(mockEvent); + + expect(result).toBeFalsy(); + }); + + it('should return closest grid canvas when calling the method when the Event includes grid canvas', () => { + grid = new SlickGrid(container, [], columns, options); + const mockEvent = new MouseEvent('click'); + const gridCanvasElm = container.querySelector('.grid-canvas'); + Object.defineProperty(mockEvent, 'target', { writable: true, configurable: true, value: gridCanvasElm }); + const result = grid.getActiveCanvasNode(mockEvent); + + expect(result).toEqual(gridCanvasElm); + }); + + it('should return grid canvas when event is null', () => { + grid = new SlickGrid(container, [], columns, options); + const result = grid.getActiveCanvasNode(); + + expect(result).toEqual(container.querySelector('.grid-canvas')); + }); + + it('should return native event from SlickEventData when it is an instance of it', () => { + grid = new SlickGrid(container, [], columns, options); + const mockEvent = new MouseEvent('click'); + const gridCanvasElm = container.querySelector('.grid-canvas'); + Object.defineProperty(mockEvent, 'target', { writable: true, configurable: true, value: gridCanvasElm }); + const ed = new SlickEventData(mockEvent); + const result = grid.getActiveCanvasNode(ed); + + expect(result).toEqual(gridCanvasElm); + }); + }); + + describe('getActiveViewportNode() function', () => { + it('should return undefined when calling the method when the Event does not include any target', () => { + grid = new SlickGrid(container, [], columns, options); + const mockEvent = new CustomEvent('click'); + const result = grid.getActiveViewportNode(mockEvent); + + expect(result).toBeFalsy(); + }); + + it('should return closest grid canvas when calling the method when the Event includes grid canvas', () => { + grid = new SlickGrid(container, [], columns, options); + const mockEvent = new MouseEvent('click'); + const viewportElm = container.querySelector('.slick-viewport'); + Object.defineProperty(mockEvent, 'target', { writable: true, configurable: true, value: viewportElm }); + const result = grid.getActiveViewportNode(mockEvent); + + expect(result).toEqual(viewportElm); + }); + + it('should return native event from SlickEventData when it is an instance of it', () => { + grid = new SlickGrid(container, [], columns, options); + const mockEvent = new MouseEvent('click'); + const viewportElm = container.querySelector('.slick-viewport'); + Object.defineProperty(mockEvent, 'target', { writable: true, configurable: true, value: viewportElm }); + const ed = new SlickEventData(mockEvent); + const result = grid.getActiveViewportNode(ed); + + expect(result).toEqual(viewportElm); + }); + }); + + describe('getViewportNode() function', () => { + it('should return viewport element when calling the function when found in the grid container', () => { + grid = new SlickGrid(container, [], columns, options); + const result = grid.getViewportNode(); + + expect(result).toBeTruthy(); + expect(result).toEqual(container.querySelector('.slick-viewport')); + }); + + it('should return viewport element when calling the function when found in the grid container', () => { + grid = new SlickGrid(container, [], columns, { ...options, frozenRow: 2, frozenBottom: true }); + const result = grid.getViewportNode(22, 3); + + expect(result).toBeTruthy(); + expect(result!.className).toEqual('slick-viewport slick-viewport-bottom slick-viewport-left'); + expect(result!.querySelector('div')!.className).toEqual('grid-canvas grid-canvas-bottom grid-canvas-left'); + expect(result!.querySelector('.slick-row.frozen')).toBeTruthy(); + expect(result!.querySelector('.slick-cell')).toBeTruthy(); + }); + + it('should return undefined when calling the function when getViewports() is returning undefined', () => { + grid = new SlickGrid(container, [], columns, options); + jest.spyOn(grid, 'getViewports').mockReturnValueOnce(null as any); + const result = grid.getViewportNode(); + + expect(result).toBeFalsy(); + }); + }); + + describe('Grid Dimensions', () => { + it('should return viewport element when calling the function when found in the grid container', () => { + const columns = [{ id: 'firstName', field: 'firstName', name: 'First Name' }] as Column[]; + grid = new SlickGrid(container, [], columns, options); + const result = grid.getHeadersWidth(); + + expect(result).toBe(2080); // (1000 * 1) + defaultColumnWidth + 1000 + }); + + it('should return viewport element when calling the function when found in the grid container', () => { + const columns = [ + { id: 'firstName', field: 'firstName', name: 'First Name', hidden: true }, + { id: 'lastName', field: 'lastName', name: 'Last Name' }, + { id: 'age', field: 'age', name: 'age' }, + ] as Column[]; + grid = new SlickGrid(container, [], columns, { ...options, frozenColumn: 1 }); + grid.init(); + const result = grid.getHeadersWidth(); + + expect(result).toBe((1000 + 80 * 3) + 1000 + 1000); // Left + Right => (1000 + (defaultColumnWidth * 2)) * 2 + 1000 + }); + + it('should return viewport element when calling the function when found in the grid container', () => { + const columns = [ + { id: 'firstName', field: 'firstName', name: 'First Name' }, + { id: 'lastName', field: 'lastName', name: 'Last Name' }, + ] as Column[]; + grid = new SlickGrid(container, [], columns, { ...options, frozenColumn: 1 }); + grid.init(); + const result = grid.getHeadersWidth(); + + expect(result).toBe((1000 + 80 * 2) * 2 + 1000); // Left + Right => (1000 + (defaultColumnWidth * 2)) * 2 + 1000 + }); + }); + }); }); \ No newline at end of file diff --git a/packages/common/src/core/slickGrid.ts b/packages/common/src/core/slickGrid.ts index 2751574b2..7ada44b4d 100644 --- a/packages/common/src/core/slickGrid.ts +++ b/packages/common/src/core/slickGrid.ts @@ -996,7 +996,7 @@ export class SlickGrid = Column, O e e = e.getNativeEvent(); } - this._activeCanvasNode = (e as any)?.target.closest('.grid-canvas'); + this._activeCanvasNode = (e as Event & { target: HTMLElement })?.target?.closest('.grid-canvas') as HTMLDivElement; return this._activeCanvasNode; } @@ -1026,7 +1026,7 @@ export class SlickGrid = Column, O e if (e instanceof SlickEventData) { e = e.getNativeEvent(); } - this._activeViewportNode = (e as any)?.target.closest('.slick-viewport'); + this._activeViewportNode = (e as Event & { target: HTMLDivElement })?.target?.closest('.slick-viewport') as HTMLDivElement; return this._activeViewportNode; } @@ -1065,10 +1065,10 @@ export class SlickGrid = Column, O e let i = 0; const ii = this.columns.length; for (i = 0; i < ii; i++) { - if (!this.columns[i] || this.columns[i].hidden) { continue; } - + if (!this.columns[i] || this.columns[i].hidden) { + continue; + } const width = this.columns[i].width; - if ((this._options.frozenColumn!) > -1 && (i > this._options.frozenColumn!)) { this.headersWidthR += width || 0; } else { @@ -1086,7 +1086,6 @@ export class SlickGrid = Column, O e if (this.hasFrozenColumns()) { this.headersWidthL = this.headersWidthL + 1000; - this.headersWidthR = Math.max(this.headersWidthR, this.viewportW) + this.headersWidthL; this.headersWidthR += this.scrollbarDimensions?.width ?? 0; } else { @@ -1098,45 +1097,6 @@ export class SlickGrid = Column, O e return Math.max(this.headersWidth, this.viewportW) + 1000; } - protected getHeadersWidthL() { - this.headersWidthL = 0; - - this.columns.forEach((column, i) => { - if (column.hidden) { return; } - - if (!((this._options.frozenColumn!) > -1 && (i > this._options.frozenColumn!))) { - this.headersWidthL += column.width || 0; - } - }); - - if (this.hasFrozenColumns()) { - this.headersWidthL += 1000; - } else { - this.headersWidthL += this.scrollbarDimensions?.width ?? 0; - this.headersWidthL = Math.max(this.headersWidthL, this.viewportW) + 1000; - } - - return this.headersWidthL; - } - - protected getHeadersWidthR() { - this.headersWidthR = 0; - - this.columns.forEach((column, i) => { - if (column.hidden) { return; } - if ((this._options.frozenColumn!) > -1 && (i > this._options.frozenColumn!)) { - this.headersWidthR += column.width || 0; - } - }); - - if (this.hasFrozenColumns()) { - this.headersWidthR = Math.max(this.headersWidthR, this.viewportW) + this.getHeadersWidthL(); - this.headersWidthR += this.scrollbarDimensions?.width ?? 0; - } - - return this.headersWidthR; - } - /** Get the grid canvas width */ getCanvasWidth(): number { const availableWidth = this.viewportHasVScroll ? this.viewportW - (this.scrollbarDimensions?.width ?? 0) : this.viewportW;