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作为事件传递。这将成功执行并运行我的测试，但我想通过从这里传递鼠标坐标来模拟鼠标事件。任何人都可以给我一些资源或指出我正确的方向如何实现这一点，或者如果无法实现我可以研究的替代方案。

非常感谢任何帮助。

谢谢。
Tammy Gonzalez

Answer 1

我不明白你在UIImage imageNamed:传递null的原因。相反，你应该传递一个对象。根据您的指示，triggerEventHandler和pageX事件的对象应为pageY和mousedown值。

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

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

expect's

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

感谢。

Answer 2

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

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

Answer 3

有一件事，请确保您是否要触发允许其更新的DOM更改。 fixture.detectChanges（）就是你的朋友。在测试中，我看到您单击该元素，但立即检查以查看更改，而不允许检测更改传播。

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

3 个答案: