我遵循了 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();
});
});
karma 的输出是:
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() {
}
}
有人可以指点我如何解决这些问题的教程吗?不只是为这个单一的问题提供解决方案?
谢谢,
安迪
最佳答案
我遇到了同样的问题。根据 ionic 文档,“每个单独的 ion-tab 都是 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
}
选项卡规范页面有以下相关条目(我将我的模拟放在与 src 目录相同级别的测试模拟目录中):
import { NavController } from 'ionic-angular';
import { NavMock } from '../../../test-mocks/mocks';
providers: [
//NavController,
{
provide: NavController,
useClass: NavMock
},
]
应该可以了。
关于angular - 在 ionic2 中设置 TDD,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43278192/