feat(library): Upgrade library to Angular 2.0.0-rc.5

The library has been updated to Angular 2.0.0-rc5
Toaster has been encapsulated in an ngModule
Declarations that became obsolete have been removed
Test setup has been adapted according to Angular 2.0.0-rc5
Remove unused variables

Closes Stabzs#47

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 0.3.6-rc.5 (2016-08-18)
+### Features
+* **Angular: RC5:** The library has been updated to Angular RC5.
+* **Angular:** Toaster is now encapsulated in an ngModule **ToastModule** [#47](https://github.com/Stabzs/Angular2-Toaster/issues/47).
+
+
 # 0.3.6-rc.4 (2016-07-07)
 ### Features
 * **Angular: RC4:** The library has been updated to Angular RC4.

README.md

@@ -6,7 +6,7 @@ largely based off of [AngularJS-Toaster](https://github.com/jirikavi/AngularJS-T
 [![Build Status](https://travis-ci.org/Stabzs/Angular2-Toaster.svg?branch=master)](https://travis-ci.org/Stabzs/Angular2-Toaster)
 [![Coverage Status](https://coveralls.io/repos/github/Stabzs/Angular2-Toaster/badge.svg?branch=master&busted=0.3.6-rc.4)](https://coveralls.io/github/Stabzs/Angular2-Toaster?branch=master)
 
-### Current Version 0.3.6-rc.4
+### Current Version 0.3.6-rc.5
 
 ## Installation:
 

angular2-toaster.d.ts

@@ -3,4 +3,5 @@ export * from './lib/toast';
 export * from './lib/toast.component';
 export * from './lib/toaster-config';
 export * from './lib/toaster-container.component';
-export * from './lib/toaster.service';
+export * from './lib/toaster.service';
+export * from './lib/toast.module';

angular2-toaster.js

@@ -3,4 +3,5 @@ exports.Toast = require('./lib/toast').Toast;
 exports.ToastComponent = require('./lib/toast.component').ToastComponent;
 exports.ToasterConfig = require('./lib/toaster-config').ToasterConfig;
 exports.ToasterContainerComponent = require('./lib/toaster-container.component').ToasterContainerComponent;
-exports.ToasterService = require('./lib/toaster.service').ToasterService;
+exports.ToasterService = require('./lib/toaster.service').ToasterService;
+exports.TostModule = require('./lib/toast.module').ToastModule;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-toaster",
-  "version": "0.3.6-rc.4",
+  "version": "0.3.6-rc.5",
   "description": "An Angular 2 Toaster Notification library based on AngularJS-Toaster",
   "main": "angular2-toaster.ts",
   "scripts": {
@@ -34,11 +34,11 @@
   },
   "typings": "./angular2-toaster.d.ts",
   "dependencies": {
-    "@angular/common": "^2.0.0-rc.4",
-    "@angular/compiler": "^2.0.0-rc.4",
-    "@angular/core": "^2.0.0-rc.4",
-    "@angular/platform-browser": "^2.0.0-rc.4",
-    "@angular/platform-browser-dynamic": "^2.0.0-rc.4",
+    "@angular/common": "^2.0.0-rc.5",
+    "@angular/compiler": "^2.0.0-rc.5",
+    "@angular/core": "^2.0.0-rc.5",
+    "@angular/platform-browser": "^2.0.0-rc.5",
+    "@angular/platform-browser-dynamic": "^2.0.0-rc.5",
     "rxjs": "5.0.0-beta.6"
   },
   "devDependencies": {

src/toast.component.ts

@@ -2,7 +2,7 @@ import {Component, Input, ViewChild, ComponentResolver, ViewContainerRef, EventE
 from '@angular/core';
 import {DomSanitizationService, SafeHtml} from '@angular/platform-browser'
 
-import {Toast, ClickHandler} from './toast';
+import {Toast} from './toast';
 import {BodyOutputType} from './bodyOutputType';
 
 @Component({

src/toast.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ToastComponent} from './toast.component';
+import {ToasterContainerComponent} from './toaster-container.component';
+import {ToasterService} from './toaster.service';
+
+@NgModule({
+    imports: [BrowserModule],
+    declarations: [ToastComponent, ToasterContainerComponent],
+    providers: [ToasterService],
+    exports: [ToasterContainerComponent, ToastComponent],
+})
+export class ToastModule {}

src/toaster-container.component.spec.ts

@@ -1,24 +1,19 @@
-import {Component, Input, ChangeDetectorRef, provide, ComponentResolver} 
-    from '@angular/core';
-
-import {
-    describe, expect, it, inject, async, beforeEach, beforeEachProviders
-} from '@angular/core/testing';
-
-import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing';
+import {Component} from '@angular/core';
+import {TestBed} from '@angular/core/testing/test_bed';
+import {ComponentFixture} from '@angular/core/testing/component_fixture';
 
 import {Toast} from './toast';
 import {ToasterService} from './toaster.service';
 import {ToasterContainerComponent} from './toaster-container.component';
 import {ToasterConfig} from './toaster-config';
 import {BodyOutputType} from './bodyOutputType';
+import {ToastModule} from './toast.module';
+import {BrowserModule} from '@angular/platform-browser';
 
 // Mock component for bootstrapping <toaster-container></toaster-container>
 @Component({
     selector: 'test-component',
     template: '<toaster-container [toasterconfig]="toasterconfig"></toaster-container>',
-    directives: [ToasterContainerComponent],
-    providers: [ToasterService],
 })
 export class TestComponent {
     toasterService: ToasterService;
@@ -42,24 +37,19 @@ class TestDynamicComponent { }
 describe('ToasterContainerComponent with sync ToasterService', () => {
     let toasterService: ToasterService,
         toasterContainer: ToasterContainerComponent,
-        changeDetectorRef: ChangeDetectorRef,
-        testComponentBuilder: TestComponentBuilder,
-        componentResolver: ComponentResolver,
-        fixture : ComponentFixture<TestComponent>;
-
-
-    beforeEach(async(inject([TestComponentBuilder, ComponentResolver], (tcb, compRes) => {
-        return tcb
-            .createAsync(TestComponent)
-            .then((f: ComponentFixture<TestComponent>) => {
-                fixture = f;
-                toasterContainer = fixture.debugElement.children[0].componentInstance;
-                toasterService = fixture.componentInstance.toasterService;
-            })
-            .catch(e => {
-                expect(e).toBeUndefined();
-            });
-    })));
+        fixture: ComponentFixture<TestComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [TestComponent, TestDynamicComponent],
+            imports: [ToastModule, BrowserModule]
+        });
+
+        fixture = TestBed.createComponent(TestComponent);
+        toasterContainer = fixture.debugElement.children[0].componentInstance;
+        toasterService = fixture.componentInstance.toasterService;
+        return fixture;
+    });
 
 
     it('should pop toast synchronously', () => {
@@ -355,7 +345,7 @@ describe('ToasterContainerComponent with sync ToasterService', () => {
         var toast: Toast = { type: 'info' };
 
         toasterService.pop(toast);
-        expect(toasterContainer.toasts[0].showCloseButton).toBeUndefined;
+        expect(toasterContainer.toasts[0].showCloseButton).toBeUndefined();
     });
 
     it('addToast removes toast from bottom if toasterconfig.newestOnTop and limit exceeded', () => {
@@ -385,8 +375,8 @@ describe('ToasterContainerComponent with sync ToasterService', () => {
         toasterContainer.ngOnInit();
 
         var toast1: Toast = { type: 'info', title: '1', body: '1', showCloseButton: true };
-        var poppedToast = toasterService.pop(toast1);
 
+        toasterService.pop(toast1);
         fixture.detectChanges();
 
         var closeButtonEle = fixture.nativeElement.querySelector('.toast-close-button');
@@ -398,7 +388,7 @@ describe('ToasterContainerComponent with sync ToasterService', () => {
         toasterContainer.ngOnInit();
 
         var toast1: Toast = { type: 'info', title: '1', body: '1', showCloseButton: true };
-        var poppedToast = toasterService.pop(toast1);
+        toasterService.pop(toast1);
 
         fixture.detectChanges();
 
@@ -501,7 +491,6 @@ describe('ToasterContainerComponent with sync ToasterService', () => {
     it('removeToast will not remove the toast if it is not found in the toasters array', () => {
         toasterContainer.ngOnInit();
         var toast: Toast = { type: 'info' };
-        var toast2: Toast = { type: 'success' };
 
         toasterService.pop(toast);
 
@@ -592,23 +581,15 @@ describe('ToasterContainerComponent with sync ToasterService', () => {
 
 
 describe('ToasterContainerComponent when included as a component', () => {
-    var changeDetectorRef: ChangeDetectorRef,
-        testComponentBuilder: TestComponentBuilder,
-        componentResolver: ComponentResolver;
-
-    let fixture;
-
-    beforeEach(async(inject([TestComponentBuilder, ComponentResolver], (tcb, compRes) => {
-        return tcb
-            //.overrideProviders(TestComponent, appRef)
-            .createAsync(TestComponent)
-            .then((f: ComponentFixture<TestComponent>) => {
-                fixture = f;
-            })
-            .catch(e => {
-                expect(e).toBeUndefined();
-            });
-    })));
+    let fixture: ComponentFixture<TestComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [TestComponent, TestDynamicComponent],
+            imports: [ToastModule]
+        });
+        fixture = TestBed.createComponent(TestComponent);
+    });
 
     it('should use the bound toasterconfig object if provided', () => {
         fixture.detectChanges();
@@ -685,7 +666,9 @@ describe('ToasterContainerComponent when included as a component', () => {
         fixture.detectChanges();
         var container = fixture.debugElement.children[0].componentInstance;
         var toast: Toast = {
-            type: 'success', clickHandler: (toast, isCloseButton) => { return true; }
+            type: 'success', clickHandler: () => {
+                return true;
+            }
         };
 
         fixture.componentInstance.toasterService.pop(toast);
@@ -706,7 +689,9 @@ describe('ToasterContainerComponent when included as a component', () => {
         fixture.detectChanges();
         var container = fixture.debugElement.children[0].componentInstance;
         var toast: Toast = {
-            type: 'success', clickHandler: (toast, isCloseButton) => { return false; }
+            type: 'success', clickHandler: () => {
+                return false;
+            }
         };
 
         fixture.componentInstance.toasterService.pop(toast);
@@ -724,14 +709,18 @@ describe('ToasterContainerComponent when included as a component', () => {
     it('should log error if clickHandler is not a function and not remove toast', () => {
         fixture.detectChanges();
         var container = fixture.debugElement.children[0].componentInstance;
-        var toast = { type: 'success', clickHandler: {} };
+        var toast = {
+            type: 'success', clickHandler: () => {
+                return false;
+            }
+        };
 
         fixture.componentInstance.toasterService.pop(toast);
         fixture.detectChanges();
         expect(container.toasts.length).toBe(1);
 
         var toastButton = fixture.nativeElement.querySelector('.toast-close-button');
-        var x = toastButton.click()
+        toastButton.click();
 
         fixture.detectChanges();
         expect(container.toasts.length).toBe(1);
@@ -745,15 +734,15 @@ describe('ToasterContainerComponent when included as a component', () => {
             title: 'Yay',
             body: TestDynamicComponent,
             bodyOutputType: BodyOutputType.Component
-        }
+        };
 
         fixture.componentInstance.toasterService.pop(toast);
         fixture.detectChanges();
         expect(container.toasts.length).toBe(1);
 
         setTimeout(() => {
             var renderedToast = fixture.nativeElement.querySelector('test-dynamic-component');
-            expect(renderedToast.innerHTML).toBe('<div>loaded via component</div>'); 
+            expect(renderedToast.innerHTML).toBe('<div>loaded via component</div>');
         }, 1);
     });
 
@@ -768,15 +757,15 @@ describe('ToasterContainerComponent when included as a component', () => {
             title: 'Yay',
             body: htmlContent,
             bodyOutputType: BodyOutputType.TrustedHtml
-        }
+        };
 
         fixture.componentInstance.toasterService.pop(toast);
         fixture.detectChanges();
         expect(container.toasts.length).toBe(1);
 
         var renderedToast = fixture.nativeElement.querySelector('.toast-message');
         var innerBody = renderedToast.querySelector('div');
-        expect(innerBody.innerHTML).toBe(htmlContent); 
+        expect(innerBody.innerHTML).toBe(htmlContent);
         expect(innerBody.textContent).toBe(textContent);
         expect(innerBody.innerHTML).not.toBe(innerBody.textContent);
     });
@@ -789,15 +778,15 @@ describe('ToasterContainerComponent when included as a component', () => {
             title: 'Yay',
             body: null,
             bodyOutputType: BodyOutputType.TrustedHtml
-        }
+        };
 
         fixture.componentInstance.toasterService.pop(toast);
         fixture.detectChanges();
         expect(container.toasts.length).toBe(1);
 
         var renderedToast = fixture.nativeElement.querySelector('.toast-message');
         var innerBody = renderedToast.querySelector('div');
-        expect(innerBody.innerHTML).toBe(''); 
+        expect(innerBody.innerHTML).toBe('');
     });
 
     it('addToast will render encoded text instead of html if bodyOutputType is Default', () => {
@@ -812,7 +801,7 @@ describe('ToasterContainerComponent when included as a component', () => {
             title: 'Yay',
             body: htmlContent,
             bodyOutputType: BodyOutputType.Default
-        }
+        };
 
         fixture.componentInstance.toasterService.pop(toast);
         fixture.detectChanges();
@@ -826,20 +815,24 @@ describe('ToasterContainerComponent when included as a component', () => {
 });
 
 describe('Multiple ToasterContainerComponent components', () => {
-    var changeDetectorRef: ChangeDetectorRef,
-        testComponentBuilder: TestComponentBuilder;
-
-    let fixture;
-
-    beforeEach(async(inject([TestComponentBuilder], tcb => {
-        return tcb
-            .overrideTemplate(TestComponent,
-            `<toaster-container [toasterconfig]="toasterconfig"></toaster-container>
-                     <toaster-container [toasterconfig]="toasterconfig2"></toaster-container>`)
-            .createAsync(TestComponent)
-            .then(f => fixture = f)
-            .catch(e => expect(e).toBeUndefined());
-    })));
+    let fixture: ComponentFixture<TestComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [TestComponent],
+            imports: [ToastModule]
+        });
+        TestBed.overrideComponent(TestComponent,
+            {
+                set: {
+                    template: `<toaster-container [toasterconfig]="toasterconfig"></toaster-container>
+                    <toaster-container [toasterconfig]="toasterconfig2"></toaster-container>`
+                }
+            }
+        );
+
+        fixture = TestBed.createComponent(TestComponent);
+    });
 
     it('should create multiple container instances', () => {
         fixture.componentInstance.toasterconfig.toastContainerId = 1;

src/toaster-container.component.ts

@@ -2,11 +2,9 @@ import {Component, Input, ChangeDetectorRef} from '@angular/core';
 import {ToasterConfig} from './toaster-config';
 import {ToasterService, IClearWrapper} from './toaster.service';
 import {Toast} from './toast';
-import {ToastComponent} from './toast.component';
 
 @Component({
     selector: 'toaster-container',
-    directives: [ToastComponent],
     template: `
         <div id="toast-container" [ngClass]="[toasterconfig.positionClass, toasterconfig.animationClass]" class="ng-animate">
             <div toastComp *ngFor="let toast of toasts" class="toast" [toast]="toast"

src/tsconfig.json

@@ -19,6 +19,7 @@
       "toaster-container.component.ts",
       "toaster-container.component.spec.ts",
       "toaster.service.ts",
+      "toast.module.ts",
       "../node_modules/typescript/lib/lib.es6.d.ts",
       "../typings/jasmine/jasmine.d.ts"
     ]