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

-1

我在我们的Angular应用中实现了一个测试套件（Karma + Jasmine），但是我遇到了这个特定情况的问题。Angular + Jasmine：使用spyOn测试子组件的输出

比方说，我需要测试一个名为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.

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

来源

2017-07-14 user4068063

'comp.messageComponent.onClose.emit'永远不会被调用，因为您已经重写了'comp.messageComponent'.close方法 – yurzui

不需要父测试组件;实例化孩子，订阅输出字段然后触发点击事件。 – jonrsharpe

@jonrsharpe这就是我所做的，但它抛出了相同的异常：'期望的间谍发出已被调用与[真]，但它从来没有被称为。' – user4068063

您需要调用fixture.detectChanges（）;调用click方法后调用。

来源

2017-08-17 12:19:16

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

回答

相关问题