在ionic2中設置TDD

我按照Joshua Moroney關於Ionic2和TDD的教程，但在嘗試調試錯誤時遇到了困難。在ionic2中設置TDD

核心例子是這樣的一個：

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() { 

    } 
}

可有人向我指出如何解決這些問題的教程;不只是爲這個單一問題提供解決方案？

感謝，

安迪

來源

2017-04-07 andylockran

我遇到同樣的問題。根據離子文檔，「每個離子選項卡都是NavController的聲明性組件」。所以你需要使用NavController的提供者，然後使用模擬類作爲類。在那裏你需要定義一個函數來註冊，一個註銷一個ChildNav組件。另請參見：https://github.com/ionic-team/ionic/blob/master/src/navigation/nav-controller.ts 我作爲一類由Josh Morony提供的基類，並擴展到包括：

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

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

的標籤規範頁面有如下相關條目（我把我的嘲笑在測試嘲笑DIR與src目錄相同）：

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


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

這應該這樣做。

來源

2017-08-19 18:47:19 Renato

在ionic2中設置TDD

回答

相關問題