在ionic2中设置TDD [英] Setting up TDD in ionic2

问题描述

我已经关注了Joshua Moroney关于Ionic2和TDD的教程，但在尝试调试错误时遇到了问题。

I've followed Joshua Moroney's tutorial on Ionic2 and TDD, but have got stuck when trying to debug errors as they occur.

核心示例是这样的：

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)`

这是测试一个没有复杂性的单个组件：

This is testing a single component with no complexity:

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

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

export class TabsPage {

  constructor() {

  }
}

有人能指出我吗关于如何解决这些问题的教程;不只是为这个问题提供解决方案吗？

Can someone point me to a tutorial on how to resolve these issues; not just provide a solution for this single issue?

谢谢，

Andy

推荐答案

我遇到了同样的问题。根据离子文档，每个单独的离子选项卡是NavController的声明组件。因此，您需要为NavController使用提供程序，然后将mock类用作类。在那里，您需要定义一个要注册的函数，另一个用于取消注册ChildNav组件。另请参阅： https://github.com /ionic-team/ionic/blob/master/src/navigation/nav-controller.ts
我将Josh Morony提供的基类用作类，并将其扩展为包括：

I encountered the same problem. According to the ionic docs, "Each individual ion-tab is a declarative component for a NavController". So you need to use a provider for NavController and then use a mock class as a class. There you need to define a function to register and one to unregister a ChildNav Component. See also: https://github.com/ionic-team/ionic/blob/master/src/navigation/nav-controller.ts I used as a class the base class provided by Josh Morony and extended it to include:

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

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

tabs spec页面有以下相关条目（我把我的模拟放在与src dir相同级别的test-mocks dir中）：

The tabs spec page has the following related entries (I put my mocks in a test-mocks dir at the same level as the src dir):

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


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

应该这样做。

这篇关于在ionic2中设置TDD的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！