Skip to content

Commit 5989592

Browse files
wnvkownvko
committed
refactor(overlay): change some method names and refactor tests
1 parent b806da1 commit 5989592

File tree

2 files changed

+71
-89
lines changed

2 files changed

+71
-89
lines changed

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

Lines changed: 54 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
ComponentRef
1010
} from '@angular/core';
1111
import { TestBed, fakeAsync, tick, async, inject } from '@angular/core/testing';
12-
import { BrowserModule } from '@angular/platform-browser';
12+
import { BrowserModule, By } from '@angular/platform-browser';
1313
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
1414
import { IgxOverlayService } from './overlay';
1515
import { IgxToggleDirective, IgxToggleModule, IgxOverlayOutletDirective } from './../../directives/toggle/toggle.directive';
@@ -2718,61 +2718,43 @@ describe('igxOverlay', () => {
27182718
const fixture = TestBed.createComponent(EmptyPageComponent);
27192719
const overlay = fixture.componentInstance.overlay;
27202720
const overlaySettings: OverlaySettings = {
2721-
modal: true,
27222721
closeOnEsc: true,
2723-
positionStrategy: new GlobalPositionStrategy()
27242722
};
27252723

2726-
const targetButton = 'Escape';
2727-
const escEvent = new KeyboardEvent('keydown', {
2728-
key: targetButton
2729-
});
2730-
27312724
overlay.show(overlay.attach(SimpleDynamicComponent), overlaySettings);
27322725
tick();
27332726

27342727
let overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0];
2735-
overlayWrapper.addEventListener('keydown', (event: KeyboardEvent) => {
2736-
if (event.key === targetButton) {
2737-
overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0];
2738-
expect(overlayWrapper).toBeFalsy();
2739-
}
2740-
});
2741-
tick();
27422728
expect(overlayWrapper).toBeTruthy();
2743-
document.dispatchEvent(escEvent);
2729+
2730+
UIInteractions.triggerKeyDownEvtUponElem('Escape', document);
27442731
tick();
2732+
2733+
overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0];
2734+
expect(overlayWrapper).toBeFalsy();
27452735
}));
27462736

27472737
it('Should not close the component when esc key is pressed and closeOnEsc is false', fakeAsync(() => {
27482738
const fixture = TestBed.createComponent(EmptyPageComponent);
27492739
const overlay = fixture.componentInstance.overlay;
27502740
const overlaySettings: OverlaySettings = {
2751-
modal: true,
2752-
positionStrategy: new GlobalPositionStrategy()
2741+
closeOnEsc: false
27532742
};
2754-
const targetButton = 'Escape';
2755-
const escEvent = new KeyboardEvent('keydown', {
2756-
key: targetButton
2757-
});
27582743

27592744
overlay.show(overlay.attach(SimpleDynamicComponent), overlaySettings);
27602745
tick();
27612746

27622747
let overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0];
2763-
overlayWrapper.addEventListener('keydown', (event: KeyboardEvent) => {
2764-
if (event.key === targetButton) {
2765-
overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0];
2766-
}
2767-
});
2768-
document.dispatchEvent(escEvent);
2748+
expect(overlayWrapper).toBeTruthy();
2749+
2750+
UIInteractions.triggerKeyDownEvtUponElem('Escape', document);
27692751
tick();
2770-
fixture.detectChanges();
27712752

2753+
overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0];
27722754
expect(overlayWrapper).toBeTruthy();
27732755
}));
27742756

