Question

我试图使用Angular中的Jest来模拟DOM事件以进行单元测试，但出于某种原因我无法使其工作。

基本上，我的组件正在侦听animationend事件然后做一些事情。

ngAfterViewInit() {
  this.addAnimationEndListener();
}

private addAnimationEndListener() {
  this.removeListenerFn = this.renderer.listen(this.element, "animationend", event =>
      this.onEndAnimation(event)
  );
}

private onEndAnimation(event: any) {
  console.log(event);
}

此代码正常工作，当触发animationend事件时，将调用onEndAnimation方法。

现在，我的单元测试正在做这样的事情

it("should emit an endAnimation output event", done => {
  component.ngAfterViewInit();
  //fixture.detectChanges();
  const event = new Event("animationend");
  Object.assign(event, animationEventMixin("slide-down"));
  dispatchEvent(event);
  component.endAnimation.subscribe(() => done());
});

现在，因为没有在Jest（JSDOM）中定义AnimationEvent，所以我需要使用常规事件并添加一些额外的属性，但是我在末尾调度的事件是类型＆＃34;的有效事件。 animationend＆＃34;，所以它被调度，但onAnimationEnd方法没有被触发。

我猜这个问题现在与Angular本身有关。有什么想法吗？

使用Angular和Jest模拟DOM事件

0 个答案: