fix(cdk/testing): allow for comma key to be sent (#27486)

Adds a comma key to `TestKey` since commas aren't treated correctly in strings sent through `sendKeys` and it's common for them to be used as separators in chip lists.

Author: crisbeto

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

@@ -50,6 +50,7 @@ const keyMap = {
   [TestKey.F11]: Key.F11,
   [TestKey.F12]: Key.F12,
   [TestKey.META]: Key.META,
+  [TestKey.COMMA]: ',',
 };
 
 /** Converts a `ModifierKeys` object to a list of Protractor `Key`s. */

src/cdk/testing/selenium-webdriver/selenium-webdriver-keys.ts

@@ -44,6 +44,7 @@ export const seleniumWebDriverKeyMap = {
   [TestKey.F11]: webdriver.Key.F11,
   [TestKey.F12]: webdriver.Key.F12,
   [TestKey.META]: webdriver.Key.META,
+  [TestKey.COMMA]: ',',
 };
 
 /** Gets a list of WebDriver `Key`s for the given `ModifierKeys`. */

src/cdk/testing/test-element.ts

@@ -65,6 +65,7 @@ export enum TestKey {
   F11,
   F12,
   META,
+  COMMA, // Commas are a common separator key.
 }
 
 /**

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

@@ -61,6 +61,7 @@ const keyMap = {
   [TestKey.F11]: {keyCode: keyCodes.F11, key: 'F11'},
   [TestKey.F12]: {keyCode: keyCodes.F12, key: 'F12'},
   [TestKey.META]: {keyCode: keyCodes.META, key: 'Meta'},
+  [TestKey.COMMA]: {keyCode: keyCodes.COMMA, key: ','},
 };
 
 /** A `TestElement` implementation for unit tests. */

src/material/chips/testing/BUILD.bazel

@@ -19,6 +19,7 @@ ng_test_library(
     srcs = glob(["**/*.spec.ts"]),
     deps = [
         ":testing",
+        "//src/cdk/keycodes",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material/chips",

src/material/chips/testing/chip-input-harness.spec.ts

@@ -1,4 +1,5 @@
-import {HarnessLoader} from '@angular/cdk/testing';
+import {HarnessLoader, TestKey} from '@angular/cdk/testing';
+import {COMMA} from '@angular/cdk/keycodes';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
@@ -69,12 +70,24 @@ describe('MatChipInputHarness', () => {
     await harness.blur();
     expect(await harness.isFocused()).toBe(false);
   });
+
+  it('should be able to trigger a separator key', async () => {
+    const input = await loader.getHarness(MatChipInputHarness);
+    await input.setValue('Hello');
+    await input.sendSeparatorKey(TestKey.COMMA);
+    expect(fixture.componentInstance.add).toHaveBeenCalled();
+  });
 });
 
 @Component({
   template: `
     <mat-chip-grid #grid1>
-      <input [matChipInputFor]="grid1" [required]="required" placeholder="Placeholder" />
+      <input
+        [matChipInputFor]="grid1"
+        [required]="required"
+        placeholder="Placeholder"
+        (matChipInputTokenEnd)="add()"
+        [matChipInputSeparatorKeyCodes]="separatorKeyCodes"/>
     </mat-chip-grid>
 
     <mat-chip-grid #grid2>
@@ -84,4 +97,6 @@ describe('MatChipInputHarness', () => {
 })
 class ChipInputHarnessTest {
   required = false;
+  add = jasmine.createSpy('add spy');
+  separatorKeyCodes = [COMMA];
 }

tools/public_api_guard/cdk/testing.md

@@ -263,6 +263,8 @@ export enum TestKey {
     // (undocumented)
     BACKSPACE = 0,
     // (undocumented)
+    COMMA = 30,
+    // (undocumented)
     CONTROL = 4,
     // (undocumented)
     DELETE = 16,