title: How to simulate mouse events in Jasmine tests in Angular 2 or 4
body: <p>I am pretty new to Jasmine testing and I am trying to test a directive which handles mouse events like mouse down, up and move. My question is how can I pass mouse coordinates from the spec of Jasmine to my directive and simulate the mouse events. I have searched a lot on this topic but I couldn't find any examples except for <a href="https://codecraft.tv/courses/angular/unit-testing/directives/" rel="noreferrer">this</a> one which doesn't do anything like passing the coordinates of the element. </p>
  
  <p>The following is my attempt to write the test using the TestBed configuration in Angular:</p>
  
  <pre><code>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: `&lt;div testDirec style="height:800px; width:500px; background-color:blue;"&gt;&lt;/div&gt;`
  })
  class DummyComponent { }
  
  export default function () {
      describe('Directive: Zoom', () =&gt; {
          let fixture: ComponentFixture&lt;TestComponent&gt;;
          let debugEle: DebugElement[];
  
          beforeAll(() =&gt; {
            TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
  
          }
  
          beforeEach(() =&gt; {
              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', () =&gt; {
              debugEle[0].triggerEventHandler('mousedown', null);
              expect(debugEle[0].nativeElement.style.width).toBe('500px');
          });
  
          it('mousemove on the div', () =&gt; {
              debugEle[0].triggerEventHandler('mousemove', null);
            expect(debugEle[0].nativeElement.style.backgroundColor).toBe('blue');
          });
  
      });
  
  }
  </code></pre>
  
  <p>My directive is as follows:</p>
  
  <pre><code>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 &amp;&amp; this.initPointY) {
              // calculate the new mouse x and y coordinates and compute the difference to move the object.
          }
      } 
   //other functions.
  
  }
  </code></pre>
  
  <p><br/>
  As you can see inside my test spec, I am passing the null as the event. This will successfully execute and run my tests but instead I would like to simulate the mouse events by passing the mouse coordinates from here. Could anyone give me some resources or point me in a right direction how to achieve this or if it cannot be achieved what alternatives I can look into. </p>
  
  <p>Any help would be greatly appreciated. </p>
  
  <p>Thank you.<br/>
  Tammy Gonzalez</p>