如何在 Angular 2 / 4 中使用鼠标滚轮事件测试指令

Posted 2023-02-22

【中文标题】如何在 Angular 2 / 4 中使用鼠标滚轮事件测试指令

【英文标题】：How to test a directive with a mouse wheel event in angular 2 / 4

【发布时间】：2017-11-04 09:10:32

【问题描述】：

我有一个具有鼠标滚轮事件的指令，它用于放大和缩小画布。我想知道如何为这样的事件编写单元测试。我在网上找不到任何示例，有人能指出正确的方向吗？

我的指令：

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;   
     

【参考方案1】：

您应该使用转换并对其进行测试。如下

<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 +")")
      
    

LIVE DEMO