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

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

@@ -142,5 +142,16 @@ export class ProtractorElement implements TestElement {
     return browser.executeScript(`return arguments[0][arguments[1]]`, this.element, name);
   }
 
+  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);
+  }
+
   async forceStabilize(): Promise<void> {}
 }

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

@@ -102,6 +102,9 @@ export interface TestElement {
   /** Gets the value of a property of an element. */
   getProperty(name: string): Promise<any>;
 
+  /** Checks whether this element matches the given selector. */
+  matchesSelector(selector: string): Promise<boolean>;
+
   /**
    * Flushes change detection and async tasks.
    * In most cases it should not be necessary to call this. However, there may be some edge cases

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

@@ -138,6 +138,17 @@ export class UnitTestElement implements TestElement {
     return (this.element as any)[name];
   }
 
+  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);
+  }
+
   async forceStabilize(): Promise<void> {
     return this._stabilize();
   }

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

@@ -260,6 +260,12 @@ describe('ProtractorHarnessEnvironment', () => {
       await input.sendKeys('Hello');
       expect(await input.getProperty('value')).toBe('Hello');
     });
+
+    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', () => {
@@ -293,6 +299,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,7 +264,7 @@ 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());
@@ -277,6 +277,12 @@ describe('TestbedHarnessEnvironment', () => {
       await input.sendKeys('Hello');
       expect(await input.getProperty('value')).toBe('Hello');
     });
+
+    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', () => {
@@ -311,6 +317,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;
+}