feat(protractor): add protractor rule

Copied over from angular/angular repo under packages/bazel

.bazelci/presubmit.yml

@@ -17,6 +17,8 @@ tasks:
     - "@bazel_workspace_b//subdir:bin"
     build_targets:
     - "//..."
+    test_flags:
+    - "--test_tag_filters=-fix-bazelci-ubuntu"
     test_targets:
     - "//..."
   ubuntu1804:
@@ -39,6 +41,8 @@ tasks:
     # This target is tagged "manual" but we want some CI
     # coverage of it to make sure it doesn't break.
     - "//docs"
+    test_flags:
+    - "--test_tag_filters=-fix-bazelci-ubuntu"
     test_targets:
     - "//..."
   macos:

.circleci/config.yml

@@ -20,6 +20,13 @@ var_4: &init_environment
       # Setup circleci environment
       ./.circleci/env.sh
 
+      # Install GTK+ graphical user interface (libgtk-3-0), advanced linux sound architecture (libasound2)
+      # and network security service libraries (libnss3) & X11 Screen Saver extension library (libssx1)
+      # which are dependendies of chrome & needed for karma & protractor headless chrome tests.
+      # This is a very small install with the whole init_environment step taking less than 8 seconds.
+      sudo apt-get update
+      sudo apt-get -y install libgtk-3-0 libasound2 libnss3 libxss1
+
       # Overwrite the yarn installed in the docker container with our own version.
       pathToYarn=$(realpath ./third_party/github.com/yarnpkg/yarn/releases/download/v1.13.0/bin/yarn.js)
       sudo chmod a+x $pathToYarn
@@ -203,6 +210,7 @@ jobs:
             - ./rules_nodejs/dist/npm_bazel_labs
             - ./rules_nodejs/dist/npm_bazel_hide-bazel-files
             - ./rules_nodejs/dist/npm_bazel_create
+            - ./rules_nodejs/dist/npm_bazel_protractor
 
   # This job cannot run on BuildKite (BazelCI) because it requires changing
   # directories to test inside nested workspaces.

WORKSPACE

@@ -62,6 +62,11 @@ local_repository(
     path = "packages/labs/src",
 )
 
