feat(cdk-experimental/testing): add support for matching selector on TestElement

Author: mmalerba

src/cdk-experimental/testing/component-harness.ts

@@ -259,6 +259,10 @@ export interface ComponentHarnessConstructor<T extends ComponentHarness> {
   hostSelector: string;
 }
 
+export interface BaseHarnessFilters {
+  selector?: string;
+}
+
 /**
  * A class used to associate a ComponentHarness class with predicates functions that can be used to
  * filter instances of the class.
@@ -267,7 +271,14 @@ export class HarnessPredicate<T extends ComponentHarness> {
   private _predicates: AsyncPredicate<T>[] = [];
   private _descriptions: string[] = [];
 
-  constructor(public harnessType: ComponentHarnessConstructor<T>) {}
+  constructor(public harnessType: ComponentHarnessConstructor<T>, options: BaseHarnessFilters) {
+    const selector = options.selector;
+    if (selector !== undefined) {
+      this.add(`selector matches "${selector}"`, async item => {
+        return (await item.host()).matchesSelector(selector);
+      });
+    }
+  }
 
   /**
    * Checks if a string matches the given pattern.

src/cdk-experimental/testing/harness-environment.ts

@@ -23,7 +23,7 @@ function _getErrorForMissingSelector(selector: string): Error {
 function _getErrorForMissingHarness<T extends ComponentHarness>(
     harnessType: ComponentHarnessConstructor<T> | HarnessPredicate<T>): Error {
   const harnessPredicate =
-      harnessType instanceof HarnessPredicate ? harnessType : new HarnessPredicate(harnessType);
+      harnessType instanceof HarnessPredicate ? harnessType : new HarnessPredicate(harnessType, {});
   const {name, hostSelector} = harnessPredicate.harnessType;
   const restrictions = harnessPredicate.getDescription();
   let message = `Expected to find element for ${name} matching selector: "${hostSelector}"`;
@@ -160,7 +160,8 @@ export abstract class HarnessEnvironment<E> implements HarnessLoader, LocatorFac
   private async _getAllHarnesses<T extends ComponentHarness>(
       harnessType: ComponentHarnessConstructor<T> | HarnessPredicate<T>): Promise<T[]> {
     const harnessPredicate =
-        harnessType instanceof HarnessPredicate ? harnessType : new HarnessPredicate(harnessType);
+        harnessType instanceof HarnessPredicate ?
+            harnessType : new HarnessPredicate(harnessType, {});
     const elements = await this.getAllRawElements(harnessPredicate.harnessType.hostSelector);
     return harnessPredicate.filter(elements.map(
         element => this.createComponentHarness(harnessPredicate.harnessType, element)));

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

@@ -136,4 +136,15 @@ export class ProtractorElement implements TestElement {
     const {x: left, y: top} = await this.element.getLocation();
     return {width, height, left, top};
   }
+
+  async matchesSelector(selector: string): Promise<boolean> {
+      return browser.executeScript(`
+          return (Element.prototype.matches ||
+                  Element.prototype.matchesSelector ||
+                  Element.prototype.mozMatchesSelector ||
+                  Element.prototype.msMatchesSelector ||
+                  Element.prototype.oMatchesSelector ||
+                  Element.prototype.webkitMatchesSelector).call(arguments[0], arguments[1])
+          `, this.element, selector);
+  }
 }

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

@@ -101,4 +101,7 @@ export interface TestElement {
 
   /** Gets the dimensions of the element. */
   getDimensions(): Promise<ElementDimensions>;
+
+  /** Checks whether this element matches the given selector. */
+  matchesSelector(selector: string): Promise<boolean>;
 }

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

@@ -139,4 +139,15 @@ export class UnitTestElement implements TestElement {
     await this._stabilize();
     return this.element.getBoundingClientRect();
   }
+
+  async matchesSelector(selector: string): Promise<boolean> {
+    await this._stabilize();
+    const elementPrototype = Element.prototype as any;
+    return (elementPrototype['matches'] ||
+            elementPrototype['matchesSelector'] ||
+            elementPrototype['mozMatchesSelector'] ||
+            elementPrototype['msMatchesSelector'] ||
+            elementPrototype['oMatchesSelector'] ||
+            elementPrototype['webkitMatchesSelector']).call(this.element, selector);
+  }
 }

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