2775-
it('Should close the opened overlays consecutively on escape keypress', fakeAsync(() => {
2757+
it('Should close the opened overlays consecutively on esc keypress', fakeAsync(() => {
27762758
const fixture = TestBed.createComponent(EmptyPageComponent);
27772759
const overlay = fixture.componentInstance.overlay;
27782760
overlay.show(overlay.attach(SimpleDynamicComponent), { closeOnEsc: true });
@@ -2783,59 +2765,70 @@ describe('igxOverlay', () => {
27832765
const overlayDiv = document.getElementsByClassName(CLASS_OVERLAY_MAIN)[0];
27842766
expect(overlayDiv.children.length).toBe(2);
27852767

2786-
const escEvent = new KeyboardEvent('keydown', {
2787-
key: 'Escape'
2788-
});
2789-
2790-
document.dispatchEvent(escEvent);
2768+
UIInteractions.triggerKeyDownEvtUponElem('Escape', document);
27912769
tick();
27922770
expect(overlayDiv.children.length).toBe(1);
27932771

2794-
document.dispatchEvent(escEvent);
2772+
UIInteractions.triggerKeyDownEvtUponElem('Escape', document);
27952773
tick();
27962774
expect(overlayDiv.children.length).toBe(0);
27972775
}));
27982776

2777+
it('Should not close the opened overlays consecutively on esc keypress', fakeAsync(() => {
2778+
const fixture = TestBed.createComponent(EmptyPageComponent);
2779+
const overlay = fixture.componentInstance.overlay;
2780+
overlay.show(overlay.attach(SimpleDynamicComponent), { closeOnEsc: true });
2781+
tick();
2782+
overlay.show(overlay.attach(SimpleDynamicComponent), { closeOnEsc: false });
2783+
tick();
2784+
overlay.show(overlay.attach(SimpleDynamicComponent), { closeOnEsc: true });
2785+
tick();
2786+
2787+
const overlayDiv = document.getElementsByClassName(CLASS_OVERLAY_MAIN)[0];
2788+
expect(overlayDiv.children.length).toBe(3);
2789+
2790+
UIInteractions.triggerKeyDownEvtUponElem('Escape', document);
2791+
tick();
2792+
expect(overlayDiv.children.length).toBe(2);
2793+
2794+
UIInteractions.triggerKeyDownEvtUponElem('Escape', document);
2795+
tick();
2796+
expect(overlayDiv.children.length).toBe(2);
2797+
}));
2798+
27992799
// Test #1883 #1820
28002800
it('It should close the component when esc key is pressed and there were other keys pressed prior to esc.', fakeAsync(() => {
28012801
const fixture = TestBed.createComponent(EmptyPageComponent);
28022802
const overlay = fixture.componentInstance.overlay;
28032803
const overlaySettings: OverlaySettings = {
2804-
modal: true,
28052804
closeOnEsc: true,
2806-
positionStrategy: new GlobalPositionStrategy()
28072805
};
28082806

2809-
const escEvent = new KeyboardEvent('keydown', {
2810-
key: 'Escape'
2811-
});
2812-
const enterEvent = new KeyboardEvent('keydown', {
2813-
key: 'Enter'
2814-
});
2815-
const arrowUpEvent = new KeyboardEvent('keydown', {
2816-
key: 'ArrowUp'
2817-
});
2818-
const aEvent = new KeyboardEvent('keydown', {
2819-
key: 'a'
2820-
});
2821-
28222807
overlay.show(overlay.attach(SimpleDynamicComponent), overlaySettings);
28232808
tick();
28242809

28252810
let overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0];
2826-
overlayWrapper.addEventListener('keydown', (event: KeyboardEvent) => {
2827-
if (event.key === 'Escape') {
2828-
overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0];
2829-
expect(overlayWrapper).toBeFalsy();
2830-
}
2831-
});
2811+
expect(overlayWrapper).toBeTruthy();
2812+
2813+
UIInteractions.triggerKeyDownEvtUponElem('Enter', document);
28322814
tick();
2815+
overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0];
28332816
expect(overlayWrapper).toBeTruthy();
28342817

2835-
document.dispatchEvent(enterEvent);
2836-
document.dispatchEvent(aEvent);
2837-
document.dispatchEvent(arrowUpEvent);
2838-
document.dispatchEvent(escEvent);
2818+
UIInteractions.triggerKeyDownEvtUponElem('a', document);
2819+
tick();
2820+
overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0];
2821+
expect(overlayWrapper).toBeTruthy();
2822+
2823+
UIInteractions.triggerKeyDownEvtUponElem('ArrowUp', document);
2824+
tick();
2825+
overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0];
2826+
expect(overlayWrapper).toBeTruthy();
2827+
2828+
UIInteractions.triggerKeyDownEvtUponElem('Escape', document);
2829+
tick();
2830+
overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0];
2831+
expect(overlayWrapper).toBeFalsy();
28392832
}));
28402833

