角度2または4のジャスミンテストでマウスイベントをシミュレートする方法

Question

私はジャスミンテストには新しく、マウスの上下、移動などのマウスイベントを処理するディレクティブをテストしようとしています。私の質問は、Jasmineの仕様からマウスディレクティブにマウス座標を渡し、マウスイベントをシミュレートする方法です。私はこのトピックで多くを検索しましたが、要素の座標を渡すようなことをしないthis以外の例は見つかりませんでした。

次は角度でテストベッドの構成を使用してテストを書くための私の試みです：

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

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 2

DOMの変更をトリガーして更新を許可するかどうかを確かめてください。 fixture.detectChanges（）はその点であなたの友人です。テストでは、要素をクリックしたことを確認しましたが、すぐに変更が検出されたことを確認して、変更が検出されないようにします。