Question

我有一个简单的Angular 2组件用于Ionic 2应用程序。该组件使用一些Ionic的标记，例如：

<ion-card>
    <h3>{{ rawcontent.name }}</h3>
    <p *ngIf="rawcontent.description">{{ rawcontent.description }}</p>
</ion-card>

组件.ts类似于：

import { Component, Input } from '@angular/core';
import { NavController } from 'ionic-angular/';
import { Content } from '../../pages/content/content';

@Component({
  selector: 'content-detail',
  templateUrl: 'content-detail.html'
})
export class ContentDetailComponent {

  @Input('data') rawcontent: any = {};

  constructor(public nav: NavController) {
  }
  //other methods
}

我正在尝试为它编写单元测试，但到目前为止我收到了这个错误：

'ion-card'不是已知元素： 1.如果'ion-card'是Angular组件，请验证它是否是此模块的一部分。 2.如果'ion-card'是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的'@ NgModule.schemas' 压制此消息。

我现在不知道该怎么办。在这种情况下，我想，离子卡是一个角度组件。那么，接下来该做什么？我想我必须改变我的beforeEach，添加一些配置。有人可以帮忙吗？

beforeEach(() => TestBed.configureTestingModule({
    declarations: [ ContentDetailComponent ],
    providers: [
        { provide: NavController, useClass: NavMock }
    ]})
);

Answer 1

您需要导入ionicModule。在configureTestingModule

中添加此内容

  imports: [
  IonicModule,
  ],

Answer 2

这是一个很好的开始博客，用于测试Ionic 2 apps。

您需要在beforeEach：

中使用Ionic模块根配置应用

 beforeEach(async(() => {

        TestBed.configureTestingModule({

            declarations: [MyApp]

            providers: [

            ],

            imports: [
                IonicModule.forRoot(MyApp)
            ]

        }).compileComponents();

    }));

离子2：对具有离子标记/元素的组分进行单元测试

2 个答案: