如何在 Typescript 单元测试中模拟鼠标拖动？答案

【问题标题】：How can I simulate a mouse drag in a Typescript Unit Test?如何在 Typescript 单元测试中模拟鼠标拖动？
【发布时间】：2019-10-25 23:39:39
【问题描述】：

如何在 Typescript 单元测试中模拟鼠标拖动？

我知道我可以使用 .click() 模拟点击，但我找不到一种方法来按住点击而不是立即点击。我试图找到一种方法来按住单击，但找不到此用例的选项。

我想测试屏幕的某个区域是否可以高亮选中，需要鼠标拖动。

【问题讨论】：

这是您在 e2e 测试而不是单元测试中会做更多的事情，但是您可以发送事件 mousedown 和 mousedown 以“模拟”按下鼠标按钮并拖动。只需使用dispatch API

标签： javascript angular typescript unit-testing jasmine

【解决方案1】：

我将对此进行尝试，并将继续对其进行编辑，因为我可以找到更多信息，但希望这是一个开始。

代码很粗略，但它应该能得到你想要的，至少能引导你到达那一点。

let fixture: ComponentFixture<TestComponent>;
let debugElement: DebugElement[];

beforeEach(() => {
    debugElement= fixture.debugElement.queryAll(By.component(TestComponent));
});

it('mousedown on the div', inject([MyService], service) => {
     debugElement[0].triggerEventHandler('mousedown',{pageX:50, pageY: 40});
     debugElement[0].triggerEventHandler('mousemove',{pageX:60, pageY: 50});
     expect(service.someObj).toBe({x:10, y:10});
});

【讨论】：

debugElement[0].triggerEventHandler(...) 不适用于 mousemove 事件，即使它适用于 mousedown 和 mouseup 事件。我不知道为什么，但是如果有人遇到同样的问题，您可以将事件发送到本机元素：debugElement[0].nativeElement.dispatchEvent(new MouseEvent('mousemove', { pageX:60, pageY: 50}));