Updating *.spec for test bed boilerplate

src/app/app.spec.ts

@@ -1,56 +1,37 @@
-import {
-  TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS, TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-}                               from '@angular/platform-browser-dynamic/testing';
-import { setBaseTestProviders } from '@angular/core/testing';
-import { ClickerApp }           from './app';
-import { Page2 }                from './pages/page2/page2';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TestUtils }                 from '../test';
+import { ClickerApp }                from './app.component';
+import { Page2 }                     from '../pages';
 
-setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
-
-let clickerApp: ClickerApp = null;
-
-class MockClass {
-  public ready(): any {
-    return new Promise((resolve: Function) => {
-      resolve();
-    });
-  }
-
-  public close(): any {
-    return true;
-  }
-
-  public setRoot(): any {
-    return true;
-  }
-}
+let instance: ClickerApp = null;
 
 describe('ClickerApp', () => {
 
   beforeEach(() => {
-    let mockClass: any = (<any>new MockClass());
-    clickerApp = new ClickerApp(mockClass, mockClass);
+    TestUtils.configureIonicTestingModule(ClickerApp);
+    let fixture: ComponentFixture<ClickerApp> = TestBed.createComponent(ClickerApp);
+    instance = fixture.debugElement.componentInstance;
   });
 
   it('initialises with two possible pages', () => {
-    expect(clickerApp['pages'].length).toEqual(2);
+    expect(instance['pages'].length).toEqual(2);
   });
 
   it('initialises with a root page', () => {
-    expect(clickerApp['rootPage']).not.toBe(null);
+    expect(instance['rootPage']).not.toBe(null);
   });
 
   it('initialises with an app', () => {
-    expect(clickerApp['app']).not.toBe(null);
+    expect(instance['app']).not.toBe(null);
   });
 
   it('opens a page', () => {
-    spyOn(clickerApp['menu'], 'close');
+    spyOn(instance['menu'], 'close');
     // cant be bothered to set up DOM testing for app.ts to get access to @ViewChild (Nav)
-    clickerApp['nav'] = (<any>clickerApp['menu']);
-    spyOn(clickerApp['nav'], 'setRoot');
-    clickerApp.openPage(clickerApp['pages'][1]);
-    expect(clickerApp['menu']['close']).toHaveBeenCalled();
-    expect(clickerApp['nav'].setRoot).toHaveBeenCalledWith(Page2);
+    instance['nav'] = (<any>instance['menu']);
+    spyOn(instance['nav'], 'setRoot');
+    instance.openPage(instance['pages'][1]);
+    expect(instance['menu']['close']).toHaveBeenCalled();
+    expect(instance['nav'].setRoot).toHaveBeenCalledWith(Page2);
   });
 });

src/components/clickerButton/clickerButton.spec.ts

@@ -1,40 +1,32 @@
-import { beforeEach, beforeEachProviders, describe, expect, it }          from '@angular/core/testing';
-import { provide }                                                        from '@angular/core';
-import { asyncCallbackFactory, injectAsyncWrapper, providers, TestUtils } from '../../../test/diExports';
-import { ClickersServiceMock }                                            from '../../services/mocks';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TestUtils }                 from '../../test';
 import { ClickerButton }                                                  from './clickerButton';
-import { ClickersService }                                                from '../../services';
 
-this.fixture = null;
-this.instance = null;
-
-let clickerButtonProviders: Array<any> = [
- provide(ClickersService, {useClass: ClickersServiceMock}),
-];
+let fixture: ComponentFixture<ClickerButton> = null;
+let instance: any = null;
 
 describe('ClickerButton', () => {
 
-  let beforeEachFn: Function = ((testSpec) => {
-    testSpec.instance['clicker'] = { name: 'TEST CLICKER' };
-    testSpec.instance['clicker'].getCount = function(): number { return 10; };
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ClickerButton);
+    instance = fixture.debugElement.componentInstance;
+    instance.clicker = { name: 'TEST CLICKER' };
+    instance.clicker.getCount = function(): number { return 10; };
   });
 
-  beforeEachProviders(() => providers.concat(clickerButtonProviders));
-  beforeEach(injectAsyncWrapper(asyncCallbackFactory(ClickerButton, this, false, beforeEachFn)));
-
   it('initialises', () => {
-    expect(this.instance).not.toBeNull();
+    expect(instance).not.toBeNull();
   });
 
   it('displays the clicker name and count', () => {
-    this.fixture.detectChanges();
-    expect(this.fixture.nativeElement.querySelectorAll('.button-inner')[0].innerHTML).toEqual('TEST CLICKER (10)');
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelectorAll('.button-inner')[0].innerHTML).toEqual('TEST CLICKER (10)');
   });
 
   it('does a click', () => {
-    this.fixture.detectChanges();
-    spyOn(this.instance['clickerService'], 'doClick');
-    TestUtils.eventFire(this.fixture.nativeElement.querySelectorAll('button')[0], 'click');
-    expect(this.instance['clickerService'].doClick).toHaveBeenCalled();
+    fixture.detectChanges();
+    spyOn(instance['clickerService'], 'doClick');
+    TestUtils.eventFire(fixture.nativeElement.querySelectorAll('button')[0], 'click');
+    expect(instance['clickerService'].doClick).toHaveBeenCalled();
   });
 });

