Merge pull request #10813 from IgniteUI/toast-coverage

damyanpetev · web-flow · commit 9626c2fca730 · 2022-01-13T14:27:01.000+02:00
test(toast): refactor, increase coverage #10812
diff --git a/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts b/projects/igniteui-angular/src/lib/toast/toast.component.spec.ts
@@ -1,122 +1,109 @@
-import { Component, ViewChild } from '@angular/core';
 import {
     waitForAsync,
     TestBed,
     ComponentFixture,
+    flushMicrotasks,
+    fakeAsync,
 } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
     IgxToastComponent,
     IgxToastModule,
 } from './toast.component';
 import { configureTestSuite } from '../test-utils/configure-suite';
-import { useAnimation } from '@angular/animations';
-import { HorizontalAlignment, PositionSettings, slideInLeft, slideInRight, VerticalAlignment } from 'igniteui-angular';
+import { HorizontalAlignment, PositionSettings, VerticalAlignment } from 'igniteui-angular';
 
 describe('IgxToast', () => {
     configureTestSuite();
     beforeAll(waitForAsync(() => {
         TestBed.configureTestingModule({
-            declarations: [ToastInitializeTestComponent],
             imports: [NoopAnimationsModule, IgxToastModule]
         }).compileComponents();
     }));
 
-    const baseClass = 'igx-toast';
-    let fixture: ComponentFixture<ToastInitializeTestComponent>;
+    const baseId = 'igx-toast-';
+    let fixture: ComponentFixture<IgxToastComponent>;
     let toast: IgxToastComponent;
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(ToastInitializeTestComponent);
-        toast = fixture.componentInstance.toast;
+        fixture = TestBed.createComponent(IgxToastComponent);
+        toast = fixture.componentInstance;
         fixture.detectChanges();
     });
 
     it('should properly initialize', () => {
-        const domToast = fixture.debugElement.query(By.css(baseClass))
-            .nativeElement;
-        expect(toast.id).toContain('igx-toast-');
-        expect(domToast.id).toContain('igx-toast-');
+        expect(toast.id).toContain(baseId);
+        expect(toast.element.id).toContain(baseId);
 
         toast.id = 'customToast';
         fixture.detectChanges();
 
         expect(toast.id).toBe('customToast');
-        expect(domToast.id).toBe('customToast');
+        expect(toast.element.id).toContain('customToast');
     });
 
-    it('should properly change verical position', () => {
-        expect(toast.position).toBe('bottom');
-        expect(toast.positionSettings.verticalDirection).toBe(0);
+    it('should properly toggle and emit isVisibleChange', fakeAsync(() => {
+        spyOn(toast.isVisibleChange, 'emit').and.callThrough();
+        expect(toast.isVisible).toBe(false);
+        expect(toast.isVisibleChange.emit).toHaveBeenCalledTimes(0);
 
-        toast.position = 'top';
-        fixture.detectChanges();
-        expect(toast.positionSettings.verticalDirection).toBe(-1);
-    });
+        toast.toggle();
+        expect(toast.isVisible).toBe(true);
+        flushMicrotasks();
+        expect(toast.isVisibleChange.emit).toHaveBeenCalledOnceWith({ owner: toast, id: '0' });
+
+        toast.toggle();
+        flushMicrotasks();
+        expect(toast.isVisible).toBe(false);
+        expect(toast.isVisibleChange.emit).toHaveBeenCalledTimes(2);
+    }));
 });
 
 describe('IgxToast with positionSettings', () => {
     configureTestSuite();
     beforeAll(waitForAsync(() => {
         TestBed.configureTestingModule({
-            declarations: [ToastPositionSettingsTestComponent],
             imports: [NoopAnimationsModule, IgxToastModule]
         }).compileComponents();
     }));
 
-    let fixture: ComponentFixture<ToastPositionSettingsTestComponent>;
+    let fixture: ComponentFixture<IgxToastComponent>;
     let toast: IgxToastComponent;
+    let firstPositionSettings: PositionSettings = {
+        horizontalDirection: HorizontalAlignment.Left,
+        verticalDirection: VerticalAlignment.Middle,
+        horizontalStartPoint: HorizontalAlignment.Left,
+        verticalStartPoint: VerticalAlignment.Middle
+    };
+    let secondPositionSettings: PositionSettings = {
+        horizontalDirection: HorizontalAlignment.Center,
+        verticalDirection: VerticalAlignment.Middle,
+        horizontalStartPoint: HorizontalAlignment.Center,
+        verticalStartPoint: VerticalAlignment.Middle
+    };
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(ToastPositionSettingsTestComponent);
-        toast = fixture.componentInstance.toast;
+        fixture = TestBed.createComponent(IgxToastComponent);
+        toast = fixture.componentInstance;
         fixture.detectChanges();
     });
 
     it('should be able to change positionSettings', () => {
+        toast.positionSettings = firstPositionSettings;
         expect(toast.positionSettings.horizontalDirection).toBe(-1);
         expect(toast.positionSettings.verticalDirection).toBe(-0.5);
-        toast.positionSettings = fixture.componentInstance.secondPositionSettings;
+        toast.positionSettings = secondPositionSettings;
         fixture.detectChanges();
         expect(toast.positionSettings.horizontalDirection).toBe(-0.5);
         expect(toast.positionSettings.verticalDirection).toBe(-0.5);
     });
 
     it('positionSettings passed in the open method should be applied', () => {
-        const positions = fixture.componentInstance.secondPositionSettings;
-        toast.open(undefined, positions);
+        const positions = secondPositionSettings;
+        toast.open("New Message", positions);
         fixture.detectChanges();
         expect(toast.positionSettings.horizontalDirection).toBe(-0.5);
         expect(toast.positionSettings.verticalDirection).toBe(-0.5);
+        expect(toast.textMessage).toBe("New Message");
     });
 });
