feat(cdk/testing): support modifiers for right clicking on a TestElement

Adds the ability to provide modifier keys when right clicking on a TestElement

Author: wwjhu

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

@@ -86,7 +86,8 @@ export class ProtractorElement implements TestElement {
     await this._dispatchClickEventSequence(args, Button.LEFT);
   }
 
-  async rightClick(...args: [] | ['center'] | [number, number]): Promise<void> {
+  async rightClick(...args: [ModifierKeys?] | ['center', ModifierKeys?] |
+    [number, number, ModifierKeys?]): Promise<void> {
     await this._dispatchClickEventSequence(args, Button.RIGHT);
   }
 

src/cdk/testing/test-element.ts

@@ -85,16 +85,18 @@ export interface TestElement {
    * Click the element at the specified coordinates relative to the top-left of the element.
    * @param relativeX Coordinate within the element, along the X-axis at which to click.
    * @param relativeY Coordinate within the element, along the Y-axis at which to click.
+   * @param modifiers Modifier keys held while clicking
    */
-  click(relativeX: number, relativeY: number, modifiers?: ModifierKeys, ): Promise<void>;
+  click(relativeX: number, relativeY: number, modifiers?: ModifierKeys ): Promise<void>;
 
   /**
    * Right clicks on the element at the specified coordinates relative to the top-left of it.
    * @param relativeX Coordinate within the element, along the X-axis at which to click.
    * @param relativeY Coordinate within the element, along the Y-axis at which to click.
+   * @param modifiers Modifier keys held while clicking
    * @breaking-change 11.0.0 To become a required method.
    */
-  rightClick?(relativeX: number, relativeY: number): Promise<void>;
+  rightClick?(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
 
   /** Focus the element. */
   focus(): Promise<void>;

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

@@ -86,7 +86,8 @@ export class UnitTestElement implements TestElement {
     await this._stabilize();
   }
 
-  async rightClick(...args: [] | ['center'] | [number, number]): Promise<void> {
+  async rightClick(...args: [ModifierKeys?] | ['center', ModifierKeys?] |
+    [number, number, ModifierKeys?]): Promise<void> {
     await this._dispatchMouseEventSequence('contextmenu', args, 2);
     await this._stabilize();
   }

src/cdk/testing/tests/cross-environment.spec.ts

@@ -372,6 +372,13 @@ export function crossEnvironmentSpecs(
       expect(await contextmenuTestResult.text()).toBe('50-50-2');
     });
 
+    it('should be able to right click with modifiers', async () => {
+      const clickTest = await harness.clickTest();
+      const modifiersResult = await harness.clickModifiersResult();
+      await clickTest.rightClick!(50, 50, {alt: true, control: true});
+      expect(await modifiersResult.text()).toBe('-alt-control-');
+    });
+
     it('should be able to send key', async () => {
       const input = await harness.input();
       const value = await harness.value();

src/cdk/testing/tests/test-main-component.ts

@@ -100,6 +100,9 @@ export class TestMainComponent implements OnDestroy {
   onRightClick(event: MouseEvent) {
     this.rightClickResult.button = event.button;
     this._assignRelativeCoordinates(event, this.rightClickResult);
+
+    this.modifiers = ['Shift', 'Alt', 'Control', 'Meta']
+    .map(key => event.getModifierState(key) ? key.toLowerCase() : '').join('-');
   }
 
   onCustomEvent(event: any) {

tools/public_api_guard/cdk/testing.d.ts

@@ -150,7 +150,7 @@ export interface TestElement {
     isFocused(): Promise<boolean>;
     matchesSelector(selector: string): Promise<boolean>;
     mouseAway(): Promise<void>;
-    rightClick?(relativeX: number, relativeY: number): Promise<void>;
+    rightClick?(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
     selectOptions?(...optionIndexes: number[]): Promise<void>;
     sendKeys(...keys: (string | TestKey)[]): Promise<void>;
     sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;

tools/public_api_guard/cdk/testing/protractor.d.ts

@@ -19,7 +19,8 @@ export declare class ProtractorElement implements TestElement {
     isFocused(): Promise<boolean>;
     matchesSelector(selector: string): Promise<boolean>;
     mouseAway(): Promise<void>;
-    rightClick(...args: [] | ['center'] | [number, number]): Promise<void>;
+    rightClick(...args: [ModifierKeys?] | ['center', ModifierKeys?] |
+      [number, number, ModifierKeys?]): Promise<void>;
     selectOptions(...optionIndexes: number[]): Promise<void>;
     sendKeys(...keys: (string | TestKey)[]): Promise<void>;
     sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;

tools/public_api_guard/cdk/testing/testbed.d.ts

@@ -21,11 +21,8 @@ export declare class UnitTestElement implements TestElement {
     constructor(element: Element, _stabilize: () => Promise<void>);
     blur(): Promise<void>;
     clear(): Promise<void>;
-    click(...args: [ModifierKeys?] | ['center', ModifierKeys?] | [
-        number,
-        number,
-        ModifierKeys?
-    ]): Promise<void>;
+    click(...args: [ModifierKeys?] | ['center', ModifierKeys?] |
+      [number, number, ModifierKeys?]): Promise<void>;
     dispatchEvent(name: string, data?: Record<string, EventData>): Promise<void>;
     focus(): Promise<void>;
     getAttribute(name: string): Promise<string | null>;
@@ -37,7 +34,8 @@ export declare class UnitTestElement implements TestElement {
     isFocused(): Promise<boolean>;
     matchesSelector(selector: string): Promise<boolean>;
     mouseAway(): Promise<void>;
-    rightClick(...args: [] | ['center'] | [number, number]): Promise<void>;
+    rightClick(...args: [ModifierKeys?] | ['center', ModifierKeys?] |
+      [number, number, ModifierKeys?]): Promise<void>;
     selectOptions(...optionIndexes: number[]): Promise<void>;
     sendKeys(...keys: (string | TestKey)[]): Promise<void>;
     sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;