build(): First version of using SauceLabs and BrowserStack on travis.

.travis.yml

@@ -1,21 +1,55 @@
-sudo: false
+# TODO(hansl): When we're ready to test for Dart, readd every mention of Dart to this file.
+# Base the Dart config on the main repo travis.yml file.
+
 language: node_js
+sudo: false
 
 node_js:
   - '4.2.3'
 
-addons:
-  firefox: "latest"
+cache:
+  directories:
+    - node_modules
+
+env:
+  global:
+  - LOGS_DIR=/tmp/angular-material-build/logs
+  - SAUCE_USERNAME=angular-ci
+  - SAUCE_ACCESS_KEY=9b988f434ff8-fbca-8aa4-4ae3-35442987
+  - BROWSER_STACK_USERNAME=angularteam1
+  - BROWSER_STACK_ACCESS_KEY=BWCd4SynLzdDcv8xtzsB
+  - ARCH=linux-x64
+  # Token for tsd to increase github rate limit
+  # See https://github.com/DefinitelyTyped/tsd#tsdrc
+  # This does not use http://docs.travis-ci.com/user/environment-variables/#Secure-Variables
+  # because those are not visible for pull requests, and those should also be reliable.
+  # This SSO token belongs to github account angular-github-ratelimit-token which has no access
+  # (password is in Valentine)
+  - TSDRC='{"token":"ef474500309daea53d5991b3079159a29520a40b"}'
+  # GITHUB_TOKEN_ANGULAR
+  - secure: "fq/U7VDMWO8O8SnAQkdbkoSe2X92PVqg4d044HmRYVmcf6YbO48+xeGJ8yOk0pCBwl3ISO4Q2ot0x546kxfiYBuHkZetlngZxZCtQiFT9kyId8ZKcYdXaIW9OVdw3Gh3tQyUwDucfkVhqcs52D6NZjyE2aWZ4/d1V4kWRO/LMgo="
+  matrix:
+    # Order: a slower build first, so that we don't occupy an idle travis worker waiting for others to complete.
+    - MODE=saucelabs_required
+    - MODE=browserstack_required
+    - MODE=saucelabs_optional
+    - MODE=browserstack_optional
+
+matrix:
+  allow_failures:
+  - env: "MODE=saucelabs_optional"
+  - env: "MODE=browserstack_optional"
 
 install:
-  - npm install -g angular-cli
   - npm install
 
 before_script:
   # Necessary to run test on Travis CI that require a graphical interface.
   # See https://docs.travis-ci.com/user/gui-and-headless-browsers
   - "export DISPLAY=:99.0"
   - "sh -e /etc/init.d/xvfb start"
+  - mkdir -p $LOGS_DIR
+
 
 script:
 - ./scripts/ci/build-and-test.sh ${MODE}

package.json

@@ -8,7 +8,9 @@
     "url": "https://github.com/angular/material2.git"
   },
   "scripts": {
-    "demo-app": "cd src && ng serve"
+    "build": "ng build",
+    "demo-app": "cd src && ng serve",
+    "test": "karma start test/karma.conf.js"
   },
   "version": "2.0.0-alpha.0",
   "license": "Apache-2.0",
@@ -30,11 +32,15 @@
     "broccoli-autoprefixer": "^4.1.0",
     "broccoli-merge-trees": "^1.1.1",
     "broccoli-sass": "^0.7.0",
+    "browserstacktunnel-wrapper": "^1.4.2",
     "ember-cli-inject-live-reload": "^1.3.0",
     "jasmine-core": "^2.3.4",
     "karma": "^0.13.15",
+    "karma-browserstack-launcher": "^0.1.7",
     "karma-chrome-launcher": "^0.2.1",
     "karma-firefox-launcher": "^0.1.7",
-    "karma-jasmine": "^0.3.6"
+    "karma-jasmine": "^0.3.6",
+    "karma-sauce-launcher": "^0.2.14",
+    "typescript": "^1.7.5"
   }
 }

