-1
私はAngular Appにテストスイート(Karma + 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.
そして、それは私が考えてい葉...子コンポーネントをそのようにテストすることも可能ですか?私は間違って何をしていますか?
'comp.messageComponent'.closeメソッドをオーバーライドしたので、' comp.messageComponent.onClose.emit'は呼び出されません。 – yurzui
親テストコンポーネントは不要です。子をインスタンス化し、出力フィールドにサブスクライブしてからclickイベントをトリガーします。 – jonrsharpe
@jonrsharpeそれは私がやったことだが、同じ例外を投げている: '期待されたスパイは[true]で呼び出されたが、決して呼び出されなかった。] – user4068063