From c9017b546730a8721e55333ce6b07c37439f9113 Mon Sep 17 00:00:00 2001 From: Hristo Date: Thu, 20 Dec 2018 15:21:15 +0200 Subject: [PATCH] Derive possible heights after markForCheck() is called #3467 (#3479) * fix(grid): add pipeTrigger in the AfterViewInit event #3467 * test(grid): add general test for treegrid default rendering #8347 * fix(grid): calling pipeTrigger is not needed #3467 * test(grid): move general test to component test file #3467 * test(grid): remove f from test file #3467 --- .../src/lib/grids/grid-base.component.ts | 2 +- .../src/lib/grids/grid/grid.component.spec.ts | 2 +- .../tree-grid/tree-grid.component.spec.ts | 94 +++++++++++++++++++ .../test-utils/tree-grid-components.spec.ts | 54 ++++++++++- 4 files changed, 149 insertions(+), 3 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.spec.ts diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 7d120efdce5..6b8c0fa334d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -2302,8 +2302,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements this.initColumns(this.columnList, (col: IgxColumnComponent) => this.onColumnInit.emit(col)); this.columnListDiffer.diff(this.columnList); - this._derivePossibleHeight(); this.markForCheck(); + this._derivePossibleHeight(); this.columnList.changes .pipe(takeUntil(this.destroy$)) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index 1eb73fa17c3..0de68159bc7 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts @@ -3063,7 +3063,7 @@ export class IgxGridTestComponent { public isVerticalScrollbarVisible() { const scrollbar = this.grid.verticalScrollContainer.getVerticalScroll(); - if (scrollbar) { + if (scrollbar && scrollbar.offsetHeight > 0) { return scrollbar.offsetHeight < scrollbar.children[0].offsetHeight; } return false; diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.spec.ts new file mode 100644 index 00000000000..137f256fa68 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.spec.ts @@ -0,0 +1,94 @@ +import { async, TestBed, fakeAsync, tick } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { IgxTreeGridModule } from './index'; +import { IgxTreeGridComponent } from './tree-grid.component'; +import { DisplayDensity } from '../../core/displayDensity'; +import { configureTestSuite } from '../../test-utils/configure-suite'; +import { By } from '@angular/platform-browser'; +import { IgxTreeGridWrappedInContComponent } from '../../test-utils/tree-grid-components.spec'; + +describe('IgxTreeGrid Component Tests', () => { + + describe('IgxTreeGrid - default rendering for rows and columns', () => { + configureTestSuite(); + let fix; + let grid: IgxTreeGridComponent; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + IgxTreeGridWrappedInContComponent + ], + imports: [ + NoopAnimationsModule, IgxTreeGridModule] + }).compileComponents(); + })); + + beforeEach(async(() => { + fix = TestBed.createComponent(IgxTreeGridWrappedInContComponent); + grid = fix.componentInstance.treeGrid; + })); + + it('should match width and height of parent container when width/height are set in %', fakeAsync(() => { + fix.componentInstance.outerWidth = 800; + fix.componentInstance.outerHeight = 600; + grid.width = '50%'; + grid.height = '50%'; + tick(); + fix.detectChanges(); + + expect(window.getComputedStyle(grid.nativeElement).height).toMatch('300px'); + expect(window.getComputedStyle(grid.nativeElement).width).toMatch('400px'); + expect(grid.rowList.length).toBeGreaterThan(0); + })); + + it('should render 10 records if height is unset and parent container\'s height is unset', () => { + fix.detectChanges(); + const defaultHeight = fix.debugElement.query(By.css('.igx-grid__tbody')).styles.height; + expect(defaultHeight).not.toBeNull(); + expect(parseInt(defaultHeight, 10)).toBeGreaterThan(400); + expect(fix.componentInstance.isVerticalScrollbarVisible()).toBeTruthy(); + expect(grid.rowList.length).toBeGreaterThanOrEqual(10); + }); + + it('should render 10 records if height is 100% and parent container\'s height is unset', fakeAsync(() => { + grid.height = '600px'; + tick(); + fix.detectChanges(); + const defaultHeight = fix.debugElement.query(By.css('.igx-grid__tbody')).styles.height; + expect(defaultHeight).not.toBeNull(); + expect(parseInt(defaultHeight, 10)).toBeGreaterThan(400); + expect(fix.componentInstance.isVerticalScrollbarVisible()).toBeTruthy(); + expect(grid.rowList.length).toBeGreaterThanOrEqual(10); + })); + + it(`should render all records exactly if height is 100% and parent container\'s height is unset and + there are fewer than 10 records in the data view`, fakeAsync(() => { + grid.height = '100%'; + fix.componentInstance.data = fix.componentInstance.data.slice(0, 1); + tick(); + fix.detectChanges(); + const defaultHeight = fix.debugElement.query(By.css('.igx-grid__tbody')).styles.height; + expect(defaultHeight).not.toBeNull(); + expect(parseInt(defaultHeight, 10)).toBeGreaterThan(200); + expect(fix.componentInstance.isVerticalScrollbarVisible()).toBeFalsy(); + expect(grid.rowList.length).toEqual(6); + })); + + it(`should render 11 records if height is 100% and parent container\'s height is unset and + display density is changed`, fakeAsync(() => { + grid.height = '100%'; + fix.componentInstance.density = DisplayDensity.compact; + tick(); + fix.detectChanges(); + const defaultHeight = fix.debugElement.query(By.css('.igx-grid__tbody')).styles.height; + const defaultHeightNum = parseInt(defaultHeight, 10); + expect(defaultHeight).not.toBeNull(); + expect(defaultHeightNum).toBeGreaterThan(300); + expect(defaultHeightNum).toBeLessThan(330); + expect(fix.componentInstance.isVerticalScrollbarVisible()).toBeTruthy(); + expect(grid.rowList.length).toEqual(11); + })); + }); + +}); diff --git a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts index f74d1130cb5..90bee09c0eb 100644 --- a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts @@ -2,7 +2,7 @@ import { Component, ViewChild } from '@angular/core'; import { IgxTreeGridComponent } from '../grids/tree-grid/tree-grid.component'; import { SampleTestData } from './sample-test-data.spec'; import { IgxNumberSummaryOperand, IgxSummaryResult } from '../grids'; -import { IgxTransactionService, IgxHierarchicalTransactionService } from '../../public_api'; +import { IgxTransactionService, IgxHierarchicalTransactionService, DisplayDensity } from '../../public_api'; import { IgxGridTransaction } from '../grids/grid-base.component'; @Component({ @@ -389,3 +389,55 @@ export class IgxTreeGridRowEditingHierarchicalDSTransactionComponent { @ViewChild('treeGrid', { read: IgxTreeGridComponent }) public treeGrid: IgxTreeGridComponent; public paging = false; } + +@Component({ + template: + `
+ + + + + + +
` +}) + +export class IgxTreeGridWrappedInContComponent { + @ViewChild(IgxTreeGridComponent) public treeGrid: IgxTreeGridComponent; + public data = SampleTestData.employeeTreeData(); + + public height = null; + public paging = false; + public pageSize = 5; + public density = DisplayDensity.comfortable; + public outerWidth = 800; + public outerHeight: number; + + public isHorizontalScrollbarVisible() { + const scrollbar = this.treeGrid.parentVirtDir.getHorizontalScroll(); + if (scrollbar) { + return scrollbar.offsetWidth < scrollbar.children[0].offsetWidth; + } + + return false; + } + + public getVerticalScrollHeight() { + const scrollbar = this.treeGrid.verticalScrollContainer.getVerticalScroll(); + if (scrollbar) { + return parseInt(scrollbar.style.height, 10); + } + + return 0; + } + + public isVerticalScrollbarVisible() { + const scrollbar = this.treeGrid.verticalScrollContainer.getVerticalScroll(); + if (scrollbar && scrollbar.offsetHeight > 0) { + return scrollbar.offsetHeight < scrollbar.children[0].offsetHeight; + } + return false; + } + +}