-
-@Component({
-    template: `<igx-toast #toast></igx-toast>`,
-})
-class ToastInitializeTestComponent {
-    @ViewChild(IgxToastComponent, { static: true })
-    public toast: IgxToastComponent;
-}
-
-@Component({
-    template: `<igx-toast #toast [positionSettings]="firstPositionSettings"></igx-toast>`,
-})
-class ToastPositionSettingsTestComponent {
-    @ViewChild(IgxToastComponent, { static: true })
-    public toast: IgxToastComponent;
-    public firstPositionSettings: PositionSettings = {
-        horizontalDirection: HorizontalAlignment.Left,
-        verticalDirection: VerticalAlignment.Middle,
-        horizontalStartPoint: HorizontalAlignment.Left,
-        verticalStartPoint: VerticalAlignment.Middle
-    };
-    public secondPositionSettings: PositionSettings = {
-        horizontalDirection: HorizontalAlignment.Center,
-        verticalDirection: VerticalAlignment.Middle,
-        horizontalStartPoint: HorizontalAlignment.Center,
-        verticalStartPoint: VerticalAlignment.Middle
-    };
-}
-
diff --git a/projects/igniteui-angular/src/lib/toast/toast.component.ts b/projects/igniteui-angular/src/lib/toast/toast.component.ts
@@ -8,11 +8,9 @@ import {
     Inject,
     Input,
     NgModule,
-    OnChanges,
     OnInit,
     Optional,
-    Output,
-    SimpleChanges
+    Output
 } from '@angular/core';
 import { takeUntil } from 'rxjs/operators';
 import { IgxNavigationService } from '../core/navigation';
@@ -23,29 +21,13 @@ import {
     GlobalPositionStrategy,
     PositionSettings
 } from '../services/public_api';
-import { mkenum } from '../core/utils';
 import { IgxNotificationsDirective } from '../directives/notification/notifications.directive';
 import { ToggleViewEventArgs } from '../directives/toggle/toggle.directive';
 import { useAnimation } from '@angular/animations';
 import { fadeIn, fadeOut } from '../animations/fade';
 
 let NEXT_ID = 0;
 
-/**
- * Enumeration for toast position
- * Can be:
- * Bottom
- * Middle
- * Top
- */
-export const IgxToastPosition = mkenum({
-    Bottom: 'bottom',
-    Middle: 'middle',
-    Top: 'top'
-});
-
-export type IgxToastPosition = (typeof IgxToastPosition)[keyof typeof IgxToastPosition];
-
 /**
  * **Ignite UI for Angular Toast** -
  * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast)
@@ -65,7 +47,7 @@ export type IgxToastPosition = (typeof IgxToastPosition)[keyof typeof IgxToastPo
     selector: 'igx-toast',
     templateUrl: 'toast.component.html'
 })
-export class IgxToastComponent extends IgxNotificationsDirective implements OnInit, OnChanges {
+export class IgxToastComponent extends IgxNotificationsDirective implements OnInit {
     /**
      * @hidden
      */
@@ -108,32 +90,6 @@ export class IgxToastComponent extends IgxNotificationsDirective implements OnIn
     @Output()
     public isVisibleChange = new EventEmitter<ToggleViewEventArgs>();
 
