build: switch example e2e tests to bazel (#28402)

* No longer builds the example e2e tests using "tsc". The examples are now built with Bazel and can therefore be built with Ivy by using the `--define=compile=aot` switch.
* No longer runs the example e2e tests using the protractor CLI. example e2e tests are executed with the Bazel protractor rule and can therefore run incrementally.

NOTE: Unit tests found within the examples are still running within the legacy jobs.

PR Close #28402

packages/examples/upgrade/BUILD.bazel

@@ -0,0 +1,4 @@
+exports_files([
+    "tsconfig-build.json",
+    "start-server.js",
+])

packages/examples/upgrade/start-server.js

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Google Inc. 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
+ */
+
+const protractorUtils = require('@angular/bazel/protractor-utils');
+const protractor = require('protractor');
+
+module.exports = async function(config) {
+  const {port} = await protractorUtils.runServer(config.workspace, config.server, '-port', []);
+  const serverUrl = `http://localhost:${port}`;
+
+  protractor.browser.baseUrl = serverUrl;
+};

packages/examples/upgrade/static/ts/full/BUILD.bazel

@@ -0,0 +1,14 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//packages/examples/upgrade:upgrade_example.bzl", "create_upgrade_example_targets")
+
+create_upgrade_example_targets(
+    name = "full",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*_spec.ts"],
+    ),
+    assets = ["styles.css"],
+    e2e_srcs = glob(["e2e_test/*_spec.ts"]),
+    entry_module = "@angular/examples/upgrade/static/ts/full/module",
+)

packages/examples/upgrade/static/ts/full/e2e_test/static_full_spec.ts

@@ -7,11 +7,11 @@
  */
 
 import {browser, by, element} from 'protractor';