+local_repository(
+    name = "npm_bazel_protractor",
+    path = "packages/protractor/src",
+)
+
 local_repository(
     name = "npm_bazel_typescript",
     path = "packages/typescript/src",
@@ -160,6 +165,17 @@ load("@npm_bazel_karma//:package.bzl", "rules_karma_dependencies")
 
 rules_karma_dependencies()
 
+# Setup the rules_webtesting toolchain
+load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories")
+
+web_test_repositories()
+
+# Temporary work-around for https://github.com/angular/angular/issues/28681
+# TODO(gregmagolan): go back to @io_bazel_rules_webtesting browser_repositories
+load("@npm_bazel_karma//:browser_repositories.bzl", "browser_repositories")
+
+browser_repositories()
+
 #
 # Dependencies to run skydoc & generating documentation
 #

commitlint.config.js

@@ -14,6 +14,7 @@ module.exports = {
         'jasmine',
         'karma',
         'labs',
+        'protractor',
         'rollup',
         'typescript',
       ]

examples/app/BUILD.bazel

@@ -1,7 +1,10 @@
 load("@build_bazel_rules_nodejs//:defs.bzl", "http_server", "rollup_bundle")
 load("@build_bazel_rules_nodejs//internal/web_package:web_package.bzl", "web_package")
+load("@npm_bazel_protractor//:index.bzl", "protractor_web_test_suite")
 load("@npm_bazel_typescript//:index.bzl", "ts_config", "ts_devserver", "ts_library")
 
+package(default_visibility = ["//visibility:public"])
+
 ts_library(
     name = "app",
     srcs = ["app.ts"],
@@ -10,9 +13,6 @@ ts_library(
 ts_devserver(
     name = "devserver",
     index_html = "index.html",
-    port = 8080,
-    # Expose this to other examples, so we can test visibility of generated manifest file
-    visibility = ["//:__subpackages__"],
     # We'll collect all the devmode JS sources from these TypeScript libraries
     deps = [":app"],
 )
@@ -37,11 +37,7 @@ web_package(
 http_server(
     name = "prodserver",
     data = [":package"],
-    templated_args = [
-        "package",
-        "-p",
-        "8080",
-    ],
+    templated_args = ["package"],
 )
 
 ts_config(
@@ -53,11 +49,25 @@ ts_config(
 ts_library(
     name = "e2e",
     testonly = 1,
-    srcs = ["app_e2e_test.ts"],
+    srcs = ["app.e2e-spec.ts"],
     tsconfig = ":tsconfig-test",
     deps = [
         "@npm//@types/jasmine",
-        "@npm//@types/node",
+        "@npm//jasmine",
         "@npm//protractor",
     ],
 )
+
+protractor_web_test_suite(
+    name = "prodserver_test",
+    on_prepare = ":protractor.on-prepare.js",
+    server = "//:prodserver",
+    deps = [":e2e"],
+)
+
+protractor_web_test_suite(
+    name = "devserver_test",
+    on_prepare = ":protractor.on-prepare.js",
+    server = "//:devserver",
+    deps = [":e2e"],
+)

examples/app/WORKSPACE

@@ -44,3 +44,18 @@ install_bazel_dependencies()
 load("@npm_bazel_typescript//:index.bzl", "ts_setup_workspace")
 
 ts_setup_workspace()
+
+load("@npm_bazel_protractor//:package.bzl", "npm_bazel_protractor_dependencies")
+
+npm_bazel_protractor_dependencies()
+
+# Setup the rules_webtesting toolchain
+load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories")
+
+web_test_repositories()
+
+# Temporary work-around for https://github.com/angular/angular/issues/28681
+# TODO(gregmagolan): go back to @io_bazel_rules_webtesting browser_repositories
+load("@npm_bazel_protractor//:browser_repositories.bzl", "browser_repositories")
+
+browser_repositories()

examples/app/package.json

@@ -1,18 +1,12 @@
 {
   "devDependencies": {
     "@bazel/hide-bazel-files": "file:../../dist/npm_bazel_hide-bazel-files",
+    "@bazel/protractor": "file:../../dist/npm_bazel_protractor",
     "@bazel/typescript": "file:../../dist/npm_bazel_typescript",
-    "@types/jasmine": "2.8.2",
-    "@types/node": "7.0.18",
-    "concurrently": "^3.5.1",
-    "jasmine": "2.8.0",
-    "protractor": "^5.4.2",
+    "@types/jasmine": "3.3.15",
     "typescript": "2.7.x"
   },
   "scripts": {
-    "pretest": "bazel run @nodejs//:yarn && webdriver-manager update --standalone false --gecko false $CHROMEDRIVER_VERSION_ARG",
-    "e2e-devserver": "concurrently \"bazel run //:devserver\" \"while ! nc -z 127.0.0.1 8080; do sleep 1; done && protractor\" --kill-others --success first",
-    "e2e-prodserver": "concurrently \"bazel run //:prodserver\" \"while ! nc -z 127.0.0.1 8080; do sleep 1; done && protractor\" --kill-others --success first",
-    "test": "bazel build ... && yarn e2e-devserver && yarn e2e-prodserver"
+    "test": "bazel test ..."
   }
 }

examples/app/protractor.on-prepare.js

@@ -0,0 +1,23 @@
+// The function exported from this file is used by the protractor_web_test_suite.
+// It is passed to the `onPrepare` configuration setting in protractor and executed
+// before running tests.
+//
+// If the function returns a promise, as it does here, protractor will wait
+// for the promise to resolve before running tests.
+
+const protractorUtils = require('@bazel/protractor/protractor-utils');
+const protractor = require('protractor');
+
+module.exports = function(config) {
+  // In this example, `@bazel/protractor/protractor-utils` is used to run
+  // the server. protractorUtils.runServer() runs the server on a randomly
+  // selected port (given a port flag to pass to the server as an argument).
+  // The port used is returned in serverSpec and the protractor serverUrl
+  // is the configured.
+  const isProdserver = config.server.endsWith('prodserver');
+  return protractorUtils
+      .runServer(config.workspace, config.server, isProdserver ? '-p' : '-port', [])
+      .then(serverSpec => {
+        protractor.browser.baseUrl = `http://localhost:${serverSpec.port}`;
+      });
+};