feat: 🎸 mouse

add mouse helpers

Author: Netanel Basal

.travis.yml

@@ -6,6 +6,5 @@ node_js:
   - '10'
 
 script:
-  - npm run lint
   - npm run build
   - npm run test:ci

README.md

@@ -34,6 +34,7 @@ Spectator helps you get rid of all the boilerplate grunt work, leaving you with
 - [Testing Components](#testing-components)
   - [Events API](#events-api)
   - [Keyboard helpers](#keyboard-helpers)
+  - [Mouse helpers](#mouse-helpers)
   - [Queries](#queries)
     - [String Selector](#string-selector)
     - [Type Selector](#type-selector)
@@ -209,6 +210,12 @@ spectator.keyboard.pressBackspace();
 spectator.keyboard.pressKey('a');
 ```
 
+### Mouse helpers
+```ts
+spectator.mouse.contextmenu('.selector');
+spectator.mouse.dblclick('.selector');
+```
+
 Note that each one of the above methods will also run `detectChanges()`.
 
 ### Queries

projects/spectator/src/lib/base/dom-spectator.ts

@@ -169,7 +169,7 @@ export abstract class DomSpectator<I> extends BaseSpectator {
     return event;
   }
 
-  public get keyboard(): any {
+  public get keyboard() {
     return {
       pressKey: (key: string, selector: SpectatorElement = this.element, event = KEY_UP) => {
         this.dispatchKeyboardEvent(selector, event, key);
@@ -189,6 +189,17 @@ export abstract class DomSpectator<I> extends BaseSpectator {
     };
   }
 
+  public get mouse() {
+    return {
+      contextmenu: (selector: SpectatorElement = this.element) => {
+        this.dispatchMouseEvent(selector, 'contextmenu');
+      },
+      dblclick: (selector: SpectatorElement = this.element) => {
+        this.dispatchMouseEvent(selector, 'dblclick');
+      }
+    };
+  }
+
   public dispatchTouchEvent(selector: SpectatorElement = this.element, type: string, x: number = 0, y: number = 0): void {
     dispatchTouchEvent(this.getNativeElement(selector), type, x, y);
     this.detectChanges();

projects/spectator/test/button/button.component.spec.ts

@@ -49,6 +49,20 @@ describe('ButtonComponent', () => {
     spectator.detectChanges();
     expect(spectator.query('p')).toHaveText('Netanel');
   });
+
+  it('should support contextmenu', () => {
+    spectator = createComponent();
+    spyOn(spectator.component, 'contextmenu');
+    spectator.mouse.contextmenu('.contextmenu');
+    expect(spectator.component.contextmenu).toHaveBeenCalled();
+  });
+
+  it('should support dblclick', () => {
+    spectator = createComponent();
+    spyOn(spectator.component, 'dblclick');
+    spectator.mouse.dblclick('.dblclick');
+    expect(spectator.component.dblclick).toHaveBeenCalled();
+  });
 });
 
 describe('ButtonComponent', () => {

projects/spectator/test/button/button.component.ts

@@ -9,6 +9,8 @@ import { QueryService } from '../query.service';
   template: `
     <button class="{{ className }}" (click)="onClick($event)">{{ title }}</button>
     <p>{{ queryService.selectName() | async }}</p>
+    <div class="contextmenu" (contextmenu)="contextmenu()">Context menu</div>
+    <div class="dblclick" (dblclick)="dblclick()">dblclick</div>
   `,
   providers: [QueryService],
   styles: []
@@ -25,4 +27,8 @@ export class ButtonComponent {
   public onClick($event: any): void {
     this.click.emit($event);
   }
+
+  public contextmenu() {}
+
+  public dblclick() {}
 }