src/components/clickerForm/clickerForm.spec.ts

@@ -1,51 +1,41 @@
-import { beforeEach, beforeEachProviders, describe, expect, it }          from '@angular/core/testing';
-import { provide }                                                        from '@angular/core';
-import { asyncCallbackFactory, injectAsyncWrapper, providers, TestUtils } from '../../../test/diExports';
-import { ClickersServiceMock }                                            from '../../services/mocks';
-import { ClickersService, Utils }                                         from '../../services';
-import { ClickerForm }                                                    from './clickerForm';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TestUtils }                 from '../../test';
+import { ClickerForm }               from './clickerForm';
 
-this.fixture = null;
-this.instance = null;
-
-let clickerFormProviders: Array<any> = [
-  provide(ClickersService, {useClass: ClickersServiceMock}),
-];
+let fixture: ComponentFixture<ClickerForm> = null;
+let instance: any = null;
 
 describe('ClickerForm', () => {
 
-  let beforeEachFn: Function = ((testSpec) => {
-    spyOn(testSpec.instance, 'newClicker').and.callThrough();
-    spyOn(testSpec.instance['clickerService'], 'newClicker').and.callThrough();
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ClickerForm);
+    instance = fixture.debugElement.componentInstance;
+    instance.clicker = { name: 'TEST CLICKER' };
+    instance.clicker.getCount = function(): number { return 10; };
   });
 
-  beforeEachProviders(() => providers.concat(clickerFormProviders));
-  beforeEach(injectAsyncWrapper(asyncCallbackFactory(ClickerForm, this, true, beforeEachFn)));
-
   it('initialises', () => {
-    expect(this.fixture).not.toBeNull();
-    expect(this.instance).not.toBeNull();
+    expect(fixture).not.toBeNull();
+    expect(instance).not.toBeNull();
   });
 
   it('passes new clicker through to service', () => {
     let clickerName: string = 'dave';
-    let input: any = this.fixture.nativeElement.querySelectorAll('.text-input')[0];
-    let button: any = this.fixture.nativeElement.querySelectorAll('button')[1];
-    spyOn(Utils, 'resetControl').and.callThrough();
+    let input: any = fixture.nativeElement.querySelectorAll('.text-input')[0];
+    let button: any = fixture.nativeElement.querySelectorAll('button')[1];
     input.value = clickerName;
     TestUtils.eventFire(input, 'input');
     TestUtils.eventFire(button, 'click');
-    expect(this.instance.newClicker).toHaveBeenCalledWith(Object({ clickerNameInput: clickerName }));
-    expect(this.instance['clickerService'].newClicker).toHaveBeenCalledWith(clickerName);
-    expect(Utils.resetControl).toHaveBeenCalledWith(this.instance.form.controls.clickerNameInput);
+    expect(instance.newClicker).toHaveBeenCalledWith(Object({ clickerNameInput: clickerName }));
+    expect(instance['clickerService'].newClicker).toHaveBeenCalledWith(clickerName);
   });
 
   it('doesn\'t try to add a clicker with no name', () => {
-    let button: any = this.fixture.nativeElement.querySelectorAll('button')[1];
-    this.instance.clickerName = '';
-    this.fixture.detectChanges();
+    let button: any = fixture.nativeElement.querySelectorAll('button')[1];
+    instance.clickerName = '';
+    fixture.detectChanges();
     TestUtils.eventFire(button, 'click');
-    expect(this.instance.newClicker).toHaveBeenCalled();
-    expect(this.instance['clickerService'].newClicker).not.toHaveBeenCalled();
+    expect(instance.newClicker).toHaveBeenCalled();
+    expect(instance['clickerService'].newClicker).not.toHaveBeenCalled();
   });
 });

