build: share release output between circle jobs (#13838)

Also support parallel Karma instances on CircleCI

Author: devversion

.circleci/config.yml

@@ -60,6 +60,12 @@ var_9: &docker-firefox-image
   # See the PR that fixes this: https://github.com/angular/angular/pull/26435
   - image: circleci/node:10.12-browsers
 
+# Attaches the release output which has been stored in the workspace to the current job.
+# https://circleci.com/docs/2.0/workflows/#using-workspaces-to-share-data-among-jobs
+var_10: &attach_release_output
+  attach_workspace:
+      at: dist/releases
+
 # -----------------------------
 # Container version of CircleCI
 # -----------------------------
@@ -86,8 +92,6 @@ jobs:
       - run: bazel build src/...
       - run: bazel test src/...
 
-      - *save_cache
-
   # ------------------------------------------------------------------------------------------
   # Job that runs the unit tests on locally installed browsers (Chrome and Firefox headless).
   # The available browsers are installed through the angular/ngcontainer Docker image.
@@ -106,15 +110,11 @@ jobs:
       # variable which has been configured above
       - run: yarn gulp ci:test
 
-      - *save_cache
-
   # ----------------------------------------------------------------
-  # Job that runs the e2e tests with Protractor and Chrome w/ Xvfb. We cannot use
-  # Chrome headless because our tests rely on APIs which are not testable in headless mode.
-  # For example: the Fullscreen browser API.
+  # Job that runs the e2e tests with Protractor and Chrome Headless
   # ----------------------------------------------------------------
   e2e_tests:
-    docker: *docker-firefox-image
+    <<: *job_defaults
     resource_class: xlarge
     steps:
       - *checkout_code
@@ -123,7 +123,50 @@ jobs:
 
       - run: yarn gulp ci:e2e
 
-      - *save_cache
+  # ----------------------------------------------------------------------------
+  # Job that runs the unit tests on Browserstack. The browsers that will be used
+  # to run the unit tests on Browserstack are set in: test/browser-providers.js
+  # ----------------------------------------------------------------------------
+  tests_browserstack:
+    <<: *job_defaults
+    resource_class: xlarge
+    environment:
+      BROWSER_STACK_USERNAME: "angularteam1"
+      BROWSER_STACK_ACCESS_KEY: "CaXMeMHD9pr5PHg8N7Jq"
+    parallelism: 2
+    steps:
+      - *checkout_code
+      - *restore_cache
+      - *yarn_install
+
+      - run: ./scripts/circleci/run-browserstack-tests.sh
+
+  # -----------------------------------------------------------------------------------------
+  # Job that builds the demo-app with AOT. In order to speed up this job, the release output
+  # from the workspace storage will be attached to this job.
+  # -----------------------------------------------------------------------------------------
+  build_demoapp_aot:
+    <<: *job_defaults
+    steps:
+      - *checkout_code
+      - *restore_cache
+      - *yarn_install
+      - *attach_release_output
+
+      - run: yarn gulp ci:aot
+
+  # -------------------------------------------------------------------------
+  # Job that pre-render's the universal app with `@angular/platform-server`.
+  # This verifies that Angular Material can be rendered within Node.
+  # -------------------------------------------------------------------------
+  prerender_build:
+    <<: *job_defaults
+    steps:
+    - *checkout_code
+    - *restore_cache
+    - *yarn_install
+
+    - run: yarn gulp ci:prerender
 
   # ----------------------------------
   # Lint job. Runs the gulp lint task.
@@ -137,6 +180,27 @@ jobs:
 
       - run: yarn gulp ci:lint
 
+  # -------------------------------------------------------------------------------------------
+  # Job that builds all release packages with Gulp. The built packages can be then used in the
+  # same workflow to publish snapshot builds or test the demo-app with the release packages.
+  # -------------------------------------------------------------------------------------------
+  build_release_packages:
+    <<: *job_defaults
+    resource_class: xlarge
+    steps:
+      - *checkout_code
+      - *restore_cache
+      - *yarn_install
+
+      - run: yarn gulp ci:build-release-packages
+
+      # Store the release output in the workspace storage. This means that other jobs
+      # in the same workflow can attach the release output to their job.
+      - persist_to_workspace:
+          root: dist/releases
+          paths:
+            - "**/*"
+
       - *save_cache
 
 # ----------------------------------------------------------------------------------------
@@ -158,10 +222,19 @@ workflows:
   unit_tests:
     jobs:
       - tests_local_browsers
+      - tests_browserstack
 
   integration_tests:
     jobs:
       - e2e_tests
+      - prerender_build
+
+  release_output:
+    jobs:
+      - build_release_packages
+      - build_demoapp_aot:
+          requires:
+            - build_release_packages
 
   # Lint workflow. As we want to lint in one job, this is a workflow with just one job.
   lint:

scripts/browserstack/start-tunnel.sh

@@ -2,49 +2,48 @@
 
 set -e -o pipefail
 
-# Workaround for Travis CI cookbook https://github.com/travis-ci/travis-ci/issues/4862,
-# where $PATH will be extended with relative paths to the NPM binaries.
-PATH=`echo ${PATH} | sed -e 's/:\.\/node_modules\/\.bin//'`
+tunnelFileName="BrowserStackLocal-linux-x64.zip"
+tunnelUrl="https://www.browserstack.com/browserstack-local/${tunnelFileName}"
 
-TUNNEL_FILE="BrowserStackLocal-linux-x64.zip"
-TUNNEL_URL="https://www.browserstack.com/browserstack-local/${TUNNEL_FILE}"
-TUNNEL_DIR="/tmp/browserstack-tunnel"
-TUNNEL_LOG="${LOGS_DIR}/browserstack-tunnel.log"
-
-BROWSER_STACK_ACCESS_KEY=`echo ${BROWSER_STACK_ACCESS_KEY} | rev`
+tunnelTmpDir="/tmp/material-browserstack"
+tunnelLogFile="${tunnelTmpDir}/browserstack-local.log"
+tunnelReadyFile="${tunnelTmpDir}/readyfile"
+tunnelErrorFile="${tunnelTmpDir}/errorfile"
 
 # Cleanup and create the folder structure for the tunnel connector.
-rm -rf ${TUNNEL_DIR} ${BROWSER_PROVIDER_READY_FILE}
-mkdir -p ${TUNNEL_DIR}
-touch ${TUNNEL_LOG}
+rm -rf ${tunnelTmpDir} ${tunnelReadyFile} ${tunnelErrorFile}
+mkdir -p ${tunnelTmpDir}
+touch ${tunnelLogFile}
 
-cd ${TUNNEL_DIR}
+# Go into temporary tunnel directory.
+cd ${tunnelTmpDir}
 
 # Download the browserstack local binaries.
-curl ${TUNNEL_URL} -o ${TUNNEL_FILE} 2> /dev/null 1> /dev/null
+curl ${tunnelUrl} -o ${tunnelFileName} 2> /dev/null 1> /dev/null
 
 # Extract the browserstack local binaries from the tarball.
 mkdir -p browserstack-tunnel
-unzip -q ${TUNNEL_FILE} -d browserstack-tunnel
+unzip -q ${tunnelFileName} -d browserstack-tunnel
 
-# Cleanup the download directory.
-rm ${TUNNEL_FILE}
+# Cleanup the downloaded zip archive.
+rm ${tunnelFileName}
 
 ARGS=""
 
-# Set tunnel-id only on Travis, to make local testing easier.
-if [ ! -z "${TRAVIS_JOB_ID}" ]; then
-  ARGS="${ARGS} --local-identifier ${TRAVIS_JOB_ID}"
+if [ ! -z "${CIRCLE_BUILD_NUM}" ]; then
+  ARGS="${ARGS} --local-identifier ${CIRCLE_BUILD_NUM}-${CIRCLE_NODE_INDEX}"
 fi
 
-echo "Starting Browserstack Local in the background, logging into: ${TUNNEL_LOG}"
+echo "Starting Browserstack Local in the background, logging into: ${tunnelLogFile}"
 
 # Extension to the BrowserStackLocal binaries, because those can't create a readyfile.
 function create_ready_file {
+  # Process ID for the BrowserStack local asynchronous instance.
+  tunnelProcessPid=${1}
 
   # To be able to exit the tail properly we need to have a sub shell spawned, which is
   # used to track the state of tail.
-  { sleep 120; touch ${BROWSER_PROVIDER_ERROR_FILE}; } &
+  { sleep 120; touch ${tunnelErrorFile}; } &
 
   TIMER_PID=${!}
 
@@ -54,16 +53,18 @@ function create_ready_file {
 
   # When the tail recognizes the `Ctrl-C` log message the BrowserStack Tunnel is up.
   {
-    tail -n0 -f ${TUNNEL_LOG} --pid ${TIMER_PID} | { sed '/Ctrl/q' && kill -9 ${TIMER_PID}; };
+    tail -n0 -f ${tunnelLogFile} --pid ${TIMER_PID} | { sed '/Ctrl/q' && kill -9 ${TIMER_PID}; };
   } &> /dev/null
 
   echo
   echo "BrowserStack Tunnel ready"
 
-  touch ${BROWSER_PROVIDER_READY_FILE}
+  # Create the readyfile and write the PID for BrowserStack Local into it.
+  echo ${tunnelProcessPid} > ${tunnelReadyFile}
 }
 
-browserstack-tunnel/BrowserStackLocal -k ${BROWSER_STACK_ACCESS_KEY} ${ARGS} 2>&1 >> ${TUNNEL_LOG} &
+browserstack-tunnel/BrowserStackLocal -k ${BROWSER_STACK_ACCESS_KEY} ${ARGS} 2>&1 >> \
+  ${tunnelLogFile} &
 
 # Wait for the tunnel to be ready and create the readyfile with the Browserstack PID
-create_ready_file &
+create_ready_file ${!} &

src/demo-app/tsconfig-aot.json

@@ -14,6 +14,8 @@
     "outDir": "../../dist/packages/demo-app",
     "rootDirs": [
       ".",
+      // Include the package output here because otherwise NGC won't be able to load
+      // the SCSS files.
       "../../dist/packages/demo-app"
     ],
     "paths": {
@@ -26,7 +28,7 @@
       "@angular/cdk-experimental/*": ["../../dist/releases/cdk-experimental/*"],
       "@angular/cdk-experimental": ["../../dist/releases/cdk-experimental"],
       "@angular/material-moment-adapter": ["../../dist/releases/material-moment-adapter"],
-      "@angular/material-examples": ["../../dist/packages/material-examples"]
+      "@angular/material-examples": ["../../dist/releases/material-examples"]
     }
   },
   "files": [

test/karma.conf.js

@@ -101,7 +101,24 @@ module.exports = (config) => {
   });
 
   if (process.env['CIRCLECI']) {
-    config.browsers = platformMap[process.env['TEST_PLATFORM']];
+    const instanceIndex = Number(process.env['CIRCLE_NODE_INDEX']);
+    const maxParallelInstances = Number(process.env['CIRCLE_NODE_TOTAL']);
+    const tunnelIdentifier = `${process.env['CIRCLE_BUILD_NUM']}-${instanceIndex}`;
+    const buildIdentifier = `angular-material-${tunnelIdentifier}`;
+    const testPlatform = process.env['TEST_PLATFORM'];
+
+    if (testPlatform === 'browserstack') {
+      config.browserStack.build = buildIdentifier;
+      config.browserStack.tunnelIdentifier = tunnelIdentifier;
+    }
+
+    const platformBrowsers = platformMap[testPlatform];
+    const browserInstanceChunks = splitBrowsersIntoInstances(
+        platformBrowsers, maxParallelInstances);
+
+    // Configure Karma to launch the browsers that belong to the given test platform
+    // and instance.
+    config.browsers = browserInstanceChunks[instanceIndex];
   }
 
   if (process.env['TRAVIS']) {
@@ -140,3 +157,21 @@ module.exports = (config) => {
     config.browsers = platformMap[platform];
   }
 };
+
+/**
+ * Splits the specified browsers into a maximum amount of chunks. The chunk of browsers
+ * are being created deterministically and therefore we get reproducible tests when executing
+ * the same CircleCI instance multiple times.
+ */
+function splitBrowsersIntoInstances(browsers, maxInstances) {
+  let chunks = [];
+  let assignedBrowsers = 0;
+
+  for (let i = 0; i < maxInstances; i++) {
+    const chunkSize = Math.floor((browsers.length - assignedBrowsers) / (maxInstances - i));
+    chunks[i] = browsers.slice(assignedBrowsers, assignedBrowsers + chunkSize);
+    assignedBrowsers += chunkSize;
+  }
+
+  return chunks;
+}

tools/gulp/packages.ts

@@ -24,3 +24,13 @@ cdkPackage.copySecondaryEntryPointStylesToRoot = true;
 // Build and copy the schematics of the CDK and Material package.
 cdkPackage.hasSchematics = true;
 materialPackage.hasSchematics = true;
+
+/** List of all build packages defined for this project. */
+export const allBuildPackages = [
+  cdkPackage,
+  materialPackage,
+  cdkExperimentalPackage,
+  materialExperimentalPackage,
+  momentAdapterPackage,
+  examplesPackage
+];

tools/gulp/tasks/aot.ts

@@ -11,8 +11,24 @@ const demoAppSource = join(packagesDir, 'demo-app');
 /** Path to the tsconfig file that builds the AOT files. */
 const tsconfigFile = join(demoAppSource, 'tsconfig-aot.json');
 
+/**
+ * Build the demo-app wit the release output in order confirm that the library is
+ * working with AOT compilation enabled.
+ */
+task('build-aot', sequenceTask(
+  'clean',
+  ['build-aot:release-packages', 'build-aot:assets'],
+  'build-aot:compiler-cli'
+));
+
+/**
+ * Task that can be used to build the demo-app with AOT without building the
+ * release output. This can be run if the release output is already built.
+ */
+task('build-aot:no-release-build', sequenceTask('build-aot:assets', 'build-aot:compiler-cli'));
+
 /** Builds the demo-app assets and builds the required release packages. */
-task('aot:deps', sequenceTask(
+task('build-aot:release-packages', sequenceTask(
   [
     'cdk:build-release',
     'material:build-release',
@@ -23,15 +39,15 @@ task('aot:deps', sequenceTask(
     'build-examples-module',
     'material-examples:build-release',
   ],
-  // Build the assets after the releases have been built, because the demo-app assets import
-  // SCSS files from the release packages.
-  [':build:devapp:assets', ':build:devapp:scss'],
 ));
 
-/** Build the demo-app and a release to confirm that the library is AOT-compatible. */
-task('aot:build', sequenceTask('clean', 'aot:deps', 'aot:compiler-cli'));
+/**
+ * Task that builds the assets which are required for building with AOT. Since the demo-app uses
+ * Sass files, we need to provide the transpiled CSS sources in the package output.
+ */
+task('build-aot:assets', [':build:devapp:assets', ':build:devapp:scss']);
 
 /** Build the demo-app and a release to confirm that the library is AOT-compatible. */
-task('aot:compiler-cli', execNodeTask(
+task('build-aot:compiler-cli', execNodeTask(
   '@angular/compiler-cli', 'ngc', ['-p', tsconfigFile]
 ));

tools/gulp/tasks/ci.ts

@@ -1,5 +1,6 @@
 import {task} from 'gulp';
-
+import {sequenceTask} from 'material2-build-tools';
+import {allBuildPackages} from '../packages';
 
 task('ci:lint', ['lint']);
 
@@ -8,8 +9,11 @@ task('ci:test', ['test:single-run'], () => process.exit(0));
 
 task('ci:e2e', ['e2e']);
 
-/** Task to verify that all components work with AOT compilation. */
-task('ci:aot', ['aot:build']);
+/**
+ * Task to verify that all components work with AOT compilation. This task requires the
+ * release output to be built already.
+ */
+task('ci:aot', ['build-aot:no-release-build']);
 
 /** Task which reports the size of the library and stores it in a database. */
 task('ci:payload', ['payload']);
@@ -19,3 +23,9 @@ task('ci:coverage', ['coverage:upload']);
 
 /** Task that verifies if all Material components are working with platform-server. */
 task('ci:prerender', ['prerender']);
+
+/** Task that builds all release packages. */
+task('ci:build-release-packages', sequenceTask(
+  'clean',
+  allBuildPackages.map(buildPackage => `${buildPackage.name}:build-release`)
+));