jqueryライブラリを実装しているangle2アプリケーションのテスト方法

Question

jqueryライブラリ（timelineJS3）をカプセル化したangular2コンポーネントがあります。すべて正常に動作しますが、テストを書く必要があります。具体的には、リッスンクリックイベントが必要です。これを行うには、Renderer2を使用しました。しかし、それはカルマとうまく動作しません。

は、コードのこの作品は、カルマにイベントを発生しませんhttps://embed.plnkr.co/7ROP9O2CgQolVeO5ItCb/

describe('- EventArray - ',() => { 


let events = cosmological.events; 

it('test click in next (idk how to fire jquery event)', async(() => { 
    var i = 0; 
    component.clicked.subscribe((ev: any) => { 
    expect(ev.unique_id).toEqual(cosmological.events[i++].unique_id); 
    }); 

    //init 
    component.events = events; 
    component.ngAfterViewInit(); 

    // trigger the click 
    spyOn(component.clicked, 'emit'); 
    let button = fixture.nativeElement.querySelector('.tl-slidenav-next .tl-slidenav-content-container'); 
    button.dispatchEvent(new Event('click')); 
    fixture.detectChanges(); 
    fixture.whenStable().then(() => { 
    expect(component.clicked.emit).toHaveBeenCalled(); 
    }) 
})); 


}); 

plunkrに私のコードを参照してください。 Idkなぜ。

let button = fixture.nativeElement.querySelector('.tl-slidenav-next .tl-slidenav-content-container'); 
button.dispatchEvent(new Event('click')); 

Answer 1

あなたがテストのためにあなたにいくつかのuseful methodsを与えるあなたfixtureのdebugElementを使用する必要がありますまず第一に。 1つはtriggerEventHandlerで、問題を解決するのに役立ちます（queryは、querySelectorよりも強力な方法であり、もう一度debugElementに戻るため、頻繁に使用することの多い別の方法です）。

let button: DebugElement = fixture.debugElement.query(By.css('.tl-slidenav-next .tl-slidenav-content-container')); 
button.triggerEventHandler('click', null); // where null is the event being passed if it's used in the listener 

希望します。