-import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util';
+import {verifyNoBrowserErrors} from '../../../../../test-utils';
 
 function loadPage() {
   browser.rootEl = 'example-app';
-  browser.get('/upgrade/static/ts/full/');
+  browser.get('/');
 }
 
 describe('upgrade/static (full)', () => {

packages/examples/upgrade/static/ts/lite-multi-shared/BUILD.bazel

@@ -0,0 +1,13 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//packages/examples/upgrade:upgrade_example.bzl", "create_upgrade_example_targets")
+
+create_upgrade_example_targets(
+    name = "lite-multi-shared",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*_spec.ts"],
+    ),
+    e2e_srcs = glob(["e2e_test/*_spec.ts"]),
+    entry_module = "@angular/examples/upgrade/static/ts/lite-multi-shared/module",
+)

packages/examples/upgrade/static/ts/lite-multi-shared/e2e_test/static_lite_multi_shared_spec.ts

@@ -8,7 +8,7 @@
 
 import {browser, by, element} from 'protractor';
 
-import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util';
+import {verifyNoBrowserErrors} from '../../../../../test-utils';
 
 
 describe('upgrade/static (lite with multiple downgraded modules and shared root module)', () => {
@@ -16,7 +16,7 @@ describe('upgrade/static (lite with multiple downgraded modules and shared root
   const compB = element(by.css('ng2-b'));
   const compC = element(by.css('ng2-c'));
 
-  beforeEach(() => browser.get('/upgrade/static/ts/lite-multi-shared/'));
+  beforeEach(() => browser.get('/'));
   afterEach(verifyNoBrowserErrors);
 
   it('should share the same injectable instance across downgraded modules A and B', () => {

packages/examples/upgrade/static/ts/lite-multi/BUILD.bazel

@@ -0,0 +1,13 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//packages/examples/upgrade:upgrade_example.bzl", "create_upgrade_example_targets")
+
+create_upgrade_example_targets(
+    name = "lite-multi",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*_spec.ts"],
+    ),
+    e2e_srcs = glob(["e2e_test/*_spec.ts"]),
+    entry_module = "@angular/examples/upgrade/static/ts/lite-multi/module",
+)

packages/examples/upgrade/static/ts/lite-multi/e2e_test/static_lite_multi_spec.ts

@@ -8,14 +8,14 @@
 
 import {browser, by, element} from 'protractor';
 
-import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util';
+import {verifyNoBrowserErrors} from '../../../../../test-utils';
 
 
 describe('upgrade/static (lite with multiple downgraded modules)', () => {
   const navButtons = element.all(by.css('nav button'));
   const mainContent = element(by.css('main'));
 
-  beforeEach(() => browser.get('/upgrade/static/ts/lite-multi/'));
+  beforeEach(() => browser.get('/'));
   afterEach(verifyNoBrowserErrors);
 
   it('should correctly bootstrap multiple downgraded modules', () => {

packages/examples/upgrade/static/ts/lite/BUILD.bazel

@@ -0,0 +1,14 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//packages/examples/upgrade:upgrade_example.bzl", "create_upgrade_example_targets")
+
+create_upgrade_example_targets(
+    name = "lite",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["e2e_test/*"],
+    ),
+    assets = ["styles.css"],
+    e2e_srcs = glob(["e2e_test/*.ts"]),
+    entry_module = "@angular/examples/upgrade/static/ts/lite/module",
+)

packages/examples/upgrade/static/ts/lite/e2e_test/static_lite_spec.ts

@@ -7,13 +7,13 @@
  */
 
 import {ElementArrayFinder, ElementFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../../test-utils';
 
-import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util';
 import {addCustomMatchers} from './e2e_util';
 
 function loadPage() {
   browser.rootEl = 'example-app';
-  browser.get('/upgrade/static/ts/lite/');
+  browser.get('/');
 }
 
 describe('upgrade/static (lite)', () => {

packages/examples/upgrade/tsconfig-build.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "es2015"],
+    "types": ["angular"]
+  }
+}

packages/examples/upgrade/upgrade_example.bzl

@@ -0,0 +1,66 @@
+load("//packages/bazel:index.bzl", "protractor_web_test_suite")
+load("//tools:defaults.bzl", "ng_module", "ts_library")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+
+"""
+  Macro that can be used to create the Bazel targets for an "upgrade" example. Since the
+  upgrade examples bootstrap their application manually, and we cannot serve all examples,
+  we need to define the devserver for each example. This macro reduces code duplication
+  for defining these targets.
+"""
+
+def create_upgrade_example_targets(name, srcs, e2e_srcs, entry_module, assets = []):
+    ng_module(
+        name = "%s_sources" % name,
+        srcs = srcs,
+        # TODO: FW-1004 Type checking is currently not complete.
+        type_check = False,
+        deps = [
+            "@ngdeps//@types/angular",
+            "//packages/core",
+            "//packages/platform-browser",
+            "//packages/platform-browser-dynamic",
+            "//packages/upgrade/static",
+        ],
+        tsconfig = "//packages/examples/upgrade:tsconfig-build.json",
+    )
+
+    ts_library(
+        name = "%s_e2e_lib" % name,
+        srcs = e2e_srcs,
+        testonly = True,
+        deps = [
+            "@ngdeps//@types/jasminewd2",
+            "@ngdeps//protractor",
+            "//packages/examples/test-utils",
+            "//packages/private/testing",
+        ],
+        tsconfig = "//packages/examples:tsconfig-e2e.json",
+    )
+
+    ts_devserver(
+        name = "devserver",
+        port = 4200,
+        entry_module = entry_module,
+        static_files = [
+            "@ngdeps//node_modules/zone.js:dist/zone.js",
+            "@ngdeps//node_modules/angular:angular.js",
+            "@ngdeps//node_modules/reflect-metadata:Reflect.js",
+        ],
+        index_html = "//packages/examples:index.html",
+        scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
+        deps = [":%s_sources" % name],
+        data = assets,
+    )
+
+    protractor_web_test_suite(
+        name = "%s_protractor" % name,
+        data = ["//packages/bazel/src/protractor/utils"],
+        on_prepare = "//packages/examples/upgrade:start-server.js",
+        server = ":devserver",
+        deps = [
+            ":%s_e2e_lib" % name,
+            "@ngdeps//protractor",
+            "@ngdeps//selenium-webdriver",
+        ],
+    )