如何在 Angular 2 或 4 的 Jasmine 测试中模拟鼠标事件

Question

我对 Jasmine 测试很陌生，我正在尝试测试一个指令来处理鼠标事件，如鼠标向下、向上和移动。我的问题是如何将 Jasmine 规范中的鼠标坐标传递给我的指令并模拟鼠标事件。我已经在这个主题上进行了很多搜索，但除了this 之外，我找不到任何示例，它不做任何事情，比如传递元素的坐标。

以下是我在 Angular 中使用 TestBed 配置编写测试的尝试：

import { Component, Directive, DebugElement } from "@angular/core";
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { By } from '@angular/platform-browser';
import { TestDirective } from "./test";
import { MyService } from "./my-service";

@Component({
    template: `<div testDirec style="height:800px; width:500px; background-color:blue;"></div>`
})
class DummyComponent { }

export default function () {
    describe('Directive: Zoom', () => {
        let fixture: ComponentFixture<TestComponent>;
        let debugEle: DebugElement[];

        beforeAll(() => {
          TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

        }

        beforeEach(() => {
            TestBed.configureTestingModule({
                declarations: [TestDirective, DummyComponent],
                providers: [MyService]
            });
            fixture = TestBed.createComponent(DummyComponent);
            fixture.detectChanges();
            debugEle = fixture.debugElement.queryAll(By.directive(TestDirective));
        });

        it('mousedown on the div', () => {
            debugEle[0].triggerEventHandler('mousedown', null);
            expect(debugEle[0].nativeElement.style.width).toBe('500px');
        });

        it('mousemove on the div', () => {
            debugEle[0].triggerEventHandler('mousemove', null);
          expect(debugEle[0].nativeElement.style.backgroundColor).toBe('blue');
        });

    });

}

我的指令如下：

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('mousedown', ['$event'])
    onMouseDown(event: MouseEvent) {
        console.log("Entered mouse down");
        this.initPointX = event.PageX;
        this.initPointY = event.PageY;
        if (event.ctrlKey) {
            // do something
        }
    } 

    @HostListener('mousedown', ['$event'])
    onMouseMove(event: MouseEvent) {
        console.log("Entered mouse move");
        if (this.initPointX && this.initPointY) {
            // calculate the new mouse x and y coordinates and compute the difference to move the object.
        }
    } 
 //other functions.

}

正如您在我的测试规范中看到的那样，我将 null 作为事件传递。这将成功执行并运行我的测试，但我想通过从这里传递鼠标坐标来模拟鼠标事件。谁能给我一些资源或指出正确的方向如何实现这一目标，或者如果无法实现，我可以研究哪些替代方案。

任何帮助将不胜感激。

谢谢。
塔米冈萨雷斯

Answer 1

有一件事，请确保您是否要触发允许更新的 DOM 更改。在这方面，fixture.detectChanges() 是您的朋友。在测试中，我看到您单击元素，但立即检查以查看更改，而不允许检测更改向上传播。

Answer 2

我不明白你为什么在你的triggerEventHandler 中传递null。相反，您应该传递一个对象。根据您的指令，mousedown 和 mousemove 事件的对象应该是 pageX 和 pageY 值。

指令将接收这些值并执行您的逻辑步骤，然后您可以期待该值。您当前拥有的 expect's 没有任何意义，因为它们不会测试与鼠标事件相关的任何内容。

我相信您正在寻找以下类型的规范：

it('mousedown on the div', inject([MyService], service) => {
     debugEle[0].triggerEventHandler('mousedown',{pageX:50, pageY: 40});
     debugEle[0].triggerEventHandler('mousemove',{pageX:60, pageY: 50});
     // assuming you are calculating the difference between the second and first objects.
     expect(service.someObj).toBe({x:10, y:10});
 });

上面的代码很粗糙，但我希望它会有所帮助。

谢谢。

Answer 3

这应该比其他答案更具可读性：

const btn = btnDbg ? <HTMLButtonElement>btnDbg.nativeElement : new HTMLButtonElement();
btn.dispatchEvent(new Event('mousedown'));