如何在 TypeScript 中模拟一个 'mousemove' 事件并指定 movementX 和 movementY

Question

我正在尝试为 TypeScript 中的 'mousemove' 处理程序编写 Jasmine 测试。这是我的测试：

    it('should pan', () =>
    {
        let mouseMoveEvent: MouseEvent = new MouseEvent("mousemove", { movementX: 1, movementY: 2 });
        canvas.nativeElement.dispatchEvent(mouseMoveEvent);
        fixture.detectChanges();

        expect(component.canvasManager.viewportOrigin.X).toBe(1, "expected pan on X");
        expect(component.canvasManager.viewportOrigin.Y).toBe(2, "expected pan on Y");

    });

测试是working/passing但是有编译错误：

ERROR in src/app/components/biq-workflow-editor/tests/biq-workflow-editor.component.canvas-manager.spec.ts(63,76): error TS2345: Argument of type '{ movementX: number; movementY: number; }' is not assignable to parameter of type 'MouseEventInit'.
Object literal may only specify known properties, and 'movementX' does not exist in type 'MouseEventInit'.

我知道 TypeScript 编译器即使在出现编译错误时也会生成 JavaScript 代码。

我应该如何在 TypeScript 中编写 'mousemove' 事件模拟才不会出现任何编译错误？

Answer 1

我认为你的代码有效。但是，我能够重现同样的问题。我能够通过将第二个参数转换为 MouseEventInit 对象来解决它。

let mouseMoveEvent: MouseEvent = new MouseEvent("mousemove", <MouseEventInit>{ movementX: 1, movementY: 2 });

如何在 TypeScript 中模拟一个 'mousemove' 事件并指定 movementX 和 movementY

How to simulate a 'mousemove' Event and specify movementX and movementY in TypeScript

javascript

typescript

jasmine

mouseevent

mousemove