Skip to content

Commit

Permalink
test(overlay): fix combo related tests, #6063
Browse files Browse the repository at this point in the history
  • Loading branch information
@wnvko
wnvko committed Jan 21, 2021
1 parent 1b3398a commit a53b121
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 27 deletions.
11 changes: 8 additions & 3 deletions projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2045,7 +2045,6 @@ describe('igxCombo', () => {
fixture.detectChanges();
expect(document.activeElement).toEqual(combo.searchInput.nativeElement);
}));

it('should properly add items to the defaultFallbackGroup', () => {
combo.allowCustomValues = true;
combo.toggle();
Expand Down Expand Up @@ -2462,22 +2461,26 @@ describe('igxCombo', () => {
expect(combo.collapsed).toBeFalsy();
expect(combo.value).toEqual('My New Custom Item');
});
it('should enable/disable filtering at runtime', () => {
it('should enable/disable filtering at runtime', fakeAsync(() => {
combo.open(); // Open combo - all data items are in filteredData
tick();
fixture.detectChanges();
expect(combo.dropdown.items.length).toBeGreaterThan(0);

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

combo.close(); // Filter is cleared on close
tick();
fixture.detectChanges();
combo.filterable = false; // Filtering is disabled
fixture.detectChanges();
combo.open(); // All items are visible since filtering is disabled
tick();
fixture.detectChanges();
expect(combo.dropdown.items.length).toBeGreaterThan(0); // All items are visible since filtering is disabled

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

combo.close(); // Filter is cleared on close
tick();
fixture.detectChanges();
combo.filterable = true; // Filtering is re-enabled
fixture.detectChanges();
combo.open(); // Filter is cleared on open
tick();
fixture.detectChanges();
expect(combo.dropdown.items.length).toBeGreaterThan(0);
});
}));
it(`should properly display "Add Item" button when filtering is off`, () => {
combo.allowCustomValues = true;
combo.filterable = false;
Expand Down
8 changes: 5 additions & 3 deletions projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,18 +215,20 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
return;
}

this._collapsed = false;
this.cdr.detectChanges();

if (!info) {
this.unsubscribe();
this.subscribe();
this._overlayId = this.overlayService.attach(this.elementRef, overlaySettings);
}

this._collapsed = false;
this.cdr.detectChanges();

const openEventArgs: ToggleViewCancelableEventArgs = { cancel: false, owner: this, id: this._overlayId };
this.onOpening.emit(openEventArgs);
if (openEventArgs.cancel) {
this.unsubscribe();
this.overlayService.detach(this._overlayId);
this._collapsed = true;
this.cdr.detectChanges();
return;
Expand Down
41 changes: 24 additions & 17 deletions projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -303,30 +303,29 @@ describe('igxOverlay', () => {
const overlay = fixture.componentInstance.overlay;
fixture.detectChanges();

overlay.show(overlay.attach(SimpleDynamicComponent, {
outlet: button,
modal: false
}));
let id = overlay.attach(SimpleDynamicComponent, { outlet: button, modal: false });
overlay.show(id);
tick();
let wrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0];
expect(wrapper).toBeDefined();
expect(wrapper.parentNode).toBe(button.nativeElement);
overlay.detachAll();
overlay.detach(id);
tick();

overlay.show(overlay.attach(SimpleDynamicComponent, { modal: false }));
id = overlay.attach(SimpleDynamicComponent, { modal: false });
overlay.show(id);
tick();
wrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0];
expect(wrapper).toBeDefined();
expect(wrapper.parentElement.classList).toContain('igx-overlay');
expect(wrapper.parentElement.parentElement).toBe(document.body);
overlay.detachAll();
overlay.detach(id);
tick();

const outlet = document.createElement('div');
fixture.debugElement.nativeElement.appendChild(outlet);
overlay.show(overlay.attach(SimpleDynamicComponent, {
modal: false,
outlet: new IgxOverlayOutletDirective(new ElementRef(outlet))
}));
id = overlay.attach(SimpleDynamicComponent, { modal: false, outlet: new IgxOverlayOutletDirective(new ElementRef(outlet)) })
overlay.show(id);
tick();
wrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0];
expect(wrapper).toBeDefined();
Expand Down Expand Up @@ -1324,14 +1323,16 @@ describe('igxOverlay', () => {
for (let j = 0; j < verAl.length; j++) {
positionSettings.verticalDirection = VerticalAlignment[verAl[j]];
overlaySettings.positionStrategy = new GlobalPositionStrategy(positionSettings);
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
const id = overlay.attach(SimpleDynamicComponent, overlaySettings);
overlay.show(id);
tick();

const overlayDiv = document.getElementsByClassName(CLASS_OVERLAY_MAIN)[0];
const overlayWrapper = overlayDiv.children[0] as HTMLDivElement;
expect(overlayWrapper.style.justifyContent).toBe(cssStyles[i]);
expect(overlayWrapper.style.alignItems).toBe(cssStyles[j]);
overlay.detachAll();
overlay.detach(id);
tick();
}
}
}));
Expand Down Expand Up @@ -2097,7 +2098,8 @@ describe('igxOverlay', () => {
positionSettings.horizontalStartPoint = horizontalAlignment;
positionSettings.verticalStartPoint = verticalAlignment;
overlaySettings.positionStrategy = new AutoPositionStrategy(positionSettings);
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
const id = overlay.attach(SimpleDynamicComponent, overlaySettings);
overlay.show(id);
tick();
fix.detectChanges();
const overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0];
Expand All @@ -2109,7 +2111,9 @@ describe('igxOverlay', () => {
expect(wrapperMargin).toEqual(expectedMargin);
expect(contentMargin).toEqual(expectedMargin);
expect(elementMargin).toEqual(expectedMargin);
overlay.detachAll();
overlay.detach(id);
tick();
fix.detectChanges();
}
}));

