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

Question

我正在尝试测试一个列可调整大小的指令，该指令侦听鼠标事件，如鼠标启动，鼠标移动，鼠标按下。

调整大小列.指令.ts

import { 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}));更新：我已经检查了你的代码，这里有两点：您应该用于模拟鼠标移动事件document.dispatchEvent(new MouseEvent('mousemove', {clientX: 50, clientY: 150, buttons: 1}))添加到@HostListener以防止在处理程序中未定义'$event'@HostListener('document: mousemove', ['$event'])onMouseMove(event: MouseEvent) {  const offset = 35;  if (this.pressed && event.buttons) {    //your code  }};请记住，变量应该是使代码正常工作pressedtrue