如何模拟鼠标事件以测试角度指令

Question

我正在尝试测试一个列可调整大小的指令，该指令侦听鼠标事件，如鼠标启动，鼠标移动，鼠标按下。调整大小列.指令.tsimport { Directive, OnInit, Renderer2, Input, ElementRef, HostListener } from "@angular/core";@Directive({  selector: "[resizeColumn]"})export class ResizeColumnDirective implements OnInit {  @Input() index: number;      private startX: number;      private startWidth: number;      private column: HTMLElement;      private table: HTMLElement;      private pressed: boolean;  constructor(private renderer: Renderer2, private el: ElementRef) {    this.column = this.el.nativeElement;  }  ngOnInit() {    if (this.resizable) {      const row = this.renderer.parentNode(this.column);      this.table = this.renderer.parentNode(row);      const resizer = this.renderer.createElement("span");      this.renderer.addClass(resizer, "resize-holder");      this.renderer.appendChild(this.column, resizer);      this.renderer.listen(resizer, "mousedown", this.onMouseDown);    }  }  onMouseDown = (event: MouseEvent) => {    this.pressed = true;    this.startX = event.pageX;    this.startWidth = this.column.offsetWidth;  };  @HostListener('document: mousemove')  onMouseMove(event: MouseEvent) {    const offset = 35;    if (this.pressed && event.buttons) {      this.renderer.addClass(this.table, "resizing");      // Calculate width of column      let width =        this.startWidth + (event.pageX - this.startX - offset);      const tableCells = Array.from(this.table.querySelectorAll(".custom-row")).map(        (row: any) => row.querySelectorAll(".custom-cell").item(this.index)      );    }  };我想为此指令创建单元测试，但我无法模拟鼠标事件。我正在使用触发器EventHandler来处理事件，但在模拟鼠标按下和鼠标移动后，我无法更新最大宽度和弹性基的值。

Answer 1

尝试使用

headerEl.dispatchEvent(new MouseEvent('mousemove', {clientX: 50, clientY: 150}));

或

headerEl.dispatchEvent(new Event('mousemove', {pageX: 50, pageY: 150}));

更新：

我已经检查了你的代码，这里有两点：

1. 您应该用于模拟鼠标移动事件document.dispatchEvent(new MouseEvent('mousemove', {clientX: 50, clientY: 150, buttons: 1}))

2. 添加到@HostListener以防止在处理程序中未定义'$event'

@HostListener('document: mousemove', ['$event'])

onMouseMove(event: MouseEvent) {

  const offset = 35;

  if (this.pressed && event.buttons) {

    //your code

  }

};

请记住，变量应该是使代码正常工作pressedtrue