javascript - 如何从 Jasmine 测试 Angular 2/4 触发文档级事件

Question

根据 Angular 测试文档，要从测试中触发事件，我们在调试元素上使用 triggerEventHandler() 方法。此方法采用事件名称 和对象。现在，如果我们使用 HostListener 添加事件，这将起作用。例如:@HostListener('mousemove', ['$event']) 或添加一个 document 级别的事件，我们这样做是这样的 @HostListener ('document:mousemove', ['$event']).

在我当前的指令实现中，由于我无法嵌套 HostListeners，我使用 document.addEventListener 添加 document 级事件到 HostListener.
代码如下:

@HostListener('mousedown', ['$event'])
callMouseDown(event){
  if (something) {
   document.addEventListener('mousemove', this.callMouseMove.bind(this));
  }
}

callMouseMove(event){
 // do some computations.
}

现在，我想触发在我的测试中添加到 document 级别的 mousemove 事件。 triggerEventHandler() 的当前实现不起作用，即在测试中未触发监听器。

我怎样才能让它发挥作用？谁能帮我一些指导。

编辑:添加测试:

it('test spec', inject([MyService], (service: MyService) =>{
   x = [];
  //service calls the method
  service.evtEmit.subscribe(e => {
   x.push(e);
  });
  triggerEventHandler("mousedown", {pageX: 200, pageY: 300});
  triggerEventHandler("document:mousemove", {pageX: 250, pageY: 320});
  // the above statement won't work.
  expect(arr).toEqual({x:50, y: 20});
}));

Answer 1

您描述的类似问题似乎已记录为问题 here在 Angular repo 上。

您可以使用组件实例访问指令并可以访问该方法(即，在您的情况下是 callMouseMove)。以下方法应该有效:

it('test spec', inject([MyService], (service: MyService) => {
   x = [];
  //service calls the method
  service.evtEmit.subscribe(e => {
   x.push(e);
  });
  triggerEventHandler("mousedown", {pageX: 200, pageY: 300});
  component.directive.callMouseMove({pageX: 250, pageY: 320});
  expect(arr).toEqual({x:50, y: 20});
}));

希望这对您有所帮助。

更新

我意识到如果你的指令中有私有(private)方法，我的方法就不起作用了。最好以编程方式创建自定义事件或在这种情况下创建鼠标事件，并在文档级别或元素本身触发事件。 yurzui提到了这个方法.感谢他。

这里是你如何做到的:

function programmaticTrigger(eventType: string, evtObj: any) {
   let evt = new MouseEvent(eventType, evtObj);
   document.dispatchEvent(evt);
}

您可以从规范中调用此函数:

programmaticTrigger("mousemove", {clientX: 250, clientY: 320});

请注意，在这种情况下，我没有在此处传递 pageX 或 pageY，因为它们是 readonly 但它们是基于内部计算的clientX 和 clientY 值。

如果你想创建一个自定义事件并传入任何你想要的值，你可以这样做:

function programmaticTrigger(eventType: string, evtObj: any) {
       let evt: any;
       evt = Event(eventType, evtObj);
       document.dispatchEvent(evt);
    }

按如下方式调用它:

programmaticTrigger("mousemove", {pageX: 250, pageY: 320});

希望这对您有所帮助。