Skip to content

Commit 50797bf

Browse files
wnvkownvko
committed
test(overlay): fix combo related tests, #6063 
1 parent 1b3398a commit 50797bf

File tree

4 files changed

+43
-27
lines changed

4 files changed

+43
-27
lines changed

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

+8-3
Original file line numberDiff line numberDiff line change
@@ -2045,7 +2045,6 @@ describe('igxCombo', () => {
20452045
fixture.detectChanges();
20462046
expect(document.activeElement).toEqual(combo.searchInput.nativeElement);
20472047
}));
2048-
20492048
it('should properly add items to the defaultFallbackGroup', () => {
20502049
combo.allowCustomValues = true;
20512050
combo.toggle();
@@ -2462,22 +2461,26 @@ describe('igxCombo', () => {
24622461
expect(combo.collapsed).toBeFalsy();
24632462
expect(combo.value).toEqual('My New Custom Item');
24642463
});
2465-
it('should enable/disable filtering at runtime', () => {
2464+
it('should enable/disable filtering at runtime', fakeAsync(() => {
24662465
combo.open(); // Open combo - all data items are in filteredData
2466+
tick();
24672467
fixture.detectChanges();
24682468
expect(combo.dropdown.items.length).toBeGreaterThan(0);
24692469

24702470
const searchInput = fixture.debugElement.query(By.css(CSS_CLASS_SEARCHINPUT));
24712471
searchInput.nativeElement.value = 'Not-available item';
24722472
searchInput.triggerEventHandler('input', { target: searchInput.nativeElement });
2473+
tick();
24732474
fixture.detectChanges();
24742475
expect(combo.dropdown.items.length).toEqual(0); // No items are available because of filtering
24752476

24762477
combo.close(); // Filter is cleared on close
2478+
tick();
24772479
fixture.detectChanges();
24782480
combo.filterable = false; // Filtering is disabled
24792481
fixture.detectChanges();
24802482
combo.open(); // All items are visible since filtering is disabled
2483+
tick();
24812484
fixture.detectChanges();
24822485
expect(combo.dropdown.items.length).toBeGreaterThan(0); // All items are visible since filtering is disabled
24832486

@@ -2487,13 +2490,15 @@ describe('igxCombo', () => {
24872490
expect(combo.dropdown.items.length).toBeGreaterThan(0); // All items are visible since filtering is disabled
24882491

24892492
combo.close(); // Filter is cleared on close
2493+
tick();
24902494
fixture.detectChanges();
24912495
combo.filterable = true; // Filtering is re-enabled
24922496
fixture.detectChanges();
24932497
combo.open(); // Filter is cleared on open
2498+
tick();
24942499
fixture.detectChanges();
24952500
expect(combo.dropdown.items.length).toBeGreaterThan(0);
2496-
});
2501+
}));
24972502
it(`should properly display "Add Item" button when filtering is off`, () => {
24982503
combo.allowCustomValues = true;
24992504
combo.filterable = false;

‎projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -215,18 +215,20 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
215215
return;
216216
}
217217

218+
this._collapsed = false;
219+
this.cdr.detectChanges();
220+
218221
if (!info) {
219222
this.unsubscribe();
220223
this.subscribe();
221224
this._overlayId = this.overlayService.attach(this.elementRef, overlaySettings);
222225
}
223226

224-
this._collapsed = false;
225-
this.cdr.detectChanges();
226-
227227
const openEventArgs: ToggleViewCancelableEventArgs = { cancel: false, owner: this, id: this._overlayId };
228228
this.onOpening.emit(openEventArgs);
229229
if (openEventArgs.cancel) {
230+
this.unsubscribe();
231+
this.overlayService.detach(this._overlayId);
230232
this._collapsed = true;
231233
this.cdr.detectChanges();
232234
return;

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

+24-17
Original file line numberDiff line numberDiff line change
@@ -303,30 +303,29 @@ describe('igxOverlay', () => {
303303
const overlay = fixture.componentInstance.overlay;
304304
fixture.detectChanges();
305305

306-
overlay.show(overlay.attach(SimpleDynamicComponent, {
307-
outlet: button,
308-
modal: false
309-
}));
306+
let id = overlay.attach(SimpleDynamicComponent, { outlet: button, modal: false });
307+
overlay.show(id);
310308
tick();
311309
let wrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0];
312310
expect(wrapper).toBeDefined();
313311
expect(wrapper.parentNode).toBe(button.nativeElement);
314-
overlay.detachAll();
312+
overlay.detach(id);
313+
tick();
315314

316-
overlay.show(overlay.attach(SimpleDynamicComponent, { modal: false }));
315+
id = overlay.attach(SimpleDynamicComponent, { modal: false });
316+
overlay.show(id);
317317
tick();
318318
wrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0];
319319
expect(wrapper).toBeDefined();
320320
expect(wrapper.parentElement.classList).toContain('igx-overlay');
321321
expect(wrapper.parentElement.parentElement).toBe(document.body);
322-
overlay.detachAll();
322+
overlay.detach(id);
323+
tick();
323324

324325
const outlet = document.createElement('div');
325326
fixture.debugElement.nativeElement.appendChild(outlet);
326-
overlay.show(overlay.attach(SimpleDynamicComponent, {
327-
modal: false,
328-
outlet: new IgxOverlayOutletDirective(new ElementRef(outlet))
329-
}));
327+
id = overlay.attach(SimpleDynamicComponent, { modal: false, outlet: new IgxOverlayOutletDirective(new ElementRef(outlet)) });
328+
overlay.show(id);
330329
tick();
331330
wrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0];
332331
expect(wrapper).toBeDefined();
@@ -1324,14 +1323,16 @@ describe('igxOverlay', () => {
13241323
for (let j = 0; j < verAl.length; j++) {
13251324
positionSettings.verticalDirection = VerticalAlignment[verAl[j]];
13261325
overlaySettings.positionStrategy = new GlobalPositionStrategy(positionSettings);
1327-
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
1326+
const id = overlay.attach(SimpleDynamicComponent, overlaySettings);
1327+
overlay.show(id);
13281328
tick();
13291329

13301330
const overlayDiv = document.getElementsByClassName(CLASS_OVERLAY_MAIN)[0];
13311331
const overlayWrapper = overlayDiv.children[0] as HTMLDivElement;
13321332
expect(overlayWrapper.style.justifyContent).toBe(cssStyles[i]);
13331333
expect(overlayWrapper.style.alignItems).toBe(cssStyles[j]);
1334-
overlay.detachAll();
1334+
overlay.detach(id);
1335+
tick();
13351336
}
13361337
}
13371338
}));
@@ -2097,7 +2098,8 @@ describe('igxOverlay', () => {
20972098
positionSettings.horizontalStartPoint = horizontalAlignment;
20982099
positionSettings.verticalStartPoint = verticalAlignment;
20992100
overlaySettings.positionStrategy = new AutoPositionStrategy(positionSettings);
2100-
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
2101+
const id = overlay.attach(SimpleDynamicComponent, overlaySettings);
2102+
overlay.show(id);
21012103
tick();
21022104
fix.detectChanges();
21032105
const overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0];
@@ -2109,7 +2111,9 @@ describe('igxOverlay', () => {
21092111
expect(wrapperMargin).toEqual(expectedMargin);
21102112
expect(contentMargin).toEqual(expectedMargin);
21112113
expect(elementMargin).toEqual(expectedMargin);
2112-
overlay.detachAll();
2114+
overlay.detach(id);
2115+
tick();
2116+
fix.detectChanges();
21132117
}
21142118
}));
21152119

@@ -2584,7 +2588,8 @@ describe('igxOverlay', () => {
25842588
positionSettings.horizontalStartPoint = horizontalAlignment;
25852589
positionSettings.verticalStartPoint = verticalAlignment;
25862590
overlaySettings.positionStrategy = new ElasticPositionStrategy(positionSettings);
2587-
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
2591+
const id = overlay.attach(SimpleDynamicComponent, overlaySettings);
2592+
overlay.show(id);
25882593
tick();
25892594
fix.detectChanges();
25902595
const overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0];
@@ -2596,7 +2601,9 @@ describe('igxOverlay', () => {
25962601
expect(wrapperMargin).toEqual(expectedMargin);
25972602
expect(contentMargin).toEqual(expectedMargin);
25982603
expect(elementMargin).toEqual(expectedMargin);
2599-
overlay.hideAll();
2604+
overlay.hide(id);
2605+
tick();
2606+
fix.detectChanges();
26002607
}
26012608
}));
26022609

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

+6-4
Original file line numberDiff line numberDiff line change
@@ -635,7 +635,7 @@ export class IgxOverlayService implements OnDestroy {
635635

636636
// if there is closing animation already started start open animation from where close one has reached
637637
// and reset close animation
638-
if (info.closeAnimationPlayer && info.closeAnimationPlayer.hasStarted()) {
638+
if (info?.closeAnimationPlayer.hasStarted()) {
639639
// getPosition() returns what part of the animation is passed, e.g. 0.5 if half the animation
640640
// is done, 0.75 if 3/4 of the animation is done. As we need to start next animation from where
641641
// the previous has finished we need the amount up to 1, therefore we are subtracting what
@@ -664,7 +664,7 @@ export class IgxOverlayService implements OnDestroy {
664664

665665
// if there is opening animation already started start close animation from where open one has reached
666666
// and remove open animation
667-
if (info.openAnimationPlayer && info.openAnimationPlayer.hasStarted()) {
667+
if (info?.openAnimationPlayer.hasStarted()) {
668668
// getPosition() returns what part of the animation is passed, e.g. 0.5 if half the animation
669669
// is done, 0.75 if 3/4 of the animation is done. As we need to start next animation from where
670670
// the previous has finished we need the amount up to 1, therefore we are subtracting what
@@ -856,12 +856,12 @@ export class IgxOverlayService implements OnDestroy {
856856
this.onOpened.emit({ id: info.id, componentRef: info.componentRef });
857857
if (info.openAnimationPlayer) {
858858
info.openAnimationPlayer.reset();
859-
// calling reset does not change hasStarted to false. This is why we are doing it her via internal field
859+
// calling reset does not change hasStarted to false. This is why we are doing it here via internal field
860860
(info.openAnimationPlayer as any)._started = false;
861861
}
862862
if (info.closeAnimationPlayer && info.closeAnimationPlayer.hasStarted()) {
863863
info.closeAnimationPlayer.reset();
864-
// calling reset does not change hasStarted to false. This is why we are doing it her via internal field
864+
// calling reset does not change hasStarted to false. This is why we are doing it here via internal field
865865
(info.closeAnimationPlayer as any)._started = false;
866866
}
867867
});
@@ -881,11 +881,13 @@ export class IgxOverlayService implements OnDestroy {
881881
this.onCloseDone(info);
882882
if (info.closeAnimationPlayer) {
883883
info.closeAnimationPlayer.reset();
884+
// calling reset does not change hasStarted to false. This is why we are doing it here via internal field
884885
(info.closeAnimationPlayer as any)._started = false;
885886
}
886887

887888
if (info.openAnimationPlayer && info.openAnimationPlayer.hasStarted()) {
888889
info.openAnimationPlayer.reset();
890+
// calling reset does not change hasStarted to false. This is why we are doing it here via internal field
889891
(info.openAnimationPlayer as any)._started = false;
890892
}
891893
});

0 commit comments

Comments
 (0)