-    /**
-     * @deprecated in version 12.2.3. We suggest using `positionSettings` property instead
-     *
-     * Sets/gets the position of the toast.
-     * If not set, the `position` attribute will have value `IgxToastPosition.Bottom`.
-     * ```html
-     * <igx-toast [position]="top"></igx-toast>
-     * ```
-     * ```typescript
-     * let toastPosition = this.toast.position;
-     * ```
-     *
-     * @memberof IgxToastComponent
-     */
-    @Input()
-    public get position(): IgxToastPosition {
-        return this._position;
-    }
-
-    public set position(position: IgxToastPosition) {
-        if (position) {
-            this._position = position;
-            this._positionSettings.verticalDirection = this.calculatePosition();
-        }
-    }
-
     /**
      * Get the position and animation settings used by the toast.
      * ```typescript
@@ -170,7 +126,6 @@ export class IgxToastComponent extends IgxNotificationsDirective implements OnIn
          this._positionSettings = settings;
      }
 
-     private _position: IgxToastPosition = 'bottom';
      private _positionSettings: PositionSettings = {
         horizontalDirection: HorizontalAlignment.Center,
         verticalDirection: VerticalAlignment.Bottom,
@@ -247,20 +202,6 @@ export class IgxToastComponent extends IgxNotificationsDirective implements OnIn
             this.isVisibleChange.emit(closedEventArgs);
         });
     }
-
-    public ngOnChanges(changes: SimpleChanges) {
-        if (changes['position'] && this._positionSettings) {
-            this._positionSettings.verticalDirection = this.calculatePosition();
-        }
-    }
-
-    private calculatePosition() {
-        return this.position === 'bottom'
-            ? VerticalAlignment.Bottom
-            : this.position === 'middle'
-                ? VerticalAlignment.Middle
-                : VerticalAlignment.Top;
-    }
 }
 
 /**
diff --git a/src/app/drop-down/drop-down-virtual/drop-down-virtual.component.ts b/src/app/drop-down/drop-down-virtual/drop-down-virtual.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';
 import { RemoteService } from 'src/app/shared/remote.service';
 import { Observable } from 'rxjs';
-import { IForOfState, IgxDropDownComponent, IgxToastComponent, IgxForOfDirective, DisplayDensity } from 'igniteui-angular';
+import { IForOfState, IgxDropDownComponent, IgxToastComponent, IgxForOfDirective, DisplayDensity, VerticalAlignment } from 'igniteui-angular';
 
 interface DataItem {
   name: string;
@@ -63,7 +63,7 @@ export class DropDownVirtualComponent implements OnInit, AfterViewInit {
     if (this.prevRequest) {
         this.prevRequest.unsubscribe();
     }
-    this.loadingToast.position = 'middle';
+    this.loadingToast.positionSettings.verticalDirection = VerticalAlignment.Middle;
     this.loadingToast.autoHide = false;
     this.loadingToast.open('Loading Remote Data...');
     this.cdr.detectChanges();
diff --git a/src/app/grid/grid.sample.ts b/src/app/grid/grid.sample.ts
@@ -15,7 +15,8 @@ import {
     IgxExcelExporterService,
     IgxStringFilteringOperand,
     DefaultSortingStrategy,
-    GridSelectionMode
+    GridSelectionMode,
+    VerticalAlignment
 } from 'igniteui-angular';
 import { RemoteService } from '../shared/remote.service';
 import { LocalService } from '../shared/local.service';
@@ -118,7 +119,7 @@ export class GridSampleComponent implements OnInit, AfterViewInit {
     }
 
     public process() {
-        this.toast.position = 'bottom';
+        this.toast.positionSettings.verticalDirection = VerticalAlignment.Bottom;
         this.toast.open('Loading remote data');
         this.remoteService.getData(this.grid3.data, () => {
             this.toast.close();
diff --git a/src/app/toast/toast.sample.html b/src/app/toast/toast.sample.html
@@ -5,7 +5,7 @@ <h4 class="sample-title">Bottom Position</h4>
             <button
                 igxButton="raised"
                 igxRipple="white"
-                (click)="showToast(toast, 'bottom')"
+                (click)="showToast(toast, position.Bottom)"
                 [disabled]="toast.isVisible"
             >
                 Show Toast
@@ -27,7 +27,7 @@ <h4 class="sample-title">Middle Position</h4>
             <button
                 igxButton="raised"
                 igxRipple="white"
-                (click)="showToast(toast, 'middle')"
+                (click)="showToast(toast, position.Middle)"
                 [disabled]="toast.isVisible"
             >
                 Show Toast
@@ -49,7 +49,7 @@ <h4 class="sample-title">Top Position</h4>
             <button
                 igxButton="raised"
                 igxRipple="white"
-                (click)="showToast(toast, 'top')"
+                (click)="showToast(toast, position.Top)"
                 [disabled]="toast.isVisible"
             >
                 Show Toast
diff --git a/src/app/toast/toast.sample.ts b/src/app/toast/toast.sample.ts
@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { IgxToastComponent, IgxToastPosition } from 'igniteui-angular';
+import { IgxToastComponent, VerticalAlignment } from 'igniteui-angular';
 
 @Component({
     selector: 'app-toast-sample',
@@ -9,9 +9,10 @@ import { IgxToastComponent, IgxToastPosition } from 'igniteui-angular';
 export class ToastSampleComponent {
     @ViewChild('toast')
     public toast: IgxToastComponent;
+    public position = VerticalAlignment;
 
-    public showToast(toast: IgxToastComponent, pos: IgxToastPosition) {
-        toast.position = pos;
+    public showToast(toast: IgxToastComponent, pos: VerticalAlignment) {
+        toast.positionSettings.verticalDirection = pos;
         toast.open();
     }
 
