如何測試實現jQuery庫的angular2應用程序

Question

我有一個angular2組件封裝了一些jQuery庫（timelineJS3）。一切運作良好，但我需要寫測試。具體而言，我想收聽點擊事件。爲此，我使用了Renderer2。但是，它與業力無法正常工作。

見plunkr因果報應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(); 
    }) 
})); 


}); 

這段代碼不會觸發事件我的代碼。 Idk爲什麼。

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

Answer 1

你應該用你的fixture，這將給你一些useful methods測試的debugElement第一。一個是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 

希望它有幫助。