@@ -49,6 +49,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 lastList = this.locatorFor(SubComponentHarness.with({selector: ':last-child'}));
   readonly specaialKey = this.locatorFor('.special-key');
 
   private _testTools = this.locatorFor(SubComponentHarness);

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

@@ -6,15 +6,20 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentHarness, HarnessPredicate} from '../../component-harness';
+import {BaseHarnessFilters, ComponentHarness, HarnessPredicate} from '../../component-harness';
 import {TestElement} from '../../test-element';
 
+export interface SubComponentHarnessFilters extends BaseHarnessFilters {
+  title?: string | RegExp;
+  itemCount?: number;
+}
+
 /** @dynamic */
 export class SubComponentHarness extends ComponentHarness {
   static readonly hostSelector = 'test-sub';
 
-  static with(options: {title?: string | RegExp, itemCount?: number} = {}) {
-    return new HarnessPredicate(SubComponentHarness)
+  static with(options: SubComponentHarnessFilters = {}) {
+    return new HarnessPredicate(SubComponentHarness, options)
         .addOption('title', options.title,
             async (harness, title) =>
                 HarnessPredicate.stringMatches((await harness.title()).text(), title))

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

@@ -254,6 +254,12 @@ describe('ProtractorHarnessEnvironment', () => {
       expect(await (await browser.switchTo().activeElement()).getText())
           .not.toBe(await button.text());
     });
+
+    it('should check if selector matches', async () => {
+      const button = await harness.button();
+      expect(await button.matchesSelector('button:not(.fake-class)')).toBe(true);
+      expect(await button.matchesSelector('button:disabled')).toBe(false);
+    });
   });
 
   describe('HarnessPredicate', () => {
@@ -287,6 +293,11 @@ describe('ProtractorHarnessEnvironment', () => {
       expect(await (await testLists[1].title()).text()).toBe('List of test methods');
     });
 
+    it('should find subcomponents that match selector', async () => {
+      const lastList = await harness.lastList();
+      expect(await (await lastList.title()).text()).toBe('List of test methods');
+    });
+
     it('should error if predicate does not match but a harness is required', async () => {
       try {
         await harness.requiredFourIteamToolsLists();

src/cdk-experimental/testing/tests/testbed.spec.ts

@@ -264,13 +264,19 @@ describe('TestbedHarnessEnvironment', () => {
     });
 
     it('should focus and blur element', async () => {
-      let button = await harness.button();
+      const button = await harness.button();
       expect(activeElementText()).not.toBe(await button.text());
       await button.focus();
       expect(activeElementText()).toBe(await button.text());
       await button.blur();
       expect(activeElementText()).not.toBe(await button.text());
     });
+
+    it('should check if selector matches', async () => {
+      const button = await harness.button();
+      expect(await button.matchesSelector('button:not(.fake-class)')).toBe(true);
+      expect(await button.matchesSelector('button:disabled')).toBe(false);
+    });
   });
 
   describe('HarnessPredicate', () => {
@@ -305,6 +311,11 @@ describe('TestbedHarnessEnvironment', () => {
       expect(await (await testLists[1].title()).text()).toBe('List of test methods');
     });
 
+    it('should find subcomponents that match selector', async () => {
+      const lastList = await harness.lastList();
+      expect(await (await lastList.title()).text()).toBe('List of test methods');
+    });
+
     it('should error if predicate does not match but a harness is required', async () => {
       try {
         await harness.requiredFourIteamToolsLists();

src/material-experimental/mdc-button/harness/button-harness-filters.ts

@@ -6,6 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export type ButtonHarnessFilters = {
-  text?: string | RegExp
-};
+import {BaseHarnessFilters} from '@angular/cdk-experimental/testing';
+
+export interface ButtonHarnessFilters extends BaseHarnessFilters {
+  text?: string | RegExp;
+}

src/material-experimental/mdc-button/harness/button-harness.ts

@@ -30,11 +30,12 @@ export class MatButtonHarness extends ComponentHarness {
   /**
    * Gets a `HarnessPredicate` that can be used to search for a button with specific attributes.
    * @param options Options for narrowing the search:
+   *   - `selector` finds a button whose host element matches the given selector.
    *   - `text` finds a button with specific text content.
    * @return a `HarnessPredicate` configured with the given options.
    */
   static with(options: ButtonHarnessFilters = {}): HarnessPredicate<MatButtonHarness> {
-    return new HarnessPredicate(MatButtonHarness)
+    return new HarnessPredicate(MatButtonHarness, options)
         .addOption('text', options.text,
             (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
   }

src/material-experimental/mdc-button/harness/mdc-button-harness.ts

@@ -30,11 +30,12 @@ export class MatButtonHarness extends ComponentHarness {
   /**
    * Gets a `HarnessPredicate` that can be used to search for a button with specific attributes.
    * @param options Options for narrowing the search:
+   *   - `selector` finds a button whose host element matches the given selector.
    *   - `text` finds a button with specific text content.
    * @return a `HarnessPredicate` configured with the given options.
    */
   static with(options: ButtonHarnessFilters = {}): HarnessPredicate<MatButtonHarness> {
-    return new HarnessPredicate(MatButtonHarness)
+    return new HarnessPredicate(MatButtonHarness, options)
         .addOption('text', options.text,
             (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
   }

src/material-experimental/mdc-checkbox/harness/checkbox-harness-filters.ts

@@ -6,7 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export type CheckboxHarnessFilters = {
-  label?: string|RegExp;
+import {BaseHarnessFilters} from '@angular/cdk-experimental/testing';
+
+export interface CheckboxHarnessFilters extends BaseHarnessFilters {
+  label?: string | RegExp;
   name?: string;
-};
+}

src/material-experimental/mdc-checkbox/harness/checkbox-harness.ts

@@ -20,12 +20,13 @@ export class MatCheckboxHarness extends ComponentHarness {
   /**
    * Gets a `HarnessPredicate` that can be used to search for a checkbox with specific attributes.
    * @param options Options for narrowing the search:
+   *   - `selector` finds a checkbox whose host element matches the given selector.
    *   - `label` finds a checkbox with specific label text.
    *   - `name` finds a checkbox with specific name.
    * @return a `HarnessPredicate` configured with the given options.
    */
   static with(options: CheckboxHarnessFilters = {}): HarnessPredicate<MatCheckboxHarness> {
-    return new HarnessPredicate(MatCheckboxHarness)
+    return new HarnessPredicate(MatCheckboxHarness, options)
         .addOption(
             'label', options.label,
             (harness, label) => HarnessPredicate.stringMatches(harness.getLabelText(), label))

src/material-experimental/mdc-checkbox/harness/mdc-checkbox-harness.ts

@@ -20,12 +20,13 @@ export class MatCheckboxHarness extends ComponentHarness {
   /**
    * Gets a `HarnessPredicate` that can be used to search for a checkbox with specific attributes.
    * @param options Options for narrowing the search:
+   *   - `selector` finds a checkbox whose host element matches the given selector.
    *   - `label` finds a checkbox with specific label text.
    *   - `name` finds a checkbox with specific name.
    * @return a `HarnessPredicate` configured with the given options.
    */
   static with(options: CheckboxHarnessFilters = {}): HarnessPredicate<MatCheckboxHarness> {
-    return new HarnessPredicate(MatCheckboxHarness)
+    return new HarnessPredicate(MatCheckboxHarness, options)
         .addOption(
             'label', options.label,
             (harness, label) => HarnessPredicate.stringMatches(harness.getLabelText(), label))

src/material-experimental/mdc-menu/harness/mdc-menu-harness.ts

@@ -23,11 +23,12 @@ export class MatMenuHarness extends ComponentHarness {
   /**
    * Gets a `HarnessPredicate` that can be used to search for a menu with specific attributes.
    * @param options Options for narrowing the search:
+   *   - `selector` finds a menu whose host element matches the given selector.
    *   - `label` finds a menu with specific label text.
    * @return a `HarnessPredicate` configured with the given options.
    */
   static with(options: MenuHarnessFilters = {}): HarnessPredicate<MatMenuHarness> {
-    return new HarnessPredicate(MatMenuHarness)
+    return new HarnessPredicate(MatMenuHarness, options)
         .addOption('text', options.triggerText,
             (harness, text) => HarnessPredicate.stringMatches(harness.getTriggerText(), text));
   }

src/material-experimental/mdc-menu/harness/mdc-menu-item-harness.ts

@@ -21,11 +21,12 @@ export class MatMenuItemHarness extends ComponentHarness {
   /**
    * Gets a `HarnessPredicate` that can be used to search for a menu with specific attributes.
    * @param options Options for narrowing the search:
-   *   - `label` finds a menu with specific label text.
+   *   - `selector` finds a menu item whose host element matches the given selector.
+   *   - `label` finds a menu item with specific label text.
    * @return a `HarnessPredicate` configured with the given options.
    */
   static with(options: MenuItemHarnessFilters = {}): HarnessPredicate<MatMenuItemHarness> {
-    return new HarnessPredicate(MatMenuItemHarness); // TODO: add options here
+    return new HarnessPredicate(MatMenuItemHarness, options); // TODO: add options here
   }
 
   /** Gets a boolean promise indicating if the menu is disabled. */

src/material-experimental/mdc-menu/harness/menu-harness-filters.ts

@@ -6,10 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export type MenuHarnessFilters = {
-  triggerText?: string | RegExp
-};
+import {BaseHarnessFilters} from '@angular/cdk-experimental/testing';
 
-export type MenuItemHarnessFilters = {
-  text?: string | RegExp
-};
+export interface MenuHarnessFilters extends BaseHarnessFilters {
+  triggerText?: string | RegExp;
+}
+
+export interface MenuItemHarnessFilters extends BaseHarnessFilters {
+  text?: string | RegExp;
+}

src/material-experimental/mdc-menu/harness/menu-harness.ts

@@ -23,11 +23,12 @@ export class MatMenuHarness extends ComponentHarness {
   /**
    * Gets a `HarnessPredicate` that can be used to search for a menu with specific attributes.
    * @param options Options for narrowing the search:
+   *   - `selector` finds a menu whose host element matches the given selector.
    *   - `label` finds a menu with specific label text.
    * @return a `HarnessPredicate` configured with the given options.
    */
   static with(options: MenuHarnessFilters = {}): HarnessPredicate<MatMenuHarness> {
-    return new HarnessPredicate(MatMenuHarness)
+    return new HarnessPredicate(MatMenuHarness, options)
         .addOption('text', options.triggerText,
             (harness, text) => HarnessPredicate.stringMatches(harness.getTriggerText(), text));
   }

src/material-experimental/mdc-menu/harness/menu-item-harness.ts

@@ -21,11 +21,12 @@ export class MatMenuItemHarness extends ComponentHarness {
   /**
    * Gets a `HarnessPredicate` that can be used to search for a menu with specific attributes.
    * @param options Options for narrowing the search:
-   *   - `label` finds a menu with specific label text.
+   *   - `selector` finds a menu item whose host element matches the given selector.
+   *   - `label` finds a menu item with specific label text.
    * @return a `HarnessPredicate` configured with the given options.
    */
   static with(options: MenuItemHarnessFilters = {}): HarnessPredicate<MatMenuItemHarness> {
-    return new HarnessPredicate(MatMenuItemHarness); // TODO: add options here
+    return new HarnessPredicate(MatMenuItemHarness, options); // TODO: add options here
   }
 
   /** Gets a boolean promise indicating if the menu is disabled. */

src/material-experimental/mdc-radio/harness/radio-harness-filters.ts

@@ -6,13 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export type RadioGroupHarnessFilters = {
-  id?: string;
+import {BaseHarnessFilters} from '@angular/cdk-experimental/testing';
+
+export interface RadioGroupHarnessFilters extends BaseHarnessFilters {
   name?: string;
-};
+}
 
-export type RadioButtonHarnessFilters = {
-  label?: string|RegExp,
-  id?: string;
-  name?: string,
-};
+export interface RadioButtonHarnessFilters extends BaseHarnessFilters {
+  label?: string | RegExp;
+  name?: string;
+}