fix(material-experimental): unit tests getting wrong root element and…

… add API for getting property value

Based on the discussion in angular#16697 (comment), these changes fix a couple of things that I ran into while doing the `mat-autocomplete` test harness in angular#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.

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

@@ -55,4 +55,8 @@ export class ProtractorElement implements TestElement {
     const classes = (await this.getAttribute('class')) || '';
     return new Set(classes.split(/\s+/).filter(c => c)).has(name);
   }
+
+  async getPropertyValue(name: string): Promise<any> {
+    return browser.executeScript(`arguments[0]['${name}']`, this.element);
+  }
 }

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

@@ -46,4 +46,7 @@ export interface TestElement {
 
   /** Checks whether the element has the given class. */
   hasClass(name: string): Promise<boolean>;
+
+  /** Gets the value of a property of an element. */
+  getPropertyValue(name: string): Promise<any>;
 }

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

@@ -37,7 +37,7 @@ export class TestbedHarnessEnvironment extends HarnessEnvironment<Element> {
   }
 
   protected getDocumentRoot(): Element {
-    return this._fixture.nativeElement;
+    return document.body;
   }
 
   protected createTestElement(element: Element): TestElement {

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

@@ -105,4 +105,9 @@ export class UnitTestElement implements TestElement {
     await this._stabilize();
     return this.element.classList.contains(name);
   }
+
+  async getPropertyValue(name: string): Promise<any> {
+    await this._stabilize();
+    return (this.element as any)[name];
+  }
 }

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

@@ -23,6 +23,7 @@ export class MainComponentHarness extends ComponentHarness {
   readonly counter = this.locatorFor('#counter');
   readonly input = this.locatorFor('#input');
   readonly value = this.locatorFor('#value');
+  readonly username = this.locatorFor('#username');
   readonly allLabels = this.locatorForAll('label');
   readonly allLists = this.locatorForAll(SubComponentHarness);
   readonly memo = this.locatorFor('textarea');

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

@@ -230,6 +230,11 @@ 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 element = await harness.username();
+      expect(await element.getPropertyValue('title')).toBe('Name of the user');
+    });
   });
 
   describe('HarnessPredicate', () => {

src/cdk-experimental/testing/tests/test-main-component.html

@@ -1,5 +1,5 @@
 <h1 style="height: 50px">Main Component</h1>
-<div id="username">Hello {{username}} from Angular 2!</div>
+<div id="username" title="Name of the user">Hello {{username}} from Angular 2!</div>
 <div class="counters">
   <button (click)="click()">Up</button><br>
   <label>Count:</label>

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

@@ -247,6 +247,11 @@ 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 element = await harness.username();
+      expect(await element.getPropertyValue('title')).toBe('Name of the user');
+    });
   });
 
   describe('HarnessPredicate', () => {