scripts/browserstack/start_tunnel.js

@@ -0,0 +1,54 @@
+'use strict';
+/**
+ * Start the BrowserStack tunnel. Once its started it creates a file so the callee can wait
+ * for the tunnel to be started.
+ */
+
+var fs = require('fs');
+var http = require('http');
+var BrowserStackTunnel = require('browserstacktunnel-wrapper');
+
+var HOSTNAME = 'localhost';
+var PORTS = [9876, 9877];
+var ACCESS_KEY = process.env.BROWSER_STACK_ACCESS_KEY;
+var READY_FILE = process.env.BROWSER_PROVIDER_READY_FILE;
+var TUNNEL_IDENTIFIER = process.env.TRAVIS_JOB_NUMBER;
+
+// We need to start fake servers, otherwise the tunnel does not start.
+var fakeServers = [];
+var hosts = [];
+
+PORTS.forEach(function(port) {
+  fakeServers.push(http.createServer(function() {}).listen(port));
+  hosts.push({
+    name: HOSTNAME,
+    port: port,
+    sslFlag: 0
+  });
+});
+
+var tunnel = new BrowserStackTunnel({
+  key: ACCESS_KEY,
+  localIdentifier: TUNNEL_IDENTIFIER,
+  hosts: hosts
+});
+
+console.log('Starting tunnel on ports', PORTS.join(', '));
+tunnel.start(function(error) {
+  if (error) {
+    console.error('Can not establish the tunnel', error);
+  } else {
+    console.log('Tunnel established.');
+    fakeServers.forEach(function(server) {
+      server.close();
+    });
+
+    if (READY_FILE) {
+      fs.writeFile(READY_FILE, '');
+    }
+  }
+});
+
+tunnel.on('error', function(error) {
+  console.error(error);
+});

scripts/browserstack/start_tunnel.sh

@@ -0,0 +1,3 @@
+export BROWSER_STACK_ACCESS_KEY=`echo $BROWSER_STACK_ACCESS_KEY | rev`
+
+node ./scripts/browserstack/start_tunnel.js &

scripts/browserstack/teardown_tunnel.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+set -e -o pipefail
+
+
+echo "Shutting down Browserstack tunnel"
+echo "TODO: implement me"
+exit 1

scripts/browserstack/waitfor_tunnel.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+
+
+# Wait for Connect to be ready before exiting
+# Time out if we wait for more than 2 minutes, so that we can print logs.
+let "counter=0"
+
+while [ ! -f $BROWSER_PROVIDER_READY_FILE ]; do
+  let "counter++"
+  if [ $counter -gt 240 ]; then
+    echo "Timed out after 2 minutes waiting for browser provider ready file"
+    # We must manually print logs here because travis will not run
+    # after_script commands if the failure occurs before the script
+    # phase.
+    ./scripts/ci/print-logs.sh
+    exit 5
+  fi
+  sleep .5
+done

scripts/ci/build-and-test.sh

@@ -7,5 +7,51 @@ echo "=======  Starting build-and-test.sh  =====================================
 SCRIPT_DIR=$(dirname $0)
 cd ${SCRIPT_DIR}/../..
 
-ng build
-karma start --single-run --no-auto-watch --reporters='dots'
+
+start_tunnel() {
+  case "$MODE" in
+    saucelabs*)
+      ./scripts/sauce/sauce_connect_setup.sh
+      ;;
+    browserstack*)
+      ./scripts/browserstack/start_tunnel.sh
+      ;;
+    *)
+      ;;
+  esac
+}
+
+wait_for_tunnel() {
+  case "$MODE" in
+    saucelabs*)
+      ./scripts/sauce/sauce_connect_block.sh
+      ;;
+    browserstack*)
+      ./scripts/browserstack/waitfor_tunnel.sh
+      ;;
+    *)
+      ;;
+  esac
+  sleep 10
+}
+
+teardown_tunnel() {
+  case "$MODE" in
+    saucelabs*)
+      ./scripts/sauce/sauce_connect_teardown.sh
+      ;;
+    browserstack*)
+      # ./scripts/browserstack/teardown_tunnel.sh
+      ;;
+    *)
+      ;;
+  esac
+}
+
+
+start_tunnel
+wait_for_tunnel
+npm run build
+karma start test/karma.conf.js --single-run --no-auto-watch --reporters='dots'
+teardown_tunnel
+

