diff --git a/lib/core/context-menu/context-menu-holder.component.spec.ts b/lib/core/context-menu/context-menu-holder.component.spec.ts index 1e79b8798b..3a2b754a95 100644 --- a/lib/core/context-menu/context-menu-holder.component.spec.ts +++ b/lib/core/context-menu/context-menu-holder.component.spec.ts @@ -17,7 +17,7 @@ import { OverlayContainer } from '@angular/cdk/overlay'; import { ViewportRuler } from '@angular/cdk/scrolling'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing'; import { ContextMenuHolderComponent } from './context-menu-holder.component'; import { ContextMenuModule } from './context-menu.module'; import { ContextMenuService } from './context-menu.service'; @@ -148,61 +148,65 @@ describe('ContextMenuHolderComponent', () => { component.mdMenuElement.clientWidth = 200; }); - it('should set position to mouse position', () => { + it('should set position to mouse position', fakeAsync(() => { const contextMenuEvent = { clientX: 100, clientY: 210 }; component.showMenu( contextMenuEvent, [{}]); + tick(); expect(component.mdMenuElement.parentElement.style).toEqual({ left: '100px', top: '210px' }); - }); + })); - it('should ajust position relative to right margin of the screen', () => { + it('should ajust position relative to right margin of the screen', fakeAsync(() => { const contextMenuEvent = { clientX: 1000, clientY: 210 }; component.showMenu( contextMenuEvent, [{}]); + tick(); expect(component.mdMenuElement.parentElement.style).toEqual({ left: '800px', top: '210px' }); - }); + })); - it('should ajust position relative to bottom margin of the screen', () => { + it('should ajust position relative to bottom margin of the screen', fakeAsync(() => { const contextMenuEvent = { clientX: 100, clientY: 600 }; component.showMenu( contextMenuEvent, [{}]); + tick(); expect(component.mdMenuElement.parentElement.style).toEqual({ left: '100px', top: '440px' }); - }); + })); - it('should ajust position relative to bottom - right margin of the screen', () => { + it('should ajust position relative to bottom - right margin of the screen', fakeAsync(() => { const contextMenuEvent = { clientX: 900, clientY: 610 }; component.showMenu( contextMenuEvent, [{}]); + tick(); expect(component.mdMenuElement.parentElement.style).toEqual({ left: '700px', top: '450px' }); - }); + })); }); describe('Menu direction', () => { @@ -212,52 +216,56 @@ describe('ContextMenuHolderComponent', () => { component.mdMenuElement.clientWidth = 200; }); - it('should set default menu direction', () => { + it('should set default menu direction', fakeAsync(() => { const contextMenuEvent = { clientX: 100, clientY: 210 }; component.showMenu( contextMenuEvent, [{}]); + tick(); expect(component.menuTrigger.menu.xPosition).toBe('after'); expect(component.menuTrigger.menu.yPosition).toBe('below'); - }); + })); - it('should ajust direction relative to right margin of the screen', () => { + it('should ajust direction relative to right margin of the screen', fakeAsync(() => { const contextMenuEvent = { clientX: 1000, clientY: 210 }; component.showMenu( contextMenuEvent, [{}]); + tick(); expect(component.menuTrigger.menu.xPosition).toBe('before'); expect(component.menuTrigger.menu.yPosition).toBe('below'); - }); + })); - it('should ajust direction relative to bottom margin of the screen', () => { + it('should ajust direction relative to bottom margin of the screen', fakeAsync(() => { const contextMenuEvent = { clientX: 100, clientY: 600 }; component.showMenu( contextMenuEvent, [{}]); + tick(); expect(component.menuTrigger.menu.xPosition).toBe('after'); expect(component.menuTrigger.menu.yPosition).toBe('above'); - }); + })); - it('should ajust position relative to bottom - right margin of the screen', () => { + it('should ajust position relative to bottom - right margin of the screen', fakeAsync(() => { const contextMenuEvent = { clientX: 900, clientY: 610 }; component.showMenu( contextMenuEvent, [{}]); + tick(); expect(component.menuTrigger.menu.xPosition).toBe('before'); expect(component.menuTrigger.menu.yPosition).toBe('above'); - }); + })); }); }); diff --git a/lib/core/context-menu/context-menu-holder.component.ts b/lib/core/context-menu/context-menu-holder.component.ts index b9c02555de..d1751d97f1 100644 --- a/lib/core/context-menu/context-menu-holder.component.ts +++ b/lib/core/context-menu/context-menu-holder.component.ts @@ -66,7 +66,7 @@ export class ContextMenuHolderComponent implements OnInit, OnDestroy { @HostListener('window:resize', ['$event']) onResize(event) { if (this.mdMenuElement) { - this.setPosition(); + this.setPositionAfterCDKrecalculation(); } } @@ -130,10 +130,16 @@ export class ContextMenuHolderComponent implements OnInit, OnDestroy { this.menuTrigger.openMenu(); if (this.mdMenuElement) { - this.setPosition(); + this.setPositionAfterCDKrecalculation(); } } + setPositionAfterCDKrecalculation() { + setTimeout(() => { + this.setPosition(); + }, 0); + } + get mdMenuElement() { return this.menuElement; }