refactor(cdk/testing): share code for sending key events between our

existing tests and the test harnesses.

Also adds API for more easily sending special keys that don't result in
a character being typed

Author: mmalerba

src/cdk-experimental/dialog/dialog.spec.ts

@@ -308,8 +308,8 @@ describe('Dialog', () => {
     let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
     let container = overlayContainerElement.querySelector('cdk-dialog-container') as HTMLElement;
     dispatchKeyboardEvent(document.body, 'keydown', A);
-    dispatchKeyboardEvent(document.body, 'keydown', A, backdrop);
-    dispatchKeyboardEvent(document.body, 'keydown', A, container);
+    dispatchKeyboardEvent(document.body, 'keydown', A, undefined, backdrop);
+    dispatchKeyboardEvent(document.body, 'keydown', A, undefined, container);
 
     expect(spy).toHaveBeenCalledTimes(3);
   }));

src/cdk-experimental/popover-edit/popover-edit.spec.ts

@@ -484,7 +484,7 @@ describe('CDK Popover Edit', () => {
 
         describe('arrow keys', () => {
           const dispatchKey = (cell: HTMLElement, keyCode: number) =>
-              dispatchKeyboardEvent(cell, 'keydown', keyCode, cell);
+              dispatchKeyboardEvent(cell, 'keydown', keyCode, undefined, cell);
 
           it('moves focus up/down/left/right and prevents default', () => {
             const rowCells = getRowCells();

src/cdk-experimental/testing/testbed/unit-test-element.ts

@@ -7,19 +7,15 @@
  */
 
 import {
-  dispatchFakeEvent,
-  dispatchKeyboardEvent,
+  clearElement,
   dispatchMouseEvent,
+  isTextInput,
   triggerBlur,
-  triggerFocus
+  triggerFocus,
+  typeInElement
 } from '@angular/cdk/testing';
 import {TestElement} from '../test-element';
 
-function isTextInput(element: Element): element is HTMLInputElement | HTMLTextAreaElement {
-  return element.nodeName.toLowerCase() === 'input' ||
-      element.nodeName.toLowerCase() === 'textarea' ;
-}
-
 /** A `TestElement` implementation for unit tests. */
 export class UnitTestElement implements TestElement {
   constructor(readonly element: Element, private _stabilize: () => Promise<void>) {}
@@ -35,9 +31,7 @@ export class UnitTestElement implements TestElement {
     if (!isTextInput(this.element)) {
       throw Error('Attempting to clear an invalid element');
     }
-    triggerFocus(this.element as HTMLElement);
-    this.element.value = '';
-    dispatchFakeEvent(this.element, 'input');
+    clearElement(this.element);
     await this._stabilize();
   }
 
@@ -68,19 +62,7 @@ export class UnitTestElement implements TestElement {
 
   async sendKeys(keys: string): Promise<void> {
     await this._stabilize();
-    triggerFocus(this.element as HTMLElement);
-    for (const key of keys) {
-      const keyCode = key.charCodeAt(0);
-      dispatchKeyboardEvent(this.element, 'keydown', keyCode);
-      dispatchKeyboardEvent(this.element, 'keypress', keyCode);
-      if (isTextInput(this.element)) {
-        this.element.value += key;
-      }
-      dispatchKeyboardEvent(this.element, 'keyup', keyCode);
-      if (isTextInput(this.element)) {
-        dispatchFakeEvent(this.element, 'input');
-      }
-    }
+    typeInElement(this.element as HTMLElement, keys);
     await this._stabilize();
   }
 

src/cdk/a11y/key-manager/list-key-manager.spec.ts

@@ -655,9 +655,9 @@ describe('Key managers', () => {
       });
 
       it('should debounce the input key presses', fakeAsync(() => {
-        keyManager.onKeydown(createKeyboardEvent('keydown', 79, undefined, 'o')); // types "o"
-        keyManager.onKeydown(createKeyboardEvent('keydown', 78, undefined, 'n')); // types "n"
-        keyManager.onKeydown(createKeyboardEvent('keydown', 69, undefined, 'e')); // types "e"
+        keyManager.onKeydown(createKeyboardEvent('keydown', 79, 'o')); // types "o"
+        keyManager.onKeydown(createKeyboardEvent('keydown', 78, 'n')); // types "n"
+        keyManager.onKeydown(createKeyboardEvent('keydown', 69, 'e')); // types "e"
 
         expect(keyManager.activeItem).not.toBe(itemList.items[0]);
 
@@ -667,15 +667,15 @@ describe('Key managers', () => {
       }));
 
       it('should focus the first item that starts with a letter', fakeAsync(() => {
-        keyManager.onKeydown(createKeyboardEvent('keydown', 84, undefined, 't')); // types "t"
+        keyManager.onKeydown(createKeyboardEvent('keydown', 84, 't')); // types "t"
 
         tick(debounceInterval);
 
         expect(keyManager.activeItem).toBe(itemList.items[1]);
       }));
 
       it('should not move focus if a modifier, that is not allowed, is pressed', fakeAsync(() => {
-        const tEvent = createKeyboardEvent('keydown', 84, undefined, 't');
+        const tEvent = createKeyboardEvent('keydown', 84, 't');
         Object.defineProperty(tEvent, 'ctrlKey', {get: () => true});
 
         expect(keyManager.activeItem).toBeFalsy();
@@ -687,7 +687,7 @@ describe('Key managers', () => {
       }));
 
       it('should always allow the shift key', fakeAsync(() => {
-        const tEvent = createKeyboardEvent('keydown', 84, undefined, 't');
+        const tEvent = createKeyboardEvent('keydown', 84, 't');
         Object.defineProperty(tEvent, 'shiftKey', {get: () => true});
 
         expect(keyManager.activeItem).toBeFalsy();
@@ -699,17 +699,17 @@ describe('Key managers', () => {
       }));
 
       it('should focus the first item that starts with sequence of letters', fakeAsync(() => {
-        keyManager.onKeydown(createKeyboardEvent('keydown', 84, undefined, 't')); // types "t"
-        keyManager.onKeydown(createKeyboardEvent('keydown', 72, undefined, 'h')); // types "h"
+        keyManager.onKeydown(createKeyboardEvent('keydown', 84, 't')); // types "t"
+        keyManager.onKeydown(createKeyboardEvent('keydown', 72, 'h')); // types "h"
 
         tick(debounceInterval);
 
         expect(keyManager.activeItem).toBe(itemList.items[2]);
       }));
 
       it('should cancel any pending timers if a navigation key is pressed', fakeAsync(() => {
-        keyManager.onKeydown(createKeyboardEvent('keydown', 84, undefined, 't')); // types "t"
-        keyManager.onKeydown(createKeyboardEvent('keydown', 72, undefined, 'h')); // types "h"
+        keyManager.onKeydown(createKeyboardEvent('keydown', 84, 't')); // types "t"
+        keyManager.onKeydown(createKeyboardEvent('keydown', 72, 'h')); // types "h"
         keyManager.onKeydown(fakeKeyEvents.downArrow);
 
         tick(debounceInterval);
@@ -724,7 +724,7 @@ describe('Key managers', () => {
           new FakeFocusable('три')
         ];
 
-        const keyboardEvent = createKeyboardEvent('keydown', 68, undefined, 'д');
+        const keyboardEvent = createKeyboardEvent('keydown', 68, 'д');
 
         keyManager.onKeydown(keyboardEvent); // types "д"
         tick(debounceInterval);
@@ -739,15 +739,15 @@ describe('Key managers', () => {
           new FakeFocusable('`!?')
         ];
 
-        keyManager.onKeydown(createKeyboardEvent('keydown', 192, undefined, '`')); // types "`"
+        keyManager.onKeydown(createKeyboardEvent('keydown', 192, '`')); // types "`"
         tick(debounceInterval);
         expect(keyManager.activeItem).toBe(itemList.items[2]);
 
-        keyManager.onKeydown(createKeyboardEvent('keydown', 51, undefined, '3')); // types "3"
+        keyManager.onKeydown(createKeyboardEvent('keydown', 51, '3')); // types "3"
         tick(debounceInterval);
         expect(keyManager.activeItem).toBe(itemList.items[1]);
 
-        keyManager.onKeydown(createKeyboardEvent('keydown', 219, undefined, '[')); // types "["
+        keyManager.onKeydown(createKeyboardEvent('keydown', 219, '[')); // types "["
         tick(debounceInterval);
         expect(keyManager.activeItem).toBe(itemList.items[0]);
       }));
@@ -756,7 +756,7 @@ describe('Key managers', () => {
         expect(keyManager.activeItem).toBeFalsy();
 
         itemList.items[0].disabled = true;
-        keyManager.onKeydown(createKeyboardEvent('keydown', 79, undefined, 'o')); // types "o"
+        keyManager.onKeydown(createKeyboardEvent('keydown', 79, 'o')); // types "o"
         tick(debounceInterval);
 
         expect(keyManager.activeItem).toBeFalsy();
@@ -772,7 +772,7 @@ describe('Key managers', () => {
         ];
 
         keyManager.setActiveItem(1);
-        keyManager.onKeydown(createKeyboardEvent('keydown', 66, undefined, 'b'));
+        keyManager.onKeydown(createKeyboardEvent('keydown', 66, 'b'));
         tick(debounceInterval);
 
         expect(keyManager.activeItem).toBe(itemList.items[3]);
@@ -788,31 +788,31 @@ describe('Key managers', () => {
         ];
 
         keyManager.setActiveItem(3);
-        keyManager.onKeydown(createKeyboardEvent('keydown', 66, undefined, 'b'));
+        keyManager.onKeydown(createKeyboardEvent('keydown', 66, 'b'));
         tick(debounceInterval);
 
         expect(keyManager.activeItem).toBe(itemList.items[0]);
       }));
 
       it('should wrap back around if the last item is active', fakeAsync(() => {
         keyManager.setActiveItem(2);
-        keyManager.onKeydown(createKeyboardEvent('keydown', 79, undefined, 'o'));
+        keyManager.onKeydown(createKeyboardEvent('keydown', 79, 'o'));
         tick(debounceInterval);
 
         expect(keyManager.activeItem).toBe(itemList.items[0]);
       }));
 
       it('should be able to select the first item', fakeAsync(() => {
         keyManager.setActiveItem(-1);
-        keyManager.onKeydown(createKeyboardEvent('keydown', 79, undefined, 'o'));
+        keyManager.onKeydown(createKeyboardEvent('keydown', 79, 'o'));
         tick(debounceInterval);
 
         expect(keyManager.activeItem).toBe(itemList.items[0]);
       }));
 
       it('should not do anything if there is no match', fakeAsync(() => {
         keyManager.setActiveItem(1);
-        keyManager.onKeydown(createKeyboardEvent('keydown', 87, undefined, 'w'));
+        keyManager.onKeydown(createKeyboardEvent('keydown', 87, 'w'));
         tick(debounceInterval);
 
         expect(keyManager.activeItem).toBe(itemList.items[1]);

src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.spec.ts

@@ -104,11 +104,11 @@ describe('OverlayKeyboardDispatcher', () => {
     instance.attach(new ComponentPortal(TestComponent));
     instance.keydownEvents().subscribe(spy);
 
-    dispatchKeyboardEvent(document.body, 'keydown', ESCAPE, instance.overlayElement);
+    dispatchKeyboardEvent(document.body, 'keydown', ESCAPE, undefined, instance.overlayElement);
     expect(spy).toHaveBeenCalledTimes(1);
 
     instance.detach();
-    dispatchKeyboardEvent(document.body, 'keydown', ESCAPE, instance.overlayElement);
+    dispatchKeyboardEvent(document.body, 'keydown', ESCAPE, undefined, instance.overlayElement);
 
     expect(spy).toHaveBeenCalledTimes(1);
   });
@@ -120,11 +120,11 @@ describe('OverlayKeyboardDispatcher', () => {
     instance.attach(new ComponentPortal(TestComponent));
     instance.keydownEvents().subscribe(spy);
 
-    dispatchKeyboardEvent(document.body, 'keydown', ESCAPE, instance.overlayElement);
+    dispatchKeyboardEvent(document.body, 'keydown', ESCAPE, undefined, instance.overlayElement);
     expect(spy).toHaveBeenCalledTimes(1);
 
     instance.dispose();
-    dispatchKeyboardEvent(document.body, 'keydown', ESCAPE, instance.overlayElement);
+    dispatchKeyboardEvent(document.body, 'keydown', ESCAPE, undefined, instance.overlayElement);
 
     expect(spy).toHaveBeenCalledTimes(1);
   });

src/cdk/testing/dispatch-events.ts

@@ -34,9 +34,9 @@ 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, target?: Element):
-    KeyboardEvent {
-  return dispatchEvent(node, createKeyboardEvent(type, keyCode, target)) as KeyboardEvent;
+export function dispatchKeyboardEvent(node: Node, type: string, keyCode: number, key?: string,
+                                      target?: Element): KeyboardEvent {
+  return dispatchEvent(node, createKeyboardEvent(type, keyCode, key, target)) as KeyboardEvent;
 }
 
 /**

src/cdk/testing/event-objects.ts

@@ -63,7 +63,7 @@ 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, target?: Element, key?: string) {
+export function createKeyboardEvent(type: string, keyCode: number, key?: string, target?: Element) {
   let event = document.createEvent('KeyboardEvent') as any;
   let originalPreventDefault = event.preventDefault;
 

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

@@ -6,7 +6,26 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {dispatchFakeEvent} from './dispatch-events';
+import {dispatchFakeEvent, dispatchKeyboardEvent} from './dispatch-events';
+import {triggerFocus} from './element-focus';
+
+/**
+ * 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;
+}
+
+/**
+ * Checks whether the given Element is a text input element.
+ * @docs-private
+ */
+export function isTextInput(element: Element): element is HTMLInputElement | HTMLTextAreaElement {
+  return element.nodeName.toLowerCase() === 'input' ||
+      element.nodeName.toLowerCase() === 'textarea' ;
+}
 
 /**
  * Focuses an input, sets its value and dispatches
@@ -15,8 +34,34 @@ import {dispatchFakeEvent} from './dispatch-events';
  * @param element Element onto which to set the value.
  * @docs-private
  */
-export function typeInElement(value: string, element: HTMLInputElement) {
-  element.focus();
-  element.value = value;
+export function typeInElement(element: HTMLElement, ...value: (string | SpecialKey)[]) {
+  triggerFocus(element);
+  for (const keys of value) {
+    if (typeof keys === 'string') {
+      for (const key of keys) {
+        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', keys.keyCode, keys.key);
+      dispatchKeyboardEvent(element, 'keypress', keys.keyCode, keys.key);
+      dispatchKeyboardEvent(element, 'keyup', keys.keyCode, keys.key);
+    }
+  }
+}
+
+/**
+ * Clears the text in an input or textarea element.
+ * @docs-private
+ */
+export function clearElement(element: HTMLInputElement | HTMLTextAreaElement) {
+  triggerFocus(element as HTMLElement);
+  element.value = '';
   dispatchFakeEvent(element, 'input');
 }