scripts/sauce/sauce_connect_block.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# Wait for Connect to be ready before exiting
+printf "Connecting to Sauce."
+while [ ! -f $BROWSER_PROVIDER_READY_FILE ]; do
+  printf "."
+  #dart2js takes longer than the travis 10 min timeout to complete
+  sleep .5
+done
+echo "Connected"

scripts/sauce/sauce_connect_setup.sh

@@ -0,0 +1,49 @@
+#!/bin/bash
+
+set -e -o pipefail
+
+# Setup and start Sauce Connect for your TravisCI build
+# This script requires your .travis.yml to include the following two private env variables:
+# SAUCE_USERNAME
+# SAUCE_ACCESS_KEY
+# Follow the steps at https://saucelabs.com/opensource/travis to set that up.
+#
+# Curl and run this script as part of your .travis.yml before_script section:
+# before_script:
+#   - curl https://gist.github.com/santiycr/5139565/raw/sauce_connect_setup.sh | bash
+
+CONNECT_URL="https://saucelabs.com/downloads/sc-4.3.11-linux.tar.gz"
+CONNECT_DIR="/tmp/sauce-connect-$RANDOM"
+CONNECT_DOWNLOAD="sc-latest-linux.tar.gz"
+
+CONNECT_LOG="$LOGS_DIR/sauce-connect"
+CONNECT_STDOUT="$LOGS_DIR/sauce-connect.stdout"
+CONNECT_STDERR="$LOGS_DIR/sauce-connect.stderr"
+
+# Get Connect and start it
+mkdir -p $CONNECT_DIR
+cd $CONNECT_DIR
+curl $CONNECT_URL -o $CONNECT_DOWNLOAD 2> /dev/null 1> /dev/null
+mkdir sauce-connect
+tar --extract --file=$CONNECT_DOWNLOAD --strip-components=1 --directory=sauce-connect > /dev/null
+rm $CONNECT_DOWNLOAD
+
+SAUCE_ACCESS_KEY=`echo $SAUCE_ACCESS_KEY | rev`
+
+ARGS=""
+
+# Set tunnel-id only on Travis, to make local testing easier.
+if [ ! -z "$TRAVIS_JOB_NUMBER" ]; then
+  ARGS="$ARGS --tunnel-identifier $TRAVIS_JOB_NUMBER"
+fi
+if [ ! -z "$BROWSER_PROVIDER_READY_FILE" ]; then
+  ARGS="$ARGS --readyfile $BROWSER_PROVIDER_READY_FILE"
+fi
+
+
+echo "Starting Sauce Connect in the background, logging into:"
+echo "  $CONNECT_LOG"
+echo "  $CONNECT_STDOUT"
+echo "  $CONNECT_STDERR"
+sauce-connect/bin/sc -u $SAUCE_USERNAME -k $SAUCE_ACCESS_KEY $ARGS \
+  --logfile $CONNECT_LOG 2> $CONNECT_STDERR 1> $CONNECT_STDOUT &

scripts/sauce/sauce_connect_teardown.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+set -e -o pipefail
+
+
+echo "Shutting down Sauce Connect tunnel"
+
+killall sc
+
+while [[ -n `ps -ef | grep "sauce-connect-" | grep -v "grep"` ]]; do
+  printf "."
+  sleep .5
+done
+
+echo ""
+echo "Sauce Connect tunnel has been shut down"