如何使用角度為2/4的鼠標滾輪事件測試指令

Question

我有一個帶有鼠標滾輪事件的指令，用於放大和縮小畫布。 我想知道如何為此類事件編寫單元測試。 我在網上找不到任何示例，有人能指出我正確的方向嗎？

我的指令：

import { Directive, ElementRef, HostListener} from "@angular/core";
import { MyService } from "./my-service";
@Directive({
    selector: "[testDirec]"
})
export class Test {
  private initPointX: number;
  private initPointY: number;

  constructor(private ele: ElementRef,
        private serviceInstance: MyService) {
    }

    @HostListener('mousewheel', ['$event'])
    scroll(event: MouseEvent) {
        console.log("Entered mouse wheel");
        let wheelDelta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
        if(wheelDelta > 0) {
          factor = 0.5;
        }else {
         factor = 2.0;
        }

        this.initPointX = event.PageX;
        this.initPointY = event.PageY;   
    } 

}

Answer 1

您應該使用transform並對其進行測試。 如下

<div scrollstyle="height:1000px;background-color:red">
      <input type="text" value=""/>
</div>



@Directive({
    selector: '[scroll]'
})
export class ChangeDirective{
 i:number=1;
    constructor(
        private renderer: Renderer,
        private el: ElementRef
    ){}

    @HostListener('mousewheel', ['$event']) onMousewheel(event) {
      if(event.wheelDelta>0){
          event.srcElement.style.setProperty('transition','all 200ms ease-in')
          event.srcElement.style.setProperty('transform',"scale(" + this.i+1 +")")
      }
      if(event.wheelDelta<0){
        event.srcElement.style.setProperty('transition','all 200ms ease-out')
        event.srcElement.style.setProperty('transform',"scale(" + this.i-1 +")")
      }
    }
}

現場演示