feat(mock-doc): add KeyboardEvent (#1581)

Author: kensodemann

src/mock-doc/event.ts

@@ -55,6 +55,26 @@ export class MockCustomEvent extends MockEvent {
 
 }
 
+export class MockKeyboardEvent extends MockEvent {
+  code = '';
+  key = '';
+  altKey = false;
+  ctrlKey = false;
+  metaKey = false;
+  shiftKey = false;
+  location = 0;
+  repeat = false;
+
+  constructor(type: string, keyboardEventInitDic?: KeyboardEventInit) {
+    super(type);
+
+    if (keyboardEventInitDic != null) {
+      Object.assign(this, keyboardEventInitDic);
+    }
+  }
+
+}
+
 
 export class MockEventListener {
   type: string;

src/mock-doc/global.ts

@@ -59,5 +59,6 @@ const WINDOW_PROPS = [
   'CSS',
   'CustomEvent',
   'Event',
-  'HTMLElement'
+  'HTMLElement',
+  'KeyboardEvent'
 ];

src/mock-doc/index.ts

@@ -2,7 +2,7 @@
 export { MockAttr, MockAttributeMap, cloneAttributes } from './attribute';
 export { MockComment } from './comment-node';
 export { MockElement, MockNode, MockTextNode } from './node';
-export { MockCustomEvent } from './event';
+export { MockCustomEvent, MockKeyboardEvent } from './event';
 export { MockDocument, createDocument, createFragment, resetDocument } from './document';
 export { MockWindow, cloneDocument, cloneWindow, constrainTimeouts, resetWindow } from './window';
 export { NODE_TYPES } from './constants';

src/mock-doc/test/event.spec.ts

@@ -1,6 +1,5 @@
 import { MockWindow } from '../window';
 
-
 describe('event', () => {
   let win: MockWindow;
   beforeEach(() => {
@@ -72,7 +71,7 @@ describe('event', () => {
       composed: true,
       detail: 88
     };
-    const ev = new win.Event('click', eventInitDict) as CustomEvent;
+    const ev = new win.CustomEvent('click', eventInitDict) as CustomEvent;
     expect(ev.bubbles).toBe(true);
     expect(ev.cancelBubble).toBe(false);
     expect(ev.cancelable).toBe(false);
@@ -86,4 +85,65 @@ describe('event', () => {
     expect(ev.detail).toBe(88);
   });
 
+  it('KeyboardEvent() requires type', () => {
+    expect(() => {
+      new win.KeyboardEvent();
+    }).toThrow();
+  });
+
+  it('KeyboardEvent(type)', () => {
+    const ev = new win.KeyboardEvent('keyup') as KeyboardEvent;
+    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('keyup');
+    expect(ev.code).toBe('');
+    expect(ev.key).toBe('');
+    expect(ev.altKey).toBe(false);
+    expect(ev.ctrlKey).toBe(false);
+    expect(ev.metaKey).toBe(false);
+    expect(ev.shiftKey).toBe(false);
+    expect(ev.location).toBe(0);
+    expect(ev.repeat).toBe(false);
+  });
+
+  it('KeyboardEvent(type, eventInitDict)', () => {
+    const eventInitDict = {
+      bubbles: true,
+      composed: true,
+      code: 'KeyA',
+      key: 'A',
+      altKey: false,
+      ctrlKey: false,
+      metaKey: false,
+      shiftKey: true,
+      location: 0,
+      repeat: true
+    };
+    const ev = new win.KeyboardEvent('keyup', eventInitDict) as KeyboardEvent;
+    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('keyup');
+    expect(ev.code).toBe('KeyA');
+    expect(ev.key).toBe('A');
+    expect(ev.altKey).toBe(false);
+    expect(ev.ctrlKey).toBe(false);
+    expect(ev.metaKey).toBe(false);
+    expect(ev.shiftKey).toBe(true);
+    expect(ev.location).toBe(0);
+    expect(ev.repeat).toBe(true);
+  });
 });

src/mock-doc/window.ts

@@ -1,6 +1,6 @@
 import { createConsole } from './console';
 import { MockCustomElementRegistry, resetCustomElementRegistry } from './custom-element-registry';
-import { MockCustomEvent, MockEvent, addEventListener, dispatchEvent, removeEventListener, resetEventListeners } from './event';
+import { MockCustomEvent, MockEvent, MockKeyboardEvent, addEventListener, dispatchEvent, removeEventListener, resetEventListeners } from './event';
 import { MockDocument, resetDocument } from './document';
 import { MockElement } from './node';
 import { MockHistory } from './history';
@@ -19,6 +19,7 @@ const navMap = new WeakMap<MockWindow, MockNavigator>();
 const sessionStorageMap = new WeakMap<MockWindow, MockStorage>();
 const eventClassMap = new WeakMap<MockWindow, any>();
 const customEventClassMap = new WeakMap<MockWindow, any>();
+const keyboardEventClassMap = new WeakMap<MockWindow, any>();
 
 
 export class MockWindow {
@@ -101,6 +102,17 @@ export class MockWindow {
     customEventClassMap.set(this, custEvClass);
   }
 
+  get KeyboardEvent() {
+    const kbEvClass = keyboardEventClassMap.get(this);
+    if (kbEvClass != null) {
+      return kbEvClass;
+    }
+    return MockKeyboardEvent;
+  }
+  set KeyboardEvent(kbEvClass: any) {
+    keyboardEventClassMap.set(this, kbEvClass);
+  }
+
   dispatchEvent(ev: MockEvent) {
     return dispatchEvent(this, ev);
   }
@@ -408,6 +420,7 @@ export function resetWindow(win: Window) {
     sessionStorageMap.delete(win as any);
     eventClassMap.delete(win as any);
     customEventClassMap.delete(win as any);
+    keyboardEventClassMap.delete(win as any);
 
     if (win.document != null) {
       try {

src/runtime/test/event.spec.tsx

@@ -160,4 +160,74 @@ describe('event', () => {
       <cmp-a>1</cmp-a>
     `);
   });
+
+  describe('KeyboardEvent', () => {
+    it('can be dispatched', async () => {
+      @Component({ tag: 'cmp-a'})
+      class CmpA {
+        @State() counter = 0;
+
+        @Listen('keydown')
+        onKeyDown() {
+          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 KeyboardEvent('keydown');
+      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() key: string;
+        @State() shift: string;
+
+        @Listen('keydown')
+        onKeyDown(ev: KeyboardEvent) {
+          this.key = ev.key;
+          this.shift = ev.shiftKey ? 'Yes' : 'No';
+        }
+
+        render() {
+          return `${this.key || ''} - ${this.shift || ''}`;
+        }
+      }
+
+      const { root, waitForChanges } = await newSpecPage({
+        components: [CmpA],
+        html: `<cmp-a></cmp-a>`,
+      });
+
+      expect(root).toEqualHtml(`
+        <cmp-a> - </cmp-a>
+      `);
+
+      const ev = new KeyboardEvent('keydown', {key: 'A', shiftKey: true});
+      root.dispatchEvent(ev);
+      await waitForChanges();
+
+      expect(root).toEqualHtml(`
+        <cmp-a>A - Yes</cmp-a>
+      `);
+    });
+  });
 });