From 0eee4eb0f81c563f5fd235497df7f6594d702437 Mon Sep 17 00:00:00 2001 From: wnvko Date: Wed, 2 Oct 2019 18:04:21 +0300 Subject: [PATCH 1/8] fix(nav-drawer): bypass all calls to browsers' object, #4426 --- .../igniteui-angular/src/lib/core/touch.ts | 51 ++++++++++------ .../navigation-drawer.component.ts | 59 ++++++++++++------- 2 files changed, 70 insertions(+), 40 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/touch.ts b/projects/igniteui-angular/src/lib/core/touch.ts index daf8640a082..600466c2a9b 100644 --- a/projects/igniteui-angular/src/lib/core/touch.ts +++ b/projects/igniteui-angular/src/lib/core/touch.ts @@ -1,6 +1,6 @@ -import { Inject, Injectable, NgZone } from '@angular/core'; +import { Inject, Injectable, NgZone, PLATFORM_ID } from '@angular/core'; import { ɵgetDOM as getDOM } from '@angular/platform-browser'; -import { DOCUMENT } from '@angular/common'; +import { DOCUMENT, isPlatformBrowser } from '@angular/common'; const EVENT_SUFFIX = 'precise'; @@ -11,26 +11,31 @@ const EVENT_SUFFIX = 'precise'; */ @Injectable() export class HammerGesturesManager { + private platformBrowser: boolean; /** * Event option defaults for each recognizer, see http://hammerjs.github.io/api/ for API listing. */ - protected hammerOptions: HammerOptions = { - // D.P. #447 Force TouchInput due to PointerEventInput bug (https://github.com/hammerjs/hammer.js/issues/1065) - // see https://github.com/IgniteUI/igniteui-angular/issues/447#issuecomment-324601803 - inputClass: Hammer.TouchInput, - recognizers: [ - [ Hammer.Pan, { threshold: 0 } ], - [ Hammer.Swipe, { - direction: Hammer.DIRECTION_HORIZONTAL - }], - [Hammer.Tap], - [Hammer.Tap, { event: 'doubletap', taps: 2 }, ['tap']] - ] - }; + protected hammerOptions: HammerOptions = {}; private _hammerManagers: Array<{ element: EventTarget, manager: HammerManager; }> = []; constructor(private _zone: NgZone, @Inject(DOCUMENT) private doc: any) { + this.platformBrowser = isPlatformBrowser(PLATFORM_ID); + if (this.platformBrowser) { + this.hammerOptions = { + // D.P. #447 Force TouchInput due to PointerEventInput bug (https://github.com/hammerjs/hammer.js/issues/1065) + // see https://github.com/IgniteUI/igniteui-angular/issues/447#issuecomment-324601803 + inputClass: Hammer.TouchInput, + recognizers: [ + [Hammer.Pan, { threshold: 0 }], + [Hammer.Swipe, { + direction: Hammer.DIRECTION_HORIZONTAL + }], + [Hammer.Tap], + [Hammer.Tap, { event: 'doubletap', taps: 2 }, ['tap']] + ] + }; + } } public supports(eventName: string): boolean { @@ -41,10 +46,14 @@ export class HammerGesturesManager { * Add listener extended with options for Hammer.js. Will use defaults if none are provided. * Modeling after other event plugins for easy future modifications. */ - public addEventListener(element: HTMLElement, - eventName: string, - eventHandler: (eventObj) => void, - options: HammerOptions = null): () => void { + public addEventListener( + element: HTMLElement, + eventName: string, + eventHandler: (eventObj) => void, + options: HammerOptions = null): () => void { + if (!this.platformBrowser) { + return; + } // Creating the manager bind events, must be done outside of angular return this._zone.runOutsideAngular(() => { @@ -67,6 +76,10 @@ export class HammerGesturesManager { * @param target Can be one of either window, body or document(fallback default). */ public addGlobalEventListener(target: string, eventName: string, eventHandler: (eventObj) => void): () => void { + if (!this.platformBrowser) { + return; + } + const element = this.getGlobalEventTarget(target); // Creating the manager bind events, must be done outside of angular diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts index edc5bad8ff8..b43be6990ed 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts @@ -14,14 +14,15 @@ import { Output, Renderer, SimpleChange, - TemplateRef, - ViewChild + ViewChild, + PLATFORM_ID } from '@angular/core'; import { fromEvent, interval, Subscription } from 'rxjs'; import { debounce } from 'rxjs/operators'; import { IgxNavigationService, IToggleView } from '../core/navigation'; import { HammerGesturesManager } from '../core/touch'; import { IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective } from './navigation-drawer.directives'; +import { isPlatformBrowser } from '@angular/common'; let NEXT_ID = 0; /** @@ -595,6 +596,10 @@ export class IgxNavigationDrawerComponent implements } private getWindowWidth() { + if (!isPlatformBrowser(PLATFORM_ID)) { + return; + } + return (window.innerWidth > 0) ? window.innerWidth : screen.width; } @@ -602,11 +607,15 @@ export class IgxNavigationDrawerComponent implements * Sets the drawer width. */ private setDrawerWidth(width: string) { - requestAnimationFrame(() => { - if (this.drawer) { - this.renderer.setElementStyle(this.drawer, 'width', width); - } - }); + if (isPlatformBrowser(PLATFORM_ID)) { + requestAnimationFrame(() => { + if (this.drawer) { + this.renderer.setElementStyle(this.drawer, 'width', width); + } + }); + } else { + this.renderer.setElementStyle(this.drawer, 'width', width); + } } /** @@ -632,7 +641,7 @@ export class IgxNavigationDrawerComponent implements this._touchManager.addGlobalEventListener('document', 'panmove', this.pan); this._touchManager.addGlobalEventListener('document', 'panend', this.panEnd); } - if (!this._resizeObserver) { + if (!this._resizeObserver && isPlatformBrowser(PLATFORM_ID)) { this._resizeObserver = fromEvent(window, 'resize').pipe(debounce(() => interval(150))) .subscribe((value) => { this.checkPinThreshold(value); @@ -788,19 +797,27 @@ export class IgxNavigationDrawerComponent implements * @param opacity optional value to apply to the overlay */ private setXSize(x: number, opacity?: string) { - // Angular polyfills patches window.requestAnimationFrame, but switch to DomAdapter API (TODO) - window.requestAnimationFrame(() => { - if (this.hasAnimateWidth) { - this.renderer.setElementStyle(this.drawer, 'width', x ? Math.abs(x) + 'px' : ''); - } else { - this.renderer.setElementStyle(this.drawer, 'transform', x ? 'translate3d(' + x + 'px,0,0)' : ''); - this.renderer.setElementStyle(this.drawer, '-webkit-transform', - x ? 'translate3d(' + x + 'px,0,0)' : ''); - } - if (opacity !== undefined) { - this.renderer.setElementStyle(this.overlay, 'opacity', opacity); - } - }); + if (isPlatformBrowser(PLATFORM_ID)) { + // Angular polyfills patches window.requestAnimationFrame, but switch to DomAdapter API (TODO) + window.requestAnimationFrame(() => { + this.setXSizeInternal(x, opacity); + }); + } else { + this.setXSizeInternal(x, opacity); + } + } + + private setXSizeInternal(x: number, opacity?: string) { + if (this.hasAnimateWidth) { + this.renderer.setElementStyle(this.drawer, 'width', x ? Math.abs(x) + 'px' : ''); + } else { + this.renderer.setElementStyle(this.drawer, 'transform', x ? 'translate3d(' + x + 'px,0,0)' : ''); + this.renderer.setElementStyle(this.drawer, '-webkit-transform', + x ? 'translate3d(' + x + 'px,0,0)' : ''); + } + if (opacity !== undefined) { + this.renderer.setElementStyle(this.overlay, 'opacity', opacity); + } } private toggleOpenedEvent = (evt?) => { From 4fec937b749439d9598ea5dc6a5af7f40ae375fa Mon Sep 17 00:00:00 2001 From: wnvko Date: Thu, 3 Oct 2019 16:18:10 +0300 Subject: [PATCH 2/8] fix(nav-drawer): move isPlatformBrowser to util, #4426 --- .../igniteui-angular/src/lib/core/touch.ts | 9 ++-- .../igniteui-angular/src/lib/core/utils.ts | 52 ++++++++++++++++--- .../src/lib/grids/cell.component.ts | 5 +- .../hierarchical-cell.component.ts | 8 +-- .../grids/tree-grid/tree-cell.component.ts | 7 +-- .../navigation-drawer.component.ts | 16 +++--- 6 files changed, 71 insertions(+), 26 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/touch.ts b/projects/igniteui-angular/src/lib/core/touch.ts index 600466c2a9b..669ccada9f8 100644 --- a/projects/igniteui-angular/src/lib/core/touch.ts +++ b/projects/igniteui-angular/src/lib/core/touch.ts @@ -1,6 +1,7 @@ -import { Inject, Injectable, NgZone, PLATFORM_ID } from '@angular/core'; +import { Inject, Injectable, NgZone } from '@angular/core'; import { ɵgetDOM as getDOM } from '@angular/platform-browser'; -import { DOCUMENT, isPlatformBrowser } from '@angular/common'; +import { DOCUMENT } from '@angular/common'; +import { PlatformUtil } from './utils'; const EVENT_SUFFIX = 'precise'; @@ -19,8 +20,8 @@ export class HammerGesturesManager { private _hammerManagers: Array<{ element: EventTarget, manager: HammerManager; }> = []; - constructor(private _zone: NgZone, @Inject(DOCUMENT) private doc: any) { - this.platformBrowser = isPlatformBrowser(PLATFORM_ID); + constructor(private _zone: NgZone, @Inject(DOCUMENT) private doc: any, private platformUtil: PlatformUtil) { + this.platformBrowser = this.platformUtil.isPlatformBrowser(); if (this.platformBrowser) { this.hammerOptions = { // D.P. #447 Force TouchInput due to PointerEventInput bug (https://github.com/hammerjs/hammer.js/issues/1065) diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts index 4a62129e24f..730138f04d4 100644 --- a/projects/igniteui-angular/src/lib/core/utils.ts +++ b/projects/igniteui-angular/src/lib/core/utils.ts @@ -1,3 +1,6 @@ +import { Injectable, PLATFORM_ID, Inject } from '@angular/core'; +import { isPlatformBrowser } from '@angular/common'; + /** *@hidden */ @@ -230,11 +233,22 @@ export function isFirefox(): boolean { * @hidden * TODO: make injectable, check isPlatformBrowser() */ +@Injectable({ providedIn: 'root' }) export class PlatformUtil { - static isIOS(): boolean { - const iosBrowser = typeof window !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window); + private platformBrowser: boolean; + + constructor(@Inject(PLATFORM_ID) private platformId: Object) { + this.platformBrowser = isPlatformBrowser(this.platformId); + } + + public isIOS(): boolean { + const iosBrowser = this.platformBrowser && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window); return iosBrowser; } + + public isPlatformBrowser(): boolean { + return this.platformBrowser; + } } /** @@ -246,8 +260,21 @@ export function isLeftClick(event: PointerEvent) { /** @hidden */ export function isNavigationKey(key: string): boolean { - return ['down', 'up', 'left', 'right', 'arrowdown', 'arrowup', 'arrowleft', 'arrowright', - 'home', 'end', 'space', 'spacebar', ' '].indexOf(key) !== -1; + return [ + 'down', + 'up', + 'left', + 'right', + 'arrowdown', + 'arrowup', + 'arrowleft', + 'arrowright', + 'home', + 'end', + 'space', + 'spacebar', + ' ' + ].indexOf(key) !== -1; } /** @@ -278,8 +305,21 @@ export interface CancelableBrowserEventArgs extends CancelableEventArgs { event?: Event; } -export const NAVIGATION_KEYS = new Set(['down', 'up', 'left', 'right', 'arrowdown', 'arrowup', 'arrowleft', 'arrowright', - 'home', 'end', 'space', 'spacebar', ' ']); +export const NAVIGATION_KEYS = new Set([ + 'down', + 'up', + 'left', + 'right', + 'arrowdown', + 'arrowup', + 'arrowleft', + 'arrowright', + 'home', + 'end', + 'space', + 'spacebar', + ' ' +]); export const ROW_EXPAND_KEYS = new Set('right down arrowright arrowdown'.split(' ')); export const ROW_COLLAPSE_KEYS = new Set('left up arrowleft arrowup'.split(' ')); export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'tab', 'enter', 'f2', 'escape', 'esc']); diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts index 5d92e91bfd4..09dc21551c6 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/cell.component.ts @@ -538,7 +538,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { public cdr: ChangeDetectorRef, private element: ElementRef, protected zone: NgZone, - private touchManager: HammerGesturesManager) { } + private touchManager: HammerGesturesManager, + protected platformUtil: PlatformUtil) { } /** @@ -560,7 +561,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { this.nativeElement.addEventListener('compositionend', this.compositionEndHandler); } }); - if (PlatformUtil.isIOS()) { + if (this.platformUtil.isIOS()) { this.touchManager.addEventListener(this.nativeElement, 'doubletap', this.onDoubleClick, { cssProps: { } /* don't disable user-select, etc */ } as HammerOptions); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts index 06c0dbdba4c..6c8012949bd 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts @@ -6,6 +6,7 @@ import { IgxHierarchicalGridComponent } from './hierarchical-grid.component'; import { IgxHierarchicalSelectionAPIService } from './selection'; import { IgxGridSelectionService, IgxGridCRUDService } from '../../core/grid-selection'; import { HammerGesturesManager } from '../../core/touch'; +import { PlatformUtil } from '../../core/utils'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, @@ -27,10 +28,11 @@ export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent imple public cdr: ChangeDetectorRef, private helement: ElementRef, protected zone: NgZone, - touchManager: HammerGesturesManager + touchManager: HammerGesturesManager, + protected platformUtil: PlatformUtil ) { - super(selectionService, crudService, gridAPI, selection, cdr, helement, zone, touchManager); - this.hSelection = selection; + super(selectionService, crudService, gridAPI, selection, cdr, helement, zone, touchManager, platformUtil); + // this.hSelection = selection; } ngOnInit() { diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts index 7cc36bb10d1..5979f056874 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts @@ -3,7 +3,7 @@ import { IgxGridCellComponent } from '../cell.component'; import { IgxTreeGridAPIService } from './tree-grid-api.service'; import { GridBaseAPIService } from '../api.service'; import { IgxSelectionAPIService } from '../../core/selection'; -import { getNodeSizeViaRange } from '../../core/utils'; +import { getNodeSizeViaRange, PlatformUtil } from '../../core/utils'; import { DOCUMENT } from '@angular/common'; import { IgxGridBaseComponent, IGridDataBindable } from '../grid'; import { IgxGridSelectionService, IgxGridCRUDService } from '../../core/grid-selection'; @@ -27,8 +27,9 @@ export class IgxTreeGridCellComponent extends IgxGridCellComponent implements On element: ElementRef, protected zone: NgZone, touchManager: HammerGesturesManager, - @Inject(DOCUMENT) public document) { - super(selectionService, crudService, gridAPI, selection, cdr, element, zone, touchManager); + @Inject(DOCUMENT) public document, + protected platformUtil: PlatformUtil) { + super(selectionService, crudService, gridAPI, selection, cdr, element, zone, touchManager, platformUtil); this.treeGridAPI = gridAPI; } diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts index b43be6990ed..16915d2350e 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts @@ -14,15 +14,14 @@ import { Output, Renderer, SimpleChange, - ViewChild, - PLATFORM_ID + ViewChild } from '@angular/core'; import { fromEvent, interval, Subscription } from 'rxjs'; import { debounce } from 'rxjs/operators'; import { IgxNavigationService, IToggleView } from '../core/navigation'; import { HammerGesturesManager } from '../core/touch'; import { IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective } from './navigation-drawer.directives'; -import { isPlatformBrowser } from '@angular/common'; +import { PlatformUtil } from '../core/utils'; let NEXT_ID = 0; /** @@ -401,7 +400,8 @@ export class IgxNavigationDrawerComponent implements @Optional() private _state: IgxNavigationService, // private animate: AnimationBuilder, TODO protected renderer: Renderer, - private _touchManager: HammerGesturesManager) { + private _touchManager: HammerGesturesManager, + private platformUtil: PlatformUtil) { } /** @@ -596,7 +596,7 @@ export class IgxNavigationDrawerComponent implements } private getWindowWidth() { - if (!isPlatformBrowser(PLATFORM_ID)) { + if (!this.platformUtil.isPlatformBrowser()) { return; } @@ -607,7 +607,7 @@ export class IgxNavigationDrawerComponent implements * Sets the drawer width. */ private setDrawerWidth(width: string) { - if (isPlatformBrowser(PLATFORM_ID)) { + if (this.platformUtil.isPlatformBrowser()) { requestAnimationFrame(() => { if (this.drawer) { this.renderer.setElementStyle(this.drawer, 'width', width); @@ -641,7 +641,7 @@ export class IgxNavigationDrawerComponent implements this._touchManager.addGlobalEventListener('document', 'panmove', this.pan); this._touchManager.addGlobalEventListener('document', 'panend', this.panEnd); } - if (!this._resizeObserver && isPlatformBrowser(PLATFORM_ID)) { + if (!this._resizeObserver && this.platformUtil.isPlatformBrowser()) { this._resizeObserver = fromEvent(window, 'resize').pipe(debounce(() => interval(150))) .subscribe((value) => { this.checkPinThreshold(value); @@ -797,7 +797,7 @@ export class IgxNavigationDrawerComponent implements * @param opacity optional value to apply to the overlay */ private setXSize(x: number, opacity?: string) { - if (isPlatformBrowser(PLATFORM_ID)) { + if (this.platformUtil.isPlatformBrowser()) { // Angular polyfills patches window.requestAnimationFrame, but switch to DomAdapter API (TODO) window.requestAnimationFrame(() => { this.setXSizeInternal(x, opacity); From 528d7cc7084d03488f8bb3e71f27605571689a7e Mon Sep 17 00:00:00 2001 From: wnvko Date: Thu, 3 Oct 2019 16:18:42 +0300 Subject: [PATCH 3/8] test(nav-drawer): fix failing tests, #4426 --- .../src/lib/grids/grid/cell.spec.ts | 5 +- .../navigation-drawer.component.spec.ts | 162 +++++++++--------- 2 files changed, 84 insertions(+), 83 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts index 60f198f9951..c22a604b364 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts @@ -193,14 +193,15 @@ describe('IgxGrid - Cell component', () => { it('Should not attach doubletap handler for non-iOS', () => { const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener'); - spyOn(PlatformUtil, 'isIOS').and.returnValue(false); + spyOn(PlatformUtil.prototype, 'isIOS').and.returnValue(false); const fix = TestBed.createComponent(DefaultGridComponent); fix.detectChanges(); + expect(addListenerSpy).not.toHaveBeenCalled(); }); it('Should handle doubletap on iOS, trigger onDoubleClick event', () => { const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener'); - spyOn(PlatformUtil, 'isIOS').and.returnValue(true); + spyOn(PlatformUtil.prototype, 'isIOS').and.returnValue(true); const fix = TestBed.createComponent(DefaultGridComponent); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts index 730b8c250b5..822dcc00c6a 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts @@ -6,19 +6,20 @@ import { tick } from '@angular/core/testing'; -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild, PLATFORM_ID } from '@angular/core'; import { By } from '@angular/platform-browser'; import { wait } from '../test-utils/ui-interactions.spec'; import { IgxNavigationDrawerModule } from './navigation-drawer.module'; import { IgxNavigationToggleDirective, IgxNavigationCloseDirective } from '../core/navigation/directives'; import { IgxNavigationDrawerComponent } from './navigation-drawer.component'; import { IgxNavigationService } from '../core/navigation/nav.service'; +import { PlatformUtil } from '../core/utils'; // HammerJS simulator from https://github.com/hammerjs/simulator, manual typings TODO declare var Simulator: any; const oldTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL; -describe('Navigation Drawer', () => { +fdescribe('Navigation Drawer', () => { let widthSpyOverride: jasmine.Spy; // configureTestSuite(); beforeEach(async(() => { @@ -49,9 +50,9 @@ describe('Navigation Drawer', () => { TestBed.compileComponents().then(() => { const fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); - expect(fixture.componentInstance.viewChild instanceof + expect(fixture.componentInstance.navDrawer instanceof IgxNavigationDrawerComponent).toBeTruthy(); - expect(fixture.componentInstance.viewChild.state).toBeNull(); + expect(fixture.componentInstance.navDrawer.state).toBeNull(); }); })); @@ -60,10 +61,10 @@ describe('Navigation Drawer', () => { const fixture = TestBed.createComponent(TestComponentDIComponent); fixture.detectChanges(); - expect(fixture.componentInstance.viewChild).toBeDefined(); - expect(fixture.componentInstance.viewChild instanceof + expect(fixture.componentInstance.navDrawer).toBeDefined(); + expect(fixture.componentInstance.navDrawer instanceof IgxNavigationDrawerComponent).toBeTruthy(); - expect(fixture.componentInstance.viewChild.state instanceof IgxNavigationService) + expect(fixture.componentInstance.navDrawer.state instanceof IgxNavigationService) .toBeTruthy(); }); })); @@ -75,8 +76,8 @@ describe('Navigation Drawer', () => { const fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); - expect(fixture.componentInstance.viewChild).toBeDefined(); - expect(fixture.componentInstance.viewChild instanceof + expect(fixture.componentInstance.navDrawer).toBeDefined(); + expect(fixture.componentInstance.navDrawer instanceof IgxNavigationDrawerComponent).toBeTruthy(); expect(() => fixture.destroy()).not.toThrow(); }); @@ -88,17 +89,17 @@ describe('Navigation Drawer', () => { fixture.detectChanges(); const domNavDrawer = fixture.debugElement.query(By.css('igx-nav-drawer')).nativeElement; - expect(fixture.componentInstance.viewChild.id).toContain('igx-nav-drawer-'); + expect(fixture.componentInstance.navDrawer.id).toContain('igx-nav-drawer-'); expect(domNavDrawer.id).toContain('igx-nav-drawer-'); - expect(fixture.componentInstance.viewChild.drawer.classList).toContain('igx-nav-drawer__aside'); - expect(fixture.componentInstance.viewChild.overlay.classList).toContain('igx-nav-drawer__overlay'); - expect(fixture.componentInstance.viewChild.styleDummy.classList).toContain('igx-nav-drawer__style-dummy'); - expect(fixture.componentInstance.viewChild.hasAnimateWidth).toBeFalsy(); + expect(fixture.componentInstance.navDrawer.drawer.classList).toContain('igx-nav-drawer__aside'); + expect(fixture.componentInstance.navDrawer.overlay.classList).toContain('igx-nav-drawer__overlay'); + expect(fixture.componentInstance.navDrawer.styleDummy.classList).toContain('igx-nav-drawer__style-dummy'); + expect(fixture.componentInstance.navDrawer.hasAnimateWidth).toBeFalsy(); - fixture.componentInstance.viewChild.id = 'customNavDrawer'; + fixture.componentInstance.navDrawer.id = 'customNavDrawer'; fixture.detectChanges(); - expect(fixture.componentInstance.viewChild.id).toBe('customNavDrawer'); + expect(fixture.componentInstance.navDrawer.id).toBe('customNavDrawer'); expect(domNavDrawer.id).toBe('customNavDrawer'); }).catch((reason) => { @@ -118,8 +119,8 @@ describe('Navigation Drawer', () => { TestBed.compileComponents().then(() => { const fixture = TestBed.createComponent(TestComponentDIComponent); fixture.detectChanges(); - const state: IgxNavigationService = fixture.componentInstance.viewChild.state; - const touchManager = fixture.componentInstance.viewChild.touchManager; + const state: IgxNavigationService = fixture.componentInstance.navDrawer.state; + const touchManager = fixture.componentInstance.navDrawer.touchManager; expect(state.get('testNav')).toBeDefined(); expect(touchManager.getManagerForElement(document) instanceof Hammer.Manager).toBeTruthy(); @@ -137,7 +138,7 @@ describe('Navigation Drawer', () => { TestBed.compileComponents().then(() => { const fixture = TestBed.createComponent(TestComponentDIComponent); fixture.detectChanges(); - const drawer: IgxNavigationDrawerComponent = fixture.componentInstance.viewChild; + const drawer: IgxNavigationDrawerComponent = fixture.componentInstance.navDrawer; expect(drawer.isOpen).toBeFalsy(); drawer.open(); @@ -168,7 +169,7 @@ describe('Navigation Drawer', () => { TestBed.compileComponents().then(() => { fixture = TestBed.createComponent(TestComponentDIComponent); fixture.detectChanges(); - drawer = fixture.componentInstance.viewChild; + drawer = fixture.componentInstance.navDrawer; spyOn(drawer.closing, 'emit'); spyOn(drawer.closed, 'emit'); @@ -210,7 +211,7 @@ describe('Navigation Drawer', () => { const fixture = TestBed.createComponent(TestComponentDIComponent); fixture.detectChanges(); - expect(fixture.componentInstance.viewChild.hasAnimateWidth).toBeTruthy(); + expect(fixture.componentInstance.navDrawer.hasAnimateWidth).toBeTruthy(); expect(fixture.debugElement.query((x) => x.nativeNode.nodeName === 'ASIDE').nativeElement.classList) .toContain('igx-nav-drawer__aside--mini'); }).catch((reason) => { @@ -249,7 +250,7 @@ describe('Navigation Drawer', () => { fixture.componentInstance.miniView = true; fixture.detectChanges(); - expect(asideElem.styles['width']).toEqual(fixture.componentInstance.viewChild.miniWidth); + expect(asideElem.styles['width']).toEqual(fixture.componentInstance.navDrawer.miniWidth); }).catch((reason) => { return Promise.reject(reason); }); @@ -269,15 +270,15 @@ describe('Navigation Drawer', () => { const fixture = TestBed.createComponent(TestComponentPin); fixture.detectChanges(); - expect(fixture.componentInstance.viewChild.pin).toBeTruthy(); + expect(fixture.componentInstance.navDrawer.pin).toBeTruthy(); expect(fixture.debugElement.query((x) => x.nativeNode.nodeName === 'ASIDE').nativeElement.classList) .toContain('igx-nav-drawer__aside--pinned'); - expect(fixture.componentInstance.viewChild.enableGestures).toBe(false); + expect(fixture.componentInstance.navDrawer.enableGestures).toBe(false); fixture.componentInstance.enableGestures = 'true'; fixture.detectChanges(); - expect(fixture.componentInstance.viewChild.enableGestures).toBeTruthy(); + expect(fixture.componentInstance.navDrawer.enableGestures).toBeTruthy(); }).catch((reason) => { return Promise.reject(reason); @@ -326,7 +327,7 @@ describe('Navigation Drawer', () => { TestBed.compileComponents() .then(() => { const fixture = TestBed.createComponent(TestComponentPin); - const drawer = fixture.componentInstance.viewChild; + const drawer = fixture.componentInstance.navDrawer; drawer.isOpen = true; fixture.detectChanges(); const drawerElem = fixture.debugElement.query((x) => x.nativeNode.nodeName === 'IGX-NAV-DRAWER').nativeElement; @@ -355,22 +356,22 @@ describe('Navigation Drawer', () => { TestBed.compileComponents().then(() => { fixture = TestBed.createComponent(TestComponentDIComponent); fixture.detectChanges(); - expect(fixture.componentInstance.viewChild.isOpen).toEqual(false); + expect(fixture.componentInstance.navDrawer.isOpen).toEqual(false); // timeouts are +50 on the gesture to allow the swipe to be detected and triggered after the touches: return swipe(document.body, 80, 10, 100, 250, 0); }) .then(() => { - expect(fixture.componentInstance.viewChild.isOpen) + expect(fixture.componentInstance.navDrawer.isOpen) .toEqual(false, 'should ignore swipes too far away from the edge'); return swipe(document.body, 10, 10, 150, 250, 0); }) .then(() => { - expect(fixture.componentInstance.viewChild.isOpen).toEqual(true, 'Should accept edge swipe'); + expect(fixture.componentInstance.navDrawer.isOpen).toEqual(true, 'Should accept edge swipe'); return swipe(document.body, 180, 10, 150, -180, 0); }) .then(() => { - expect(fixture.componentInstance.viewChild.isOpen).toEqual(false); + expect(fixture.componentInstance.navDrawer.isOpen).toEqual(false); done(); }) .catch((reason) => { @@ -386,9 +387,9 @@ describe('Navigation Drawer', () => { TestBed.compileComponents().then(() => { fixture = TestBed.createComponent(TestComponentDIComponent); fixture.detectChanges(); - navDrawer = fixture.componentInstance.viewChild; + navDrawer = fixture.componentInstance.navDrawer; - expect(fixture.componentInstance.viewChild.isOpen).toEqual(false); + expect(fixture.componentInstance.navDrawer.isOpen).toEqual(false); const listener = navDrawer.renderer.listen(document.body, 'panmove', () => { @@ -443,12 +444,12 @@ describe('Navigation Drawer', () => { fixture.componentInstance.drawerMiniWidth = 68; fixture.detectChanges(); - expect(fixture.componentInstance.viewChild.maxEdgeZone) + expect(fixture.componentInstance.navDrawer.maxEdgeZone) .toBe(fixture.componentInstance.drawerMiniWidth * 1.1); fixture.componentInstance.drawerMiniWidth = 80; fixture.detectChanges(); - expect(fixture.componentInstance.viewChild.maxEdgeZone) + expect(fixture.componentInstance.navDrawer.maxEdgeZone) .toBe(fixture.componentInstance.drawerMiniWidth * 1.1); }).catch((reason) => { @@ -456,7 +457,7 @@ describe('Navigation Drawer', () => { }); })); - it('should update width from css or property', fakeAsync((done) => { + fit('should update width from css or property', async(done) => { const template = ` @@ -469,41 +470,36 @@ describe('Navigation Drawer', () => { }); // compile after overrides, not in before each: https://github.com/angular/angular/issues/10712 - TestBed.compileComponents().then(() => { - fixture = TestBed.createComponent(TestComponentDIComponent); - fixture.detectChanges(); - // const comp: DebugElement = fixture.debugElement.query(By.component(IgxNavbarComponent)); + await TestBed.compileComponents(); + fixture = TestBed.createComponent(TestComponentDIComponent); + fixture.detectChanges(); + // const comp: DebugElement = fixture.debugElement.query(By.component(IgxNavbarComponent)); - // defaults: - expect(fixture.componentInstance.viewChild.drawer.style.width).toBe(''); - return fixture.componentInstance.viewChild.open(); - }) - .then(() => { - expect(fixture.componentInstance.viewChild.drawer.style.width).toBe(''); + // defaults: + expect(fixture.componentInstance.navDrawer.drawer.style.width).toBe(''); + fixture.componentInstance.navDrawer.open(); + await wait(200); - fixture.componentInstance.drawerMiniWidth = '80px'; - fixture.componentInstance.drawerWidth = '250px'; - fixture.detectChanges(); - return fixture.whenStable(); // let changes apply in the meantime - }) - .then(() => { - expect(fixture.componentInstance.viewChild.drawer.style.width).toBe('250px'); - return fixture.componentInstance.viewChild.close(); - }) - .then(() => { - tick(1000); - expect(fixture.componentInstance.viewChild.drawer.style.width).toBe('80px'); - fixture.componentInstance.drawerWidth = '350px'; - fixture.detectChanges(); - return fixture.componentInstance.viewChild.open(); - }) - .then(() => { - expect(fixture.componentInstance.viewChild.drawer.style.width).toBe('350px'); - done(); - }).catch((reason) => { - return Promise.reject(reason); - }); - })); + expect(fixture.componentInstance.navDrawer.drawer.style.width).toBe(''); + + fixture.componentInstance.drawerMiniWidth = '80px'; + fixture.componentInstance.drawerWidth = '250px'; + fixture.detectChanges(); + await wait(200); + + expect(fixture.componentInstance.navDrawer.drawer.style.width).toBe('250px'); + fixture.componentInstance.navDrawer.close(); + await wait(200); + + expect(fixture.componentInstance.navDrawer.drawer.style.width).toBe('80px'); + fixture.componentInstance.drawerWidth = '350px'; + fixture.detectChanges(); + fixture.componentInstance.navDrawer.open(); + await wait(200); + + expect(fixture.componentInstance.navDrawer.drawer.style.width).toBe('350px'); + done(); + }); it('should update pin based on window width (pinThreshold)', async (done) => { const template = `''`; @@ -523,7 +519,7 @@ describe('Navigation Drawer', () => { await fixture.whenStable(); // defaults: - expect(fixture.componentInstance.viewChild.pin).toBe(false, 'Should be initially unpinned'); + expect(fixture.componentInstance.navDrawer.pin).toBe(false, 'Should be initially unpinned'); expect(fixture.componentInstance.pin).toBe(false, 'Parent component pin should update initially'); // manual pin override @@ -532,8 +528,8 @@ describe('Navigation Drawer', () => { window.dispatchEvent(new Event('resize')); // wait for debounce - await wait(200); - expect(fixture.componentInstance.viewChild.pin).toBe(false, `Shouldn't change state on resize if window width is the same`); + await wait(2000); + expect(fixture.componentInstance.navDrawer.pin).toBe(false, `Shouldn't change state on resize if window width is the same`); expect(fixture.componentInstance.pin).toBe(true, 'Parent component pin remain on resize if window width is the same'); fixture.componentInstance.pin = true; fixture.detectChanges(); @@ -542,33 +538,37 @@ describe('Navigation Drawer', () => { window.dispatchEvent(new Event('resize')); // wait for debounce - await wait(200); - expect(fixture.componentInstance.viewChild.pin).toBe(true, 'Should pin on window resize over threshold'); + await wait(2000); + expect(fixture.componentInstance.navDrawer.pin).toBe(true, 'Should pin on window resize over threshold'); expect(fixture.componentInstance.pin).toBe(true, 'Parent pin update on window resize over threshold'); widthSpyOverride.and.returnValue(768); window.dispatchEvent(new Event('resize')); // wait for debounce - await wait(200); - expect(fixture.componentInstance.viewChild.pin).toBe(false, 'Should un-pin on window resize below threshold'); + await wait(2000); + expect(fixture.componentInstance.navDrawer.pin).toBe(false, 'Should un-pin on window resize below threshold'); expect(fixture.componentInstance.pin).toBe(false, 'Parent pin update on window resize below threshold'); fixture.componentInstance.pinThreshold = 500; expect(() => fixture.detectChanges()).not.toThrow(); await fixture.whenStable(); - expect(fixture.componentInstance.viewChild.pin).toBe(true, 'Should re-pin on window resize over threshold'); + expect(fixture.componentInstance.navDrawer.pin).toBe(true, 'Should re-pin on window resize over threshold'); expect(fixture.componentInstance.pin).toBe(true, 'Parent pin update on re-pin'); done(); }); it('should get correct window width', (done) => { const originalWidth = window.innerWidth; - + const platformUtil: PlatformUtil = new PlatformUtil(TestBed.get(PLATFORM_ID)); + const drawer = new IgxNavigationDrawerComponent(null, null, null, null, platformUtil); // re-enable `getWindowWidth` const widthSpy = (widthSpyOverride as jasmine.Spy).and.callThrough(); - expect(widthSpy.call(null)).toEqual(originalWidth); + let width = widthSpy.call(drawer); + expect(width).toEqual(originalWidth); + (window as any).innerWidth = 0; // not that readonly in Chrome - expect(widthSpy.call(null)).toEqual(screen.width); + width = widthSpy.call(drawer); + expect(width).toEqual(screen.width); (window as any).innerWidth = originalWidth; done(); }); @@ -615,7 +615,7 @@ describe('Navigation Drawer', () => { template: '' }) class TestComponent { - @ViewChild(IgxNavigationDrawerComponent, { static: true }) public viewChild: IgxNavigationDrawerComponent; + @ViewChild(IgxNavigationDrawerComponent, { static: true }) public navDrawer: IgxNavigationDrawerComponent; } @Component({ @@ -626,7 +626,7 @@ class TestComponent { class TestComponentDIComponent { public drawerMiniWidth: string | number; public drawerWidth: string | number; - @ViewChild(IgxNavigationDrawerComponent, { static: true }) public viewChild: IgxNavigationDrawerComponent; + @ViewChild(IgxNavigationDrawerComponent, { static: true }) public navDrawer: IgxNavigationDrawerComponent; } class TestComponentPin extends TestComponentDIComponent { From 1f222f701b1ee1594006e272485419d46ee8fee8 Mon Sep 17 00:00:00 2001 From: wnvko Date: Thu, 3 Oct 2019 17:08:31 +0300 Subject: [PATCH 4/8] chore(naf-drawer): remove fit and fdescribe --- .../lib/navigation-drawer/navigation-drawer.component.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts index 822dcc00c6a..38963131a3e 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts @@ -19,7 +19,7 @@ import { PlatformUtil } from '../core/utils'; declare var Simulator: any; const oldTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL; -fdescribe('Navigation Drawer', () => { +describe('Navigation Drawer', () => { let widthSpyOverride: jasmine.Spy; // configureTestSuite(); beforeEach(async(() => { @@ -457,7 +457,7 @@ fdescribe('Navigation Drawer', () => { }); })); - fit('should update width from css or property', async(done) => { + it('should update width from css or property', async(done) => { const template = ` From 3d7a06301469d1224ec221589408206b65c40d1b Mon Sep 17 00:00:00 2001 From: wnvko Date: Fri, 4 Oct 2019 12:08:03 +0300 Subject: [PATCH 5/8] test(nav-drawer): reset testing module after all nav-drawer tests, #4426 --- .../navigation-drawer.component.spec.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts index 38963131a3e..1224014e186 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts @@ -1,11 +1,4 @@ -import { - async, - ComponentFixture, - fakeAsync, - TestBed, - tick -} from '@angular/core/testing'; - +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { Component, ViewChild, PLATFORM_ID } from '@angular/core'; import { By } from '@angular/platform-browser'; import { wait } from '../test-utils/ui-interactions.spec'; @@ -46,6 +39,10 @@ describe('Navigation Drawer', () => { jasmine.DEFAULT_TIMEOUT_INTERVAL = oldTimeout; }); + afterAll(() => { + TestBed.resetTestingModule(); + }); + it('should initialize without DI service', async(() => { TestBed.compileComponents().then(() => { const fixture = TestBed.createComponent(TestComponent); @@ -561,6 +558,7 @@ describe('Navigation Drawer', () => { const originalWidth = window.innerWidth; const platformUtil: PlatformUtil = new PlatformUtil(TestBed.get(PLATFORM_ID)); const drawer = new IgxNavigationDrawerComponent(null, null, null, null, platformUtil); + // re-enable `getWindowWidth` const widthSpy = (widthSpyOverride as jasmine.Spy).and.callThrough(); let width = widthSpy.call(drawer); From d5a6297b32514e8fdd262371e7c18182903f69b2 Mon Sep 17 00:00:00 2001 From: wnvko Date: Mon, 7 Oct 2019 11:02:57 +0300 Subject: [PATCH 6/8] chore(nav-drawer): make isOs and isPlatformBrowser properties, #4426 Also reduce wait in nav-drawer test from 2000 -> 200ms Also remove unnecessary checks for isPlatformBrowser in nav-drawer --- .../igniteui-angular/src/lib/core/touch.ts | 2 +- .../igniteui-angular/src/lib/core/utils.ts | 5 +-- .../src/lib/grids/cell.component.ts | 2 +- .../src/lib/grids/grid/cell.spec.ts | 4 +- .../navigation-drawer.component.spec.ts | 6 +-- .../navigation-drawer.component.ts | 45 ++++++++----------- 6 files changed, 27 insertions(+), 37 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/touch.ts b/projects/igniteui-angular/src/lib/core/touch.ts index 669ccada9f8..f2de9a4e5ff 100644 --- a/projects/igniteui-angular/src/lib/core/touch.ts +++ b/projects/igniteui-angular/src/lib/core/touch.ts @@ -21,7 +21,7 @@ export class HammerGesturesManager { private _hammerManagers: Array<{ element: EventTarget, manager: HammerManager; }> = []; constructor(private _zone: NgZone, @Inject(DOCUMENT) private doc: any, private platformUtil: PlatformUtil) { - this.platformBrowser = this.platformUtil.isPlatformBrowser(); + this.platformBrowser = this.platformUtil.isPlatformBrowser; if (this.platformBrowser) { this.hammerOptions = { // D.P. #447 Force TouchInput due to PointerEventInput bug (https://github.com/hammerjs/hammer.js/issues/1065) diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts index 730138f04d4..064db1c00b0 100644 --- a/projects/igniteui-angular/src/lib/core/utils.ts +++ b/projects/igniteui-angular/src/lib/core/utils.ts @@ -231,7 +231,6 @@ export function isFirefox(): boolean { /** * @hidden - * TODO: make injectable, check isPlatformBrowser() */ @Injectable({ providedIn: 'root' }) export class PlatformUtil { @@ -241,12 +240,12 @@ export class PlatformUtil { this.platformBrowser = isPlatformBrowser(this.platformId); } - public isIOS(): boolean { + public get isIOS(): boolean { const iosBrowser = this.platformBrowser && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window); return iosBrowser; } - public isPlatformBrowser(): boolean { + public get isPlatformBrowser(): boolean { return this.platformBrowser; } } diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts index 09dc21551c6..32005748c76 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/cell.component.ts @@ -561,7 +561,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy { this.nativeElement.addEventListener('compositionend', this.compositionEndHandler); } }); - if (this.platformUtil.isIOS()) { + if (this.platformUtil.isIOS) { this.touchManager.addEventListener(this.nativeElement, 'doubletap', this.onDoubleClick, { cssProps: { } /* don't disable user-select, etc */ } as HammerOptions); diff --git a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts index c22a604b364..5825a2bd823 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts @@ -193,7 +193,7 @@ describe('IgxGrid - Cell component', () => { it('Should not attach doubletap handler for non-iOS', () => { const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener'); - spyOn(PlatformUtil.prototype, 'isIOS').and.returnValue(false); + spyOnProperty(PlatformUtil.prototype, 'isIOS').and.returnValue(false); const fix = TestBed.createComponent(DefaultGridComponent); fix.detectChanges(); expect(addListenerSpy).not.toHaveBeenCalled(); @@ -201,7 +201,7 @@ describe('IgxGrid - Cell component', () => { it('Should handle doubletap on iOS, trigger onDoubleClick event', () => { const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener'); - spyOn(PlatformUtil.prototype, 'isIOS').and.returnValue(true); + spyOnProperty(PlatformUtil.prototype, 'isIOS').and.returnValue(true); const fix = TestBed.createComponent(DefaultGridComponent); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts index 1224014e186..36af4b07945 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts @@ -525,7 +525,7 @@ describe('Navigation Drawer', () => { window.dispatchEvent(new Event('resize')); // wait for debounce - await wait(2000); + await wait(200); expect(fixture.componentInstance.navDrawer.pin).toBe(false, `Shouldn't change state on resize if window width is the same`); expect(fixture.componentInstance.pin).toBe(true, 'Parent component pin remain on resize if window width is the same'); fixture.componentInstance.pin = true; @@ -535,7 +535,7 @@ describe('Navigation Drawer', () => { window.dispatchEvent(new Event('resize')); // wait for debounce - await wait(2000); + await wait(200); expect(fixture.componentInstance.navDrawer.pin).toBe(true, 'Should pin on window resize over threshold'); expect(fixture.componentInstance.pin).toBe(true, 'Parent pin update on window resize over threshold'); @@ -543,7 +543,7 @@ describe('Navigation Drawer', () => { window.dispatchEvent(new Event('resize')); // wait for debounce - await wait(2000); + await wait(200); expect(fixture.componentInstance.navDrawer.pin).toBe(false, 'Should un-pin on window resize below threshold'); expect(fixture.componentInstance.pin).toBe(false, 'Parent pin update on window resize below threshold'); fixture.componentInstance.pinThreshold = 500; diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts index 16915d2350e..d5f4c971f9f 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts @@ -596,10 +596,6 @@ export class IgxNavigationDrawerComponent implements } private getWindowWidth() { - if (!this.platformUtil.isPlatformBrowser()) { - return; - } - return (window.innerWidth > 0) ? window.innerWidth : screen.width; } @@ -607,7 +603,7 @@ export class IgxNavigationDrawerComponent implements * Sets the drawer width. */ private setDrawerWidth(width: string) { - if (this.platformUtil.isPlatformBrowser()) { + if (this.platformUtil.isPlatformBrowser) { requestAnimationFrame(() => { if (this.drawer) { this.renderer.setElementStyle(this.drawer, 'width', width); @@ -641,7 +637,7 @@ export class IgxNavigationDrawerComponent implements this._touchManager.addGlobalEventListener('document', 'panmove', this.pan); this._touchManager.addGlobalEventListener('document', 'panend', this.panEnd); } - if (!this._resizeObserver && this.platformUtil.isPlatformBrowser()) { + if (!this._resizeObserver && this.platformUtil.isPlatformBrowser) { this._resizeObserver = fromEvent(window, 'resize').pipe(debounce(() => interval(150))) .subscribe((value) => { this.checkPinThreshold(value); @@ -659,6 +655,9 @@ export class IgxNavigationDrawerComponent implements } private checkPinThreshold = (evt?: Event) => { + if (!this.platformUtil.isPlatformBrowser) { + return; + } let windowWidth; if (this.pinThreshold) { windowWidth = this.getWindowWidth(); @@ -797,27 +796,19 @@ export class IgxNavigationDrawerComponent implements * @param opacity optional value to apply to the overlay */ private setXSize(x: number, opacity?: string) { - if (this.platformUtil.isPlatformBrowser()) { - // Angular polyfills patches window.requestAnimationFrame, but switch to DomAdapter API (TODO) - window.requestAnimationFrame(() => { - this.setXSizeInternal(x, opacity); - }); - } else { - this.setXSizeInternal(x, opacity); - } - } - - private setXSizeInternal(x: number, opacity?: string) { - if (this.hasAnimateWidth) { - this.renderer.setElementStyle(this.drawer, 'width', x ? Math.abs(x) + 'px' : ''); - } else { - this.renderer.setElementStyle(this.drawer, 'transform', x ? 'translate3d(' + x + 'px,0,0)' : ''); - this.renderer.setElementStyle(this.drawer, '-webkit-transform', - x ? 'translate3d(' + x + 'px,0,0)' : ''); - } - if (opacity !== undefined) { - this.renderer.setElementStyle(this.overlay, 'opacity', opacity); - } + // Angular polyfills patches window.requestAnimationFrame, but switch to DomAdapter API (TODO) + window.requestAnimationFrame(() => { + if (this.hasAnimateWidth) { + this.renderer.setElementStyle(this.drawer, 'width', x ? Math.abs(x) + 'px' : ''); + } else { + const transform = x ? 'translate3d(' + x + 'px,0,0)' : ''; + this.renderer.setElementStyle(this.drawer, 'transform', transform); + this.renderer.setElementStyle(this.drawer, '-webkit-transform', transform); + } + if (opacity !== undefined) { + this.renderer.setElementStyle(this.overlay, 'opacity', opacity); + } + }); } private toggleOpenedEvent = (evt?) => { From 43bf838656e29494a5f9f192fbc75d9297d45bb0 Mon Sep 17 00:00:00 2001 From: wnvko Date: Tue, 8 Oct 2019 11:52:53 +0300 Subject: [PATCH 7/8] chore(nav-drawer): change isPlatform and isIOS to public fields --- projects/igniteui-angular/src/lib/core/touch.ts | 2 +- projects/igniteui-angular/src/lib/core/utils.ts | 14 +++----------- .../src/lib/grids/grid/cell.spec.ts | 14 +++++++++++--- .../navigation-drawer.component.ts | 6 +++--- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/touch.ts b/projects/igniteui-angular/src/lib/core/touch.ts index f2de9a4e5ff..65580066f9e 100644 --- a/projects/igniteui-angular/src/lib/core/touch.ts +++ b/projects/igniteui-angular/src/lib/core/touch.ts @@ -21,7 +21,7 @@ export class HammerGesturesManager { private _hammerManagers: Array<{ element: EventTarget, manager: HammerManager; }> = []; constructor(private _zone: NgZone, @Inject(DOCUMENT) private doc: any, private platformUtil: PlatformUtil) { - this.platformBrowser = this.platformUtil.isPlatformBrowser; + this.platformBrowser = this.platformUtil.isBrowser; if (this.platformBrowser) { this.hammerOptions = { // D.P. #447 Force TouchInput due to PointerEventInput bug (https://github.com/hammerjs/hammer.js/issues/1065) diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts index 064db1c00b0..0bf147ad16b 100644 --- a/projects/igniteui-angular/src/lib/core/utils.ts +++ b/projects/igniteui-angular/src/lib/core/utils.ts @@ -234,19 +234,11 @@ export function isFirefox(): boolean { */ @Injectable({ providedIn: 'root' }) export class PlatformUtil { - private platformBrowser: boolean; + public isBrowser: boolean = isPlatformBrowser(this.platformId); - constructor(@Inject(PLATFORM_ID) private platformId: Object) { - this.platformBrowser = isPlatformBrowser(this.platformId); - } + public isIOS = this.isBrowser && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window); - public get isIOS(): boolean { - const iosBrowser = this.platformBrowser && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window); - return iosBrowser; - } - - public get isPlatformBrowser(): boolean { - return this.platformBrowser; + constructor(@Inject(PLATFORM_ID) private platformId: Object) { } } diff --git a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts index 5825a2bd823..098efcabb7f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts @@ -193,20 +193,26 @@ describe('IgxGrid - Cell component', () => { it('Should not attach doubletap handler for non-iOS', () => { const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener'); - spyOnProperty(PlatformUtil.prototype, 'isIOS').and.returnValue(false); + const platformUtil: PlatformUtil = TestBed.get(PlatformUtil); + const oldIsIOS = platformUtil.isIOS; + platformUtil.isIOS = false; const fix = TestBed.createComponent(DefaultGridComponent); fix.detectChanges(); + // spyOnProperty(PlatformUtil.prototype, 'isIOS').and.returnValue(false); expect(addListenerSpy).not.toHaveBeenCalled(); + + platformUtil.isIOS = oldIsIOS; }); it('Should handle doubletap on iOS, trigger onDoubleClick event', () => { const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener'); - spyOnProperty(PlatformUtil.prototype, 'isIOS').and.returnValue(true); + const platformUtil: PlatformUtil = TestBed.get(PlatformUtil); + const oldIsIOS = platformUtil.isIOS; + platformUtil.isIOS = true; const fix = TestBed.createComponent(DefaultGridComponent); fix.detectChanges(); const grid = fix.componentInstance.instance; - const cellElem = fix.debugElement.query(By.css(CELL_CSS_CLASS)); const firstCell = grid.getCellByColumn(0, 'index'); // should attach 'doubletap' @@ -229,6 +235,8 @@ describe('IgxGrid - Cell component', () => { expect(event.preventDefault).toHaveBeenCalled(); expect(grid.onDoubleClick.emit).toHaveBeenCalledWith(args); expect(firstCell).toBe(fix.componentInstance.clickedCell); + + platformUtil.isIOS = oldIsIOS; }); it('Should blur selected cell when scrolling with mouse wheel', (async () => { diff --git a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts index d5f4c971f9f..710cbce5b24 100644 --- a/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts +++ b/projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts @@ -603,7 +603,7 @@ export class IgxNavigationDrawerComponent implements * Sets the drawer width. */ private setDrawerWidth(width: string) { - if (this.platformUtil.isPlatformBrowser) { + if (this.platformUtil.isBrowser) { requestAnimationFrame(() => { if (this.drawer) { this.renderer.setElementStyle(this.drawer, 'width', width); @@ -637,7 +637,7 @@ export class IgxNavigationDrawerComponent implements this._touchManager.addGlobalEventListener('document', 'panmove', this.pan); this._touchManager.addGlobalEventListener('document', 'panend', this.panEnd); } - if (!this._resizeObserver && this.platformUtil.isPlatformBrowser) { + if (!this._resizeObserver && this.platformUtil.isBrowser) { this._resizeObserver = fromEvent(window, 'resize').pipe(debounce(() => interval(150))) .subscribe((value) => { this.checkPinThreshold(value); @@ -655,7 +655,7 @@ export class IgxNavigationDrawerComponent implements } private checkPinThreshold = (evt?: Event) => { - if (!this.platformUtil.isPlatformBrowser) { + if (!this.platformUtil.isBrowser) { return; } let windowWidth; From 01fc9ffd10130f42d6ac4d97cd121a5fb9012430 Mon Sep 17 00:00:00 2001 From: wnvko Date: Wed, 9 Oct 2019 14:38:46 +0300 Subject: [PATCH 8/8] chore(nav-drawer): clear merge related issues --- .../lib/grids/hierarchical-grid/hierarchical-cell.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts index 6c8012949bd..a2635964356 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts @@ -32,7 +32,7 @@ export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent imple protected platformUtil: PlatformUtil ) { super(selectionService, crudService, gridAPI, selection, cdr, helement, zone, touchManager, platformUtil); - // this.hSelection = selection; + this.hSelection = selection; } ngOnInit() {