add better key support to harnesses

Author: mmalerba

src/cdk-experimental/testing/BUILD.bazel

@@ -11,6 +11,9 @@ ng_module(
             "**/*.spec.ts",
         ],
     ),
+    deps = [
+        "//src/cdk/testing",
+    ],
     module_name = "@angular/cdk-experimental/testing",
 )
 

src/cdk-experimental/testing/protractor/BUILD.bazel

@@ -12,5 +12,6 @@ ts_library(
     deps = [
         "//src/cdk-experimental/testing",
         "@npm//protractor",
+        "//src/cdk/testing"
     ],
 )

src/cdk-experimental/testing/protractor/protractor-element.ts

@@ -6,8 +6,42 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {browser, ElementFinder} from 'protractor';
-import {TestElement} from '../test-element';
+import {ModifierKeys} from '@angular/cdk/testing';
+import {browser, ElementFinder, Key} from 'protractor';
+import {TestElement, TestKey} from '../test-element';
+
+const keyMap = {
+  [TestKey.BACKSPACE]: Key.BACK_SPACE,
+  [TestKey.TAB]: Key.TAB,
+  [TestKey.ENTER]: Key.ENTER,
+  [TestKey.SHIFT]: Key.SHIFT,
+  [TestKey.CONTROL]: Key.CONTROL,
+  [TestKey.ALT]: Key.ALT,
+  [TestKey.ESCAPE]: Key.ESCAPE,
+  [TestKey.PAGE_UP]: Key.PAGE_UP,
+  [TestKey.PAGE_DOWN]: Key.PAGE_DOWN,
+  [TestKey.END]: Key.END,
+  [TestKey.HOME]: Key.HOME,
+  [TestKey.LEFT_ARROW]: Key.ARROW_LEFT,
+  [TestKey.UP_ARROW]: Key.ARROW_UP,
+  [TestKey.RIGHT_ARROW]: Key.ARROW_RIGHT,
+  [TestKey.DOWN_ARROW]: Key.ARROW_DOWN,
+  [TestKey.INSERT]: Key.INSERT,
+  [TestKey.DELETE]: Key.DELETE,
+  [TestKey.F1]: Key.F1,
+  [TestKey.F2]: Key.F2,
+  [TestKey.F3]: Key.F3,
+  [TestKey.F4]: Key.F4,
+  [TestKey.F5]: Key.F5,
+  [TestKey.F6]: Key.F6,
+  [TestKey.F7]: Key.F7,
+  [TestKey.F8]: Key.F8,
+  [TestKey.F9]: Key.F9,
+  [TestKey.F10]: Key.F10,
+  [TestKey.F11]: Key.F11,
+  [TestKey.F12]: Key.F12,
+  [TestKey.META]: Key.META
+};
 
 /** A `TestElement` implementation for Protractor. */
 export class ProtractorElement implements TestElement {
@@ -39,8 +73,31 @@ export class ProtractorElement implements TestElement {
         .perform();
   }
 
-  async sendKeys(keys: string): Promise<void> {
-    return this.element.sendKeys(keys);
+  async sendKeys(...keys: (string | TestKey)[]): Promise<void>;
+  async sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;
+  async sendKeys(...modifiersAndKeys: any[]): Promise<void> {
+    const first = modifiersAndKeys[0];
+    let modifiers: ModifierKeys;
+    let rest: (string | TestKey)[];
+    if (typeof first !== 'string' && typeof first !== 'number') {
+      modifiers = first;
+      rest = modifiersAndKeys.slice(1);
+    } else {
+      modifiers = {};
+      rest = modifiersAndKeys;
+    }
+
+    const modifierKeys = [
+        modifiers.control ? Key.CONTROL : '',
+        modifiers.alt ? Key.ALT : '',
+        modifiers.shift ? Key.SHIFT : '',
+        modifiers.meta ? Key.META : ''
+    ].filter(k => k);
+    const keys = rest.map(k => typeof k === 'string' ? k.split('') : [keyMap[k]])
+        .reduce((arr, k) => arr.concat(k), [])
+        .map(k => Key.chord(...modifierKeys, k));
+
+    return this.element.sendKeys(...keys);
   }
 
   async text(): Promise<string> {

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

@@ -6,6 +6,42 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+/** Keyboard keys that do not result in input characters. */
+import {ModifierKeys} from '@angular/cdk/testing';
+
+export enum TestKey {
+  BACKSPACE,
+  TAB,
+  ENTER,
+  SHIFT,
+  CONTROL,
+  ALT,
+  ESCAPE,
+  PAGE_UP,
+  PAGE_DOWN,
+  END,
+  HOME,
+  LEFT_ARROW,
+  UP_ARROW,
+  RIGHT_ARROW,
+  DOWN_ARROW,
+  INSERT,
+  DELETE,
+  F1,
+  F2,
+  F3,
+  F4,
+  F5,
+  F6,
+  F7,
+  F8,
+  F9,
+  F10,
+  F11,
+  F12,
+  META
+}
+
 /**
  * This acts as a common interface for DOM elements across both unit and e2e tests. It is the
  * interface through which the ComponentHarness interacts with the component's DOM.
@@ -33,7 +69,13 @@ export interface TestElement {
    * Sends the given string to the input as a series of key presses. Also fires input events
    * and attempts to add the string to the Element's value.
    */
-  sendKeys(keys: string): Promise<void>;
+  sendKeys(...keys: (string | TestKey)[]): Promise<void>;
+
+  /**
+   * Sends the given string to the input as a series of key presses. Also fires input events
+   * and attempts to add the string to the Element's value.
+   */
+  sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;
 
   /** Gets the text from the element. */
   text(): Promise<string>;

src/cdk-experimental/testing/testbed/BUILD.bazel

@@ -12,6 +12,7 @@ ts_library(
     deps = [
         "//src/cdk-experimental/testing",
         "//src/cdk/testing",
+        "//src/cdk/keycodes",
         "@npm//@angular/core",
     ],
 )

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

@@ -9,12 +9,46 @@
 import {
   clearElement,
   dispatchMouseEvent,
-  isTextInput,
+  isTextInput, ModifierKeys,
   triggerBlur,
   triggerFocus,
   typeInElement
 } from '@angular/cdk/testing';
-import {TestElement} from '../test-element';
+import {TestElement, TestKey} from '../test-element';
+import * as keyCodes from '@angular/cdk/keycodes';
+
+const keyMap = {
+  [TestKey.BACKSPACE]: {keyCode: keyCodes.BACKSPACE, key: 'Backspace'},
+  [TestKey.TAB]: {keyCode: keyCodes.TAB, key: 'Tab'},
+  [TestKey.ENTER]: {keyCode: keyCodes.ENTER, key: 'Enter'},
+  [TestKey.SHIFT]: {keyCode: keyCodes.SHIFT, key: 'Shift'},
+  [TestKey.CONTROL]: {keyCode: keyCodes.CONTROL, key: 'Control'},
+  [TestKey.ALT]: {keyCode: keyCodes.ALT, key: 'Alt'},
+  [TestKey.ESCAPE]: {keyCode: keyCodes.ESCAPE, key: 'Escape'},
+  [TestKey.PAGE_UP]: {keyCode: keyCodes.PAGE_UP, key: 'PageUp'},
+  [TestKey.PAGE_DOWN]: {keyCode: keyCodes.PAGE_DOWN, key: 'PageDown'},
+  [TestKey.END]: {keyCode: keyCodes.END, key: 'End'},
+  [TestKey.HOME]: {keyCode: keyCodes.HOME, key: 'Home'},
+  [TestKey.LEFT_ARROW]: {keyCode: keyCodes.LEFT_ARROW, key: 'ArrowLeft'},
+  [TestKey.UP_ARROW]: {keyCode: keyCodes.UP_ARROW, key: 'ArrowUp'},
+  [TestKey.RIGHT_ARROW]: {keyCode: keyCodes.RIGHT_ARROW, key: 'ArrowRight'},
+  [TestKey.DOWN_ARROW]: {keyCode: keyCodes.DOWN_ARROW, key: 'ArrowDown'},
+  [TestKey.INSERT]: {keyCode: keyCodes.INSERT, key: 'Insert'},
+  [TestKey.DELETE]: {keyCode: keyCodes.DELETE, key: 'Delete'},
+  [TestKey.F1]: {keyCode: keyCodes.F1, key: 'F1'},
+  [TestKey.F2]: {keyCode: keyCodes.F2, key: 'F2'},
+  [TestKey.F3]: {keyCode: keyCodes.F3, key: 'F3'},
+  [TestKey.F4]: {keyCode: keyCodes.F4, key: 'F4'},
+  [TestKey.F5]: {keyCode: keyCodes.F5, key: 'F5'},
+  [TestKey.F6]: {keyCode: keyCodes.F6, key: 'F6'},
+  [TestKey.F7]: {keyCode: keyCodes.F7, key: 'F7'},
+  [TestKey.F8]: {keyCode: keyCodes.F8, key: 'F8'},
+  [TestKey.F9]: {keyCode: keyCodes.F9, key: 'F9'},
+  [TestKey.F10]: {keyCode: keyCodes.F10, key: 'F10'},
+  [TestKey.F11]: {keyCode: keyCodes.F11, key: 'F11'},
+  [TestKey.F12]: {keyCode: keyCodes.F12, key: 'F12'},
+  [TestKey.META]: {keyCode: keyCodes.META, key: 'Meta'}
+};
 
 /** A `TestElement` implementation for unit tests. */
 export class UnitTestElement implements TestElement {
@@ -60,9 +94,12 @@ export class UnitTestElement implements TestElement {
     await this._stabilize();
   }
 
-  async sendKeys(keys: string): Promise<void> {
+  async sendKeys(...keys: (string | TestKey)[]): Promise<void>;
+  async sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;
+  async sendKeys(...modifiersAndKeys: any[]): Promise<void> {
     await this._stabilize();
-    typeInElement(this.element as HTMLElement, keys);
+    const args = modifiersAndKeys.map(k => typeof k === 'number' ? keyMap[k as TestKey] : k);
+    typeInElement(this.element as HTMLElement, ...args);
     await this._stabilize();
   }
 

src/cdk-experimental/testing/tests/BUILD.bazel

@@ -15,6 +15,7 @@ ng_module(
     module_name = "@angular/cdk-experimental/testing/tests",
     deps = [
         "@npm//@angular/forms",
+        "//src/cdk/keycodes",
     ],
 )
 

src/cdk-experimental/testing/tests/harnesses/main-component-harness.ts

@@ -7,7 +7,7 @@
  */
 
 import {ComponentHarness} from '../../component-harness';
-import {TestElement} from '../../test-element';
+import {TestElement, TestKey} from '../../test-element';
 import {SubComponentHarness} from './sub-component-harness';
 
 export class WrongComponentHarness extends ComponentHarness {
@@ -47,6 +47,7 @@ export class MainComponentHarness extends ComponentHarness {
   readonly testLists = this.locatorForAll(SubComponentHarness.with({title: /test/}));
   readonly requiredFourIteamToolsLists =
       this.locatorFor(SubComponentHarness.with({title: 'List of test tools', itemCount: 4}));
+  readonly specaialKey = this.locatorFor('.special-key');
 
   private _testTools = this.locatorFor(SubComponentHarness);
 
@@ -66,4 +67,12 @@ export class MainComponentHarness extends ComponentHarness {
     const subComponent = await this._testTools();
     return subComponent.getItems();
   }
+
+  async sendEnter(): Promise<void> {
+    return (await this.input()).sendKeys(TestKey.ENTER);
+  }
+
+  async sendAltJ(): Promise<void> {
+    return (await this.input()).sendKeys({alt: true}, 'j');
+  }
 }

src/cdk-experimental/testing/tests/protractor.e2e.spec.ts

@@ -155,6 +155,18 @@ describe('ProtractorHarnessEnvironment', () => {
       const globalEl = await harness.globalEl();
       expect(await globalEl.text()).toBe('I am a sibling!');
     });
+
+    it('should send enter key', async () => {
+      const specialKey = await harness.specaialKey();
+      await harness.sendEnter();
+      expect(await specialKey.text()).toBe('enter');
+    });
+
+    it('should send alt+j key', async () => {
+      const specialKey = await harness.specaialKey();
+      await harness.sendAltJ();
+      expect(await specialKey.text()).toBe('alt-j');
+    });
   });
 
   describe('TestElement', () => {

src/cdk-experimental/testing/tests/test-main-component.html

@@ -8,7 +8,8 @@ <h1 style="height: 50px">Main Component</h1>
   <div id="asyncCounter">{{asyncCounter}}</div>
 </div>
 <div class="inputs">
-  <input [(ngModel)]="input" id="input" aria-label="input">
+  <input [(ngModel)]="input" id="input" aria-label="input" (keydown)="onKeyDown($event)">
+  <span class="special-key">{{specialKey}}</span>
   <div id="value">Input: {{input}}</div>
   <textarea id="memo" aria-label="memo">{{memo}}</textarea>
 </div>