Add support for modifier keys to typeInElement

Author: mmalerba

src/cdk/keycodes/modifiers.spec.ts

@@ -4,53 +4,51 @@ import {hasModifierKey} from './modifiers';
 describe('keyboard modifiers', () => {
   it('should check whether the alt key is pressed', () => {
     const event = createKeyboardEvent('keydown', 0);
+    const altEvent = createKeyboardEvent('keydown', 0, '', undefined, {alt: true});
 
     expect(hasModifierKey(event)).toBe(false);
-    Object.defineProperty(event, 'altKey', {get: () => true});
-    expect(hasModifierKey(event)).toBe(true);
+    expect(hasModifierKey(altEvent)).toBe(true);
   });
 
   it('should check whether the shift key is pressed', () => {
     const event = createKeyboardEvent('keydown', 0);
+    const shiftEvent = createKeyboardEvent('keydown', 0, '', undefined, {shift: true});
 
     expect(hasModifierKey(event)).toBe(false);
-    Object.defineProperty(event, 'shiftKey', {get: () => true});
-    expect(hasModifierKey(event)).toBe(true);
+    expect(hasModifierKey(shiftEvent)).toBe(true);
   });
 
   it('should check whether the meta key is pressed', () => {
     const event = createKeyboardEvent('keydown', 0);
+    const metaEvent = createKeyboardEvent('keydown', 0, '', undefined, {meta: true});
 
     expect(hasModifierKey(event)).toBe(false);
-    Object.defineProperty(event, 'metaKey', {get: () => true});
-    expect(hasModifierKey(event)).toBe(true);
+    expect(hasModifierKey(metaEvent)).toBe(true);
   });
 
   it('should check whether the ctrl key is pressed', () => {
     const event = createKeyboardEvent('keydown', 0);
+    const ctrlEvent = createKeyboardEvent('keydown', 0, '', undefined, {control: true});
 
     expect(hasModifierKey(event)).toBe(false);
-    Object.defineProperty(event, 'ctrlKey', {get: () => true});
-    expect(hasModifierKey(event)).toBe(true);
+    expect(hasModifierKey(ctrlEvent)).toBe(true);
   });
 
   it('should check if a particular modifier key is pressed', () => {
-    const event = createKeyboardEvent('keydown', 0);
-    Object.defineProperty(event, 'ctrlKey', {get: () => true});
+    const ctrlEvent = createKeyboardEvent('keydown', 0, '', undefined, {control: true});
+    const ctrlAltEvent = createKeyboardEvent(
+        'keydown', 0, '', undefined, {control: true, alt: true});
 
-    expect(hasModifierKey(event, 'altKey')).toBe(false);
-    Object.defineProperty(event, 'altKey', {get: () => true});
-    expect(hasModifierKey(event, 'altKey')).toBe(true);
+    expect(hasModifierKey(ctrlEvent, 'altKey')).toBe(false);
+    expect(hasModifierKey(ctrlAltEvent, 'altKey')).toBe(true);
   });
 
   it('should check if multiple specific modifier keys are pressed', () => {
-    const event = createKeyboardEvent('keydown', 0);
-    Object.defineProperty(event, 'ctrlKey', {get: () => true});
+    const ctrlEvent = createKeyboardEvent('keydown', 0, '', undefined, {control: true});
+    const ctrlAltShiftEvent = createKeyboardEvent(
+        'keydown', 0, '', undefined, {control: true, alt: true, shift: true});
 
-    expect(hasModifierKey(event, 'altKey', 'shiftKey')).toBe(false);
-    Object.defineProperty(event, 'altKey', {get: () => true});
-    Object.defineProperty(event, 'shiftKey', {get: () => true});
-    expect(hasModifierKey(event, 'altKey', 'shiftKey')).toBe(true);
+    expect(hasModifierKey(ctrlEvent, 'altKey', 'shiftKey')).toBe(false);
+    expect(hasModifierKey(ctrlAltShiftEvent, 'altKey', 'shiftKey')).toBe(true);
   });
-
 });

src/cdk/testing/dispatch-events.ts

@@ -10,7 +10,8 @@ import {
   createFakeEvent,
   createKeyboardEvent,
   createMouseEvent,
-  createTouchEvent
+  createTouchEvent,
+  ModifierKeys
 } from './event-objects';
 
 /**
@@ -34,9 +35,10 @@ export function dispatchFakeEvent(node: Node | Window, type: string, canBubble?:
  * Shorthand to dispatch a keyboard event with a specified key code.
  * @docs-private
  */
