enable toast content and edit tests

Author: SisIvanova

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

@@ -1 +1,3 @@
-<span>{{ message }}</span>
+<div #content><ng-content></ng-content></div>
+<span *ngIf="content.children.length == 0">{{ message }}</span>
+

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

@@ -3,7 +3,6 @@ import {async, TestBed, fakeAsync, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {IgxToastComponent, IgxToastModule, IgxToastPosition} from './toast.component';
-
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { wait } from '../test-utils/ui-interactions.spec';
 
@@ -20,6 +19,13 @@ describe('IgxToast', () => {
             ]
         }).compileComponents();
     }));
+    const baseClass = 'igx-toast';
+
+    const classes = {
+        top: `${baseClass}--top`,
+        middle: `${baseClass}--middle`,
+        bottom: `${baseClass}--bottom`,
+    };
     let fixture, toast, element;
     beforeEach(() => {
         fixture = TestBed.createComponent(ToastInitializeTestComponent);
@@ -30,14 +36,13 @@ describe('IgxToast', () => {
     });
 
     it('should properly initialize properties', () => {
-        const domToast = fixture.debugElement.query(By.css('igx-toast')).nativeElement;
+        const domToast = fixture.debugElement.query(By.css(baseClass)).nativeElement;
         expect(toast.id).toContain('igx-toast-');
         expect(domToast.id).toContain('igx-toast-');
-        expect(toast.message).toBeUndefined();
         expect(toast.displayTime).toBe(4000);
         expect(toast.autoHide).toBeTruthy();
         expect(toast.isVisible).toBeTruthy();
-        expect(element.classes[toast.CSS_CLASSES.IGX_TOAST_BOTTOM]).toBeTruthy();
+        expect(domToast.classList).toContain(classes.bottom);
 
         toast.id = 'customToast';
         fixture.detectChanges();
@@ -49,26 +54,29 @@ describe('IgxToast', () => {
     it('should change toast position to middle', () => {
         toast.position = IgxToastPosition.Middle;
         fixture.detectChanges();
+        const domToast = fixture.debugElement.query(By.css(baseClass)).nativeElement;
 
         element = fixture.debugElement.query(By.css('.igx-toast--middle'));
-        expect(element.classes[toast.CSS_CLASSES.IGX_TOAST_MIDDLE]).toBeTruthy();
+        expect(domToast.classList).toContain(classes.middle);
     });
 
     it('should change toast position to top', () => {
         toast.position = IgxToastPosition.Top;
         fixture.detectChanges();
+        const domToast = fixture.debugElement.query(By.css(baseClass)).nativeElement;
 
         element = fixture.debugElement.query(By.css('.igx-toast--top'));
-        expect(element.classes[toast.CSS_CLASSES.IGX_TOAST_TOP]).toBeTruthy();
+        expect(domToast.classList).toContain(classes.top);
     });
 
     it('should change toast position to bottom, the rest should be undefined', () => {
         toast.position = IgxToastPosition.Bottom;
         fixture.detectChanges();
+        const domToast = fixture.debugElement.query(By.css(baseClass)).nativeElement;
 
-        expect(element.classes[toast.CSS_CLASSES.IGX_TOAST_TOP]).toBeUndefined();
-        expect(element.classes[toast.CSS_CLASSES.IGX_TOAST_MIDDLE]).toBeUndefined();
-        expect(element.classes[toast.CSS_CLASSES.IGX_TOAST_BOTTOM]).toBe(true);
+        expect(domToast.classList).not.toContain(classes.top);
+        expect(domToast.classList).not.toContain(classes.middle);
+        expect(domToast.classList).toContain(classes.bottom);
     });
 
     it('should auto hide 1 second after is open', fakeAsync(() => {
@@ -77,11 +85,13 @@ describe('IgxToast', () => {
         toast.show();
 
         expect(toast.isVisible).toBeTruthy();
+        expect(toast._animationState).toBe('visible');
         expect(toast.autoHide).toBeTruthy();
 
         tick(1000);
         fixture.detectChanges();
         expect(toast.isVisible).toBeFalsy();
+        expect(toast._animationState).toBe('invisible');
     }));
 
     it('should not auto hide seconds after is open', fakeAsync(() => {
@@ -91,11 +101,13 @@ describe('IgxToast', () => {
         toast.show();
 
         expect(toast.isVisible).toBeTruthy();
+        expect(toast._animationState).toBe('visible');
         expect(toast.autoHide).toBeFalsy();
 
         tick(1000);
         fixture.detectChanges();
         expect(toast.isVisible).toBeTruthy();
+        expect(toast._animationState).toBe('visible');
     }));
 
     it('visibility is properly toggled by its toggle() method.', (async() => {
@@ -105,11 +117,13 @@ describe('IgxToast', () => {
         spyOn(toast.onHidden, 'emit');
 
         expect(toast.isVisible).toBe(true);
+        // expect(toast._animationState).toBe('visible');
         toast.toggle();
         await wait();
         fixture.detectChanges();
 
         expect(toast.isVisible).toBe(false);
+        expect(toast._animationState).toBe('invisible');
         expect(toast.onShowing.emit).toHaveBeenCalledTimes(0);
         expect(toast.onShown.emit).toHaveBeenCalledTimes(0);
         expect(toast.onHiding.emit).toHaveBeenCalledTimes(1);
@@ -120,6 +134,7 @@ describe('IgxToast', () => {
         fixture.detectChanges();
 
         expect(toast.isVisible).toBe(true);
+        expect(toast._animationState).toBe('visible');
         expect(toast.onShowing.emit).toHaveBeenCalledTimes(1);
         expect(toast.onShown.emit).toHaveBeenCalledTimes(1);
         expect(toast.onHiding.emit).toHaveBeenCalledTimes(1);
@@ -129,6 +144,7 @@ describe('IgxToast', () => {
         await wait();
         fixture.detectChanges();
         expect(toast.isVisible).toBe(false);
+        expect(toast._animationState).toBe('invisible');
     }));
 });
 @Component({

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

@@ -13,6 +13,7 @@ import {
     Output
 } from '@angular/core';
 import { IgxNavigationService, IToggleView } from '../core/navigation';
+import { DeprecateProperty } from '../core/deprecateDecorators';
 
 let NEXT_ID = 0;
 /**
@@ -187,6 +188,7 @@ export class IgxToastComponent implements IToggleView, OnInit, OnDestroy {
     public isVisibleChange = new EventEmitter<boolean>();
 
     /**
+     * @deprecated Place your message in the toast content instead.
      * Sets/gets the message that will be shown by the toast.
      * ```html
      * <igx-toast [message] = "Notification"></igx-toast>
@@ -196,8 +198,9 @@ export class IgxToastComponent implements IToggleView, OnInit, OnDestroy {
      * ```
      * @memberof IgxToastComponent
      */
+    @DeprecateProperty(`'message' @Input property is deprecated. Place your message in the toast content instead.`)
     @Input()
-    public message: string;
+    public message = '';
 
     /**
      * Sets/gets the position of the toast.

src/app/toast/toast.sample.html

@@ -29,6 +29,7 @@ <h4 class="sample-title">Top Position</h4>
         </article>
     </section>
 
-    <igx-toast #toast message="This message will self-destruct in 4 seconds." [position]="toastPosition">
+    <igx-toast #toast [position]="toastPosition">
+        This message will self-destruct in 4 seconds.
     </igx-toast>
 </div>