make sure code compiles and runs

Author: mmalerba

.github/CODEOWNERS

@@ -98,8 +98,9 @@
 # CDK experimental package
 /src/cdk-experimental/**                           @jelbourn
 /src/cdk-experimental/dialog/**                    @jelbourn @josephperrott @crisbeto
-/src/cdk-experimental/scrolling/**                 @mmalerba
 /src/cdk-experimental/popover-edit/**              @kseamon @andrewseguin
+/src/cdk-experimental/scrolling/**                 @mmalerba
+/src/cdk-experimental/testing/**                   @mmalerba
 
 # Docs examples & guides
 /guides/**                                         @jelbourn

src/cdk-experimental/testing/BUILD.bazel

@@ -0,0 +1,34 @@
+package(default_visibility=["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_web_test_suite")
+load("@npm_angular_bazel//:index.bzl", "protractor_web_test_suite")
+
+
+ng_module(
+  name = "testing",
+  srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts", "test-app/**"]),
+  module_name = "@angular/cdk-experimental/testing",
+  deps = [
+    "@npm//@angular/core",
+    "@npm//protractor",
+  ],
+)
+
+ng_web_test_suite(
+  name = "unit_tests",
+  deps = ["//src/cdk-experimental/testing/test-app:test_app_test_sources"],
+)
+
+protractor_web_test_suite(
+  name = "e2e_tests",
+  configuration = ":protractor.conf.js",
+  on_prepare = ":start-devserver.js",
+  server = "//src/cdk-experimental/testing/test-app:devserver",
+  deps = [
+    "@npm//protractor",
+    "//src/cdk-experimental/testing/test-app:test_app_e2e_test_sources",
+  ],
+  data = [
+    "@npm//@angular/bazel",
+  ],
+)

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

@@ -1,3 +1,11 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
 /**
  * Test Element interface
  * This is a wrapper of native element
@@ -165,8 +173,7 @@ export class ComponentHarness {
     options?: Options): () => Promise<TestElement|T|null> {
     if (typeof cssOrComponentHarness === 'string') {
       const css = cssOrComponentHarness;
-      const options = cssOrOptions as Options;
-      return () => this.locator.find(css, options);
+      return () => this.locator.find(css, cssOrOptions as Options);
     } else {
       const componentHarness = cssOrComponentHarness;
       const css = cssOrOptions as string;

src/cdk-experimental/testing/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './public-api';

src/cdk-experimental/testing/protractor.conf.js

@@ -0,0 +1,12 @@
+exports.config = {
+  useAllAngular2AppRoots: true,
+  allScriptsTimeout: 120000,
+  getPageTimeout: 120000,
+  jasmineNodeOpts: {
+    defaultTimeoutInterval: 120000,
+  },
+
+  // Since we want to use async/await we don't want to mix up with selenium's promise
+  // manager. In order to enforce this, we disable the promise manager.
+  SELENIUM_PROMISE_MANAGER: false,
+};

src/cdk-experimental/testing/protractor.ts

@@ -1,7 +1,24 @@
-import {browser, by, element, ElementFinder} from 'protractor';
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+// TODO(mmalerba): Should this file be part of `@angular/cdk-experimental/testing` or a separate
+//  package? It depends on protractor which we don't want to put in the deps for cdk-experimental.
+
+import {browser, by, element as protractorElement, ElementFinder} from 'protractor';
 import {promise as wdpromise} from 'selenium-webdriver';
 
-import {ComponentHarness, ComponentHarnessType, Locator, Options, TestElement} from './component-harness';
+import {
+  ComponentHarness,
+  ComponentHarnessType,
+  Locator,
+  Options,
+  TestElement
+} from './component-harness';
 
 /**
  * Component harness factory for protractor.
@@ -52,23 +69,26 @@ export function getElementFinder(testElement: TestElement): ElementFinder {
 }
 
 class ProtractorLocator implements Locator {
-  private root: ProtractorElement;
-  constructor(private rootFinder: ElementFinder) {
-    this.root = new ProtractorElement(this.rootFinder);
+  private _root: ProtractorElement;
+
+  constructor(private _rootFinder: ElementFinder) {
+    this._root = new ProtractorElement(this._rootFinder);
   }
 
   host(): TestElement {
-    return this.root;
+    return this._root;
   }
 
   async find(css: string, options?: Options): Promise<TestElement|null> {
-    const finder = await getElement(css, this.rootFinder, options);
-    if (finder === null) return null;
+    const finder = await getElement(css, this._rootFinder, options);
+    if (finder === null) {
+      return null;
+    }
     return new ProtractorElement(finder);
   }
 
   async findAll(css: string): Promise<TestElement[]> {
-    const elementFinders = this.rootFinder.all(by.css(css));
+    const elementFinders = this._rootFinder.all(by.css(css));
     const res: TestElement[] = [];
     await elementFinders.each(el => {
       if (el) {
@@ -81,8 +101,10 @@ class ProtractorLocator implements Locator {
   async load<T extends ComponentHarness>(
     componentHarness: ComponentHarnessType<T>, css: string,
     options?: Options): Promise<T|null> {
-    const root = await getElement(css, this.rootFinder, options);
-    if (root === null) return null;
+    const root = await getElement(css, this._rootFinder, options);
+    if (root === null) {
+      return null;
+    }
     const locator = new ProtractorLocator(root);
     return new componentHarness(locator);
   }
@@ -91,7 +113,7 @@ class ProtractorLocator implements Locator {
     componentHarness: ComponentHarnessType<T>,
     rootSelector: string,
   ): Promise<T[]> {
-    const roots = this.rootFinder.all(by.css(rootSelector));
+    const roots = this._rootFinder.all(by.css(rootSelector));
     const res: T[] = [];
     await roots.each(el => {
       if (el) {
@@ -163,7 +185,7 @@ function toPromise<T>(p: wdpromise.Promise<T>): Promise<T> {
 async function getElement(css: string, root?: ElementFinder, options?: Options):
   Promise<ElementFinder|null> {
   const useGlobalRoot = options && !!options.global;
-  const elem = root === undefined || useGlobalRoot ? element(by.css(css)) :
+  const elem = root === undefined || useGlobalRoot ? protractorElement(by.css(css)) :
     root.element(by.css(css));
   const allowNull = options !== undefined && options.allowNull !== undefined ?
     options.allowNull :

src/cdk-experimental/testing/public-api.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import * as protractor from './protractor';
+import * as testbed from './testbed';
+
+export * from './component-harness';
+export {protractor, testbed};

src/cdk-experimental/testing/start-devserver.js

@@ -0,0 +1,42 @@
+const protractor = require('protractor');
+const utils = require('@angular/bazel/protractor-utils');
+const spawn = require('child_process').spawn;
+
+/**
+ * Runs the specified server binary from a given workspace and waits for the server
+ * being ready. The server binary will be resolved from the runfiles.
+ */
+async function runBazelServer(workspace, serverPath, timeout) {
+  const serverBinary = require.resolve(`${workspace}/${serverPath}`);
+  const port = await utils.findFreeTcpPort();
+
+  // Start the Bazel server binary with a random free TCP port.
+  const serverProcess = spawn(serverBinary, ['-port', port], {stdio: 'inherit'});
+
+  // In case the process exited with an error, we want to propagate the error.
+  serverProcess.on('exit', exitCode => {
+    if (exitCode !== 0) {
+      throw new Error(`Server exited with error code: ${exitCode}`);
+    }
+  });
+
+  // Wait for the server to be bound to the given port.
+  await utils.waitForServer(port, timeout);
+
+  return port;
+}
+
+/**
+ * Called by Protractor before starting any tests. This is script is responsible for
+ * starting up the devserver and updating the Protractor base URL to the proper port.
+ */
+module.exports = async function(config) {
+  const port = await runBazelServer(config.workspace, config.server);
+  const baseUrl = `http://localhost:${port}`;
+  const processedConfig = await protractor.browser.getProcessedConfig();
+
+  // Update the protractor "baseUrl" to match the new random TCP port. We need random TCP ports
+  // because otherwise Bazel could not execute protractor tests concurrently.
+  protractor.browser.baseUrl = baseUrl;
+  processedConfig.baseUrl = baseUrl;
+};

