angular – 在ionic2中设置TDD

发布时间：2020-12-17 17:09:34 所属栏目：安全来源：网络整理

导读：我已经关注了Joshua Moroney关于Ionic2和TDD的教程,但是在尝试调试错误时遇到了问题. 核心的例子是这样的： import { TestBed,ComponentFixture,async } from '@angular/core/testing';import { By } from '@angular/platform-browser';import { DebugElemen

我已经关注了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提供的基类用作类,并将其扩展为包括：

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
  },]

应该这样做.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!