28412834
// 3.2 Non - Modal

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

Lines changed: 17 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -323,6 +323,7 @@ export class IgxOverlayService implements OnDestroy {
323323

324324
this.addOutsideClickListener(info);
325325
this.addResizeHandler(info.id);
326+
this.addCloseOnEscapeListener();
326327

327328
if (info.settings.modal) {
328329
const wrapperElement = info.elementRef.nativeElement.parentElement.parentElement;
@@ -331,7 +332,6 @@ export class IgxOverlayService implements OnDestroy {
331332
wrapperElement.classList.add('igx-overlay__wrapper--modal');
332333
}
333334

334-
this.setUpCloseOnEscape();
335335

336336
if (info.settings.positionStrategy.settings.openAnimation) {
337337
this.playOpenAnimation(info);
@@ -474,25 +474,6 @@ export class IgxOverlayService implements OnDestroy {
474474
}
475475
}
476476

477-
private setUpCloseOnEscape() {
478-
if (this._overlayInfos.length - this._overlayInfos.filter(x => x.closeAnimationPlayer
479-
&& x.closeAnimationPlayer.hasStarted()).length === 1) {
480-
this.subscribeOnEscape(this._document);
481-
}
482-
}
483-
484-
private subscribeOnEscape(target: FromEventTarget<unknown>) {
485-
fromEvent(target, 'keydown').pipe(
486-
filter((ev: KeyboardEvent) => ev.key === 'Escape' || ev.key === 'Esc'),
487-
takeUntil(this.destroy$)
488-
).subscribe(() => {
489-
const targetOverlay = this._overlayInfos[this._overlayInfos.length - 1];
490-
if (targetOverlay.settings.closeOnEsc) {
491-
this.hide(targetOverlay.id);
492-
}
493-
});
494-
}
495-
496477
private onCloseDone(info: OverlayInfo) {
497478
this.cleanUp(info);
498479
this.onClosed.emit({ id: info.id, componentRef: info.componentRef });
@@ -710,14 +691,6 @@ export class IgxOverlayService implements OnDestroy {
710691
}
711692
}
712693

713-
private hasRemainingOverlaysAfterClose(): boolean {
714-
// if all overlays minus closing overlays equals one add the handler
715-
return this._overlayInfos.filter(x => x.settings.closeOnOutsideClick && !x.settings.modal).length -
716-
this._overlayInfos.filter(x => x.settings.closeOnOutsideClick && !x.settings.modal &&
717-
x.closeAnimationPlayer &&
718-
x.closeAnimationPlayer.hasStarted()).length === 1;
719-
}
720-
721694
private removeOutsideClickListener(info: OverlayInfo) {
722695
if (info.settings.modal === false) {
723696
let shouldRemoveClickEventListener = true;
@@ -753,6 +726,22 @@ export class IgxOverlayService implements OnDestroy {
753726
}
754727
}
755728

729+
private addCloseOnEscapeListener() {
730+
// if all overlays minus closing overlays equals one add the handler
731+
if (this._overlayInfos.length - this._overlayInfos.filter(x => x.closeAnimationPlayer
732+
&& x.closeAnimationPlayer.hasStarted()).length === 1) {
733+
fromEvent(this._document, 'keydown').pipe(
734+
filter((ev: KeyboardEvent) => ev.key === 'Escape' || ev.key === 'Esc'),
735+
takeUntil(this.destroy$)
736+
).subscribe(() => {
737+
const targetOverlay = this._overlayInfos[this._overlayInfos.length - 1];
738+
if (targetOverlay.settings.closeOnEsc) {
739+
this.hide(targetOverlay.id);
740+
}
741+
});
742+
}
743+
}
744+
756745
/** @hidden */
757746
public repositionAll = () => {
758747
for (let i = this._overlayInfos.length; i--;) {

0 commit comments

Comments
 (0)