ionic2でTDDを設定する

Question

私はJoshua MoroneyのIonic2とTDDのチュートリアルに従ってきましたが、発生したときにエラーをデバッグしようとすると動きが止まってしまいました。

コアの例はこの1つである：

import { TestBed, ComponentFixture, async } from '@angular/core/testing'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 
import { IonicModule, NavController } from 'ionic-angular'; 
import { MyApp } from '../../app/app.component'; 
import { TabsPage } from './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(); 

}); 

}); 

カルマからの出力は次のとおりです。

FAILED TESTS: 
Page: Tabs Page 
✖ is 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 is not a function 
    at Tabs.ngOnDestroy (webpack:///~/ionic-angular/components/tabs/tabs.js:220:0 <- src/test.ts:56626:21) 
    at callProviderLifecycles (webpack:///~/@angular/core/@angular/core.es5.js:11109:0 <- src/test.ts:11389:18) 
    at callElementProvidersLifecycles (webpack:///~/@angular/core/@angular/core.es5.js:11078:0 <- src/test.ts:11358:13) 
    at callLifecycleHooksChildrenFirst (webpack:///~/@angular/core/@angular/core.es5.js:11062:0 <- src/test.ts:11342:17) 
    at destroyView (webpack:///~/@angular/core/@angular/core.es5.js:12280:0 <- src/test.ts:12560:5) 
    at callViewAction (webpack:///~/@angular/core/@angular/core.es5.js:12391:0 <- src/test.ts:12671:13) 
    at execComponentViewsAction (webpack:///~/@angular/core/@angular/core.es5.js:12333:0 <- src/test.ts:12613:13) 
    at destroyView (webpack:///~/@angular/core/@angular/core.es5.js:12279:0 <- src/test.ts:12559:5) 
    at callWithDebugContext (webpack:///~/@angular/core/@angular/core.es5.js:13060:25 <- src/test.ts:13340:42) 
    at Object.debugDestroyView [as destroyView] (webpack:///~/@angular/core/@angular/core.es5.js:12614:0 <- src/test.ts:12894:12) 
    at ViewRef_.destroy (webpack:///~/@angular/core/@angular/core.es5.js:10199:0 <- src/test.ts:10479:18) 
    at ComponentRef_.destroy (webpack:///~/@angular/core/@angular/core.es5.js:9944:51 <- src/test.ts:10224:67) 
    at ComponentFixture.destroy (webpack:///~/@angular/core/@angular/core/testing.es5.js:248:0 <- src/test.ts:40179:31) 
    at Object.<anonymous> (webpack:///src/pages/tabs/tabs.spec.ts:40:16 <- src/test.ts:110812:17) 
    at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:365:0 <- src/test.ts:123570:26)` 

これは無複雑で単一のコンポーネントをテストしている：

import { Component } from '@angular/core'; 

@Component({ 
    templateUrl: 'tabs.html' 
}) 

export class TabsPage { 

    constructor() { 

    } 
} 

できる人をこれらの問題を解決する方法についてのチュートリアルを教えてください。この単一の問題の解決策を提供するだけではありませんか？

おかげで、

アンディ

Answer 1

私は同じ問題に遭遇しました。 ionic docsによると、 "各イオンタブはNavControllerの宣言的なコンポーネントです"。したがって、NavControllerのプロバイダを使用して、モッククラスをクラスとして使用する必要があります。そこで、登録する関数とChildNavコンポーネントを登録解除する関数を定義する必要があります。参照してください：私はテストモックディレクトリに私のモックを置く（

public registerChildNav(nav: any) { 
    // do nothing 
} 

public unregisterChildNav(nav: any) { 
    // do nothing 
} 

タブ仕様ページには、次の関連のエントリがあります。https://github.com/ionic-team/ionic/blob/master/src/navigation/nav-controller.ts を私はクラスジョシュMoronyが提供する基本クラスとして使用して含まれるように、それを拡張しましたsrcディレクトリと同じレベル）：

import { NavController } from 'ionic-angular'; 
import { NavMock } from '../../../test-mocks/mocks'; 


providers: [ 
    //NavController, 
    { 
    provide: NavController, 
    useClass: NavMock 
    }, 
] 

これでいいはずです。