-export function dispatchKeyboardEvent(node: Node, type: string, keyCode: number, key?: string,
-                                      target?: Element): KeyboardEvent {
-  return dispatchEvent(node, createKeyboardEvent(type, keyCode, key, target)) as KeyboardEvent;
+export function dispatchKeyboardEvent(node: Node, type: string, keyCode?: number, key?: string,
+                                      target?: Element, modifiers?: ModifierKeys): KeyboardEvent {
+  return dispatchEvent(node,
+      createKeyboardEvent(type, keyCode, key, target, modifiers)) as KeyboardEvent;
 }
 
 /**

src/cdk/testing/event-objects.ts

@@ -6,6 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+/** Modifier keys that may be held while typing. */
+export interface ModifierKeys {
+  control?: boolean;
+  alt?: boolean;
+  shift?: boolean;
+  meta?: boolean;
+}
+
 /**
  * Creates a browser MouseEvent with the specified options.
  * @docs-private
@@ -63,23 +71,31 @@ export function createTouchEvent(type: string, pageX = 0, pageY = 0) {
  * Dispatches a keydown event from an element.
  * @docs-private
  */
-export function createKeyboardEvent(type: string, keyCode: number, key?: string, target?: Element) {
+export function createKeyboardEvent(type: string, keyCode: number = 0, key: string = '',
+                                    target?: Element, modifiers: ModifierKeys = {}) {
   let event = document.createEvent('KeyboardEvent') as any;
   let originalPreventDefault = event.preventDefault;
 
   // Firefox does not support `initKeyboardEvent`, but supports `initKeyEvent`.
   if (event.initKeyEvent) {
-    event.initKeyEvent(type, true, true, window, 0, 0, 0, 0, 0, keyCode);
+    event.initKeyEvent(type, true, true, window, modifiers.control, modifiers.alt, modifiers.shift,
+        modifiers.meta, keyCode);
   } else {
-    event.initKeyboardEvent(type, true, true, window, 0, key, 0, '', false);
+    let modifiersStr = (modifiers.control ? 'Control ' : '' + modifiers.alt ? 'Alt ' : '' +
+        modifiers.shift ? 'Shift ' : '' + modifiers.meta ? 'Meta' : '').trim();
+    event.initKeyboardEvent(type, true, true, window, 0, key, 0, modifiersStr, false);
   }
 
   // Webkit Browsers don't set the keyCode when calling the init function.
   // See related bug https://bugs.webkit.org/show_bug.cgi?id=16735
   Object.defineProperties(event, {
     keyCode: { get: () => keyCode },
     key: { get: () => key },
-    target: { get: () => target }
+    target: { get: () => target },
+    ctrlKey: { get: () => !!modifiers.control },
+    altKey: { get: () => !!modifiers.alt },
+    shiftKey: { get: () => !!modifiers.shift },
+    metaKey: { get: () => !!modifiers.meta }
   });
 
   // IE won't set `defaultPrevented` on synthetic events so we need to do it manually.

src/cdk/testing/type-in-element.ts

@@ -8,23 +8,7 @@
 
 import {dispatchFakeEvent, dispatchKeyboardEvent} from './dispatch-events';
 import {triggerFocus} from './element-focus';
-
-/** Modifier keys that may be held while typing. */
-export interface KeyModifiers {
-  control?: boolean;
-  alt?: boolean;
-  shift?: boolean;
-  meta?: boolean;
-}
-
-/**
- * Represents a special key that does not result in a character being inputed in a text field.
- * @docs-private
- */
-export interface SpecialKey {
-  keyCode: number;
-  key?: string;
-}
+import {ModifierKeys} from './event-objects';
 
 /**
  * Checks whether the given Element is a text input element.
@@ -42,7 +26,8 @@ export function isTextInput(element: Element): element is HTMLInputElement | HTM
  * @param keys The keys to send to the element.
  * @docs-private
  */
-export function typeInElement(element: HTMLElement, ...keys: (string | SpecialKey)[]): void;
+export function typeInElement(
+    element: HTMLElement, ...keys: (string | {keyCode?: number, key?: string})[]): void;
 
 /**
  * Focuses an input, sets its value and dispatches
@@ -52,40 +37,34 @@ export function typeInElement(element: HTMLElement, ...keys: (string | SpecialKe
  * @param keys The keys to send to the element.
  * @docs-private
  */
-export function typeInElement(
-    element: HTMLElement, modifiers: KeyModifiers, ...keys: (string | SpecialKey)[]): void;
+export function typeInElement(element: HTMLElement, modifiers: ModifierKeys,
+                              ...keys: (string | {keyCode?: number, key?: string})[]): void;
 
 export function typeInElement(element: HTMLElement, ...modifiersAndKeys: any) {
   const first = modifiersAndKeys[0];
-  let modifiers: KeyModifiers;
-  let keys: (string | SpecialKey)[];
-  if (typeof first !== 'string' && first.keyCode === undefined) {
+  let modifiers: ModifierKeys;
+  let rest: (string | {keyCode?: number, key?: string})[];
+  if (typeof first !== 'string' && first.keyCode === undefined && first.key === undefined) {
     modifiers = first;
-    keys = modifiersAndKeys.slice(1);
+    rest = modifiersAndKeys.slice(1);
   } else {
     modifiers = {};
-    keys = modifiersAndKeys;
+    rest = modifiersAndKeys;
   }
+  const keys: {keyCode?: number, key?: string}[] = rest
+      .map(k => typeof k === 'string' ?
+          k.split('').map(c => ({keyCode: c.toUpperCase().charCodeAt(0), key: c})) : [k])
+      .reduce((arr, k) => arr.concat(k), []);
 
-  // TODO: pass through modifiers
   triggerFocus(element);
-  for (const keyOrStr of keys) {
-    if (typeof keyOrStr === 'string') {
-      for (const key of keyOrStr) {
-        const keyCode = key.charCodeAt(0);
-        dispatchKeyboardEvent(element, 'keydown', keyCode);
-        dispatchKeyboardEvent(element, 'keypress', keyCode);
-        if (isTextInput(element)) {
-          element.value += key;
-          dispatchFakeEvent(element, 'input');
-        }
-        dispatchKeyboardEvent(element, 'keyup', keyCode);
-      }
-    } else {
-      dispatchKeyboardEvent(element, 'keydown', keyOrStr.keyCode, keyOrStr.key);
-      dispatchKeyboardEvent(element, 'keypress', keyOrStr.keyCode, keyOrStr.key);
-      dispatchKeyboardEvent(element, 'keyup', keyOrStr.keyCode, keyOrStr.key);
+  for (const key of keys) {
+    dispatchKeyboardEvent(element, 'keydown', key.keyCode, key.key, element, modifiers);
+    dispatchKeyboardEvent(element, 'keypress', key.keyCode, key.key, element, modifiers);
+    if (isTextInput(element) && key.key && key.key.length === 1) {
+      element.value += key.key;
+      dispatchFakeEvent(element, 'input');
     }
+    dispatchKeyboardEvent(element, 'keyup', key.keyCode, key.key, element, modifiers);
   }
 }
 

src/material/autocomplete/autocomplete.spec.ts

@@ -51,12 +51,6 @@ import {
   MatAutocompleteTrigger,
 } from './index';
 
-function old__typeInElement(value: string, element: HTMLInputElement) {
-  element.focus();
-  element.value = value;
-  dispatchFakeEvent(element, 'input');
-}
-
 describe('MatAutocomplete', () => {
   let overlayContainer: OverlayContainer;
   let overlayContainerElement: HTMLElement;

tools/public_api_guard/cdk/testing.d.ts

@@ -2,7 +2,7 @@ export declare function clearElement(element: HTMLInputElement | HTMLTextAreaEle
 
 export declare function createFakeEvent(type: string, canBubble?: boolean, cancelable?: boolean): Event;
 
-export declare function createKeyboardEvent(type: string, keyCode: number, key?: string, target?: Element): any;
+export declare function createKeyboardEvent(type: string, keyCode?: number, key?: string, target?: Element, modifiers?: ModifierKeys): any;
 
 export declare function createMouseEvent(type: string, x?: number, y?: number, button?: number): MouseEvent;
 
@@ -12,23 +12,32 @@ export declare function dispatchEvent(node: Node | Window, event: Event): Event;
 
 export declare function dispatchFakeEvent(node: Node | Window, type: string, canBubble?: boolean): Event;
 
-export declare function dispatchKeyboardEvent(node: Node, type: string, keyCode: number, key?: string, target?: Element): KeyboardEvent;
+export declare function dispatchKeyboardEvent(node: Node, type: string, keyCode?: number, key?: string, target?: Element, modifiers?: ModifierKeys): KeyboardEvent;
 
 export declare function dispatchMouseEvent(node: Node, type: string, x?: number, y?: number, event?: MouseEvent): MouseEvent;
 
 export declare function dispatchTouchEvent(node: Node, type: string, x?: number, y?: number): Event;
 
 export declare function isTextInput(element: Element): element is HTMLInputElement | HTMLTextAreaElement;
 
-export declare function patchElementFocus(element: HTMLElement): void;
-
-export interface SpecialKey {
-    key?: string;
-    keyCode: number;
+export interface ModifierKeys {
+    alt?: boolean;
+    control?: boolean;
+    meta?: boolean;
+    shift?: boolean;
 }
 
+export declare function patchElementFocus(element: HTMLElement): void;
+
 export declare function triggerBlur(element: HTMLElement): void;
 
 export declare function triggerFocus(element: HTMLElement): void;
 
-export declare function typeInElement(element: HTMLElement, ...value: (string | SpecialKey)[]): void;
+export declare function typeInElement(element: HTMLElement, ...keys: (string | {
+    keyCode?: number;
+    key?: string;
+})[]): void;
+export declare function typeInElement(element: HTMLElement, modifiers: ModifierKeys, ...keys: (string | {
+    keyCode?: number;
+    key?: string;
+})[]): void;