Add karma to run unit tests

karma.conf.js

@@ -0,0 +1,113 @@
+const fs = require("fs");
+
+function readJsonFile(path) {
+  // TypeScript puts lots of comments in the default `tsconfig.json`, so you
+  // can’t use `require()` to read it. Hence this hack.
+  return eval("(" + fs.readFileSync(path).toString("utf-8") + ")");
+}
+
+const typeScriptConfig = readJsonFile("./tsconfig.json");
+const babel = readJsonFile("./.babelrc");
+
+module.exports = function(config) {
+  const options = {
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: "",
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ["mocha", "chai", "karma-typescript"],
+
+    // list of files / patterns to load in the browser
+    files: [
+      {
+        pattern: "test/**/*.ts",
+        type: "module"
+      },
+      {
+        pattern: "src/**/*.ts",
+        included: false
+      }
+    ],
+
+    // list of files / patterns to exclude
+    exclude: [],
+// preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+      "src/**/*.ts": ["karma-typescript", "babel"],
+      "test/**/*.ts": ["karma-typescript", "babel"]
+    },
+    babelPreprocessor: {
+      options: babel
+    },
+    karmaTypescriptConfig: {
+      // Inline `tsconfig.json` so that the right TS libs are loaded
+      ...typeScriptConfig,
+      // Coverage is a thing that karma-typescript forces on you and only
+      // creates problems. This is the simplest way of disabling it that I
+      // could find.
+      coverageOptions: {
+        exclude: /.*/
+      }
+    },
+    mime: {
+      // Default mimetype for .ts files is video/mp2t but we need
+      // text/javascript for modules to work.
+      "text/javascript": ["ts"]
+    },
+    plugins: [
+      // Load all modules whose name starts with "karma" (usually the default).
+      "karma-*",
+      // We don’t have file extensions on our imports as they are primarily
+      // consumed by webpack.  With Karma, however, this turns into a real HTTP
+      // request for a non-existent file. This inline plugin is a middleware
+      // that appends `.ts` to the request URL.
+      {
+        "middleware:redirect_to_ts": [
+          "value",
+          (req, res, next) => {
+            if (req.url.startsWith("/base/src")) {
+              req.url += '.ts';
+            }
+            next();
+          }
+        ]
+      }
+    ],
+    // Run our middleware before all other middlewares.
+    beforeMiddleware: ["redirect_to_ts"],
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ["progress"],
+
+    // web server port
+    port: 9876,
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: false,
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ["ChromeHeadless"],
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true,
+
+    // These custom files allow us to use ES6 modules in our tests.
+    // Remove these 2 lines (and files) once https://github.com/karma-runner/karma/pull/2834 lands.
+    customContextFile: "test/context.html",
+    customDebugFile: "test/debug.html"
+  };
+
+  config.set(options);
+};

package.json

@@ -9,7 +9,7 @@
     "start": "webpack serve --host 0.0.0.0 --hot",
     "build": "webpack -p",
     "lint": "eslint src",
-    "test": "npm run build && mocha -R spec"
+    "test": "npm run build && mocha -R spec && karma start"
   },
   "eslintConfig": {
     "extends": [
@@ -32,6 +32,9 @@
     "build/*"
   ],
   "devDependencies": {
+    "@types/chai": "^4.1.3",
+    "@types/karma": "^1.7.3",
+    "@types/mocha": "^5.2.0",
     "@types/node": "^9.4.7",
     "@types/webassembly-js-api": "0.0.1",
     "babel-loader": "^7.1.4",
@@ -62,9 +65,15 @@
     "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.0.6",
     "if-env": "^1.0.4",
+    "karma": "^2.0.2",
+    "karma-babel-preprocessor": "^7.0.0",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-mocha": "^1.3.0",
+    "karma-typescript": "^3.0.12",
     "loader-utils": "^1.1.0",
     "mini-css-extract-plugin": "^0.3.0",
-    "mocha": "^5.1.1",
+    "mocha": "^5.2.0",
     "node-sass": "^4.7.2",
     "optimize-css-assets-webpack-plugin": "^4.0.0",
     "prettier": "^1.12.1",

test/context.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!--
+  This file is taken from https://github.com/karma-runner/karma/pull/2834. It allows us to use ES6 module imports in our test suite files.
+-->
+<!--
+This is the execution context.
+Loaded within the iframe.
+Reloaded before every execution run.
+-->
+<html>
+<head>
+  <title></title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+</head>
+<body>
+  <!-- The scripts need to be in the body DOM element, as some test running frameworks need the body
+       to have already been created so they can insert their magic into it. For example, if loaded
+       before body, Angular Scenario test framework fails to find the body and crashes and burns in
+       an epic manner. -->
+  <script src="context.js"></script>
+  <script type="text/javascript">
+    // Configure our Karma and set up bindings
+    %CLIENT_CONFIG%
+    window.__karma__.setupContext(window);
+
+    // All served files with the latest timestamps
+    %MAPPINGS%
+  </script>
+  <!-- Dynamically replaced with <script> tags -->
+  %SCRIPTS%
+  <!-- Since %SCRIPTS% might include modules, the `loaded()` call needs to be in a module too.
+   This ensures all the tests will have been declared before karma tries to run them. -->
+  <script type="module">
+    window.__karma__.loaded();
+  </script>
+  <script nomodule>
+    window.__karma__.loaded();
+  </script>
+</body>
+</html>

test/debug.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<!--
+  This file is taken from https://github.com/karma-runner/karma/pull/2834. It allows us to use ES6 module imports in our test suite files.
+-->
+<!--
+This file is almost the same as context.html - loads all source files,
+but its purpose is to be loaded in the main frame (not within an iframe),
+just for immediate execution, without reporting to Karma server.
+-->
+<html>
+<head>
+%X_UA_COMPATIBLE%
+  <title>Karma DEBUG RUNNER</title>
+  <link href="favicon.ico" rel="icon" type="image/x-icon" />
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+</head>
+<body>
+  <!-- The scripts need to be at the end of body, so that some test running frameworks
+   (Angular Scenario, for example) need the body to be loaded so that it can insert its magic
+   into it. If it is before body, then it fails to find the body and crashes and burns in an epic
+   manner. -->
+  <script src="context.js"></script>
+  <script src="debug.js"></script>
+  <script type="text/javascript">
+    // Configure our Karma
+    %CLIENT_CONFIG%
+
+    // All served files with the latest timestamps
+    %MAPPINGS%
+  </script>
+  <!-- Dynamically replaced with <script> tags -->
+  %SCRIPTS%
+  <!-- Since %SCRIPTS% might include modules, the `loaded()` call needs to be in a module too.
+   This ensures all the tests will have been declared before karma tries to run them. -->
+  <script type="module">
+    window.__karma__.loaded();
+  </script>
+  <script nomodule>
+    window.__karma__.loaded();
+  </script>
+</body>
+</html>

test/lib/util.ts

@@ -0,0 +1,9 @@
+import {bitmapToImageData} from "../../src/lib/util";
+
+const expect = chai.expect;
+
+describe("util.bitmapToImageData", function () {
+  it("is a function", function () {
+    expect(bitmapToImageData).to.be.a('function');
+  });
+});