src/pages/clickerList/clickerList.spec.ts

@@ -1,24 +1,16 @@
-import { beforeEach, beforeEachProviders, describe, expect, it } from '@angular/core/testing';
-import { provide }                                               from '@angular/core';
-import { asyncCallbackFactory, injectAsyncWrapper, providers }   from '../../../test/diExports';
-import { ClickersServiceMock }                                   from '../../services/mocks';
-import { ClickerList }                                           from './clickerList';
-import { ClickersService }                                       from '../../services';
-
-this.fixture = null;
-this.instance = null;
-
-let clickerListProviders: Array<any> = [
-  provide(ClickersService, {useClass: ClickersServiceMock}),
-];
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TestUtils }                 from '../../test';
+import { ClickerList }               from './clickerList';
 
 describe('ClickerList', () => {
 
-  beforeEachProviders(() => providers.concat(clickerListProviders));
-  beforeEach(injectAsyncWrapper(asyncCallbackFactory(ClickerList, this, true)));
+  beforeEach(() => {
+    TestUtils.configureIonicTestingModule(ClickerList);
+  });
 
   it('initialises', () => {
-    expect(this.instance).not.toBeNull();
-    expect(this.fixture).not.toBeNull();
+    let fixture: ComponentFixture<ClickerList> = TestBed.createComponent(ClickerList);
+    let instance: any = fixture.debugElement.componentInstance;
+    expect(instance).toBeTruthy();
   });
 });

src/pages/page2/page2.spec.ts

@@ -4,6 +4,7 @@ import { TestUtils } from '../../test';
 import { Page2 } from './page2';
 
 describe('Pages: Page2', () => {
+
   beforeEach(() => {
     TestUtils.configureIonicTestingModule(Page2);
   });

src/services/clickers.spec.ts

@@ -1,28 +1,23 @@
-import { beforeEach, beforeEachProviders, describe, expect, it } from '@angular/core/testing';
-import { provide }                                               from '@angular/core';
-import { asyncCallbackFactory, injectAsyncWrapper, providers }   from '../../test/diExports';
-import { ClickersService }        from './clickers';
-import { ClickerList }            from '../pages/clickerList/clickerList';
-import { StorageMock } from './mocks';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TestUtils }                 from '../test';
+import { ClickersService }           from './clickers';
+import { ClickerList }               from '../pages/clickerList/clickerList';
+import { Clicker }                   from '../models';
+import { StorageMock }               from './mocks';
 
-this.fixture = null;
-this.instance = null;
-this.clickers = null;
-
-let clickerListProviders: Array<any> = [
-  ClickersService,
-  provide('Storage', { useClass: StorageMock }),
-];
-
-let beforeEachFn: Function = ((testSpec) => {
-  testSpec.clickers = testSpec.instance.clickerService;
-  spyOn(testSpec.clickers.storage, 'set').and.callThrough();
-});
+let fixture: ComponentFixture<ClickerList> = null;
+let instance: any = null;
+let clickers: ClickersService = null;
 
 describe('ClickersService', () => {
 
-  beforeEachProviders(() => providers.concat(clickerListProviders));
-  beforeEach(injectAsyncWrapper(asyncCallbackFactory(ClickerList, this, false, beforeEachFn)));
+  beforeEach(() => {
+    TestUtils.configureIonicTestingModule(ClickerList);
+    fixture = TestBed.createComponent(ClickerList);
+    instance = fixture.debugElement.componentInstance;
+    clickers = instance.clickerService;
+    spyOn(clickers['storage'], 'set').and.callThrough();
+  });
 
   it('initialises', () => {
     expect(this.clickers).not.toBeNull();

src/test.ts

@@ -30,7 +30,7 @@ Promise.all([
     );
   })
   // Then we find all the tests.
-  .then(() => require.context('./', true, /\page2.spec\.ts/))
+  .then(() => require.context('./', true, /\.spec\.ts/))
   // And load the modules.
   .then(context => context.keys().map(context))
   // Finally, start Karma to run the tests.
@@ -55,4 +55,15 @@ export class TestUtils {
       imports: [ IonicModule ],
     });
   }
+
+  // http://stackoverflow.com/questions/2705583/how-to-simulate-a-click-with-javascript
+  public static eventFire(el: any, etype: string): void {
+    if (el.fireEvent) {
+      el.fireEvent('on' + etype);
+    } else {
+      let evObj: any = document.createEvent('Events');
+      evObj.initEvent(etype, true, false);
+      el.dispatchEvent(evObj);
+    }
+  }
 }