src/cdk-experimental/testing/test-app/BUILD.bazel

@@ -0,0 +1,77 @@
+package(default_visibility=["//visibility:public"])
+
+load("@npm_bazel_typescript//:defs.bzl", "ts_devserver")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ts_library")
+load("//:packages.bzl", "ANGULAR_LIBRARY_UMDS")
+
+ng_module(
+  name = "test-app",
+  srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts", "harnesses/**"]),
+  assets = glob(["**/*.html", "**/*.css"], exclude = ["index.html"]),
+  deps = [
+    "@npm//@angular/core",
+    "@npm//@angular/forms",
+  ],
+)
+
+ts_devserver(
+    name = "devserver",
+    port = 4200,
+    # Name of the AMD module that should be required on page load.
+    entry_module = "angular_material/src/cdk-experimental/testing/test-app/main",
+    # Serving path of the bundle that serves all files specified in "deps" and "scripts".
+    serving_path = "/bundle.js",
+    # Root paths can be used simplify the loading of files from external Bazel repositories
+    # (such as the Bazel managed deps repository called "npm")
+    additional_root_paths = [
+      "npm/node_modules",
+    ],
+    # Files which should be provided by Bazel when running the devserver. These are not
+    # automatically served, but can be loaded manually through HTTP requests.
+    static_files = [
+      "@npm//zone.js",
+      "@npm//core-js",
+      ":index.html",
+    ],
+    # Scripts which will be included in the serving_path bundle after "require.js" has been
+    # loaded.
+    # TODO(jelbourn): remove UMDs from here once we don't have to manually include them
+    scripts = [
+      ":devserver-configure.js",
+      "//tools/rxjs:rxjs_umd_modules",
+      "@npm//node_modules/tslib:tslib.js",
+    ] + ANGULAR_LIBRARY_UMDS,
+    # Dependencies that produce JavaScript output will be automatically included in the
+    # serving_path bundle
+    deps = [":test-app"],
+)
+
+ng_module(
+  name = "test_app_test_harnesses",
+  srcs = glob(["harnesses/*.ts"]),
+  deps = [
+    "//src/cdk-experimental/testing",
+  ],
+)
+
+ng_test_library(
+  name = "test_app_test_sources",
+  srcs = glob(["**/*.spec.ts"], exclude=["**/*.e2e.spec.ts"]),
+  deps = [
+    ":test-app",
+    ":test_app_test_harnesses",
+  ],
+)
+
+ts_library(
+   name = "test_app_e2e_test_sources",
+   srcs = glob(["**/*.e2e.spec.ts"]),
+   tsconfig = ":tsconfig.json",
+   deps = [
+     "@npm//@types/jasmine",
+     "@npm//@types/selenium-webdriver",
+     "@npm//protractor",
+     ":test_app_test_harnesses",
+     "//src/cdk-experimental/testing",
+   ],
+)