Expand Down Expand Up @@ -2584,7 +2588,8 @@ describe('igxOverlay', () => {
positionSettings.horizontalStartPoint = horizontalAlignment;
positionSettings.verticalStartPoint = verticalAlignment;
overlaySettings.positionStrategy = new ElasticPositionStrategy(positionSettings);
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
const id = overlay.attach(SimpleDynamicComponent, overlaySettings);
overlay.show(id);
tick();
fix.detectChanges();
const overlayWrapper = document.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0];
Expand All @@ -2596,7 +2601,9 @@ describe('igxOverlay', () => {
expect(wrapperMargin).toEqual(expectedMargin);
expect(contentMargin).toEqual(expectedMargin);
expect(elementMargin).toEqual(expectedMargin);
overlay.hideAll();
overlay.hide(id);
tick();
fix.detectChanges();
}
}));

Expand Down
10 changes: 6 additions & 4 deletions projects/igniteui-angular/src/lib/services/overlay/overlay.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -635,7 +635,7 @@ export class IgxOverlayService implements OnDestroy {

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

// if there is opening animation already started start close animation from where open one has reached
// and remove open animation
if (info.openAnimationPlayer && info.openAnimationPlayer.hasStarted()) {
if (info?.openAnimationPlayer.hasStarted()) {
// getPosition() returns what part of the animation is passed, e.g. 0.5 if half the animation
// is done, 0.75 if 3/4 of the animation is done. As we need to start next animation from where
// the previous has finished we need the amount up to 1, therefore we are subtracting what
Expand Down Expand Up @@ -856,12 +856,12 @@ export class IgxOverlayService implements OnDestroy {
this.onOpened.emit({ id: info.id, componentRef: info.componentRef });
if (info.openAnimationPlayer) {
info.openAnimationPlayer.reset();
// calling reset does not change hasStarted to false. This is why we are doing it her via internal field
// calling reset does not change hasStarted to false. This is why we are doing it here via internal field
(info.openAnimationPlayer as any)._started = false;
}
if (info.closeAnimationPlayer && info.closeAnimationPlayer.hasStarted()) {
info.closeAnimationPlayer.reset();
// calling reset does not change hasStarted to false. This is why we are doing it her via internal field
// calling reset does not change hasStarted to false. This is why we are doing it here via internal field
(info.closeAnimationPlayer as any)._started = false;
}
});
Expand All @@ -881,11 +881,13 @@ export class IgxOverlayService implements OnDestroy {
this.onCloseDone(info);
if (info.closeAnimationPlayer) {
info.closeAnimationPlayer.reset();
// calling reset does not change hasStarted to false. This is why we are doing it here via internal field
(info.closeAnimationPlayer as any)._started = false;
}

if (info.openAnimationPlayer && info.openAnimationPlayer.hasStarted()) {
info.openAnimationPlayer.reset();
// calling reset does not change hasStarted to false. This is why we are doing it here via internal field
(info.openAnimationPlayer as any)._started = false;
}
});
Expand Down

0 comments on commit a53b121

Please sign in to comment.