如何测试实现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 

希望它有帮助。