Question

我正在用茉莉花和业力进行单元测试。我能够在简单的应用程序中运行测试，但是当我测试具有其他组件的页面的方法时，它会显示这样的错误

如果＆＃39; custom-component＆＃39;是一个Web组件，然后添加＆＃39; CUSTOM_ELEMENTS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;这个组件取消此消息

自定义-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>

自定义-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 { }

任何人都可以帮我这个吗？

Answer 1

配置TestBed时，它等同于创建新模块。模块无法使用尚未添加的组件。这是您遇到的情况。 Checkin组件无法找到custom-component的引用，因为它未在TestBed配置中声明。对于简单的组合，您总是可以在测试夹具内部声明组件，一切都应该有效。

Angular团队建议创建stub components以更好地测试父组件和子组件之间的交互。

要创建存根，请创建一个新组件，该组件具有与您正在存根的组件相同的@Input和@Output字段以及相同的选择器。 Angular使用选择器来识别视图中的组件，只要选择器与应用程序能够运行的相同即可。

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

然后将其提供给试验台：

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

如果子组件只是视图且没有逻辑，我只跳过创建存根。如果这是您的方案，您可以通过将custom-component添加到TestBed的声明列表中来跳过添加存根组件，如下所示：

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

使用茉莉和业力进行单元测试时发生CUSTOM_ELEMENTS_SCHEMA错误

1 个答案: