build: run playground e2e examples with bazel (#28697)

PR Close #28697

modules/playground/e2e_test/BUILD.bazel

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

modules/playground/e2e_test/async/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "async",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/async:devserver",
+)

modules/playground/e2e_test/async/async_spec.ts

@@ -6,12 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {$, browser} from 'protractor';
 import {promise} from 'selenium-webdriver';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('async', () => {
-  const URL = 'all/playground/src/async/index.html';
+  const URL = '/';
 
   beforeEach(() => browser.get(URL));
 

modules/playground/e2e_test/example_test.bzl

@@ -0,0 +1,32 @@
+load("//packages/bazel:index.bzl", "protractor_web_test_suite")
+load("//tools:defaults.bzl", "ts_library")
+
+def example_test(name, srcs, server, data = [], **kwargs):
+    ts_library(
+        name = "%s_lib" % name,
+        testonly = True,
+        srcs = srcs,
+        tsconfig = "//modules/playground:tsconfig-e2e.json",
+        deps = [
+            "//modules/e2e_util",
+            "//packages/private/testing",
+            "@ngdeps//@types/jasminewd2",
+            "@ngdeps//@types/selenium-webdriver",
+            "@ngdeps//protractor",
+        ],
+    )
+
+    protractor_web_test_suite(
+        name = "protractor_tests",
+        data = ["//packages/bazel/src/protractor/utils"] + data,
+        on_prepare = "//modules/playground/e2e_test:start-server.js",
+        server = server,
+        deps = [
+            ":%s_lib" % name,
+            "@ngdeps//protractor",
+            "@ngdeps//selenium-webdriver",
+            "@ngdeps//yargs",
+            "@ngdeps//source-map",
+        ],
+        **kwargs
+    )

modules/playground/e2e_test/hello_world/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "hello_world",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/hello_world:devserver",
+)

modules/playground/e2e_test/hello_world/hello_world_spec.ts

@@ -14,7 +14,7 @@ describe('hello world', function() {
   afterEach(verifyNoBrowserErrors);
 
   describe('hello world app', function() {
-    const URL = 'all/playground/src/hello_world/index.html';
+    const URL = '/';
 
     it('should greet', function() {
       browser.get(URL);

modules/playground/e2e_test/http/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "http",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/http:devserver",
+)

modules/playground/e2e_test/http/http_spec.ts

@@ -6,15 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('http', function() {
 
   afterEach(verifyNoBrowserErrors);
 
   describe('fetching', function() {
-    const URL = 'all/playground/src/http/index.html';
+    const URL = '/';
 
     it('should fetch and display people', function() {
       browser.get(URL);

modules/playground/e2e_test/jsonp/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "jsonp",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/jsonp:devserver",
+)

modules/playground/e2e_test/jsonp/jsonp_spec.ts

@@ -6,15 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('jsonp', function() {
 
   afterEach(verifyNoBrowserErrors);
 
   describe('fetching', function() {
-    const URL = 'all/playground/src/jsonp/index.html';
+    const URL = '/';
 
     it('should fetch and display people', function() {
       browser.get(URL);

modules/playground/e2e_test/key_events/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "key_events",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/key_events:devserver",
+)

modules/playground/e2e_test/key_events/key_events_spec.ts

@@ -6,14 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser, by, element, protractor} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 const Key = protractor.Key;
 
 describe('key_events', function() {
 
-  const URL = 'all/playground/src/key_events/index.html';
+  const URL = '/';
 
   afterEach(verifyNoBrowserErrors);
   beforeEach(() => { browser.get(URL); });

modules/playground/e2e_test/model_driven_forms/BUILD.bazel

@@ -0,0 +1,9 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "model_driven_forms",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/model_driven_forms:devserver",
+    # TODO: This does not pass with Ivy because the patch branch does not contain ivy fixes.
+    tags = ["fixme-ivy-aot"],
+)

modules/playground/e2e_test/model_driven_forms/model_driven_forms_spec.ts

@@ -6,14 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser, by, element} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('Model-Driven Forms', function() {
 
   afterEach(verifyNoBrowserErrors);
 
-  const URL = 'all/playground/src/model_driven_forms/index.html';
+  const URL = '/';
 
   it('should display errors', function() {
     browser.get(URL);

modules/playground/e2e_test/order_management/BUILD.bazel

@@ -0,0 +1,9 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "order_management",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/order_management:devserver",
+    # TODO: This does not pass with Ivy because the patch branch does not contain ivy fixes.
+    tags = ["fixme-ivy-aot"],
+)

modules/playground/e2e_test/order_management/order_management_spec.ts

@@ -6,11 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('Order Management CRUD', function() {
-  const URL = 'all/playground/src/order_management/index.html';
+  const URL = '/';
 
   it('should work', function() {
     browser.get(URL);

modules/playground/e2e_test/person_management/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "person_management",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/person_management:devserver",
+)

modules/playground/e2e_test/person_management/person_management_spec.ts

@@ -6,11 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('Person Management CRUD', function() {
-  const URL = 'all/playground/src/person_management/index.html';
+  const URL = '/';
 
   it('should work', function() {
     browser.get(URL);

modules/playground/e2e_test/relative_assets/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "relative_assets",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/relative_assets:devserver",
+)

modules/playground/e2e_test/relative_assets/assets_spec.ts

@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {$, ExpectedConditions, browser, by, element} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 function waitForElement(selector: string) {
   // Waits for the element with id 'abc' to be present on the dom.
   browser.wait(ExpectedConditions.presenceOf($(selector)), 20000);
@@ -18,7 +19,7 @@ describe('relative assets relative-app', () => {
 
   afterEach(verifyNoBrowserErrors);
 
-  const URL = 'all/playground/src/relative_assets/';
+  const URL = '/';
 
   it('should load in the templateUrl relative to the my-cmp component', () => {
     browser.get(URL);

modules/playground/e2e_test/routing/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "routing",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/routing:devserver",
+)

modules/playground/e2e_test/routing/routing_spec.ts

@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {$, ExpectedConditions, browser, by, element} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 function waitForElement(selector: string) {
   // Waits for the element with id 'abc' to be present on the dom.
   browser.wait(ExpectedConditions.presenceOf($(selector)), 20000);
@@ -19,7 +20,7 @@ describe('routing inbox-app', () => {
   afterEach(verifyNoBrowserErrors);
 
   describe('index view', () => {
-    const URL = 'all/playground/src/routing/';
+    const URL = '/';
 
     it('should list out the current collection of items', () => {
       browser.get(URL);

modules/playground/e2e_test/sourcemap/BUILD.bazel

@@ -0,0 +1,11 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "sourcemap",
+    srcs = glob(["**/*.ts"]),
+    data = [
+        "//modules/playground/src/sourcemap",
+        "//modules/playground/src/sourcemap:index.ts",
+    ],
+    server = "//modules/playground/src/sourcemap:devserver",
+)

modules/playground/e2e_test/sourcemap/sourcemap_spec.ts

@@ -13,7 +13,7 @@ const fs = require('fs');
 const sourceMap = require('source-map');
 
 describe('sourcemaps', function() {
-  const URL = 'all/playground/src/sourcemap/index.html';
+  const URL = '/';
 
   it('should map sources', function() {
     browser.get(URL);
@@ -36,7 +36,7 @@ describe('sourcemaps', function() {
 
 
       const content =
-          fs.readFileSync('dist/all/playground/src/sourcemap/index.js').toString('utf8');
+          fs.readFileSync(require.resolve('../../src/sourcemap/index.js')).toString('utf8');
       const marker = '//# sourceMappingURL=data:application/json;base64,';
       const index = content.indexOf(marker);
       const sourceMapData =
@@ -46,7 +46,7 @@ describe('sourcemaps', function() {
 
       const originalPosition = decoder.originalPositionFor({line: errorLine, column: errorColumn});
 
-      const sourceCodeLines = fs.readFileSync('modules/playground/src/sourcemap/index.ts', {
+      const sourceCodeLines = fs.readFileSync(require.resolve('../../src/sourcemap/index.ts'), {
                                   encoding: 'UTF-8'
                                 }).split('\n');
       expect(sourceCodeLines[originalPosition.line - 1])

modules/playground/e2e_test/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;
+};

modules/playground/e2e_test/svg/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "svg",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/svg:devserver",
+)

modules/playground/e2e_test/svg/svg_spec.ts

@@ -6,12 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser, by, element} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('SVG', function() {
 
-  const URL = 'all/playground/src/svg/index.html';
+  const URL = '/';
 
   afterEach(verifyNoBrowserErrors);
   beforeEach(() => { browser.get(URL); });

modules/playground/e2e_test/template_driven_forms/BUILD.bazel

@@ -0,0 +1,9 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "template_driven_forms",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/template_driven_forms:devserver",
+    # TODO: This does not pass with Ivy because the patch branch does not contain ivy fixes.
+    tags = ["fixme-ivy-aot"],
+)

modules/playground/e2e_test/template_driven_forms/template_driven_forms_spec.ts

@@ -6,14 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser, by, element} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('Template-Driven Forms', function() {
 
   afterEach(verifyNoBrowserErrors);
 
-  const URL = 'all/playground/src/template_driven_forms/index.html';
+  const URL = '/';
 
   it('should display errors', function() {
     browser.get(URL);

modules/playground/e2e_test/upgrade/BUILD.bazel

@@ -0,0 +1,9 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "upgrade",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/upgrade:devserver",
+    # TODO: This does not pass with Ivy because the patch branch does not contain ivy fixes.
+    tags = ["fixme-ivy-aot"],
+)

modules/playground/e2e_test/web_workers/animations/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "animations",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/web_workers/animations:devserver",
+)

modules/playground/e2e_test/web_workers/animations/animations_spec.ts

@@ -6,10 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser, by, element, protractor} from 'protractor';
 
-// TODO(matsko): make this test work again with new view engine.
+import {verifyNoBrowserErrors} from '../../../../e2e_util/e2e_util';
+
+
+// Disabled because with ViewEngine animations within webworkers is not supported.
+// See: https://github.com/angular/angular/issues/18610
 xdescribe('WebWorkers Animations', function() {
   afterEach(() => {
     verifyNoBrowserErrors();

modules/playground/e2e_test/web_workers/input/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "input",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/web_workers/input:devserver",
+)

modules/playground/e2e_test/web_workers/kitchen_sink/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "kitchen_sink",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/web_workers/kitchen_sink:devserver",
+)

modules/playground/e2e_test/web_workers/message_broker/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "message_broker",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/web_workers/message_broker:devserver",
+)

modules/playground/e2e_test/web_workers/router/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "router",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/web_workers/router:devserver",
+)

modules/playground/e2e_test/web_workers/todo/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "todo",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/web_workers/todo:devserver",
+)

modules/playground/e2e_test/zippy_component/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//modules/playground/e2e_test:example_test.bzl", "example_test")
+
+example_test(
+    name = "zippy_component",
+    srcs = glob(["**/*.ts"]),
+    server = "//modules/playground/src/zippy_component:devserver",
+)

modules/playground/e2e_test/zippy_component/zippy_spec.ts

@@ -6,15 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 import {browser, by, element} from 'protractor';
 
+import {verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+
 describe('Zippy Component', function() {
 
   afterEach(verifyNoBrowserErrors);
 
   describe('zippy', function() {
-    const URL = 'all/playground/src/zippy_component/index.html';
+    const URL = '/';
 
     beforeEach(function() { browser.get(URL); });
 

modules/playground/tsconfig-e2e.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "lib": ["es2015", "dom"],
+    "types": ["node", "jasminewd2", "selenium-webdriver"]
+  }
+}

package.json

@@ -46,6 +46,7 @@
     "@types/fs-extra": "4.0.2",
     "@types/hammerjs": "2.0.35",
     "@types/jasmine": "^2.8.8",
+    "@types/jasminewd2": "^2.0.4",
     "@types/mock-fs": "^3.6.30",
     "@types/node": "^10.9.4",
     "@types/selenium-webdriver": "3.0.7",
@@ -103,7 +104,6 @@
     "@bazel/bazel": "~0.22.0",
     "@bazel/buildifier": "^0.19.2",
     "@bazel/ibazel": "~0.9.0",
-    "@types/jasminewd2": "^2.0.4",
     "@types/minimist": "^1.2.0",
     "@types/systemjs": "0.19.32",
     "browserstacktunnel-wrapper": "2.0.1",

packages/private/testing/BUILD.bazel

@@ -1,4 +1,7 @@
-package(default_visibility = ["//packages:__subpackages__"])
+package(default_visibility = [
+    "//modules/playground:__subpackages__",
+    "//packages:__subpackages__",
+])
 
 exports_files(["package.json"])