Skip to content

Commit

Permalink
chore: remove unused functions from legacy TreeColumns depth code (#1282
Browse files Browse the repository at this point in the history 
)

- 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
  • Loading branch information
@ghiscoding
ghiscoding authored Dec 23, 2023
1 parent 7cf7afa commit 345a4de
Show file tree
Hide file tree
Showing 2 changed files with 163 additions and 50 deletions.
163 changes: 158 additions & 5 deletions packages/common/src/core/__tests__/slickGrid.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,34 @@
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 =
`<div id="${containerId}" style="height: 800px; width: 600px; overflow: hidden; display: block;">
<div id="slickGridContainer-${gridId}" class="grid-pane" style="width: 100%;">
<div id="${gridId}" class="${gridUid}" style="width: 100%">
<div class="slick-pane slick-pane-header slick-pane-left" tabindex="0" style="width: 100%;">
<div class="slick-viewport slick-viewport-top slick-viewport-left" style="overflow:hidden;position:relative;">
<div class="grid-canvas" style="height: 12500px; width: 500px;"></div>
</div>
</div>
</div>
</div>`;

describe('SlickGrid core file', () => {
let container: HTMLElement;
let grid: SlickGrid;

beforeEach(() => {
container = document.createElement('div');
container.id = 'myGrid';
container.innerHTML = template;
document.body.appendChild(container);
});

Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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<any, Column>(container, dv, columns, options);
grid = new SlickGrid<any, Column>(container, [], columns, options);
grid.setSelectionModel(rowSelectionModel);
rowSelectionModel.init(grid);

Expand All @@ -453,11 +468,149 @@ describe('SlickGrid core file', () => {
const rowSelectSpy = jest.spyOn(rowSelectionModel, 'destroy');
const cellSelectionModel = new SlickCellSelectionModel();

grid = new SlickGrid<any, Column>(container, dv, columns, options);
grid = new SlickGrid<any, Column>(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<any, Column>(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<any, Column>(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<any, Column>(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<any, Column>(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<any, Column>(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<any, Column>(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<any, Column>(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<any, Column>(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<any, Column>(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<any, Column>(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<any, Column>(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<any, Column>(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<any, Column>(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
});
});
});
});
50 changes: 5 additions & 45 deletions packages/common/src/core/slickGrid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -996,7 +996,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
e = e.getNativeEvent<Event>();
}

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;
}

Expand Down Expand Up @@ -1026,7 +1026,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
if (e instanceof SlickEventData) {
e = e.getNativeEvent<Event>();
}
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;
}

Expand Down Expand Up @@ -1065,10 +1065,10 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, 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 {
Expand All @@ -1086,7 +1086,6 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, 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 {
Expand All @@ -1098,45 +1097,6 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, 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;
Expand Down

0 comments on commit 345a4de

Please sign in to comment.