feat(material-experimental): add autocomplete test harness

* Adds a test harness for `mat-autocomplete`.
* Fixes the global element locator not working for `TestBed` elements.
* Adds the ability to get a property of a `TestElement`.

Author: crisbeto

.github/CODEOWNERS

@@ -84,6 +84,7 @@
 
 # Material experimental package
 /src/material-experimental/*                       @jelbourn
+/src/material-experimental/mdc-autocomplete/**     @crisbeto
 /src/material-experimental/mdc-button/**           @andrewseguin
 /src/material-experimental/mdc-card/**             @mmalerba
 /src/material-experimental/mdc-checkbox/**         @mmalerba

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 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/protractor.e2e.spec.ts

@@ -230,6 +230,13 @@ describe('ProtractorHarnessEnvironment', () => {
       expect(await (await browser.switchTo().activeElement()).getText())
           .not.toBe(await button.text());
     });
+
+    it('should be able to get an element property', async () => {
+      const input = await harness.input();
+      await input.sendKeys('Hello there');
+      expect(await input.getPropertyValue('value')).toBe('Hello there');
+    });
+
   });
 
   describe('HarnessPredicate', () => {

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

@@ -247,6 +247,13 @@ describe('TestbedHarnessEnvironment', () => {
       await button.blur();
       expect(activeElementText()).not.toBe(await button.text());
     });
+
+    it('should be able to get an element property', async () => {
+      const input = await harness.input();
+      await input.sendKeys('Hello there');
+      expect(await input.getPropertyValue('value')).toBe('Hello there');
+    });
+
   });
 
   describe('HarnessPredicate', () => {

src/material-experimental/mdc-autocomplete/BUILD.bazel

@@ -0,0 +1,99 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
+load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module", "ng_test_library", "ng_web_test_suite", "ts_library")
+load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
+
+ng_module(
+    name = "mdc-autocomplete",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = [
+            "**/*.spec.ts",
+            "harness/**",
+        ],
+    ),
+    assets = [
+        # TODO: include scss assets
+    ] + glob(["**/*.html"]),
+    module_name = "@angular/material-experimental/mdc-autocomplete",
+    deps = [
+        "//src/material/core",
+    ],
+)
+
+ts_library(
+    name = "harness",
+    srcs = glob(
+        ["harness/**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    deps = [
+        "//src/cdk-experimental/testing",
+        "//src/cdk/coercion",
+    ],
+)
+
+sass_library(
+    name = "mdc_autocomplete_scss_lib",
+    srcs = glob(["**/_*.scss"]),
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:core_scss_lib",
+    ],
+)
+
+sass_binary(
+    name = "autocomplete_scss",
+    src = "autocomplete.scss",
+    include_paths = [
+        "external/npm/node_modules",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:all_themes",
+    ],
+)
+
+ng_test_library(
+    name = "autocomplete_tests_lib",
+    srcs = [
+        "harness/autocomplete-harness.spec.ts",
+    ],
+    deps = [
+        ":harness",
+        ":mdc-autocomplete",
+        "//src/cdk-experimental/testing",
+        "//src/cdk-experimental/testing/testbed",
+        "//src/cdk/platform",
+        "//src/cdk/testing",
+        "//src/material/autocomplete",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [
+        ":autocomplete_tests_lib",
+        "//src/material-experimental:mdc_require_config.js",
+    ],
+)
+
+ng_e2e_test_library(
+    name = "e2e_test_sources",
+    srcs = glob(["**/*.e2e.spec.ts"]),
+    deps = [
+        "//src/cdk/testing/e2e",
+    ],
+)
+
+e2e_test_suite(
+    name = "e2e_tests",
+    deps = [
+        ":e2e_test_sources",
+        "//src/cdk/testing/e2e",
+    ],
+)

src/material-experimental/mdc-autocomplete/README.md

@@ -0,0 +1 @@
+<!-- TODO -->

src/material-experimental/mdc-autocomplete/_mdc-autocomplete.scss

@@ -0,0 +1,13 @@
+@import '../mdc-helpers/mdc-helpers';
+
+@mixin mat-autocomplete-theme-mdc($theme) {
+  @include mat-using-mdc-theme($theme) {
+    // TODO: implement MDC-based autocomplete.
+  }
+}
+
+@mixin mat-autocomplete-typography-mdc($config) {
+  @include mat-using-mdc-typography($config) {
+    // TODO: implement MDC-based autocomplete.
+  }
+}