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

首先，您应该使用debugElement的{{1}}，这将为您提供一些useful methods进行测试。一个是fixture，它可以帮助您解决问题（仅提及：triggerEventHandler是您可能希望经常使用的另一种方法，因为它比{{1更强大并将再次返回query）。

querySelector

希望它有所帮助。

如何测试实现jquery库的angular2 app

1 个答案: