Angular + Jasmine: тестирование вывода дочернего компонента с помощью spyOn

Question

Я внедряю набор тестов (Karma+Jasmine) в наше приложение Angular, но у меня возникают проблемы с этим конкретным случаем.

Допустим, мне нужно протестировать компонент с именем 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.

И это заставляет меня задуматься... возможно ли тестировать дочерние компоненты таким образом? Что я делаю неправильно?

Answer 1

Вам нужно вызвать fixture.detectChanges(); после вызова метода щелчка.