Run browser tests in firefox & chrome

.travis.yml

@@ -5,6 +5,10 @@ node_js:
 cache:
   yarn: true
 
+addons:
+  chrome: stable
+  firefox: latest
+
 branches:
   only:
     - master
@@ -17,16 +21,22 @@ before_install:
 
 jobs:
   include:
-    - stage: test
-      name: "Execute tests (node)"
+    - name: "Build & test"
       script: |
-        yarn test && \
-        yarn run tslint && \
+        set -ex
+        npx ts-mocha -r tsconfig-paths/register ./test/*.ts
+        yarn run tslint
         yarn run prettier
-    - script: |
+        yarn run build
+        yarn run build-tests
+        npx ts-mocha -r tsconfig-paths/register ./@here/*/test/*.ts
+        yarn test-browser --headless-firefox
+        yarn test-browser --headless-chrome
+
+    - name: "Build documentation"
+      script: |
         yarn run typedoc && \
         echo -e 'include:\n  - "_*"' > doc/_config.yml
-      name: "Build documentation"
       deploy:
         provider: pages
         skip_cleanup: true
@@ -37,9 +47,6 @@ jobs:
         on:
           branch: master
           tags: true
-    - script: yarn run build
-      name: "Build web bundles"
-
 deploy:
   - provider: script
     script:

package.json

@@ -26,12 +26,15 @@
     "dat.gui": "^0.7.2",
     "earcut": "^2.1.3",
     "glob": "^7.1.2",
+    "hard-source-webpack-plugin": "^0.13.1",
     "highlight.js": "^9.12.0",
     "html-webpack-plugin": "^3.2.0",
+    "http-server": "^0.11.1",
     "load-bmfont": "^1.3.1",
     "long": "^4.0.0",
     "mkpath": "^1.0.0",
     "mocha": "^5.2.0",
+    "mocha-webdriver-runner": "^0.5.0",
     "prettier": "^1.14.3",
     "protobufjs": "^6.8.8",
     "rtree": "^1.4.2",
@@ -48,7 +51,7 @@
     "typedoc": "^0.13.0",
     "typedoc-plugin-external-module-map": "^0.1.0",
     "typescript": "~3.2.1",
-    "webpack": "^4.16.5",
+    "webpack": "^4.28.3",
     "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.5",
     "webpack-merge": "^4.1.4"
@@ -58,6 +61,7 @@
     "start": "webpack-dev-server -d --config @here/harp-examples/webpack.config.js",
     "build": "webpack -d --config @here/harp-examples/webpack.config.js",
     "start-tests": "webpack-dev-server -d --config webpack.tests.config.js",
+    "test-browser": "bash ./scripts/with-http-server.sh -p 8080 -C dist/test mocha-webdriver-runner http://localhost:8080/index.html",
     "build-tests": "webpack -d --config webpack.tests.config.js",
     "typedoc": "ts-node ./scripts/doc-snippets.ts && typedoc --options typedoc.json",
     "tslint": "tslint --project tsconfig.json",

scripts/with-http-server.sh

@@ -0,0 +1,89 @@
+#!/bin/sh
+
+#
+# Run a command with HTTP server serving files from current dir.
+#
+# Usage
+#
+#    with-http-server.sh [options] COMMAND
+#
+#    ./scripts/with-http-server.sh --port 3333 curl -I http://localhost:3333/index.html
+#         #just check it works
+#
+#    ./scripts/with-http-server.sh --port 8080 --dir dist/verity-examples \
+#         ./node_modules/.bin/nightwatch -c test/e2e/nightwatch-local.conf.js
+#
+#         # run mocha chrome on local files served via HTTP
+#
+#    ./scripts/with-http-server.sh npx mocha-chrome http://localhost:8081/test/index.html
+#         # run mocha chrome on local files served via HTTP
+#
+# Options:
+#
+#    --server COMMAND, -s COMMAND
+#              execute COMMAND as server, default "npx http-server"
+#
+#    --port PORT, -p PORT
+#              change port number, default 8080
+#
+#    -C DIR
+#    --dir DIR
+#              serve files from DIR, default .
+#
+
+dir=.
+port=8080
+while [ -n "$1" ]; do
+    case "$1" in
+        --port | -p )
+            port=${2}
+            shift ; shift
+            ;;
+        --server | -s)
+            server=${2}
+            shift; shift
+            ;;
+        --dir | -C )
+            dir=${2}
+            shift ; shift
+            ;;
+        *) break ;;
+    esac
+done
+
+echo "$0: starting http server for $(pwd) on port $port" >&2
+
+(
+    cd $dir
+    if [ -z "$server" ] ; then
+        server="npx http-server --silent -a 127.0.0.1 -p $port"
+    fi
+    exec $server
+) &
+
+pid=$!
+attemptNumber=0
+while ! wget -q -O /dev/null http://127.0.0.1:$port/ 2>/dev/null  ; do
+    # check if process is still alive
+    if ! kill -0 $pid ; then
+        echo "$0: http-server exited too early or failed"  >&2
+        exit 1
+    fi
+    # check if we have some attempts left
+    if [ "$attemptNumber" -gt 10 ] ; then
+        echo "$0: timeout waiting for http server, exiting"  >&2
+        kill $pid || true
+        wait $pid
+        exit 1
+    fi
+    attemptNumber=`expr $attemptNumber + 1`
+    sleep 1
+done
+
+echo "$0: $@" >&2
+"$@"
+exitCode=$?
+
+kill $pid || true
+wait $pid
+exit $exitCode

test/index.html

@@ -11,6 +11,7 @@
   <div id="mocha"></div>
   <script src="three.min.js"></script>
   <script src="mocha.js"></script>
+  <script src="mocha-webdriver-client.js"></script>
   <script>
     mocha.setup({
       ui: "bdd"

tsconfig.json

@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
         "module": "commonjs",
-        "target": "es2017",
+        "target": "es5",
         "lib": [
             "es2017",
             "dom"

webpack.tests.config.js

@@ -2,6 +2,7 @@ const webpack = require("webpack");
 const glob = require("glob");
 const path = require("path");
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
 
 const testResourceDirs = glob.sync(path.join(__dirname, "@here/*/test/resources"));
 const testResources = testResourceDirs.map(dir => { return {
@@ -37,6 +38,7 @@ const browserTestsConfig = {
         filename: "[name].bundle.js"
     },
     plugins: [
+        new HardSourceWebpackPlugin(),
         new webpack.EnvironmentPlugin({
             // default NODE_ENV to development. Override by setting the environment variable NODE_ENV to 'production'
             NODE_ENV: process.env.NODE_ENV || "development"
@@ -46,6 +48,7 @@ const browserTestsConfig = {
             require.resolve("three/build/three.min.js"),
             require.resolve("mocha/mocha.js"),
             require.resolve("mocha/mocha.css"),
+            require.resolve("mocha-webdriver-runner/dist/mocha-webdriver-client.js"),
             ...testResources,
             { from: path.join(harpFontResourcesPath, "resources"), to: "@here/harp-font-resources/resources" }
         ])