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

あなたが変換し、それをテスト使用する必要があります。

<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

以下のように