fix(material-experimental): unit tests getting wrong root element and add API for getting property value (#16706)

Based on the discussion in #16697 (comment), these changes fix a couple of things that I ran into while doing the `mat-autocomplete` test harness in #16620.

* Fixes querying for elements outside the harness not working, because the wrong root node was set.
* Adds an API to retrieve the value of a property on a DOM node.

Author: crisbeto

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

@@ -123,7 +123,8 @@ export class ProtractorElement implements TestElement {
   }
 
   async getAttribute(name: string): Promise<string|null> {
-    return this.element.getAttribute(name);
+    return browser.executeScript(
+        `return arguments[0].getAttribute(arguments[1])`, this.element, name);
   }
 
   async hasClass(name: string): Promise<boolean> {
@@ -136,4 +137,8 @@ export class ProtractorElement implements TestElement {
     const {x: left, y: top} = await this.element.getLocation();
     return {width, height, left, top};
   }
+
+  async getProperty(name: string): Promise<any> {
+    return browser.executeScript(`return arguments[0][arguments[1]]`, this.element, name);
+  }
 }

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

@@ -101,4 +101,7 @@ export interface TestElement {
 
   /** Gets the dimensions of the element. */
   getDimensions(): Promise<ElementDimensions>;
+
+  /** Gets the value of a property of an element. */
+  getProperty(name: string): Promise<any>;
 }

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

@@ -120,14 +120,7 @@ export class UnitTestElement implements TestElement {
 
   async getAttribute(name: string): Promise<string|null> {
     await this._stabilize();
-    let value = this.element.getAttribute(name);
-    // If cannot find attribute in the element, also try to find it in property,
-    // this is useful for input/textarea tags.
-    if (value === null && name in this.element) {
-      // We need to cast the element so we can access its properties via string indexing.
-      return (this.element as unknown as {[key: string]: string|null})[name];
-    }
-    return value;
+    return this.element.getAttribute(name);
   }
 
   async hasClass(name: string): Promise<boolean> {
@@ -139,4 +132,9 @@ export class UnitTestElement implements TestElement {
     await this._stabilize();
     return this.element.getBoundingClientRect();
   }
+
+  async getProperty(name: string): Promise<any> {
+    await this._stabilize();
+    return (this.element as any)[name];
+  }
 }

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

@@ -179,10 +179,10 @@ describe('ProtractorHarnessEnvironment', () => {
     it('should be able to clear', async () => {
       const input = await harness.input();
       await input.sendKeys('Yi');
-      expect(await input.getAttribute('value')).toBe('Yi');
+      expect(await input.getProperty('value')).toBe('Yi');
 
       await input.clear();
-      expect(await input.getAttribute('value')).toBe('');
+      expect(await input.getProperty('value')).toBe('');
     });
 
     it('should be able to click', async () => {
@@ -204,7 +204,7 @@ describe('ProtractorHarnessEnvironment', () => {
       const value = await harness.value();
       await input.sendKeys('Yi');
 
-      expect(await input.getAttribute('value')).toBe('Yi');
+      expect(await input.getProperty('value')).toBe('Yi');
       expect(await value.text()).toBe('Input: Yi');
     });
 
@@ -236,7 +236,7 @@ describe('ProtractorHarnessEnvironment', () => {
       `;
       const memo = await harness.memo();
       await memo.sendKeys(memoStr);
-      expect(await memo.getAttribute('value')).toBe(memoStr);
+      expect(await memo.getProperty('value')).toBe(memoStr);
     });
 
     it('should be able to getCssValue', async () => {
@@ -254,6 +254,12 @@ describe('ProtractorHarnessEnvironment', () => {
       expect(await (await browser.switchTo().activeElement()).getText())
           .not.toBe(await button.text());
     });
+
+    it('should be able to get the value of a property', async () => {
+      const input = await harness.input();
+      await input.sendKeys('Hello');
+      expect(await input.getProperty('value')).toBe('Hello');
+    });
   });
 
   describe('HarnessPredicate', () => {

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

@@ -199,10 +199,10 @@ describe('TestbedHarnessEnvironment', () => {
     it('should be able to clear', async () => {
       const input = await harness.input();
       await input.sendKeys('Yi');
-      expect(await input.getAttribute('value')).toBe('Yi');
+      expect(await input.getProperty('value')).toBe('Yi');
 
       await input.clear();
-      expect(await input.getAttribute('value')).toBe('');
+      expect(await input.getProperty('value')).toBe('');
     });
 
     it('should be able to click', async () => {
@@ -224,7 +224,7 @@ describe('TestbedHarnessEnvironment', () => {
       const value = await harness.value();
       await input.sendKeys('Yi');
 
-      expect(await input.getAttribute('value')).toBe('Yi');
+      expect(await input.getProperty('value')).toBe('Yi');
       expect(await value.text()).toBe('Input: Yi');
     });
 
@@ -255,7 +255,7 @@ describe('TestbedHarnessEnvironment', () => {
       `;
       const memo = await harness.memo();
       await memo.sendKeys(memoStr);
-      expect(await memo.getAttribute('value')).toBe(memoStr);
+      expect(await memo.getProperty('value')).toBe(memoStr);
     });
 
     it('should be able to getCssValue', async () => {
@@ -271,6 +271,12 @@ describe('TestbedHarnessEnvironment', () => {
       await button.blur();
       expect(activeElementText()).not.toBe(await button.text());
     });
+
+    it('should be able to get the value of a property', async () => {
+      const input = await harness.input();
+      await input.sendKeys('Hello');
+      expect(await input.getProperty('value')).toBe('Hello');
+    });
   });
 
   describe('HarnessPredicate', () => {

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

@@ -41,13 +41,13 @@ export class MatCheckboxHarness extends ComponentHarness {
 
   /** Gets a boolean promise indicating if the checkbox is checked. */
   async isChecked(): Promise<boolean> {
-    const checked = (await this._input()).getAttribute('checked');
+    const checked = (await this._input()).getProperty('checked');
     return coerceBooleanProperty(await checked);
   }
 
   /** Gets a boolean promise indicating if the checkbox is in an indeterminate state. */
   async isIndeterminate(): Promise<boolean> {
-    const indeterminate = (await this._input()).getAttribute('indeterminate');
+    const indeterminate = (await this._input()).getProperty('indeterminate');
     return coerceBooleanProperty(await indeterminate);
   }
 
@@ -59,7 +59,7 @@ export class MatCheckboxHarness extends ComponentHarness {
 
   /** Gets a boolean promise indicating if the checkbox is required. */
   async isRequired(): Promise<boolean> {
-    const required = (await this._input()).getAttribute('required');
+    const required = (await this._input()).getProperty('required');
     return coerceBooleanProperty(await required);
   }
 
@@ -76,7 +76,7 @@ export class MatCheckboxHarness extends ComponentHarness {
 
   /** Gets a promise for the checkbox's value. */
   async getValue(): Promise<string|null> {
-    return (await this._input()).getAttribute('value');
+    return (await this._input()).getProperty('value');
   }
 
   /** Gets a promise for the checkbox's aria-label. */

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

@@ -41,13 +41,13 @@ export class MatCheckboxHarness extends ComponentHarness {
 
   /** Gets a boolean promise indicating if the checkbox is checked. */
   async isChecked(): Promise<boolean> {
-    const checked = (await this._input()).getAttribute('checked');
+    const checked = (await this._input()).getProperty('checked');
     return coerceBooleanProperty(await checked);
   }
 
   /** Gets a boolean promise indicating if the checkbox is in an indeterminate state. */
   async isIndeterminate(): Promise<boolean> {
-    const indeterminate = (await this._input()).getAttribute('indeterminate');
+    const indeterminate = (await this._input()).getProperty('indeterminate');
     return coerceBooleanProperty(await indeterminate);
   }
 
@@ -76,7 +76,7 @@ export class MatCheckboxHarness extends ComponentHarness {
 
   /** Gets a promise for the checkbox's value. */
   async getValue(): Promise<string|null> {
-    return (await this._input()).getAttribute('value');
+    return (await this._input()).getProperty('value');
   }
 
   /** Gets a promise for the checkbox's aria-label. */

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

@@ -57,7 +57,7 @@ export class MatRadioGroupHarness extends ComponentHarness {
 
   /** Gets the id of the radio-group. */
   async getId(): Promise<string|null> {
-    return (await this.host()).getAttribute('id');
+    return (await this.host()).getProperty('id');
   }
 
   /** Gets the selected radio-button in a radio-group. */
@@ -174,7 +174,7 @@ export class MatRadioButtonHarness extends ComponentHarness {
 
   /** Whether the radio-button is checked. */
   async isChecked(): Promise<boolean> {
-    const checked = (await this._input()).getAttribute('checked');
+    const checked = (await this._input()).getProperty('checked');
     return coerceBooleanProperty(await checked);
   }
 
@@ -197,7 +197,7 @@ export class MatRadioButtonHarness extends ComponentHarness {
 
   /** Gets a promise for the radio-button's id. */
   async getId(): Promise<string|null> {
-    return (await this.host()).getAttribute('id');
+    return (await this.host()).getProperty('id');
   }
 
   /**
@@ -208,7 +208,7 @@ export class MatRadioButtonHarness extends ComponentHarness {
    * intentionally have the `[object Object]` as return value.
    */
   async getValue(): Promise<string|null> {
-    return (await this._input()).getAttribute('value');
+    return (await this._input()).getProperty('value');
   }
 
   /** Gets a promise for the radio-button's label text. */

src/material-experimental/mdc-slide-toggle/harness/mdc-slide-toggle-harness.ts

@@ -36,7 +36,7 @@ export class MatSlideToggleHarness extends ComponentHarness {
 
   /** Gets a boolean promise indicating if the slide-toggle is checked. */
   async isChecked(): Promise<boolean> {
-    const checked = (await this._input()).getAttribute('checked');
+    const checked = (await this._input()).getProperty('checked');
     return coerceBooleanProperty(await checked);
   }
 

src/material-experimental/mdc-slide-toggle/harness/slide-toggle-harness.ts

@@ -36,7 +36,7 @@ export class MatSlideToggleHarness extends ComponentHarness {
 
   /** Gets a boolean promise indicating if the slide-toggle is checked. */
   async isChecked(): Promise<boolean> {
-    const checked = (await this._input()).getAttribute('checked');
+    const checked = (await this._input()).getProperty('checked');
     return coerceBooleanProperty(await checked);
   }