Added unitests for ToastyComponent

README.md

@@ -40,3 +40,5 @@ bootstrap(AppComponent, [
 })
 export class AppComponent {}
 ```
+
+Inspired by [angular-toasty](https://github.com/teamfa/angular-toasty)

src/toasty.component.ts

@@ -1,60 +1,46 @@
-import {Component, Input, OnInit, Output, EventEmitter} from 'angular2/core';
+import {Component, Input, Output, EventEmitter} from 'angular2/core';
 import {CORE_DIRECTIVES} from 'angular2/common';
 
 import {ToastyConfig} from './toasty.config';
 import {Toast} from './toasty.service';
 
 /**
- * This a toast component.
+ * This a toast component shows message with title and close button.
  */
 @Component({
     selector: 'ng2-toast',
     directives: [CORE_DIRECTIVES],
     template: `
-        <div class="toast" [ngClass]="setClasses()" (click)="clickToasty($event)">
-            <div (click)="close($event)" class="close-button" *ngIf="toast.showClose"></div>
+        <div class="toast" [ngClass]="[toast.type, toast.theme, toast.shake]" (click)="clickToasty($event)">
+            <div *ngIf="toast.showClose" class="close-button" (click)="close($event)"></div>
             <div *ngIf="toast.title || toast.msg" class="toast-text">
-            <span class="toast-title" *ngIf="!toast.html && toast.title" [innerHtml]="toast.title"></span>
-            <span class="toast-title" *ngIf="toast.html && toast.title" [innerHtml]="toast.title"></span>
-            <br *ngIf="toast.title && toast.msg" />
-            <span class="toast-msg" *ngIf="!toast.html && toast.msg" [innerHtml]="toast.msg"></span>
-            <span class="toast-msg" *ngIf="toast.html && toast.msg" [innerHtml]="toast.msg"></span>
+                <span *ngIf="toast.title" class="toast-title">{{toast.title}}</span>
+                <br *ngIf="toast.title && toast.msg" />
+                <span *ngIf="toast.msg" class="toast-msg">{{toast.msg}}</span>
+            </div>
         </div>`
 })
-export class ToastyComponent implements OnInit {
+export class ToastyComponent {
 
     @Input() toast:Toast;
     @Output('closeToast') closeToastEvent = new EventEmitter();
     @Output('clickOnToast') clickOnToastEvent = new EventEmitter();
 
-    constructor() {}
-
-    ngOnInit(): any {
-        // console.log('toast', this.toast);
-    }
-
-    setClasses() {
-        return {
-            type:this.toast.type,
-            interact:this.toast.interact,
-            shake:this.toast.shake,
-            theme:this.toast.theme
-        };
-    }
-
     /**
-     * On ng-click="close", remove the specific toast
+     * Event handler invokes when user clicks on close button.
+     * This method emit new event to ToastyContainer to close it.
      */
     close($event:any) {
         $event.preventDefaults();
-        this.closeToastEvent.emit('closeToastEvent');
+        this.closeToastEvent.emit('closeToast');
     }
 
     /**
-     * On ng-click="close", remove the specific toast
+     * Event handler invokes when user clicks on body of ToastyComponent.
+     * This method emit new event to ToastyContainer call method onClick and close it if flag clickToClose set true.
      */
     clickToasty($event:any) {
         $event.preventDefaults();
-        this.clickOnToastEvent.emit('clickOnToastEvent');
+        this.clickOnToastEvent.emit('clickOnToast');
     }
 }

src/toasty.container.ts

@@ -8,6 +8,9 @@ import {ToastyConfig} from './toasty.config';
 import {ToastyService, Toast} from './toasty.service';
 import {ToastyComponent} from './toasty.component';
 
+/**
+ * This container for toasts.
+ */
 @Component({
     selector: 'ng2-toasty',
     encapsulation: ViewEncapsulation.None,
@@ -19,12 +22,20 @@ import {ToastyComponent} from './toasty.component';
 })
 export class ToastyContainer implements OnInit {
 
-    // Init the position
-    @Input() position: string = '';
+    // The window position where the toast pops upk. Possible values:
+    // - bottom-right (default valie from ToastConfig)
+    // - bottom-left
+    // - top-right
+    // - top-left
+    // - top-center
+    // - bottom-center
+    @Input() position: string;
 
-    // Init the toasty store
+    // The storage for toasts.
     toasts: Array<Toast> = [];
 
+    static POSITIONS:Array<String> = ['bottom-right', 'bottom-left', 'top-right', 'top-left', 'top-center', 'bottom-center'];
+
     constructor(private config:ToastyConfig, private toastyService:ToastyService) {}
 
     ngOnInit(): any {
@@ -41,19 +52,40 @@ export class ToastyContainer implements OnInit {
             // If there's a timeout individually or globally,
             // set the toast to timeout
             if (toast.timeout) {
-                this.setTimeout(toast);
+                this._setTimeout(toast);
             }
         });
+        if (this.position) {
+            let notFound:boolean = true;
+            for (var i = 0; i < ToastyContainer.POSITIONS.length; i++) {
+                if (ToastyContainer.POSITIONS[i] === this.position) {
+                    notFound = false;
+                    break;
+                }
+            }
+            if (notFound) {
+                // Position was wrong - clear it here to use the one from config.
+                this.position = this.config.position;
+            }
+        } else {
+            this.position = this.config.position;
+        }
+        this.position = 'toasty-position-' + this.position;
     }
 
     /**
-     * On ng-click="close", remove the specific toast
+     * Event listener of 'closeToast' event comes from ToastyComponent.
+     * This method removes ToastComponent assosiated with this Toast.
      */
     closeToast(toast:Toast) {
         this.clear(toast.id);
     }
 
-    // On ng-click="close", remove the specific toast
+    /**
+     * Event listener of 'clickOnToast'event comes from ToastyComponent.
+     * This method invokes onClick method of Toast.
+     * It can removes ToastComponent assosiated with this Toast if clickToClose of Toast was set.
+     */
     clickOnToast(toast:Toast) {
         //scope.$broadcast('toasty-clicked', toast);
         if (toast.onClick && isFunction(toast.onClick))
@@ -89,7 +121,7 @@ export class ToastyContainer implements OnInit {
 
     // Custom setTimeout function for specific
     // setTimeouts on individual toasts
-    setTimeout(toast:Toast) {
+    private _setTimeout(toast:Toast) {
         window.setTimeout(() => {
             console.log('clear', toast.id);
             this.clear(toast.id);