如何使用 angular 2/4 的鼠标滚轮事件测试指令 [英] How to test a directive with a mouse wheel event in angular 2 / 4
问题描述
我有一个带有鼠标滚轮事件的指令,它用于放大和缩小画布.我想知道如何为这样的事件编写单元测试.我在网上找不到任何例子,有人能指出我正确的方向吗?
我的指令:
import { Directive, ElementRef, HostListener} from "@angular/core";从./my-service"导入 { MyService };@指示({选择器:[testDirec]"})导出类测试{私有 initPointX:数字;私人 initPointY:数字;构造函数(私有元素:ElementRef,私人服务实例:MyService) {}@HostListener('鼠标滚轮', ['$event'])滚动(事件:鼠标事件){console.log("输入鼠标滚轮");let wheelDelta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));如果(wheelDelta > 0){因子 = 0.5;}别的 {因子 = 2.0;}this.initPointX = event.PageX;this.initPointY = event.PageY;}}
您应该使用转换并测试它.如下
<input type="text" value=""/>@指示({选择器:'[滚动]'})导出类 ChangeDirective{我:数字=1;构造函数(私人渲染器:渲染器,私人 el: ElementRef){}@HostListener('mousewheel', ['$event']) onMousewheel(event) {if(event.wheelDelta>0){event.srcElement.style.setProperty('transition','all 200ms 缓入')event.srcElement.style.setProperty('transform',"scale(" + this.i+1 +")")}if(event.wheelDelta<0){event.srcElement.style.setProperty('transition','all 200ms 缓出')event.srcElement.style.setProperty('transform',"scale(" + this.i-1 +")")}}}
I have a directive which has a mouse wheel event, it is used to zoom in and out a canvas. I would like to know how can I write a unit test for such an event. I couldn't find any example online, could anyone point me in a right direction?
My directive:
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;
}
}
You should be using transform and test it. as below
<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 +")")
}
}
}
这篇关于如何使用 angular 2/4 的鼠标滚轮事件测试指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!