我已经关注了Joshua Moroney关于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() { } }
有人可以指点我如何解决这些问题的教程;不只是为这个问题提供解决方案?
谢谢,
安迪
解决方法
我遇到了同样的问题.根据离子文档,“每个单独的离子选项卡是NavController的声明组件”.因此,您需要为NavController使用提供程序,然后将mock类用作类.在那里,您需要定义一个要注册的函数,另一个用于取消注册ChildNav组件.另见:
https://github.com/ionic-team/ionic/blob/master/src/navigation/nav-controller.ts
我将Josh Morony提供的基类用作类,并将其扩展为包括:
我将Josh Morony提供的基类用作类,并将其扩展为包括:
public registerChildNav(nav: any) { // do nothing } public unregisterChildNav(nav: any) { // do nothing }
选项卡规范页面包含以下相关条目(我将我的模拟放在与src dir相同级别的test-mocks目录中):
import { NavController } from 'ionic-angular'; import { NavMock } from '../../../test-mocks/mocks'; providers: [ //NavController,{ provide: NavController,useClass: NavMock },]
应该这样做.