src/cdk-experimental/testing/test-app/devserver-configure.js

@@ -0,0 +1,6 @@
+// We need to configure AMD modules which are not named because otherwise "require.js" is not
+// able to resolve AMD imports to such modules.
+require.config({});
+
+// Workaround until https://github.com/angular/components/issues/13883 has been addressed.
+var module = {id: ''};

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

@@ -1,3 +1,11 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
 import {ComponentHarness, TestElement} from '../../component-harness';
 import {SubComponentHarness} from './sub-component-harness';
 
@@ -23,23 +31,23 @@ export class MainComponentHarness extends ComponentHarness {
   readonly nullGlobalEl =
     this.find('wrong locator', {global: true, allowNull: true});
 
-  private button = this.find('button');
-  private testTools = this.find(SubComponentHarness, 'sub');
+  private _button = this.find('button');
+  private _testTools = this.find(SubComponentHarness, 'sub');
 
   async increaseCounter(times: number) {
-    const button = await this.button();
+    const button = await this._button();
     for (let i = 0; i < times; i++) {
       await button.click();
     }
   }
 
   async getTestTool(index: number): Promise<TestElement> {
-    const subComponent = await this.testTools();
+    const subComponent = await this._testTools();
     return subComponent.getItem(index);
   }
 
   async getTestTools(): Promise<TestElement[]> {
-    const subComponent = await this.testTools();
+    const subComponent = await this._testTools();
     return subComponent.getItems();
   }
 }

src/cdk-experimental/testing/test-app/index.html

@@ -1,12 +1,20 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html lang="en">
 <head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Test App</title>
   <base href="/">
-  <title>angular2 page</title>
 </head>
 <body>
-<main></main>
+<main>Loading...</main>
 <span class="sibling">I am a sibling!</span>
+
+<!-- Static scripts which are not imported through AMD nor part of the ConcatJS bundle. -->
+<script src="core-js/client/core.min.js"></script>
+<script src="zone.js/dist/zone.min.js"></script>
+
+<!-- ConcatJS bundle from the Bazel TypeScript devserver. -->
+<script src="bundle.js"></script>
 </body>
-<script src="/app_bundle.js"></script>
 </html>