test(toast): refactor tests

Author: simeonoff

projects/igniteui-angular/src/lib/toast/toast.component.spec.ts

@@ -1,6 +1,6 @@
 import { Component, ViewChild } from '@angular/core';
 import {
-    async,
+    waitForAsync,
     TestBed,
     fakeAsync,
     tick,
@@ -14,17 +14,16 @@ import {
 } from './toast.component';
 import { configureTestSuite } from '../test-utils/configure-suite';
 
-describe('IgxToast', () => {
+fdescribe('IgxToast', () => {
     configureTestSuite();
-    beforeAll(async(() => {
+    beforeAll(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [ToastInitializeTestComponent],
             imports: [BrowserAnimationsModule, IgxToastModule],
         }).compileComponents();
     }));
 
     const baseClass = 'igx-toast';
-    const activeClass = 'igx-toast--active';
     let fixture: ComponentFixture<ToastInitializeTestComponent>;
     let toast: IgxToastComponent;
 
@@ -43,7 +42,6 @@ describe('IgxToast', () => {
         expect(toast.displayTime).toBe(4000);
         expect(toast.autoHide).toBeTruthy();
         expect(toast.isVisible).toBeTruthy();
-        expect(domToast.classList).toContain(activeClass);
 
         toast.id = 'customToast';
         fixture.detectChanges();
@@ -79,28 +77,52 @@ describe('IgxToast', () => {
         expect(toast.isVisible).toBeTruthy();
     }));
 
-    it('visibility is updated by the toggle() method', () => {
-        spyOn(toast.onShowing, 'emit');
-        spyOn(toast.onShown, 'emit');
-        spyOn(toast.onHiding, 'emit');
-        spyOn(toast.onHidden, 'emit');
+    it('should emit onShowing when super onOpening is fired', waitForAsync(() => {
+        toast.show();
+
+        toast.onOpening.subscribe(() => {
+            spyOn(toast.onShowing, 'emit');
+            expect(toast.onShowing.emit).toHaveBeenCalled();
+        });
+    }));
 
+    it('should emit onShown when super onAppended is fired', waitForAsync(() => {
         toast.show();
-        expect(toast.isVisible).toBe(true);
 
-        expect(toast.onShowing.emit).toHaveBeenCalledTimes(1);
-        expect(toast.onShown.emit).toHaveBeenCalledTimes(1);
-        expect(toast.onHiding.emit).toHaveBeenCalledTimes(0);
-        expect(toast.onHidden.emit).toHaveBeenCalledTimes(0);
+        toast.onAppended.subscribe(() => {
+            spyOn(toast.onShown, 'emit');
+            expect(toast.onShown.emit).toHaveBeenCalled();
+        });
+    }));
+
+    it('should emit onHiding when super onClosing is fired', waitForAsync(() => {
+        toast.isVisible = true;
+        toast.hide();
+
+        toast.onClosing.subscribe(() => {
+            spyOn(toast.onHiding, 'emit');
+            expect(toast.onHiding.emit).toHaveBeenCalled();
+        });
+    }));
 
+    it('should emit onHidden when super onClosed is fired', waitForAsync(() => {
+        toast.isVisible = true;
+        toast.hide();
+
+        toast.onClosed.subscribe(() => {
+            spyOn(toast.onHidden, 'emit');
+            expect(toast.onHidden.emit).toHaveBeenCalled();
+        });
+    }));
+
+    it('visibility is updated by the toggle() method', waitForAsync(() => {
+        toast.isVisible = true;
         toast.toggle();
-        expect(toast.isVisible).toBe(false);
 
-        expect(toast.onShowing.emit).toHaveBeenCalledTimes(1);
-        expect(toast.onShown.emit).toHaveBeenCalledTimes(1);
-        expect(toast.onHiding.emit).toHaveBeenCalledTimes(1);
-        expect(toast.onHidden.emit).toHaveBeenCalledTimes(1);
-    });
+        toast.onHiding.subscribe(() => {
+            expect(toast.isVisible).toEqual(false);
+        });
+    }));
 
     it('can set message through show method', fakeAsync(() => {
         toast.displayTime = 100;

projects/igniteui-angular/src/lib/toast/toast.component.ts

@@ -262,7 +262,7 @@ export class IgxToastComponent extends IgxToggleDirective
      * @memberof IgxToastComponent
      */
     public get element() {
-        return this._element.nativeElement;
+        return this.element.nativeElement;
     }
 
     /**
@@ -277,7 +277,7 @@ export class IgxToastComponent extends IgxToggleDirective
     private timeoutId: number;
 
     constructor(
-        private _element: ElementRef,
+        _element: ElementRef,
         cdr: ChangeDetectorRef,
         @Optional() navService: IgxNavigationService,
         @Inject(IgxOverlayService) overlayService: IgxOverlayService
@@ -321,17 +321,17 @@ export class IgxToastComponent extends IgxToggleDirective
             this.onShowing.emit(this);
         });
 
+        this.onAppended.subscribe(() => {
+            this.onShown.emit(this);
+        });
+
+        super.open(overlaySettings);
+
         if (this.autoHide) {
             this.timeoutId = window.setTimeout(() => {
                 this.hide();
             }, this.displayTime);
         }
-
-        super.open(overlaySettings);
-
-        this.onOpened.subscribe(() => {
-            this.onShown.emit(this);
-        });
     }
 
     /**