angular - Setting up TDD in ionic2 -

i've followed joshua moroney's tutorial on ionic2 , tdd, have got stuck when trying debug errors occur.

the core example one:

import { testbed, componentfixture, async } '@angular/core/testing'; import { } '@angular/platform-browser'; import { debugelement } '@angular/core'; import { ionicmodule, navcontroller } 'ionic-angular'; import { myapp } '../../app/app.component'; import { tabspage } './tabs';  let comp: tabspage; let fixture: componentfixture<tabspage>; let de: debugelement; let el: htmlelement;  describe('page: tabs page', () => {  beforeeach(async(() => {      testbed.configuretestingmodule({          declarations: [myapp, tabspage],          providers: [             navcontroller         ],          imports: [             ionicmodule.forroot(myapp)         ]      }).compilecomponents();  }));  beforeeach(() => {     fixture = testbed.createcomponent(tabspage);     comp    = fixture.componentinstance;  });  aftereach(() => {     fixture.destroy();     comp = null;     de = null;     el = null; });  it('is created', () => {     expect(fixture).tobetruthy();     expect(comp).tobetruthy();  });  }); 

the output karma is:

failed tests: page: tabs page ✖ created   phantomjs 2.1.1 (mac os x 0.0.0)   chrome 57.0.2987 (mac os x 10.12.3) typeerror: this.parent.unregisterchildnav not function     @ tabs.ngondestroy (webpack:///~/ionic-angular/components/tabs/tabs.js:220:0 <- src/test.ts:56626:21)     @ callproviderlifecycles (webpack:///~/@angular/core/@angular/core.es5.js:11109:0 <- src/test.ts:11389:18)     @ callelementproviderslifecycles (webpack:///~/@angular/core/@angular/core.es5.js:11078:0 <- src/test.ts:11358:13)     @ calllifecyclehookschildrenfirst (webpack:///~/@angular/core/@angular/core.es5.js:11062:0 <- src/test.ts:11342:17)     @ destroyview (webpack:///~/@angular/core/@angular/core.es5.js:12280:0 <- src/test.ts:12560:5)     @ callviewaction (webpack:///~/@angular/core/@angular/core.es5.js:12391:0 <- src/test.ts:12671:13)     @ execcomponentviewsaction (webpack:///~/@angular/core/@angular/core.es5.js:12333:0 <- src/test.ts:12613:13)     @ destroyview (webpack:///~/@angular/core/@angular/core.es5.js:12279:0 <- src/test.ts:12559:5)     @ callwithdebugcontext (webpack:///~/@angular/core/@angular/core.es5.js:13060:25 <- src/test.ts:13340:42)     @ object.debugdestroyview [as destroyview] (webpack:///~/@angular/core/@angular/core.es5.js:12614:0 <- src/test.ts:12894:12)     @ viewref_.destroy (webpack:///~/@angular/core/@angular/core.es5.js:10199:0 <- src/test.ts:10479:18)     @ componentref_.destroy (webpack:///~/@angular/core/@angular/core.es5.js:9944:51 <- src/test.ts:10224:67)     @ componentfixture.destroy (webpack:///~/@angular/core/@angular/core/testing.es5.js:248:0 <- src/test.ts:40179:31)     @ object.<anonymous> (webpack:///src/pages/tabs/tabs.spec.ts:40:16 <- src/test.ts:110812:17)     @ zonedelegate.invoke (webpack:///~/zone.js/dist/zone.js:365:0 <- src/test.ts:123570:26)` 

this testing single component no complexity:

import { component } '@angular/core';  @component({   templateurl: 'tabs.html' })  export class tabspage {    constructor() {    } } 

can point me tutorial on how resolve these issues; not provide solution single issue?

thanks,

andy

i encountered same problem. according ionic docs, "each individual ion-tab declarative component navcontroller". need use provider navcontroller , use mock class class. there need define function register , 1 unregister childnav component. see also: https://github.com/ionic-team/ionic/blob/master/src/navigation/nav-controller.ts used class base class provided josh morony , extended include:

public registerchildnav(nav: any) {   // nothing }  public unregisterchildnav(nav: any) {   // nothing } 

the tabs spec page has following related entries (i put mocks in test-mocks dir @ same level src dir):

import { navcontroller } 'ionic-angular'; import { navmock } '../../../test-mocks/mocks';   providers: [   //navcontroller,   {     provide: navcontroller,     useclass: navmock   }, ] 

that should it.