CODEWITHSUNDEEP
angularunit-testingjasminekarma-jasmine
Uzair Kapadia
Uzair Kapadia

Reputation: 65

CUSTOM_ELEMENTS_SCHEMA error occur while unit testing with jasmine and karma

I am doing unit testing with jasmine and karma. I am able to run test in simple application but when i am testing method of a page that has other component it shows error like this

If 'custom-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message

custom-component.html

<div class="data-container">
    <ion-row>
        <!-- Display week Day and Dates -->
        <ion-col class="no-padding" *ngFor="let days of weekDates">
            <div class="header-circle">
                <!-- Header-Circle for Day -->
                <p class="uppercase thick day-color">{{ days.day }}</p>
            </div>
            <div id="{{days.day_date}}" (click)="toggle(days)" class="{{days.iconClass}}">
                <!-- Circle for Date -->
                <p class="uppercase thick day-color">{{ days.date }}</p>
            </div>
        </ion-col>
        <!-- End of loop -->
    </ion-row>
</div>

custom-component.ts

import { Component, Input, Output, EventEmitter, ApplicationRef } from '@angular/core';

@Component({
    selector: 'custom-component',
    templateUrl: 'custom-component.html'
})
export class custom-component {//Some Code Here }

Checkin.html

<ion-header>
    <ion-navbar>
        <ion-title>{{ spaceName }}</ion-title>
        <!-- added spaceName as title  -->
    </ion-navbar>
</ion-header>
<ion-content class="checkin-content" no-bounce>
    <custom-component [inputDate]="selectedDate" (dateChanged)="dateChanged($event)"></custom-component>
</ion-content>

Checkin.ts

import { Component } from '@angular/core';
import { IonicPage, ModalController, NavParams, NavController, Events } from 'ionic-angular';
import { custom-component } from '../../components/custom-component/custom-component';

export class CheckinPage {

    public isNumberEven(num: number): boolean {
        return num % 2 === 0;
    }

    public isNumberOdd(num: number): boolean {
        return !this.isNumberEven(num);
    }
}

Checkin.spec.ts

import { TestBed, ComponentFixture, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { MyApp } from '../../app/app.component';
import { CheckinPage } from './checkin';
import { NavController } from 'ionic-angular';
import { custom-component } from '../../components/custom-component/custom-component';

let comp: CheckinPage;
let fixture: ComponentFixture<CheckinPage>;
let de: DebugElement;
let el: HTMLElement;
let datepipe: DatePipe;

describe('Checkin Component', () => {

    beforeEach(async(() => {

        TestBed.configureTestingModule({

            declarations: [MyApp, CheckinPage, RoatedDateComponent],

            providers: [
                NavController
            ],

            imports: [
                IonicModule.forRoot(MyApp)
            ]

        }).compileComponents();

    }));

    beforeEach(() => {

        fixture = TestBed.createComponent(CheckinPage);
        comp = fixture.componentInstance;

    });

    afterEach(() => {
        fixture.destroy();
        comp = null;
        de = null;
        el = null;
    });

    it("should correctly classify numbers as odd", () => {
        expect(comp.isNumberOdd(1)).toBe(true);
        expect(comp.isNumberOdd(2)).toBe(false);
    });
});

checkin.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CheckinPage } from './checkin';

@NgModule({
    declarations: [
        CheckinPage,
    ],
    imports: [
        IonicPageModule.forChild(CheckinPage),
    ],
})
export class CheckinPageModule { }

Can anyone help me with this one?

Upvotes: 2

Views: 5546

Answers (1)

Teddy Sterne
Teddy Sterne

Reputation: 14221

When you configure the TestBed it is equivalent to creating a new Module. A Module cannot use a Component that has not been added to it. This is the scenario you are running into. The Checkin component cannot find a reference to the custom-component because it was not declared inside the TestBed config. For simple coponents you can always just declare the component inside of the test fixture and everything should work.

The Angular team recommends creating stub components to better test the interactions between the parent and child components.

To create a stub, create a new component that has the same @Input and @Output fields as the component you are stubbing as well as the same selector. Angular uses the selector to identify the component in the view so as long as the selectors are the same the app will be able to run.

@Component({
    selector: 'custom-component',
    template: ' '
})
export class CustomComponentStub {//Some Code Here }

And then provide it to the test bed:

declarations: [MyApp, CheckinPage, RoatedDateComponent, CustomComponentStub],

I only ever skip creating a stub if the child component is view-only and has no logic. If this is your scenario you can skip adding a stub component by adding the custom-component to the declaration list of the TestBed like so:

declarations: [MyApp, CheckinPage, RoatedDateComponent, CustomComponent],

Upvotes: 2

Related Questions