Angular 5单元测试中手动触发TouchMove事件的问题求助

兄弟，我太懂你在Angular 5单元测试里折腾TouchMove事件的糟心劲儿了！之前我模拟触摸事件的时候也踩过一模一样的坑——一开始只传{clientX: number}被提示缺clientY，补上之后又一堆属性缺失，想直接创建原生Touch实例吧，还碰上个只读属性的问题，简直头大。

别慌，咱们换个思路，别硬刚原生Touch对象，自己写个Mock类来模拟它就好了！这样既能满足TouchEvent对参数的要求，还能灵活设置咱们需要的属性值，完美解决只读属性的问题。

第一步：写一个MockTouch类 #

咱们把测试需要用到的Touch属性都模拟出来，按需添加就行：

class MockTouch {
  constructor(
    public clientX: number,
    public clientY: number,
    public identifier: number = 1
  ) {}
  // 测试需要用到的其他属性可以在这里补充
  pageX = this.clientX;
  pageY = this.clientY;
  target = document.createElement('div');
  screenX = this.clientX + 10; // 随便给个合理值就行
  screenY = this.clientY + 10;
}

第二步：用MockTouch创建并触发TouchMove事件 #

有了这个Mock类，咱们就能轻松构造符合要求的TouchMove事件了：

// 先获取你要测试的元素，比如通过fixture.debugElement.nativeElement
const testElement = fixture.debugElement.nativeElement;

// 创建TouchMove事件，把MockTouch实例传入对应的touches数组
const touchMoveEvent = new TouchEvent('touchmove', {
  touches: [new MockTouch(150, 250)],
  targetTouches: [new MockTouch(150, 250)],
  changedTouches: [new MockTouch(150, 250)]
});

// 触发事件
testElement.dispatchEvent(touchMoveEvent);

// 别忘了触发变更检测，让Angular响应这个事件
fixture.detectChanges();

为什么这个方法管用？ #

原生的Touch对象是浏览器在真实触摸场景下生成的，它的很多属性都是只读的，咱们没法手动修改赋值。而自己写的MockTouch类完全由咱们控制，想设什么值就设什么值，还能根据测试场景随时调整属性，比硬用原生对象灵活多了。

如果你的测试还需要其他Touch属性，直接往MockTouch里加就行，保证能满足TouchEvent的参数要求，再也不会出现属性缺失的报错啦！

内容的提问来源于stack exchange，提问作者Paul Freedman