build: run e2e tests with bazel

* Builds the e2e app with Bazel * Serves the e2e app with Bazel * Runs the e2e tests with Bazel protractor rules
angular · Dec 27, 2018 · b3d8af7 · b3d8af7
1 parent d22f48c
commit b3d8af7
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 168 deletions.
diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel
@@ -0,0 +1,58 @@
+package(default_visibility=["//visibility:public"])
+
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+ name = "e2e-app",
+ srcs = glob(["**/*.ts"]),
+ assets = glob(["**/*.html", "**/*.css"], exclude = ["index.html"]),
+ deps = [
+ "@angular//packages/core",
+ "@angular//packages/forms",
+ "@angular//packages/platform-browser",
+ "@angular//packages/platform-browser/animations",
+ "@angular//packages/router",
+ "//src/cdk/drag-drop",
+ "//src/cdk/overlay",
+ "//src/cdk/scrolling",
+ # TODO(devversion): be more explicit by using "@angular/material" with individual entry points.
+ "//src/lib:material",
+ "//src/material-examples:examples",
+ "//src/cdk-experimental/dialog",
+ "//src/cdk-experimental/scrolling",
+ ],
+)
+
+ts_devserver(
+ name = "devserver",
+ port = 4200,
+ # Name of the AMD module that should be required on page load.
+ entry_module = "angular_material/src/e2e-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 "matdeps")
+ additional_root_paths = [
+ "angular_material/",
+ "matdeps/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 = [
+ "@matdeps//zone.js",
+ "@matdeps//core-js",
+ "@matdeps//hammerjs",
+ "//src/lib/prebuilt-themes:indigo-pink",
+ ":index.html",
+ ],
+ # Scripts which will be included in the serving_path bundle after "require.js" has been
+ # loaded.
+ scripts = [
+ ":devserver-configure.js",
+ "@matdeps//node_modules/tslib:tslib.js",
+ ],
+ # Dependencies that produce JavaScript output will be automatically included in the
+ # serving_path bundle
+ deps = [":e2e-app"],
+)
diff --git a/src/e2e-app/devserver-configure.js b/src/e2e-app/devserver-configure.js
@@ -0,0 +1,10 @@
+// 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({
+ paths: {
+ 'moment': 'moment/min/moment.min'
+ }
+});
+
+// Workaround until https://github.com/angular/material2/issues/13883 has been addressed.
+var module = {id: ''};
diff --git a/src/e2e-app/index.html b/src/e2e-app/index.html
@@ -9,23 +9,20 @@
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
- <link href="dist/packages/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
+ <link href="src/lib/prebuilt-themes/indigo-pink.css" rel="stylesheet">
 
  <!-- FontAwesome for mat-icon demo. -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 </head>
 <body>
  <e2e-app>Loading...</e2e-app>
 
- <script src="node_modules/core-js/client/core.js"></script>
- <script src="node_modules/systemjs/dist/system.src.js"></script>
- <script src="node_modules/zone.js/dist/zone.js"></script>
- <script src="node_modules/hammerjs/hammer.min.js"></script>
+ <!-- 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>
+ <script src="hammerjs/hammer.min.js"></script>
 
- <script>
- System.import('system-config.js').then(function () {
- System.import('main');
- }).catch(console.error.bind(console));
- </script>
+ <!-- ConcatJS bundle from the Bazel TypeScript devserver. -->
+ <script src="bundle.js"></script>
 </body>
 </html>
diff --git a/src/e2e-app/system-config.ts b/src/e2e-app/system-config.ts
diff --git a/src/e2e-app/tsconfig-build.json b/src/e2e-app/tsconfig-build.json