feat(mock-doc): add MouseEvent (#1830)

ionic-team · Aug 30, 2019 · ad871b8 · ad871b8
1 parent 6bfea9c
commit ad871b8
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 3 deletions.
diff --git a/src/mock-doc/event.ts b/src/mock-doc/event.ts
@@ -55,6 +55,7 @@ export class MockCustomEvent extends MockEvent {
 
 }
 
+
 export class MockKeyboardEvent extends MockEvent {
   code = '';
   key = '';
@@ -76,6 +77,30 @@ export class MockKeyboardEvent extends MockEvent {
 }
 
 
+export class MockMouseEvent extends MockEvent {
+  screenX = 0;
+  screenY = 0;
+  clientX = 0;
+  clientY = 0;
+  ctrlKey = false;
+  shiftKey = false;
+  altKey = false;
+  metaKey = false;
+  button = 0;
+  buttons = 0;
+  relatedTarget: EventTarget = null;
+
+  constructor(type: string, mouseEventInitDic?: MouseEventInit) {
+    super(type);
+
+    if (mouseEventInitDic != null) {
+      Object.assign(this, mouseEventInitDic);
+    }
+  }
+
+}
+
+
 export class MockEventListener {
   type: string;
   handler: (ev?: any) => void;

diff --git a/src/mock-doc/global.ts b/src/mock-doc/global.ts
@@ -94,5 +94,6 @@ const WINDOW_PROPS = [
   'Element',
   'HTMLElement',
   'NodeList',
-  'KeyboardEvent'
+  'KeyboardEvent',
+  'MouseEvent'
 ];
diff --git a/src/mock-doc/index.ts b/src/mock-doc/index.ts
@@ -2,7 +2,7 @@
 export { MockAttr, MockAttributeMap, cloneAttributes } from './attribute';
 export { MockComment } from './comment-node';
 export { MockHTMLElement, MockElement, MockNode, MockTextNode } from './node';
-export { MockCustomEvent, MockKeyboardEvent } from './event';
+export { MockCustomEvent, MockKeyboardEvent, MockMouseEvent } from './event';
 export { MockDocument, createDocument, createFragment, resetDocument } from './document';
 export { MockWindow, cloneDocument, cloneWindow, constrainTimeouts, resetWindow } from './window';
 export { NODE_TYPES } from './constants';

diff --git a/src/mock-doc/test/event.spec.ts b/src/mock-doc/test/event.spec.ts
@@ -1,4 +1,5 @@
 import { MockWindow } from '../window';
+import {EventTarget} from "../event";
 
 describe('event', () => {
   let win: MockWindow;
@@ -146,4 +147,75 @@ describe('event', () => {
     expect(ev.location).toBe(0);
     expect(ev.repeat).toBe(true);
   });
+
+  it('MouseEvent() requires type', () => {
+    expect(() => {
+      new win.MouseEvent();
+    }).toThrow();
+  });
+
+  it('MouseEvent(type)', () => {
+    const ev = new win.MouseEvent('onclick') as MouseEvent;
+    expect(ev.bubbles).toBe(false);
+    expect(ev.cancelBubble).toBe(false);
+    expect(ev.cancelable).toBe(false);
+    expect(ev.composed).toBe(false);
+    expect(ev.currentTarget).toBe(null);
+    expect(ev.defaultPrevented).toBe(false);
+    expect(ev.srcElement).toBe(null);
+    expect(ev.target).toBe(null);
+    expect(typeof ev.timeStamp).toBe('number');
+    expect(ev.type).toBe('onclick');
+    expect(ev.screenX).toBe(0);
+    expect(ev.screenY).toBe(0);
+    expect(ev.clientX).toBe(0);
+    expect(ev.clientY).toBe(0);
+    expect(ev.ctrlKey).toBe(false);
+    expect(ev.shiftKey).toBe(false);
+    expect(ev.altKey).toBe(false);
+    expect(ev.metaKey).toBe(false);
+    expect(ev.button).toBe(0);
+    expect(ev.buttons).toBe(0);
+    expect(ev.relatedTarget).toBe(null);
+  });
+
+  it('MouseEvent(type, eventInitDict)', () => {
+    const eventInitDict = {
+      bubbles: true,
+      composed: true,
+      screenX: 99,
+      screenY: 99,
+      clientX: 99,
+      clientY: 99,
+      ctrlKey: false,
+      shiftKey: true,
+      altKey: false,
+      metaKey: false,
+      button: 0,
+      buttons: 99,
+      relatedTarget: null
+    };
+    const ev = new win.MouseEvent('onmousedown', eventInitDict) as MouseEvent;
+    expect(ev.bubbles).toBe(true);
+    expect(ev.cancelBubble).toBe(false);
+    expect(ev.cancelable).toBe(false);
+    expect(ev.composed).toBe(true);
+    expect(ev.currentTarget).toBe(null);
+    expect(ev.defaultPrevented).toBe(false);
+    expect(ev.srcElement).toBe(null);
+    expect(ev.target).toBe(null);
+    expect(typeof ev.timeStamp).toBe('number');
+    expect(ev.type).toBe('onmousedown');
+    expect(ev.screenX).toBe(99);
+    expect(ev.screenY).toBe(99);
+    expect(ev.clientX).toBe(99);
+    expect(ev.clientY).toBe(99);
+    expect(ev.ctrlKey).toBe(false);
+    expect(ev.shiftKey).toBe(true);
+    expect(ev.altKey).toBe(false);
+    expect(ev.metaKey).toBe(false);
+    expect(ev.button).toBe(0);
+    expect(ev.buttons).toBe(99);
+    expect(ev.relatedTarget).toBe(null);
+  });
 });
diff --git a/src/mock-doc/window.ts b/src/mock-doc/window.ts
@@ -1,6 +1,6 @@
 import { createConsole } from './console';
 import { MockCustomElementRegistry, resetCustomElementRegistry } from './custom-element-registry';
-import { MockCustomEvent, MockEvent, MockKeyboardEvent, addEventListener, dispatchEvent, removeEventListener, resetEventListeners } from './event';
+import { MockCustomEvent, MockEvent, MockKeyboardEvent, MockMouseEvent, addEventListener, dispatchEvent, removeEventListener, resetEventListeners } from './event';
 import { MockDocument, resetDocument } from './document';
 import { MockElement, MockHTMLElement, MockNodeList} from './node';
 import { MockHistory } from './history';
@@ -22,6 +22,7 @@ const sessionStorageMap = new WeakMap<MockWindow, MockStorage>();
 const eventClassMap = new WeakMap<MockWindow, any>();
 const customEventClassMap = new WeakMap<MockWindow, any>();
 const keyboardEventClassMap = new WeakMap<MockWindow, any>();
+const mouseEventClassMap = new WeakMap<MockWindow, any>();
 const nativeClearInterval = clearInterval;
 const nativeClearTimeout = clearTimeout;
 const nativeSetInterval = setInterval;
@@ -128,6 +129,17 @@ export class MockWindow {
     keyboardEventClassMap.set(this, kbEvClass);
   }
 
+  get MouseEvent() {
+    const mouseEvClass = mouseEventClassMap.get(this);
+    if (mouseEvClass != null) {
+      return mouseEvClass;
+    }
+    return MockMouseEvent;
+  }
+  set MouseEvent(mouseEvClass: any) {
+    mouseEventClassMap.set(this, mouseEvClass);
+  }
+
   dispatchEvent(ev: MockEvent) {
     return dispatchEvent(this, ev);
   }
@@ -465,6 +477,7 @@ export function resetWindow(win: Window) {
     eventClassMap.delete(win as any);
     customEventClassMap.delete(win as any);
     keyboardEventClassMap.delete(win as any);
+    mouseEventClassMap.delete(win as any);
 
     if (win.document != null) {
       try {

diff --git a/src/runtime/test/event.spec.tsx b/src/runtime/test/event.spec.tsx
@@ -230,4 +230,74 @@ describe('event', () => {
       `);
     });
   });
+
+  describe('MouseEvent', () => {
+    it('can be dispatched', async () => {
+      @Component({ tag: 'cmp-a'})
+      class CmpA {
+        @State() counter = 0;
+
+        @Listen('onclick')
+        onClick() {
+          this.counter++;
+        }
+
+        render() {
+          return `${this.counter}`;
+        }
+      }
+
+      const { root, waitForChanges } = await newSpecPage({
+        components: [CmpA],
+        html: `<cmp-a></cmp-a>`,
+      });
+
+      expect(root).toEqualHtml(`
+        <cmp-a>0</cmp-a>
+      `);
+
+      const ev = new MouseEvent('onclick');
+      root.dispatchEvent(ev);
+      await waitForChanges();
+
+      expect(root).toEqualHtml(`
+        <cmp-a>1</cmp-a>
+      `);
+    });
+
+    it('can be dispatched with custom data', async () => {
+      @Component({ tag: 'cmp-a'})
+      class CmpA {
+        @State() screenX: string;
+        @State() shift: string;
+
+        @Listen('onclick')
+        onClick(ev: MouseEvent) {
+          this.screenX = ev.screenX.toString();
+          this.shift = ev.shiftKey ? 'Yes' : 'No';
+        }
+
+        render() {
+          return `${this.screenX || ''} - ${this.shift || ''}`;
+        }
+      }
+
+      const { root, waitForChanges } = await newSpecPage({
+        components: [CmpA],
+        html: `<cmp-a></cmp-a>`,
+      });
+
+      expect(root).toEqualHtml(`
+        <cmp-a> - </cmp-a>
+      `);
+
+      const ev = new MouseEvent('onclick', {screenX: 99, shiftKey: true});
+      root.dispatchEvent(ev);
+      await waitForChanges();
+
+      expect(root).toEqualHtml(`
+        <cmp-a>99 - Yes</cmp-a>
+      `);
+    });
+  });
 });