2017-07-14 33 views
-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.

そして、それは私が考えてい葉...子コンポーネントをそのようにテストすることも可能ですか?私は間違って何をしていますか?

+1

'comp.messageComponent'.closeメソッドをオーバーライドしたので、' comp.messageComponent.onClose.emit'は呼び出されません。 – yurzui

+1

親テストコンポーネントは不要です。子をインスタンス化し、出力フィールドにサブスクライブしてからclickイベントをトリガーします。 – jonrsharpe

+0

@jonrsharpeそれは私がやったことだが、同じ例外を投げている: '期待されたスパイは[true]で呼び出されたが、決して呼び出されなかった。] – user4068063

答えて

0

fixture.detectChanges()を呼び出す必要があります。 clickメソッドを呼び出した後に

関連する問題