refactor(toast): emit onShown after toggle onOpened fired

Author: simeonoff

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

@@ -50,31 +50,23 @@ describe('IgxToast', () => {
         expect(domToast.id).toBe('customToast');
     });
 
-    it('should auto hide 1 second after it\'s open', fakeAsync(() => {
+    it('should auto hide after it\'s open', fakeAsync(() => {
+        spyOn(toast.onHiding, 'emit');
         toast.displayTime = 1000;
 
         toast.show();
-
-        expect(toast.isVisible).toBeTruthy();
-        expect(toast.autoHide).toBeTruthy();
-
         tick(1000);
-
-        expect(toast.isVisible).toBeFalsy();
+        expect(toast.onHiding.emit).toHaveBeenCalled();
     }));
 
     it('should not auto hide after it\'s open', fakeAsync(() => {
+        spyOn(toast.onHiding, 'emit');
         toast.displayTime = 1000;
         toast.autoHide = false;
 
         toast.show();
-
-        expect(toast.isVisible).toBeTruthy();
-        expect(toast.autoHide).toBeFalsy();
-
         tick(1000);
-
-        expect(toast.isVisible).toBeTruthy();
+        expect(toast.onHiding.emit).not.toHaveBeenCalled();
     }));
 
     it('should emit onShowing when toast is shown', () => {
@@ -83,42 +75,45 @@ describe('IgxToast', () => {
         expect(toast.onShowing.emit).toHaveBeenCalled();
     });
 
-    it('should emit onShown when super onAppended is fired', waitForAsync((done: DoneFn) => {
-        toast.show();
-
-        toast.onAppended.subscribe(() => {
-            spyOn(toast.onShown, 'emit');
-            expect(toast.onShown.emit).toHaveBeenCalled();
-            done();
-        });
-    }));
-
     it('should emit onHiding when toast is hidden', () => {
         spyOn(toast.onHiding, 'emit');
         toast.hide();
         expect(toast.onHiding.emit).toHaveBeenCalled();
     });
 
-    it('should emit onHidden when super onClosed is fired', waitForAsync((done: DoneFn) => {
+    it('should emit onShown when toggle onOpened is fired', waitForAsync(() => {
+        spyOn(toast.onShown, 'emit');
+        toast.open();
+
+        toast.onOpened.subscribe(() => {
+            expect(toast.onShown.emit).toHaveBeenCalled();
+        });
+    }));
+
+    it('should emit onHidden when toggle onClosed is fired', waitForAsync(() => {
+        spyOn(toast.onHidden, 'emit');
         toast.isVisible = true;
-        toast.hide();
+        toast.close();
 
         toast.onClosed.subscribe(() => {
-            spyOn(toast.onHidden, 'emit');
             expect(toast.onHidden.emit).toHaveBeenCalled();
-            done();
         });
     }));
 
-    it('visibility is updated by the toggle() method', () => {
+    it('visibility is updated by the toggle() method', waitForAsync((done: DoneFn) => {
+        toast.autoHide = false;
+
         toast.toggle();
-        fixture.detectChanges();
-        expect(toast.isVisible).toEqual(true);
+        toast.onOpened.subscribe(() => {
+            expect(toast.isVisible).toEqual(true);
+        });
 
         toast.toggle();
-        fixture.detectChanges();
-        expect(toast.isVisible).toEqual(false);
-    });
+        toast.onClosed.subscribe(() => {
+            expect(toast.isVisible).toEqual(false);
+            done();
+        });
+    }));
 
     it('can set message through show method', fakeAsync(() => {
         toast.displayTime = 100;

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

@@ -104,7 +104,7 @@ export class IgxToastComponent extends IgxToggleDirective
      * Emits an event when the toast is shown.
      * Provides reference to the `IgxToastComponent` as event argument.
      * ```html
-     * <igx-toast (onShown) = "onShown($event)"></igx-toast>
+     * <igx-toast (onShown)="onShown($event)"></igx-toast>
      * ```
      * @memberof IgxToastComponent
      */
@@ -115,7 +115,7 @@ export class IgxToastComponent extends IgxToggleDirective
      * Emits an event prior the toast is hidden.
      * Provides reference to the `IgxToastComponent` as event argument.
      * ```html
-     * <igx-toast (onHiding) = "onHiding($event)"></igx-toast>
+     * <igx-toast (onHiding)="onHiding($event)"></igx-toast>
      * ```
      * @memberof IgxToastComponent
      */
@@ -126,7 +126,7 @@ export class IgxToastComponent extends IgxToggleDirective
      *  Emits an event when the toast is hidden.
      *  Provides reference to the `IgxToastComponent` as event argument.
      * ```html
-     * <igx-toast (onHidden) = "onHidden($event)"></igx-toast>
+     * <igx-toast (onHidden)="onHidden($event)"></igx-toast>
      * ```
      * @memberof IgxToastComponent
      */
@@ -321,9 +321,7 @@ export class IgxToastComponent extends IgxToggleDirective
             this.toastMessage = message;
         }
 
-        this.isVisible = true;
         this.onShowing.emit(this);
-
         super.open(overlaySettings);
 
         if (this.autoHide) {
@@ -342,7 +340,6 @@ export class IgxToastComponent extends IgxToggleDirective
      */
     public hide(): void {
         clearInterval(this.timeoutId);
-        this.isVisible = false;
         this.onHiding.emit(this);
         super.close();
     }
@@ -378,12 +375,14 @@ export class IgxToastComponent extends IgxToggleDirective
      * @hidden
      */
     ngOnInit() {
-        this.onAppended.pipe(takeUntil(this.d$)).subscribe(() => {
+        this.onOpened.pipe(takeUntil(this.d$)).subscribe(() => {
             this.onShown.emit(this);
+            this.isVisible = true;
         });
 
         this.onClosed.pipe(takeUntil(this.d$)).subscribe(() => {
             this.onHidden.emit(this);
+            this.isVisible = false;
         });
     }
 

src/app/toast/toast.sample.ts

@@ -27,7 +27,7 @@ export class ToastSampleComponent {
     }
 
     handleHiding(event) {
-        console.log('toast hiding', event);
+        console.log('hiding toast', event);
     }
 
     handleHidden(event) {