Skip to content

Commit ca81912

Browse files
PlamenaMitevaPlamenaMiteva
authored
fix(overlay): overlay wrapper and element animation should start together #9882 (#10238)
1 parent e991b47 commit ca81912

File tree

5 files changed

+127
-101
lines changed

5 files changed

+127
-101
lines changed

‎projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,7 @@ describe('Dialog', () => {
345345
fix.detectChanges();
346346

347347
dialog.open();
348-
tick();
348+
tick(16);
349349
fix.detectChanges();
350350

351351
overlaydiv = document.getElementsByClassName(OVERLAY_MAIN_CLASS)[0];

‎projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts

Lines changed: 99 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ const CLASS_OVERLAY_WRAPPER_MODAL = 'igx-overlay__wrapper--modal';
5151
const CLASS_OVERLAY_WRAPPER_FLEX = 'igx-overlay__wrapper--flex';
5252
const CLASS_OVERLAY_MAIN = 'igx-overlay';
5353
const CLASS_SCROLLABLE_DIV = 'scrollableDiv';
54+
const DEBOUNCE_TIME = 16;
5455

5556
// Utility function to get all applied to element css from all sources.
5657
const css = (element) => {
@@ -258,19 +259,19 @@ describe('igxOverlay', () => {
258259
mockFactoryResolver = {
259260
resolveComponentFactory: () => ({
260261
create: () => ({
261-
hostView: '',
262-
location: mockElementRef,
263-
changeDetectorRef: { detectChanges: () => { } },
264-
destroy: () => { }
265-
})
262+
hostView: '',
263+
location: mockElementRef,
264+
changeDetectorRef: { detectChanges: () => { } },
265+
destroy: () => { }
266266
})
267+
})
267268
};
268269
mockApplicationRef = { attachView: () => { }, detachView: () => { } };
269270
mockInjector = {};
270271
mockAnimationBuilder = {};
271272
mockDocument = {
272273
body: mockElement,
273-
listeners: { },
274+
listeners: {},
274275
defaultView: mockElement,
275276
// this is used be able to properly invoke rxjs `fromEvent` operator, which, turns out
276277
// just adds an event listener to the element and emits accordingly
@@ -437,7 +438,7 @@ describe('igxOverlay', () => {
437438
fixture.detectChanges();
438439

439440
fixture.componentInstance.buttonElement.nativeElement.click();
440-
tick();
441+
tick(DEBOUNCE_TIME);
441442

442443
const overlayElement = (fixture.nativeElement as HTMLElement)
443444
.parentElement.getElementsByClassName(CLASS_OVERLAY_MAIN)[0] as HTMLElement;
@@ -634,8 +635,8 @@ describe('igxOverlay', () => {
634635
const bottom = 200;
635636
const mockElement = document.createElement('div');
636637
spyOn(mockElement, 'getBoundingClientRect').and.callFake(() => ({
637-
left, top, width, height, right, bottom
638-
} as DOMRect));
638+
left, top, width, height, right, bottom
639+
} as DOMRect));
639640

640641
const mockItem = document.createElement('div');
641642
mockElement.append(mockItem);
@@ -833,7 +834,7 @@ describe('igxOverlay', () => {
833834
SimpleDynamicComponent,
834835
{ positionStrategy: new ConnectedPositioningStrategy({ target: buttonElement }) });
835836
overlayInstance.show(id);
836-
tick();
837+
tick(DEBOUNCE_TIME);
837838

838839
let contentElement = (fixture.nativeElement as HTMLElement)
839840
.parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0] as HTMLElement;
@@ -849,7 +850,7 @@ describe('igxOverlay', () => {
849850
getPointSpy.and.callThrough().and.returnValue(rect);
850851
window.resizeBy(200, 200);
851852
window.dispatchEvent(new Event('resize'));
852-
tick();
853+
tick(DEBOUNCE_TIME);
853854

854855
contentElement = (fixture.nativeElement as HTMLElement)
855856
.parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0] as HTMLElement;
@@ -869,7 +870,7 @@ describe('igxOverlay', () => {
869870
// remove SimpleRefComponent HTML element from the DOM tree
870871
fixture.elementRef.nativeElement.parentElement.removeChild(fixture.elementRef.nativeElement);
871872
overlay.show(overlay.attach(fixture.elementRef));
872-
tick();
873+
tick(DEBOUNCE_TIME);
873874

874875
const componentElement = fixture.nativeElement as HTMLElement;
875876
expect(componentElement).toBeDefined();
@@ -1390,7 +1391,7 @@ describe('igxOverlay', () => {
13901391
fixture.detectChanges();
13911392

13921393
fixture.componentInstance.buttonElement.nativeElement.click();
1393-
tick();
1394+
tick(DEBOUNCE_TIME);
13941395

13951396
fixture.detectChanges();
13961397
const wrapperElement = (fixture.nativeElement as HTMLElement)
@@ -1488,7 +1489,7 @@ describe('igxOverlay', () => {
14881489

14891490
overlay.show(overlay.attach(SimpleDynamicComponent));
14901491
overlay.show(overlay.attach(SimpleDynamicComponent));
1491-
tick();
1492+
tick(DEBOUNCE_TIME);
14921493
const wrapperElements = (fixture.nativeElement as HTMLElement)
14931494
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf<HTMLElement>;
14941495
const wrapperElement1 = wrapperElements[0];
@@ -1532,7 +1533,7 @@ describe('igxOverlay', () => {
15321533
const overlay = fixture.componentInstance.overlay;
15331534

15341535
overlay.show(overlay.attach(SimpleDynamicComponent));
1535-
tick();
1536+
tick(DEBOUNCE_TIME);
15361537
fixture.detectChanges();
15371538

15381539
// overlay container IS NOT a child of the debugElement (attached to body, not app-root)
@@ -1660,67 +1661,71 @@ describe('igxOverlay', () => {
16601661
});
16611662

16621663
// adding more than one component to show in igx-overlay:
1663-
it('Should render the component exactly on top of the previous one when adding a new instance with default settings.', () => {
1664-
const fixture = TestBed.createComponent(TopLeftOffsetComponent);
1665-
const overlay = fixture.componentInstance.overlay;
1666-
const overlaySettings: OverlaySettings = {
1667-
positionStrategy: new ConnectedPositioningStrategy()
1668-
};
1669-
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
1670-
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
1671-
fixture.detectChanges();
1664+
it('Should render the component exactly on top of the previous one when adding a new instance with default settings.',
1665+
fakeAsync(() => {
1666+
const fixture = TestBed.createComponent(TopLeftOffsetComponent);
1667+
const overlay = fixture.componentInstance.overlay;
1668+
const overlaySettings: OverlaySettings = {
1669+
positionStrategy: new ConnectedPositioningStrategy()
1670+
};
1671+
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
1672+
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
1673+
tick(DEBOUNCE_TIME);
1674+
fixture.detectChanges();
16721675

1673-
const wrapperElements = (fixture.nativeElement as HTMLElement)
1674-
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf<HTMLElement>;
1675-
const wrapperElement1 = wrapperElements[0];
1676-
const wrapperElement2 = wrapperElements[1];
1677-
const componentElement1 = wrapperElement1.getElementsByTagName('component')[0] as HTMLElement;
1678-
const componentElement2 = wrapperElement2.getElementsByTagName('component')[0] as HTMLElement;
1679-
const componentRect1 = componentElement1.getBoundingClientRect();
1680-
const componentRect2 = componentElement2.getBoundingClientRect();
1681-
expect(componentRect1.left).toEqual(0);
1682-
expect(componentRect1.left).toEqual(componentRect2.left);
1683-
expect(componentRect1.top).toEqual(0);
1684-
expect(componentRect1.top).toEqual(componentRect2.top);
1685-
expect(componentRect1.width).toEqual(componentRect2.width);
1686-
expect(componentRect1.height).toEqual(componentRect2.height);
1687-
});
1676+
const wrapperElements = (fixture.nativeElement as HTMLElement)
1677+
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf<HTMLElement>;
1678+
const wrapperElement1 = wrapperElements[0];
1679+
const wrapperElement2 = wrapperElements[1];
1680+
const componentElement1 = wrapperElement1.getElementsByTagName('component')[0] as HTMLElement;
1681+
const componentElement2 = wrapperElement2.getElementsByTagName('component')[0] as HTMLElement;
1682+
const componentRect1 = componentElement1.getBoundingClientRect();
1683+
const componentRect2 = componentElement2.getBoundingClientRect();
1684+
expect(componentRect1.left).toEqual(0);
1685+
expect(componentRect1.left).toEqual(componentRect2.left);
1686+
expect(componentRect1.top).toEqual(0);
1687+
expect(componentRect1.top).toEqual(componentRect2.top);
1688+
expect(componentRect1.width).toEqual(componentRect2.width);
1689+
expect(componentRect1.height).toEqual(componentRect2.height);
1690+
}));
16881691

1689-
it('Should render the component exactly on top of the previous one when adding a new instance with the same options.', () => {
1690-
const fixture = TestBed.createComponent(TopLeftOffsetComponent);
1691-
const x = 200;
1692-
const y = 300;
1692+
it('Should render the component exactly on top of the previous one when adding a new instance with the same options.',
1693+
fakeAsync(() => {
1694+
const fixture = TestBed.createComponent(TopLeftOffsetComponent);
1695+
const x = 200;
1696+
const y = 300;
16931697

1694-
const overlay = fixture.componentInstance.overlay;
1695-
const positionSettings: PositionSettings = {
1696-
horizontalDirection: HorizontalAlignment.Left,
1697-
verticalDirection: VerticalAlignment.Top,
1698-
horizontalStartPoint: HorizontalAlignment.Left,
1699-
verticalStartPoint: VerticalAlignment.Bottom,
1700-
};
1701-
const overlaySettings: OverlaySettings = {
1702-
target: new Point(x, y),
1703-
positionStrategy: new ConnectedPositioningStrategy(positionSettings)
1704-
};
1705-
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
1706-
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
1707-
fixture.detectChanges();
1698+
const overlay = fixture.componentInstance.overlay;
1699+
const positionSettings: PositionSettings = {
1700+
horizontalDirection: HorizontalAlignment.Left,
1701+
verticalDirection: VerticalAlignment.Top,
1702+
horizontalStartPoint: HorizontalAlignment.Left,
1703+
verticalStartPoint: VerticalAlignment.Bottom,
1704+
};
1705+
const overlaySettings: OverlaySettings = {
1706+
target: new Point(x, y),
1707+
positionStrategy: new ConnectedPositioningStrategy(positionSettings)
1708+
};
1709+
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
1710+
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
1711+
tick(DEBOUNCE_TIME);
1712+
fixture.detectChanges();
17081713

1709-
const wrapperElements = (fixture.nativeElement as HTMLElement)
1710-
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf<HTMLElement>;
1711-
const wrapperElement1 = wrapperElements[0];
1712-
const wrapperElement2 = wrapperElements[1];
1713-
const componentElement1 = wrapperElement1.getElementsByTagName('component')[0] as HTMLElement;
1714-
const componentElement2 = wrapperElement2.getElementsByTagName('component')[0] as HTMLElement;
1715-
const componentRect1 = componentElement1.getBoundingClientRect();
1716-
const componentRect2 = componentElement2.getBoundingClientRect();
1717-
expect(componentRect1.left).toEqual(x - componentRect1.width);
1718-
expect(componentRect1.left).toEqual(componentRect2.left);
1719-
expect(componentRect1.top).toEqual(y - componentRect1.height);
1720-
expect(componentRect1.top).toEqual(componentRect2.top);
1721-
expect(componentRect1.width).toEqual(componentRect2.width);
1722-
expect(componentRect1.height).toEqual(componentRect2.height);
1723-
});
1714+
const wrapperElements = (fixture.nativeElement as HTMLElement)
1715+
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf<HTMLElement>;
1716+
const wrapperElement1 = wrapperElements[0];
1717+
const wrapperElement2 = wrapperElements[1];
1718+
const componentElement1 = wrapperElement1.getElementsByTagName('component')[0] as HTMLElement;
1719+
const componentElement2 = wrapperElement2.getElementsByTagName('component')[0] as HTMLElement;
1720+
const componentRect1 = componentElement1.getBoundingClientRect();
1721+
const componentRect2 = componentElement2.getBoundingClientRect();
1722+
expect(componentRect1.left).toEqual(x - componentRect1.width);
1723+
expect(componentRect1.left).toEqual(componentRect2.left);
1724+
expect(componentRect1.top).toEqual(y - componentRect1.height);
1725+
expect(componentRect1.top).toEqual(componentRect2.top);
1726+
expect(componentRect1.width).toEqual(componentRect2.width);
1727+
expect(componentRect1.height).toEqual(componentRect2.height);
1728+
}));
17241729

17251730
it(`Should change the state of the component to closed when reaching threshold and closing scroll strategy is used.`,
17261731
fakeAsync(() => {
@@ -3010,7 +3015,7 @@ describe('igxOverlay', () => {
30103015
};
30113016

30123017
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
3013-
tick();
3018+
tick(DEBOUNCE_TIME);
30143019

30153020
let wrapperElement = (fixture.nativeElement as HTMLElement)
30163021
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
@@ -3020,7 +3025,7 @@ describe('igxOverlay', () => {
30203025
tick();
30213026

30223027
wrapperElement = (fixture.nativeElement as HTMLElement)
3023-
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
3028+
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0] as HTMLElement;
30243029
expect(wrapperElement.style.visibility).toEqual('hidden');
30253030
}));
30263031

@@ -3032,14 +3037,14 @@ describe('igxOverlay', () => {
30323037
};
30333038

30343039
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
3035-
tick();
3040+
tick(DEBOUNCE_TIME);
30363041

30373042
let wrapperElement = (fixture.nativeElement as HTMLElement)
30383043
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
30393044
expect(wrapperElement.style.visibility).toEqual('');
30403045

30413046
UIInteractions.triggerKeyDownEvtUponElem('Escape', document);
3042-
tick();
3047+
tick(DEBOUNCE_TIME);
30433048

30443049
wrapperElement = (fixture.nativeElement as HTMLElement)
30453050
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
@@ -3110,34 +3115,34 @@ describe('igxOverlay', () => {
31103115
};
31113116

31123117
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
3113-
tick();
3118+
tick(DEBOUNCE_TIME);
31143119

31153120
let wrapperElement = (fixture.nativeElement as HTMLElement)
31163121
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
31173122
expect(wrapperElement.style.visibility).toEqual('');
31183123

31193124
UIInteractions.triggerKeyDownEvtUponElem('Enter', document);
3120-
tick();
3125+
tick(DEBOUNCE_TIME);
31213126
wrapperElement = (fixture.nativeElement as HTMLElement)
31223127
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
31233128
expect(wrapperElement.style.visibility).toEqual('');
31243129

31253130
UIInteractions.triggerKeyDownEvtUponElem('a', document);
3126-
tick();
3131+
tick(DEBOUNCE_TIME);
31273132
wrapperElement = (fixture.nativeElement as HTMLElement)
31283133
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
31293134
expect(wrapperElement.style.visibility).toEqual('');
31303135

31313136
UIInteractions.triggerKeyDownEvtUponElem('ArrowUp', document);
3132-
tick();
3137+
tick(DEBOUNCE_TIME);
31333138
wrapperElement = (fixture.nativeElement as HTMLElement)
31343139
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
31353140
expect(wrapperElement.style.visibility).toEqual('');
31363141

31373142
UIInteractions.triggerKeyDownEvtUponElem('Escape', document);
31383143
tick();
31393144
wrapperElement = (fixture.nativeElement as HTMLElement)
3140-
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
3145+
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0] as HTMLElement;
31413146
expect(wrapperElement.style.visibility).toEqual('hidden');
31423147
}));
31433148

@@ -3206,7 +3211,7 @@ describe('igxOverlay', () => {
32063211
expect(fixture.componentInstance.customComponent.nativeElement.getBoundingClientRect().height).toEqual(280);
32073212
fixture.componentInstance.buttonElement.nativeElement.click();
32083213
tick();
3209-
const componentElement =(fixture.nativeElement as HTMLElement)
3214+
const componentElement = (fixture.nativeElement as HTMLElement)
32103215
.parentElement.getElementsByClassName('customList')[0] as HTMLElement;
32113216
expect(componentElement).toBeDefined();
32123217
expect(componentElement.style.width).toEqual('100%');
@@ -4019,12 +4024,12 @@ describe('igxOverlay', () => {
40194024
expect(overlay.closing.emit).toHaveBeenCalledTimes(1);
40204025
expect(overlay.closed.emit).toHaveBeenCalledTimes(1);
40214026
expect(overlay.closing.emit)
4022-
.toHaveBeenCalledWith({
4023-
id: callId,
4024-
componentRef: jasmine.any(ComponentRef) as any,
4025-
cancel: false,
4026-
event: undefined
4027-
});
4027+
.toHaveBeenCalledWith({
4028+
id: callId,
4029+
componentRef: jasmine.any(ComponentRef) as any,
4030+
cancel: false,
4031+
event: undefined
4032+
});
40284033
overlay.detachAll();
40294034

40304035
overlaySettings.excludeFromOutsideClick = [];
@@ -4040,12 +4045,12 @@ describe('igxOverlay', () => {
40404045
expect(overlay.closing.emit).toHaveBeenCalledTimes(2);
40414046
expect(overlay.closed.emit).toHaveBeenCalledTimes(2);
40424047
expect(overlay.closing.emit)
4043-
.toHaveBeenCalledWith({
4044-
id: callId,
4045-
componentRef: jasmine.any(ComponentRef) as any,
4046-
cancel: false,
4047-
event: jasmine.any(Event) as any
4048-
});
4048+
.toHaveBeenCalledWith({
4049+
id: callId,
4050+
componentRef: jasmine.any(ComponentRef) as any,
4051+
cancel: false,
4052+
event: jasmine.any(Event) as any
4053+
});
40494054
}));
40504055
});
40514056

0 commit comments

Comments
 (0)