Run browser tests in firefox & chrome

.travis.yml

@@ -5,28 +5,41 @@ node_js:
 cache:
   yarn: true
 
+addons:
+  # TODO: reenable, when chrome 72 will become stable
+  # chrome: stable
+  firefox: latest
+
 branches:
   only:
     - master
     - /^v\d+\.\d+(\.\d+)?(-\S*)?$/
 
 # upgrade yarn to a more recent version
 before_install:
-  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.12.3
+  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.13.0
   - export PATH="$HOME/.yarn/bin:$PATH"
 
 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
+        # disabled as Chrome 71 doesn't like blob: urls in headless mode
+        # TODO: reenable, when chrome 72 will become stable
+        #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 +50,6 @@ jobs:
         on:
           branch: master
           tags: true
-    - script: yarn run build
-      name: "Build web bundles"
-
 deploy:
   - provider: script
     script:

@here/harp-fetch/test/FetchTest.ts

@@ -10,7 +10,7 @@ import "../index";
 
 // tslint:disable:only-arrow-functions
 
-const isNode = new Function("return typeof window === 'undefined' || this !== window")();
+const isNode = typeof window === "undefined";
 const describeOnlyNode = isNode ? describe : xdescribe;
 
 describe("@here/harp-fetch", function() {

@here/harp-mapview/lib/DebugContext.ts

@@ -36,7 +36,7 @@ interface DebugInfo {
     __debugContext?: DebugContext;
 }
 
-const isNode = new Function("return typeof window === 'undefined' || this !== window")();
+const isNode = typeof window === "undefined";
 
 /**
  * A `DebugOption` is a pair that consists of an option value and an array of change listeners.

@here/harp-mapview/lib/DecodedTileHelpers.ts

@@ -144,13 +144,10 @@ export function getBufferAttribute(attribute: BufferAttribute): THREE.BufferAttr
 /**
  * The default `three.js` object used with a specific technique.
  */
-export interface ObjectConstructor {
-    new (
-        geometry?: THREE.Geometry | THREE.BufferGeometry,
-        material?: THREE.Material
-    ): THREE.Object3D;
-}
-
+export type ObjectConstructor = new (
+    geometry?: THREE.Geometry | THREE.BufferGeometry,
+    material?: THREE.Material
+) => THREE.Object3D;
 /**
  * Gets the default `three.js` object constructor associated with the given technique.
  *

README.md

@@ -76,6 +76,21 @@ Run:
 npm test
 ```
 
+### Run unit & integration tests in Browser environment
+
+Run:
+
+```
+npm run start-tests
+ℹ ｢wds｣: Project is running at http://localhost:8081/
+```
+
+Note the URL and invoke tests using `mocha-webdriver-runner`. Example:
+```
+npx mocha-webdriver-runner http://localhost:8081/ --chrome
+npx mocha-webdriver-runner http://localhost:8081/ --headless-firefox
+```
+
 ## License
 
 Copyright (C) 2018 HERE Europe B.V.

package.json

@@ -21,17 +21,22 @@
     "@types/three": "0.92.24",
     "@types/tween.js": "^16.9.0",
     "chai": "^4.1.2",
+    "chromedriver": "^2.43.1",
     "copy-webpack-plugin": "^4.5.2",
     "css-loader": "^1.0.0",
     "dat.gui": "^0.7.2",
     "earcut": "^2.1.3",
+    "geckodriver": "^1.12.2",
     "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 +53,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 +63,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": "ts-node -- ./scripts/with-http-server.ts -C dist/test -p 8079 -- mocha-webdriver-runner http://localhost:8079/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.ts

@@ -0,0 +1,61 @@
+#!/usr/bin/env ts-node
+/*
+ * Copyright (C) 2017-2018 HERE Europe B.V.
+ * Licensed under Apache 2.0, see full license in LICENSE
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+declare const require: any;
+
+// tslint:disable:no-console
+
+// tslint:disable-next-line:no-var-requires
+const handler = require("serve-handler");
+import * as child_process from "child_process";
+import * as commander from "commander";
+import * as http from "http";
+import * as path from "path";
+
+// tslint:disable-next-line:no-var-requires
+
+commander
+    .usage("[options] COMMAND")
+    .option("-p, --port <PORT>", "change port number", 8000)
+    .option("-C, --dir <DIR>", "serve files from DIR", process.cwd());
+
+commander.parse(process.argv);
+const command = commander.args;
+if (command.length < 1) {
+    commander.outputHelp();
+    throw new Error("with-http-server: COMMAND needed");
+}
+
+const dir = path.resolve(process.cwd(), commander.opts().dir);
+const server = http.createServer((request, response) => {
+    if (request.url === "/") {
+        request.url = "/index.html";
+    }
+    const serveHandlerOptions = {
+        cleanUrls: false,
+        public: dir
+    };
+    return handler(request, response, serveHandlerOptions);
+});
+
+const port: number = commander.opts().port || 8000;
+
+server.listen(port, () => {
+    console.error(`with-http-server: Serving ${dir} at http://localhost:${port}`);
+    const cmdFile = command.shift();
+    const cmdArgs = command;
+    console.error(`with-http-server: Running ${cmdFile} ${cmdArgs.join(" ")}`);
+    const child = child_process.spawn(cmdFile!, cmdArgs, {
+        shell: true,
+        stdio: "inherit"
+    });
+
+    child.on("close", code => {
+        console.log(`with-http-server: child process exited with code ${code}`);
+        process.exit(code);
+    });
+});

test/LicenseHeaderTest.ts

@@ -28,7 +28,16 @@ describe("LicenseHeaderCheck", function() {
     it("Contains license header", function() {
         const failedFiles = new Array<string>();
         for (const sourceFile of sourceFiles) {
-            const contents = fs.readFileSync(sourceFile, { encoding: "utf8" });
+            let contents = fs.readFileSync(sourceFile, { encoding: "utf8" });
+
+            // support for shebang scripts
+            if (contents.startsWith("#!/")) {
+                const firstNewLineIndex = contents.indexOf("\n");
+                if (firstNewLineIndex !== -1) {
+                    contents = contents.substr(firstNewLineIndex + 1);
+                }
+            }
+
             if (!contents.startsWith(license)) {
                 failedFiles.push(sourceFile);
             }

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" }
         ])