Within my Angular 2 component for an Ionic 2 app, I utilize Ionic's markup as shown below:
<ion-card>
<h3>{{ rawcontent.name }}</h3>
<p *ngIf="rawcontent.description">{{ rawcontent.description }}</p>
</ion-card>
The TypeScript file for the component looks something like this:
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
}
I'm currently facing an issue while trying to write a unit test for it. The error message I received is:
'ion-card' is not a known element: 1. If 'ion-card' is an Angular component, then verify that it is part of this module. 2. If 'ion-card' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
Since ion-card is an Angular component in this case, I am unsure about what steps to take next. I believe I need to modify my beforeEach setup by adding some configuration. Can anyone provide assistance?
beforeEach(() => TestBed.configureTestingModule({
declarations: [ ContentDetailComponent ],
providers: [
{ provide: NavController, useClass: NavMock }
]})
);