Skip to content

Commit 994d21c

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
chore(*): Adding tests. Fixing bugs.
1 parent ec4206f commit 994d21c

File tree

2 files changed

+164
-9
lines changed

2 files changed

+164
-9
lines changed

‎projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts‎

Lines changed: 157 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -369,6 +369,162 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
369369
expect(grid.columns[1].width).toEqual('80px');
370370
});
371371

372+
it('should resize columns with % width.', async() => {
373+
const fixture = TestBed.createComponent(ColPercentageGridComponent);
374+
fixture.detectChanges();
375+
const grid = fixture.componentInstance.grid;
376+
grid.height = null;
377+
fixture.detectChanges();
378+
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
379+
380+
expect(grid.columns[0].width).toBe('25%');
381+
382+
const headerResArea = headers[0].parent.children[2].nativeElement;
383+
const startPos = headerResArea.getBoundingClientRect().x;
384+
UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5);
385+
await wait(DEBOUNCE_TIME);
386+
fixture.detectChanges();
387+
388+
const resizer = fixture.debugElement.queryAll(By.css(RESIZE_LINE_CLASS))[0].nativeElement;
389+
expect(resizer).toBeDefined();
390+
// resize with 100px, which is 25%
391+
UIInteractions.simulateMouseEvent('mousemove', resizer, startPos + 100, 5);
392+
UIInteractions.simulateMouseEvent('mouseup', resizer, startPos + 100, 5);
393+
fixture.detectChanges();
394+
expect(grid.columns[0].width).toBe('50%');
395+
});
396+
397+
it('should resize columns with % width and % maxWidth.', async() => {
398+
const fixture = TestBed.createComponent(ColPercentageGridComponent);
399+
fixture.detectChanges();
400+
const grid = fixture.componentInstance.grid;
401+
grid.height = null;
402+
fixture.detectChanges();
403+
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
404+
grid.columns[0].maxWidth = '30%';
405+
expect(grid.columns[0].width).toBe('25%');
406+
407+
const headerResArea = headers[0].parent.children[2].nativeElement;
408+
const startPos = headerResArea.getBoundingClientRect().x;
409+
UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5);
410+
await wait(DEBOUNCE_TIME);
411+
fixture.detectChanges();
412+
413+
const resizer = fixture.debugElement.queryAll(By.css(RESIZE_LINE_CLASS))[0].nativeElement;
414+
expect(resizer).toBeDefined();
415+
// resize with +100px, which is 25%
416+
UIInteractions.simulateMouseEvent('mousemove', resizer, startPos + 100, 5);
417+
UIInteractions.simulateMouseEvent('mouseup', resizer, startPos + 100, 5);
418+
fixture.detectChanges();
419+
420+
expect(grid.columns[0].width).toBe(grid.columns[0].maxWidth);
421+
});
422+
423+
it('should resize columns with % width and % minWidth.', async() => {
424+
425+
const fixture = TestBed.createComponent(ColPercentageGridComponent);
426+
fixture.detectChanges();
427+
const grid = fixture.componentInstance.grid;
428+
grid.height = null;
429+
fixture.detectChanges();
430+
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
431+
grid.columns[0].minWidth = '10%';
432+
expect(grid.columns[0].width).toBe('25%');
433+
434+
const headerResArea = headers[0].parent.children[2].nativeElement;
435+
const startPos = headerResArea.getBoundingClientRect().x;
436+
UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5);
437+
await wait(DEBOUNCE_TIME);
438+
fixture.detectChanges();
439+
440+
const resizer = fixture.debugElement.queryAll(By.css(RESIZE_LINE_CLASS))[0].nativeElement;
441+
// resize with -100px
442+
UIInteractions.simulateMouseEvent('mousemove', resizer, startPos - 100, 5);
443+
UIInteractions.simulateMouseEvent('mouseup', resizer, startPos - 100, 5);
444+
fixture.detectChanges();
445+
446+
expect(grid.columns[0].width).toBe(grid.columns[0].minWidth);
447+
});
448+
449+
it('should resize columns with % width and pixel maxWidth.', async() => {
450+
const fixture = TestBed.createComponent(ColPercentageGridComponent);
451+
fixture.detectChanges();
452+
const grid = fixture.componentInstance.grid;
453+
grid.height = null;
454+
fixture.detectChanges();
455+
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
456+
grid.columns[0].maxWidth = '200px';
457+
expect(grid.columns[0].width).toBe('25%');
458+
459+
const headerResArea = headers[0].parent.children[2].nativeElement;
460+
const startPos = headerResArea.getBoundingClientRect().x;
461+
UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5);
462+
await wait(DEBOUNCE_TIME);
463+
fixture.detectChanges();
464+
465+
const resizer = fixture.debugElement.queryAll(By.css(RESIZE_LINE_CLASS))[0].nativeElement;
466+
expect(resizer).toBeDefined();
467+
// resize with +200px, which is 50%
468+
UIInteractions.simulateMouseEvent('mousemove', resizer, startPos + 200, 5);
469+
UIInteractions.simulateMouseEvent('mouseup', resizer, startPos + 200, 5);
470+
fixture.detectChanges();
471+
expect(grid.columns[0].width).toBe('50%');
472+
});
473+
474+
it('should resize columns with % width and pixel minWidth.', async() => {
475+
476+
const fixture = TestBed.createComponent(ColPercentageGridComponent);
477+
fixture.detectChanges();
478+
const grid = fixture.componentInstance.grid;
479+
grid.height = null;
480+
fixture.detectChanges();
481+
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
482+
// minWidth is 12.5% of the grid width - 400px
483+
grid.columns[0].minWidth = '50px';
484+
expect(grid.columns[0].width).toBe('25%');
485+
486+
const headerResArea = headers[0].parent.children[2].nativeElement;
487+
const startPos = headerResArea.getBoundingClientRect().x;
488+
UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5);
489+
await wait(DEBOUNCE_TIME);
490+
fixture.detectChanges();
491+
492+
const resizer = fixture.debugElement.queryAll(By.css(RESIZE_LINE_CLASS))[0].nativeElement;
493+
// resize with -100px
494+
UIInteractions.simulateMouseEvent('mousemove', resizer, startPos - 100, 5);
495+
UIInteractions.simulateMouseEvent('mouseup', resizer, startPos - 100, 5);
496+
fixture.detectChanges();
497+
498+
expect(grid.columns[0].width).toBe('12.5%');
499+
});
500+
501+
it('should autosize column with % width programmatically.', async() => {
502+
const fixture = TestBed.createComponent(ColPercentageGridComponent);
503+
fixture.detectChanges();
504+
const grid = fixture.componentInstance.grid;
505+
grid.height = null;
506+
fixture.detectChanges();
507+
expect(grid.columns[0].width).toBe('25%');
508+
grid.columns[0].autosize();
509+
fixture.detectChanges();
510+
expect(grid.columns[0].width).toBe('21%');
511+
});
512+
513+
it('should autosize column with % width on double click.', async() => {
514+
const fixture = TestBed.createComponent(ColPercentageGridComponent);
515+
fixture.detectChanges();
516+
const grid = fixture.componentInstance.grid;
517+
grid.height = null;
518+
fixture.detectChanges();
519+
expect(grid.columns[0].width).toBe('25%');
520+
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
521+
const headerResArea = headers[0].parent.children[2].nativeElement;
522+
UIInteractions.simulateMouseEvent('dblclick', headerResArea, 0, 0);
523+
await wait(DEBOUNCE_TIME);
524+
fixture.detectChanges();
525+
expect(grid.columns[0].width).toBe('21%');
526+
});
527+
372528
it('should resize pinned column with preset max width.', async() => {
373529
const fixture = TestBed.createComponent(PinnedColumnsComponent);
374530
fixture.detectChanges();
@@ -894,7 +1050,7 @@ export class ColGridComponent implements OnInit {
8941050

8951051
@Component({
8961052
template: GridTemplateStrings.declareGrid(`width="400px" height="600px" [allowFiltering]="true"`, ``,
897-
`<igx-column [field]="'Items'" [width]="'25%'" dataType="string" [filterable]="true"></igx-column>
1053+
`<igx-column [field]="'Items'" [width]="'25%'" dataType="string" [filterable]="true" [resizable]="true"></igx-column>
8981054
<igx-column [field]="'ID'" [width]="'25%'" [header]="'ID'" [filterable]="true"></igx-column>
8991055
<igx-column [field]="'ProductName'" [width]="'25%'" dataType="string" [filterable]="true"></igx-column>
9001056
<igx-column [field]="'Test'"[width]="'25%'" dataType="string" [resizable]="true"></igx-column>`

‎projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,12 @@ export class IgxColumnResizingService {
8282
const currentColWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width;
8383
const isPercentageWidth = this.column.width && typeof this.column.width === 'string' && this.column.width.indexOf('%') !== -1;
8484
let size = this.column.getAutoSize();
85-
if (this.column.maxWidth && (parseFloat(size) > this.column.maxWidthPx)) {
86-
size = isPercentageWidth ? this.column.maxWidthPercent + '%' : this.column.maxWidthPx + 'px';
87-
} else if (parseFloat(size) < this.column.minWidthPx) {
88-
size = isPercentageWidth ? this.column.minWidthPercent + '%' : this.column.minWidthPx + 'px';
85+
const maxWidth = isPercentageWidth ? this.column.maxWidthPercent : this.column.maxWidthPx;
86+
const minWidth = isPercentageWidth ? this.column.minWidthPercent : this.column.minWidthPx;
87+
if (this.column.maxWidth && (parseFloat(size) > maxWidth)) {
88+
size = isPercentageWidth ? maxWidth + '%' : maxWidth + 'px';
89+
} else if (parseFloat(size) < minWidth) {
90+
size = isPercentageWidth ? minWidth + '%' : minWidth + 'px';
8991
}
9092
this.column.width = size;
9193

@@ -134,10 +136,7 @@ export class IgxColumnResizingService {
134136
}
135137

136138
protected _handlePixelResize(diff: number, column: IgxColumnComponent) {
137-
let currentColWidth = parseFloat(column.width);
138-
const actualWidth = column.headerCell.elementRef.nativeElement.getBoundingClientRect().width;
139-
currentColWidth = Number.isNaN(currentColWidth) || (currentColWidth < actualWidth) ? actualWidth : currentColWidth;
140-
139+
const currentColWidth = parseFloat(column.width);
141140
const colMinWidth = column.minWidthPx;
142141
const colMaxWidth = column.maxWidthPx;
143142
if (currentColWidth + diff < colMinWidth) {

0 commit comments

Comments
 (0)