Add example of TestBed component compiling manually in the component …

…(Page2) as opposed to calling TestUtils closes #179

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 # 2.4.0 (2016-12-08)
 
+### Features
+
+* **Unit**: Add example of TestBed component compiling manually in the component (Page2) as opposed to calling TestUtils closes [#179](https://github.com/lathonez/clicker/issues/179) ([](https://github.com/lathonez/clicker/commit/))
+
 ### Bug Fixes
 
 * **Unit**: Add mime type to karma.conf.js, closes [#178](https://github.com/lathonez/clicker/issues/178) ([5c0ffeb](https://github.com/lathonez/clicker/commit/5c0ffeb))

package.json

@@ -16,7 +16,7 @@
     "start": "ionic serve",
     "test": "ng test --code-coverage"
   },
-  "version": "2.3.0",
+  "version": "2.4.0",
   "dependencies": {
     "@angular/common": "2.1.1",
     "@angular/compiler": "2.1.1",

src/pages/page2/page2.spec.ts

@@ -1,17 +1,35 @@
-import { ComponentFixture, async } from '@angular/core/testing';
-import { TestUtils }               from '../../test';
-import { Page2 }                   from './page2';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { App, MenuController, NavController, Platform, Config, Keyboard, Form, IonicModule }  from 'ionic-angular';
+import { ConfigMock } from '../../mocks';
+import { Page2 }      from './page2';
 
 let fixture: ComponentFixture<Page2> = null;
 let instance: any = null;
 
 describe('Pages: Page2', () => {
 
-  beforeEach(async(() => TestUtils.beforeEachCompiler([Page2]).then(compiled => {
-    fixture = compiled.fixture;
-    instance = compiled.instance;
-    fixture.detectChanges();
-  })));
+  // demonstration on how to manually compile the test bed (as opposed to calling TestUtils)
+  beforeEach(async(() => {
+
+    TestBed.configureTestingModule({
+      declarations: [Page2],
+      providers: [
+        App, Platform, Form, Keyboard, MenuController, NavController,
+        {provide: Config, useClass: ConfigMock},
+      ],
+      imports: [
+        FormsModule,
+        IonicModule,
+        ReactiveFormsModule,
+      ],
+    })
+    .compileComponents().then(() => {
+      fixture = TestBed.createComponent(Page2);
+      instance = fixture;
+      fixture.detectChanges();
+    });
+  }));
 
   afterEach(() => {
     fixture.destroy();