首页 文章

Angular Jasmine:使用spyOn测试子组件的输出

提问于
浏览
1

我正在将一个测试套件(Karma Jasmine)实现到我们的Angular App中,但是我遇到了这个具体案例的问题 .

假设我需要测试一个名为MessageComponent的组件,它发出一个按下按钮的事件 . 如果我从父级测试事件,如何确保事件正确发出?

这是一个例子:

@Component( {
    selector: "cw-message",
    template: `
    <div #messageElement>
        {{message.title}}
        <button class="close icon" (click)="close($event, messageElement)">Close</button>
    </div>`
} )
class MessageComponent {

    @Input() message;
    @Output() onClose:EventEmitter<boolean> = new EventEmitter();

    public close( event:Event, element:HTMLElement ):void {
        this.onClose.emit( true );
    }
}

有这样的组件,我试图使用以下代码测试它:

describe( "MessageComponent", () => {

    let comp:TestComponent;
    let fixture:ComponentFixture<TestComponent>;
    let de:DebugElement;

    @Component( {
        template: `
        <div>
            <cw-message class="first" [message]="message"></cw-message>
        </div>`
    } )
    class TestComponent {

        @ViewChild( MessageComponent ) messageComponent:MessageComponent;
        public message = {
            title: "My message",
            content: "The content of the message",
            duration: 1000,
        };

        ngAfterViewInit() {};

        ngAfterContentInit() {};

        ngAfterViewChecked() {}

        ngAfterContentChecked() {};
    }


    beforeEach( async( () => {
        TestBed.configureTestingModule( {
            imports: [ FormsModule ],
            declarations: [ TestComponent, MessageComponent, ],
        } ).compileComponents();
    } ) );

    beforeEach( () => {
        fixture = TestBed.createComponent( TestComponent );
        comp = fixture.componentInstance;
        de = fixture.debugElement;
        fixture.detectChanges();
    } );

    fit( "Should close message", () => {

        spyOn( comp.messageComponent, "close" );
        spyOn( comp.messageComponent.onClose, "emit" );
        let messageDiv:HTMLElement = fixture.nativeElement.querySelector( ".message" );
        let closeBtn = fixture.nativeElement.querySelector( ".close.icon" );

        closeBtn.click();

        expect( comp.messageComponent.onClose.emit ).toHaveBeenCalledWith( true );
    } );

} );

但我总是遇到以下异常:

Expected spy emit to have been called with [ true ] but it was never called.

这让我思考......是否有可能以这种方式测试子组件?我究竟做错了什么?

1 回答

  • 1

    你需要调用fixture.detectChanges();在调用click方法之后 .

相关问题