Initial commit

kasmweb/tests/.eslintrc

@@ -0,0 +1,15 @@
+{
+    "env": {
+        "node": true,
+        "mocha": true
+    },
+    "globals": {
+        "chai": false,
+        "sinon": false
+    },
+    "rules": {
+        "prefer-arrow-callback": 0,
+        // Too many anonymous callbacks
+        "func-names": "off",
+    }
+}

kasmweb/tests/assertions.js

@@ -0,0 +1,101 @@
+// noVNC specific assertions
+chai.use(function (_chai, utils) {
+    _chai.Assertion.addMethod('displayed', function (target_data) {
+        const obj = this._obj;
+        const ctx = obj._target.getContext('2d');
+        const data_cl = ctx.getImageData(0, 0, obj._target.width, obj._target.height).data;
+        // NB(directxman12): PhantomJS 1.x doesn't implement Uint8ClampedArray, so work around that
+        const data = new Uint8Array(data_cl);
+        const len = data_cl.length;
+        new chai.Assertion(len).to.be.equal(target_data.length, "unexpected display size");
+        let same = true;
+        for (let i = 0; i < len; i++) {
+            if (data[i] != target_data[i]) {
+                same = false;
+                break;
+            }
+        }
+        if (!same) {
+            // eslint-disable-next-line no-console
+            console.log("expected data: %o, actual data: %o", target_data, data);
+        }
+        this.assert(same,
+                    "expected #{this} to have displayed the image #{exp}, but instead it displayed #{act}",
+                    "expected #{this} not to have displayed the image #{act}",
+                    target_data,
+                    data);
+    });
+
+    _chai.Assertion.addMethod('sent', function (target_data) {
+        const obj = this._obj;
+        obj.inspect = () => {
+            const res = { _websocket: obj._websocket, rQi: obj._rQi, _rQ: new Uint8Array(obj._rQ.buffer, 0, obj._rQlen),
+                          _sQ: new Uint8Array(obj._sQ.buffer, 0, obj._sQlen) };
+            res.prototype = obj;
+            return res;
+        };
+        const data = obj._websocket._get_sent_data();
+        let same = true;
+        if (data.length != target_data.length) {
+            same = false;
+        } else {
+            for (let i = 0; i < data.length; i++) {
+                if (data[i] != target_data[i]) {
+                    same = false;
+                    break;
+                }
+            }
+        }
+        if (!same) {
+            // eslint-disable-next-line no-console
+            console.log("expected data: %o, actual data: %o", target_data, data);
+        }
+        this.assert(same,
+                    "expected #{this} to have sent the data #{exp}, but it actually sent #{act}",
+                    "expected #{this} not to have sent the data #{act}",
+                    Array.prototype.slice.call(target_data),
+                    Array.prototype.slice.call(data));
+    });
+
+    _chai.Assertion.addProperty('array', function () {
+        utils.flag(this, 'array', true);
+    });
+
+    _chai.Assertion.overwriteMethod('equal', function (_super) {
+        return function assertArrayEqual(target) {
+            if (utils.flag(this, 'array')) {
+                const obj = this._obj;
+
+                let same = true;
+
+                if (utils.flag(this, 'deep')) {
+                    for (let i = 0; i < obj.length; i++) {
+                        if (!utils.eql(obj[i], target[i])) {
+                            same = false;
+                            break;
+                        }
+                    }
+
+                    this.assert(same,
+                                "expected #{this} to have elements deeply equal to #{exp}",
+                                "expected #{this} not to have elements deeply equal to #{exp}",
+                                Array.prototype.slice.call(target));
+                } else {
+                    for (let i = 0; i < obj.length; i++) {
+                        if (obj[i] != target[i]) {
+                            same = false;
+                            break;
+                        }
+                    }
+
+                    this.assert(same,
+                                "expected #{this} to have elements equal to #{exp}",
+                                "expected #{this} not to have elements equal to #{exp}",
+                                Array.prototype.slice.call(target));
+                }
+            } else {
+                _super.apply(this, arguments);
+            }
+        };
+    });
+});

kasmweb/tests/fake.websocket.js

@@ -0,0 +1,91 @@
+import Base64 from '../core/base64.js';
+
+// PhantomJS can't create Event objects directly, so we need to use this
+function make_event(name, props) {
+    const evt = document.createEvent('Event');
+    evt.initEvent(name, true, true);
+    if (props) {
+        for (let prop in props) {
+            evt[prop] = props[prop];
+        }
+    }
+    return evt;
+}
+
+export default class FakeWebSocket {
+    constructor(uri, protocols) {
+        this.url = uri;
+        this.binaryType = "arraybuffer";
+        this.extensions = "";
+
+        if (!protocols || typeof protocols === 'string') {
+            this.protocol = protocols;
+        } else {
+            this.protocol = protocols[0];
+        }
+
+        this._send_queue = new Uint8Array(20000);
+
+        this.readyState = FakeWebSocket.CONNECTING;
+        this.bufferedAmount = 0;
+
+        this.__is_fake = true;
+    }
+
+    close(code, reason) {
+        this.readyState = FakeWebSocket.CLOSED;
+        if (this.onclose) {
+            this.onclose(make_event("close", { 'code': code, 'reason': reason, 'wasClean': true }));
+        }
+    }
+
+    send(data) {
+        if (this.protocol == 'base64') {
+            data = Base64.decode(data);
+        } else {
+            data = new Uint8Array(data);
+        }
+        this._send_queue.set(data, this.bufferedAmount);
+        this.bufferedAmount += data.length;
+    }
+
+    _get_sent_data() {
+        const res = new Uint8Array(this._send_queue.buffer, 0, this.bufferedAmount);
+        this.bufferedAmount = 0;
+        return res;
+    }
+
+    _open() {
+        this.readyState = FakeWebSocket.OPEN;
+        if (this.onopen) {
+            this.onopen(make_event('open'));
+        }
+    }
+
+    _receive_data(data) {
+        this.onmessage(make_event("message", { 'data': data }));
+    }
+}
+
+FakeWebSocket.OPEN = WebSocket.OPEN;
+FakeWebSocket.CONNECTING = WebSocket.CONNECTING;
+FakeWebSocket.CLOSING = WebSocket.CLOSING;
+FakeWebSocket.CLOSED = WebSocket.CLOSED;
+
+FakeWebSocket.__is_fake = true;
+
+FakeWebSocket.replace = () => {
+    if (!WebSocket.__is_fake) {
+        const real_version = WebSocket;
+        // eslint-disable-next-line no-global-assign
+        WebSocket = FakeWebSocket;
+        FakeWebSocket.__real_version = real_version;
+    }
+};
+
+FakeWebSocket.restore = () => {
+    if (WebSocket.__is_fake) {
+        // eslint-disable-next-line no-global-assign
+        WebSocket = WebSocket.__real_version;
+    }
+};

kasmweb/tests/karma-test-main.js

@@ -0,0 +1,48 @@
+const TEST_REGEXP = /test\..*\.js/;
+const allTestFiles = [];
+const extraFiles = ['/base/tests/assertions.js'];
+
+Object.keys(window.__karma__.files).forEach(function (file) {
+    if (TEST_REGEXP.test(file)) {
+        // TODO: normalize?
+        allTestFiles.push(file);
+    }
+});
+
+// Stub out mocha's start function so we can run it once we're done loading
+mocha.origRun = mocha.run;
+mocha.run = function () {};
+
+let script;
+
+// Script to import all our tests
+script = document.createElement("script");
+script.type = "module";
+script.text = "";
+let allModules = allTestFiles.concat(extraFiles);
+allModules.forEach(function (file) {
+    script.text += "import \"" + file + "\";\n";
+});
+script.text += "\nmocha.origRun();\n";
+document.body.appendChild(script);
+
+// Fallback code for browsers that don't support modules (IE)
+script = document.createElement("script");
+script.type = "module";
+script.text = "window._noVNC_has_module_support = true;\n";
+document.body.appendChild(script);
+
+function fallback() {
+    if (!window._noVNC_has_module_support) {
+        /* eslint-disable no-console */
+        if (console) {
+            console.log("No module support detected. Loading fallback...");
+        }
+        /* eslint-enable no-console */
+        let loader = document.createElement("script");
+        loader.src = "base/vendor/browser-es-module-loader/dist/browser-es-module-loader.js";
+        document.body.appendChild(loader);
+    }
+}
+
+setTimeout(fallback, 500);

kasmweb/tests/playback-ui.js

@@ -0,0 +1,210 @@
+/* global VNC_frame_data, VNC_frame_encoding */
+
+import * as WebUtil from '../app/webutil.js';
+import RecordingPlayer from './playback.js';
+import Base64 from '../core/base64.js';
+
+let frames = null;
+
+function message(str) {
+    const cell = document.getElementById('messages');
+    cell.textContent += str + "\n";
+    cell.scrollTop = cell.scrollHeight;
+}
+
+function loadFile() {
+    const fname = WebUtil.getQueryVar('data', null);
+
+    if (!fname) {
+        return Promise.reject("Must specify data=FOO in query string.");
+    }
+
+    message("Loading " + fname + "...");
+
+    return new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        script.onload = resolve;
+        script.onerror = reject;
+        document.body.appendChild(script);
+        script.src = "../recordings/" + fname;
+    });
+}
+
+function enableUI() {
+    const iterations = WebUtil.getQueryVar('iterations', 3);
+    document.getElementById('iterations').value = iterations;
+
+    const mode = WebUtil.getQueryVar('mode', 3);
+    if (mode === 'realtime') {
+        document.getElementById('mode2').checked = true;
+    } else {
+        document.getElementById('mode1').checked = true;
+    }
+
+    message("Loaded " + VNC_frame_data.length + " frames");
+
+    const startButton = document.getElementById('startButton');
+    startButton.disabled = false;
+    startButton.addEventListener('click', start);
+
+    message("Converting...");
+
+    frames = VNC_frame_data;
+
+    let encoding;
+    // Only present in older recordings
+    if (window.VNC_frame_encoding) {
+        encoding = VNC_frame_encoding;
+    } else {
+        let frame = frames[0];
+        let start = frame.indexOf('{', 1) + 1;
+        if (frame.slice(start, start+4) === 'UkZC') {
+            encoding = 'base64';
+        } else {
+            encoding = 'binary';
+        }
+    }
+
+    for (let i = 0;i < frames.length;i++) {
+        let frame = frames[i];
+
+        if (frame === "EOF") {
+            frames.splice(i);
+            break;
+        }
+
+        let dataIdx = frame.indexOf('{', 1) + 1;
+
+        let time = parseInt(frame.slice(1, dataIdx - 1));
+
+        let u8;
+        if (encoding === 'base64') {
+            u8 = Base64.decode(frame.slice(dataIdx));
+        } else {
+            u8 = new Uint8Array(frame.length - dataIdx);
+            for (let j = 0; j < frame.length - dataIdx; j++) {
+                u8[j] = frame.charCodeAt(dataIdx + j);
+            }
+        }
+
+        frames[i] = { fromClient: frame[0] === '}',
+                      timestamp: time,
+                      data: u8 };
+    }
+
+    message("Ready");
+}
+
+class IterationPlayer {
+    constructor(iterations, frames) {
+        this._iterations = iterations;
+
+        this._iteration = undefined;
+        this._player = undefined;
+
+        this._start_time = undefined;
+
+        this._frames = frames;
+
+        this._state = 'running';
+
+        this.onfinish = () => {};
+        this.oniterationfinish = () => {};
+        this.rfbdisconnected = () => {};
+    }
+
+    start(realtime) {
+        this._iteration = 0;
+        this._start_time = (new Date()).getTime();
+
+        this._realtime = realtime;
+
+        this._nextIteration();
+    }
+
+    _nextIteration() {
+        const player = new RecordingPlayer(this._frames, this._disconnected.bind(this));
+        player.onfinish = this._iterationFinish.bind(this);
+
+        if (this._state !== 'running') { return; }
+
+        this._iteration++;
+        if (this._iteration > this._iterations) {
+            this._finish();
+            return;
+        }
+
+        player.run(this._realtime, false);
+    }
+
+    _finish() {
+        const endTime = (new Date()).getTime();
+        const totalDuration = endTime - this._start_time;
+
+        const evt = new CustomEvent('finish',
+                                    { detail:
+                                      { duration: totalDuration,
+                                        iterations: this._iterations } } );
+        this.onfinish(evt);
+    }
+
+    _iterationFinish(duration) {
+        const evt = new CustomEvent('iterationfinish',
+                                    { detail:
+                                      { duration: duration,
+                                        number: this._iteration } } );
+        this.oniterationfinish(evt);
+
+        this._nextIteration();
+    }
+
+    _disconnected(clean, frame) {
+        if (!clean) {
+            this._state = 'failed';
+        }
+
+        const evt = new CustomEvent('rfbdisconnected',
+                                    { detail:
+                                      { clean: clean,
+                                        frame: frame,
+                                        iteration: this._iteration } } );
+        this.onrfbdisconnected(evt);
+    }
+}
+
+function start() {
+    document.getElementById('startButton').value = "Running";
+    document.getElementById('startButton').disabled = true;
+
+    const iterations = document.getElementById('iterations').value;
+
+    let realtime;
+
+    if (document.getElementById('mode1').checked) {
+        message(`Starting performance playback (fullspeed) [${iterations} iteration(s)]`);
+        realtime = false;
+    } else {
+        message(`Starting realtime playback [${iterations} iteration(s)]`);
+        realtime = true;
+    }
+
+    const player = new IterationPlayer(iterations, frames);
+    player.oniterationfinish = (evt) => {
+        message(`Iteration ${evt.detail.number} took ${evt.detail.duration}ms`);
+    };
+    player.onrfbdisconnected = (evt) => {
+        if (!evt.detail.clean) {
+            message(`noVNC sent disconnected during iteration ${evt.detail.iteration} frame ${evt.detail.frame}`);
+        }
+    };
+    player.onfinish = (evt) => {
+        const iterTime = parseInt(evt.detail.duration / evt.detail.iterations, 10);
+        message(`${evt.detail.iterations} iterations took ${evt.detail.duration}ms (average ${iterTime}ms / iteration)`);
+
+        document.getElementById('startButton').disabled = false;
+        document.getElementById('startButton').value = "Start";
+    };
+    player.start(realtime);
+}
+
+loadFile().then(enableUI).catch(e => message("Error loading recording: " + e));

kasmweb/tests/playback.js

@@ -0,0 +1,172 @@
+/*
+ * noVNC: HTML5 VNC client
+ * Copyright (C) 2018 The noVNC Authors
+ * Licensed under MPL 2.0 (see LICENSE.txt)
+ */
+
+import RFB from '../core/rfb.js';
+import * as Log from '../core/util/logging.js';
+
+// Immediate polyfill
+if (window.setImmediate === undefined) {
+    let _immediateIdCounter = 1;
+    const _immediateFuncs = {};
+
+    window.setImmediate = (func) => {
+        const index = _immediateIdCounter++;
+        _immediateFuncs[index] = func;
+        window.postMessage("noVNC immediate trigger:" + index, "*");
+        return index;
+    };
+
+    window.clearImmediate = (id) => {
+        _immediateFuncs[id];
+    };
+
+    window.addEventListener("message", (event) => {
+        if ((typeof event.data !== "string") ||
+            (event.data.indexOf("noVNC immediate trigger:") !== 0)) {
+            return;
+        }
+
+        const index = event.data.slice("noVNC immediate trigger:".length);
+
+        const callback = _immediateFuncs[index];
+        if (callback === undefined) {
+            return;
+        }
+
+        delete _immediateFuncs[index];
+
+        callback();
+    });
+}
+
+export default class RecordingPlayer {
+    constructor(frames, disconnected) {
+        this._frames = frames;
+
+        this._disconnected = disconnected;
+
+        this._rfb = undefined;
+        this._frame_length = this._frames.length;
+
+        this._frame_index = 0;
+        this._start_time = undefined;
+        this._realtime = true;
+        this._trafficManagement = true;
+
+        this._running = false;
+
+        this.onfinish = () => {};
+    }
+
+    run(realtime, trafficManagement) {
+        // initialize a new RFB
+        this._rfb = new RFB(document.getElementById('VNC_screen'), 'wss://test');
+        this._rfb.viewOnly = true;
+        this._rfb.addEventListener("disconnect",
+                                   this._handleDisconnect.bind(this));
+        this._rfb.addEventListener("credentialsrequired",
+                                   this._handleCredentials.bind(this));
+        this._enablePlaybackMode();
+
+        // reset the frame index and timer
+        this._frame_index = 0;
+        this._start_time = (new Date()).getTime();
+
+        this._realtime = realtime;
+        this._trafficManagement = (trafficManagement === undefined) ? !realtime : trafficManagement;
+
+        this._running = true;
+    }
+
+    // _enablePlaybackMode mocks out things not required for running playback
+    _enablePlaybackMode() {
+        const self = this;
+        this._rfb._sock.send = () => {};
+        this._rfb._sock.close = () => {};
+        this._rfb._sock.flush = () => {};
+        this._rfb._sock.open = function () {
+            this.init();
+            this._eventHandlers.open();
+            self._queueNextPacket();
+        };
+    }
+
+    _queueNextPacket() {
+        if (!this._running) { return; }
+
+        let frame = this._frames[this._frame_index];
+
+        // skip send frames
+        while (this._frame_index < this._frame_length && frame.fromClient) {
+            this._frame_index++;
+            frame = this._frames[this._frame_index];
+        }
+
+        if (this._frame_index >= this._frame_length) {
+            Log.Debug('Finished, no more frames');
+            this._finish();
+            return;
+        }
+
+        if (this._realtime) {
+            const toffset = (new Date()).getTime() - this._start_time;
+            let delay = frame.timestamp - toffset;
+            if (delay < 1) delay = 1;
+
+            setTimeout(this._doPacket.bind(this), delay);
+        } else {
+            setImmediate(this._doPacket.bind(this));
+        }
+    }
+
+    _doPacket() {
+        // Avoid having excessive queue buildup in non-realtime mode
+        if (this._trafficManagement && this._rfb._flushing) {
+            const orig = this._rfb._display.onflush;
+            this._rfb._display.onflush = () => {
+                this._rfb._display.onflush = orig;
+                this._rfb._onFlush();
+                this._doPacket();
+            };
+            return;
+        }
+
+        const frame = this._frames[this._frame_index];
+
+        this._rfb._sock._recv_message({'data': frame.data});
+        this._frame_index++;
+
+        this._queueNextPacket();
+    }
+
+    _finish() {
+        if (this._rfb._display.pending()) {
+            this._rfb._display.onflush = () => {
+                if (this._rfb._flushing) {
+                    this._rfb._onFlush();
+                }
+                this._finish();
+            };
+            this._rfb._display.flush();
+        } else {
+            this._running = false;
+            this._rfb._sock._eventHandlers.close({code: 1000, reason: ""});
+            delete this._rfb;
+            this.onfinish((new Date()).getTime() - this._start_time);
+        }
+    }
+
+    _handleDisconnect(evt) {
+        this._running = false;
+        this._disconnected(evt.detail.clean, this._frame_index);
+    }
+
+    _handleCredentials(evt) {
+        this._rfb.sendCredentials({"username": "Foo",
+                                   "password": "Bar",
+                                   "target": "Baz"});
+    }
+}

kasmweb/tests/test.base64.js

@@ -0,0 +1,33 @@
+const expect = chai.expect;
+
+import Base64 from '../core/base64.js';
+
+describe('Base64 Tools', function () {
+    "use strict";
+
+    const BIN_ARR = new Array(256);
+    for (let i = 0; i < 256; i++) {
+        BIN_ARR[i] = i;
+    }
+
+    const B64_STR = "AAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKissLS4vMDEyMzQ1Njc4OTo7PD0+P0BBQkNERUZHSElKS0xNTk9QUVJTVFVWV1hZWltcXV5fYGFiY2RlZmdoaWprbG1ub3BxcnN0dXZ3eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbnJ2en6ChoqOkpaanqKmqq6ytrq+wsbKztLW2t7i5uru8vb6/wMHCw8TFxsfIycrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6uvs7e7v8PHy8/T19vf4+fr7/P3+/w==";
+
+
+    describe('encode', function () {
+        it('should encode a binary string into Base64', function () {
+            const encoded = Base64.encode(BIN_ARR);
+            expect(encoded).to.equal(B64_STR);
+        });
+    });
+
+    describe('decode', function () {
+        it('should decode a Base64 string into a normal string', function () {
+            const decoded = Base64.decode(B64_STR);
+            expect(decoded).to.deep.equal(BIN_ARR);
+        });
+
+        it('should throw an error if we have extra characters at the end of the string', function () {
+            expect(() => Base64.decode(B64_STR+'abcdef')).to.throw(Error);
+        });
+    });
+});

kasmweb/tests/test.display.js

@@ -0,0 +1,486 @@
+const expect = chai.expect;
+
+import Base64 from '../core/base64.js';
+import Display from '../core/display.js';
+
+describe('Display/Canvas Helper', function () {
+    const checked_data = new Uint8Array([
+        0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255,
+        0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255,
+        0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255,
+        0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255
+    ]);
+
+    const basic_data = new Uint8Array([0xff, 0x00, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0xff, 0xff, 0xff, 255]);
+
+    function make_image_canvas(input_data) {
+        const canvas = document.createElement('canvas');
+        canvas.width = 4;
+        canvas.height = 4;
+        const ctx = canvas.getContext('2d');
+        const data = ctx.createImageData(4, 4);
+        for (let i = 0; i < checked_data.length; i++) { data.data[i] = input_data[i]; }
+        ctx.putImageData(data, 0, 0);
+        return canvas;
+    }
+
+    function make_image_png(input_data) {
+        const canvas = make_image_canvas(input_data);
+        const url = canvas.toDataURL();
+        const data = url.split(",")[1];
+        return Base64.decode(data);
+    }
+
+    describe('viewport handling', function () {
+        let display;
+        beforeEach(function () {
+            display = new Display(document.createElement('canvas'));
+            display.clipViewport = true;
+            display.resize(5, 5);
+            display.viewportChangeSize(3, 3);
+            display.viewportChangePos(1, 1);
+        });
+
+        it('should take viewport location into consideration when drawing images', function () {
+            display.resize(4, 4);
+            display.viewportChangeSize(2, 2);
+            display.drawImage(make_image_canvas(basic_data), 1, 1);
+            display.flip();
+
+            const expected = new Uint8Array(16);
+            for (let i = 0; i < 8; i++) { expected[i] = basic_data[i]; }
+            for (let i = 8; i < 16; i++) { expected[i] = 0; }
+            expect(display).to.have.displayed(expected);
+        });
+
+        it('should resize the target canvas when resizing the viewport', function () {
+            display.viewportChangeSize(2, 2);
+            expect(display._target.width).to.equal(2);
+            expect(display._target.height).to.equal(2);
+        });
+
+        it('should move the viewport if necessary', function () {
+            display.viewportChangeSize(5, 5);
+            expect(display.absX(0)).to.equal(0);
+            expect(display.absY(0)).to.equal(0);
+            expect(display._target.width).to.equal(5);
+            expect(display._target.height).to.equal(5);
+        });
+
+        it('should limit the viewport to the framebuffer size', function () {
+            display.viewportChangeSize(6, 6);
+            expect(display._target.width).to.equal(5);
+            expect(display._target.height).to.equal(5);
+        });
+
+        it('should redraw when moving the viewport', function () {
+            display.flip = sinon.spy();
+            display.viewportChangePos(-1, 1);
+            expect(display.flip).to.have.been.calledOnce;
+        });
+
+        it('should redraw when resizing the viewport', function () {
+            display.flip = sinon.spy();
+            display.viewportChangeSize(2, 2);
+            expect(display.flip).to.have.been.calledOnce;
+        });
+
+        it('should show the entire framebuffer when disabling the viewport', function () {
+            display.clipViewport = false;
+            expect(display.absX(0)).to.equal(0);
+            expect(display.absY(0)).to.equal(0);
+            expect(display._target.width).to.equal(5);
+            expect(display._target.height).to.equal(5);
+        });
+
+        it('should ignore viewport changes when the viewport is disabled', function () {
+            display.clipViewport = false;
+            display.viewportChangeSize(2, 2);
+            display.viewportChangePos(1, 1);
+            expect(display.absX(0)).to.equal(0);
+            expect(display.absY(0)).to.equal(0);
+            expect(display._target.width).to.equal(5);
+            expect(display._target.height).to.equal(5);
+        });
+
+        it('should show the entire framebuffer just after enabling the viewport', function () {
+            display.clipViewport = false;
+            display.clipViewport = true;
+            expect(display.absX(0)).to.equal(0);
+            expect(display.absY(0)).to.equal(0);
+            expect(display._target.width).to.equal(5);
+            expect(display._target.height).to.equal(5);
+        });
+    });
+
+    describe('resizing', function () {
+        let display;
+        beforeEach(function () {
+            display = new Display(document.createElement('canvas'));
+            display.clipViewport = false;
+            display.resize(4, 4);
+        });
+
+        it('should change the size of the logical canvas', function () {
+            display.resize(5, 7);
+            expect(display._fb_width).to.equal(5);
+            expect(display._fb_height).to.equal(7);
+        });
+
+        it('should keep the framebuffer data', function () {
+            display.fillRect(0, 0, 4, 4, [0, 0, 0xff]);
+            display.resize(2, 2);
+            display.flip();
+            const expected = [];
+            for (let i = 0; i < 4 * 2*2; i += 4) {
+                expected[i] = 0xff;
+                expected[i+1] = expected[i+2] = 0;
+                expected[i+3] = 0xff;
+            }
+            expect(display).to.have.displayed(new Uint8Array(expected));
+        });
+
+        describe('viewport', function () {
+            beforeEach(function () {
+                display.clipViewport = true;
+                display.viewportChangeSize(3, 3);
+                display.viewportChangePos(1, 1);
+            });
+
+            it('should keep the viewport position and size if possible', function () {
+                display.resize(6, 6);
+                expect(display.absX(0)).to.equal(1);
+                expect(display.absY(0)).to.equal(1);
+                expect(display._target.width).to.equal(3);
+                expect(display._target.height).to.equal(3);
+            });
+
+            it('should move the viewport if necessary', function () {
+                display.resize(3, 3);
+                expect(display.absX(0)).to.equal(0);
+                expect(display.absY(0)).to.equal(0);
+                expect(display._target.width).to.equal(3);
+                expect(display._target.height).to.equal(3);
+            });
+
+            it('should shrink the viewport if necessary', function () {
+                display.resize(2, 2);
+                expect(display.absX(0)).to.equal(0);
+                expect(display.absY(0)).to.equal(0);
+                expect(display._target.width).to.equal(2);
+                expect(display._target.height).to.equal(2);
+            });
+        });
+    });
+
+    describe('rescaling', function () {
+        let display;
+        let canvas;
+
+        beforeEach(function () {
+            canvas = document.createElement('canvas');
+            display = new Display(canvas);
+            display.clipViewport = true;
+            display.resize(4, 4);
+            display.viewportChangeSize(3, 3);
+            display.viewportChangePos(1, 1);
+            document.body.appendChild(canvas);
+        });
+
+        afterEach(function () {
+            document.body.removeChild(canvas);
+        });
+
+        it('should not change the bitmap size of the canvas', function () {
+            display.scale = 2.0;
+            expect(canvas.width).to.equal(3);
+            expect(canvas.height).to.equal(3);
+        });
+
+        it('should change the effective rendered size of the canvas', function () {
+            display.scale = 2.0;
+            expect(canvas.clientWidth).to.equal(6);
+            expect(canvas.clientHeight).to.equal(6);
+        });
+
+        it('should not change when resizing', function () {
+            display.scale = 2.0;
+            display.resize(5, 5);
+            expect(display.scale).to.equal(2.0);
+            expect(canvas.width).to.equal(3);
+            expect(canvas.height).to.equal(3);
+            expect(canvas.clientWidth).to.equal(6);
+            expect(canvas.clientHeight).to.equal(6);
+        });
+    });
+
+    describe('autoscaling', function () {
+        let display;
+        let canvas;
+
+        beforeEach(function () {
+            canvas = document.createElement('canvas');
+            display = new Display(canvas);
+            display.clipViewport = true;
+            display.resize(4, 3);
+            document.body.appendChild(canvas);
+        });
+
+        afterEach(function () {
+            document.body.removeChild(canvas);
+        });
+
+        it('should preserve aspect ratio while autoscaling', function () {
+            display.autoscale(16, 9);
+            expect(canvas.clientWidth / canvas.clientHeight).to.equal(4 / 3);
+        });
+
+        it('should use width to determine scale when the current aspect ratio is wider than the target', function () {
+            display.autoscale(9, 16);
+            expect(display.absX(9)).to.equal(4);
+            expect(display.absY(18)).to.equal(8);
+            expect(canvas.clientWidth).to.equal(9);
+            expect(canvas.clientHeight).to.equal(7); // round 9 / (4 / 3)
+        });
+
+        it('should use height to determine scale when the current aspect ratio is taller than the target', function () {
+            display.autoscale(16, 9);
+            expect(display.absX(9)).to.equal(3);
+            expect(display.absY(18)).to.equal(6);
+            expect(canvas.clientWidth).to.equal(12);  // 16 * (4 / 3)
+            expect(canvas.clientHeight).to.equal(9);
+
+        });
+
+        it('should not change the bitmap size of the canvas', function () {
+            display.autoscale(16, 9);
+            expect(canvas.width).to.equal(4);
+            expect(canvas.height).to.equal(3);
+        });
+    });
+
+    describe('drawing', function () {
+
+        // TODO(directxman12): improve the tests for each of the drawing functions to cover more than just the
+        //                     basic cases
+        let display;
+        beforeEach(function () {
+            display = new Display(document.createElement('canvas'));
+            display.resize(4, 4);
+        });
+
+        it('should clear the screen on #clear without a logo set', function () {
+            display.fillRect(0, 0, 4, 4, [0x00, 0x00, 0xff]);
+            display._logo = null;
+            display.clear();
+            display.resize(4, 4);
+            const empty = [];
+            for (let i = 0; i < 4 * display._fb_width * display._fb_height; i++) { empty[i] = 0; }
+            expect(display).to.have.displayed(new Uint8Array(empty));
+        });
+
+        it('should draw the logo on #clear with a logo set', function (done) {
+            display._logo = { width: 4, height: 4, type: "image/png", data: make_image_png(checked_data) };
+            display.clear();
+            display.onflush = () => {
+                expect(display).to.have.displayed(checked_data);
+                expect(display._fb_width).to.equal(4);
+                expect(display._fb_height).to.equal(4);
+                done();
+            };
+            display.flush();
+        });
+
+        it('should not draw directly on the target canvas', function () {
+            display.fillRect(0, 0, 4, 4, [0, 0, 0xff]);
+            display.flip();
+            display.fillRect(0, 0, 4, 4, [0, 0xff, 0]);
+            const expected = [];
+            for (let i = 0; i < 4 * display._fb_width * display._fb_height; i += 4) {
+                expected[i] = 0xff;
+                expected[i+1] = expected[i+2] = 0;
+                expected[i+3] = 0xff;
+            }
+            expect(display).to.have.displayed(new Uint8Array(expected));
+        });
+
+        it('should support filling a rectangle with particular color via #fillRect', function () {
+            display.fillRect(0, 0, 4, 4, [0, 0xff, 0]);
+            display.fillRect(0, 0, 2, 2, [0xff, 0, 0]);
+            display.fillRect(2, 2, 2, 2, [0xff, 0, 0]);
+            display.flip();
+            expect(display).to.have.displayed(checked_data);
+        });
+
+        it('should support copying an portion of the canvas via #copyImage', function () {
+            display.fillRect(0, 0, 4, 4, [0, 0xff, 0]);
+            display.fillRect(0, 0, 2, 2, [0xff, 0, 0x00]);
+            display.copyImage(0, 0, 2, 2, 2, 2);
+            display.flip();
+            expect(display).to.have.displayed(checked_data);
+        });
+
+        it('should support drawing images via #imageRect', function (done) {
+            display.imageRect(0, 0, "image/png", make_image_png(checked_data));
+            display.flip();
+            display.onflush = () => {
+                expect(display).to.have.displayed(checked_data);
+                done();
+            };
+            display.flush();
+        });
+
+        it('should support drawing tile data with a background color and sub tiles', function () {
+            display.startTile(0, 0, 4, 4, [0, 0xff, 0]);
+            display.subTile(0, 0, 2, 2, [0xff, 0, 0]);
+            display.subTile(2, 2, 2, 2, [0xff, 0, 0]);
+            display.finishTile();
+            display.flip();
+            expect(display).to.have.displayed(checked_data);
+        });
+
+        // We have a special cache for 16x16 tiles that we need to test
+        it('should support drawing a 16x16 tile', function () {
+            const large_checked_data = new Uint8Array(16*16*4);
+            display.resize(16, 16);
+
+            for (let y = 0;y < 16;y++) {
+                for (let x = 0;x < 16;x++) {
+                    let pixel;
+                    if ((x < 4) && (y < 4)) {
+                        // NB: of course IE11 doesn't support #slice on ArrayBufferViews...
+                        pixel = Array.prototype.slice.call(checked_data, (y*4+x)*4, (y*4+x+1)*4);
+                    } else {
+                        pixel = [0, 0xff, 0, 255];
+                    }
+                    large_checked_data.set(pixel, (y*16+x)*4);
+                }
+            }
+
+            display.startTile(0, 0, 16, 16, [0, 0xff, 0]);
+            display.subTile(0, 0, 2, 2, [0xff, 0, 0]);
+            display.subTile(2, 2, 2, 2, [0xff, 0, 0]);
+            display.finishTile();
+            display.flip();
+            expect(display).to.have.displayed(large_checked_data);
+        });
+
+        it('should support drawing BGRX blit images with true color via #blitImage', function () {
+            const data = [];
+            for (let i = 0; i < 16; i++) {
+                data[i * 4] = checked_data[i * 4 + 2];
+                data[i * 4 + 1] = checked_data[i * 4 + 1];
+                data[i * 4 + 2] = checked_data[i * 4];
+                data[i * 4 + 3] = checked_data[i * 4 + 3];
+            }
+            display.blitImage(0, 0, 4, 4, data, 0);
+            display.flip();
+            expect(display).to.have.displayed(checked_data);
+        });
+
+        it('should support drawing RGB blit images with true color via #blitRgbImage', function () {
+            const data = [];
+            for (let i = 0; i < 16; i++) {
+                data[i * 3] = checked_data[i * 4];
+                data[i * 3 + 1] = checked_data[i * 4 + 1];
+                data[i * 3 + 2] = checked_data[i * 4 + 2];
+            }
+            display.blitRgbImage(0, 0, 4, 4, data, 0);
+            display.flip();
+            expect(display).to.have.displayed(checked_data);
+        });
+
+        it('should support drawing an image object via #drawImage', function () {
+            const img = make_image_canvas(checked_data);
+            display.drawImage(img, 0, 0);
+            display.flip();
+            expect(display).to.have.displayed(checked_data);
+        });
+    });
+
+    describe('the render queue processor', function () {
+        let display;
+        beforeEach(function () {
+            display = new Display(document.createElement('canvas'));
+            display.resize(4, 4);
+            sinon.spy(display, '_scan_renderQ');
+        });
+
+        afterEach(function () {
+            window.requestAnimationFrame = this.old_requestAnimationFrame;
+        });
+
+        it('should try to process an item when it is pushed on, if nothing else is on the queue', function () {
+            display._renderQ_push({ type: 'noop' });  // does nothing
+            expect(display._scan_renderQ).to.have.been.calledOnce;
+        });
+
+        it('should not try to process an item when it is pushed on if we are waiting for other items', function () {
+            display._renderQ.length = 2;
+            display._renderQ_push({ type: 'noop' });
+            expect(display._scan_renderQ).to.not.have.been.called;
+        });
+
+        it('should wait until an image is loaded to attempt to draw it and the rest of the queue', function () {
+            const img = { complete: false, addEventListener: sinon.spy() };
+            display._renderQ = [{ type: 'img', x: 3, y: 4, img: img },
+                                { type: 'fill', x: 1, y: 2, width: 3, height: 4, color: 5 }];
+            display.drawImage = sinon.spy();
+            display.fillRect = sinon.spy();
+
+            display._scan_renderQ();
+            expect(display.drawImage).to.not.have.been.called;
+            expect(display.fillRect).to.not.have.been.called;
+            expect(img.addEventListener).to.have.been.calledOnce;
+
+            display._renderQ[0].img.complete = true;
+            display._scan_renderQ();
+            expect(display.drawImage).to.have.been.calledOnce;
+            expect(display.fillRect).to.have.been.calledOnce;
+            expect(img.addEventListener).to.have.been.calledOnce;
+        });
+
+        it('should call callback when queue is flushed', function () {
+            display.onflush = sinon.spy();
+            display.fillRect(0, 0, 4, 4, [0, 0xff, 0]);
+            expect(display.onflush).to.not.have.been.called;
+            display.flush();
+            expect(display.onflush).to.have.been.calledOnce;
+        });
+
+        it('should draw a blit image on type "blit"', function () {
+            display.blitImage = sinon.spy();
+            display._renderQ_push({ type: 'blit', x: 3, y: 4, width: 5, height: 6, data: [7, 8, 9] });
+            expect(display.blitImage).to.have.been.calledOnce;
+            expect(display.blitImage).to.have.been.calledWith(3, 4, 5, 6, [7, 8, 9], 0);
+        });
+
+        it('should draw a blit RGB image on type "blitRgb"', function () {
+            display.blitRgbImage = sinon.spy();
+            display._renderQ_push({ type: 'blitRgb', x: 3, y: 4, width: 5, height: 6, data: [7, 8, 9] });
+            expect(display.blitRgbImage).to.have.been.calledOnce;
+            expect(display.blitRgbImage).to.have.been.calledWith(3, 4, 5, 6, [7, 8, 9], 0);
+        });
+
+        it('should copy a region on type "copy"', function () {
+            display.copyImage = sinon.spy();
+            display._renderQ_push({ type: 'copy', x: 3, y: 4, width: 5, height: 6, old_x: 7, old_y: 8 });
+            expect(display.copyImage).to.have.been.calledOnce;
+            expect(display.copyImage).to.have.been.calledWith(7, 8, 3, 4, 5, 6);
+        });
+
+        it('should fill a rect with a given color on type "fill"', function () {
+            display.fillRect = sinon.spy();
+            display._renderQ_push({ type: 'fill', x: 3, y: 4, width: 5, height: 6, color: [7, 8, 9]});
+            expect(display.fillRect).to.have.been.calledOnce;
+            expect(display.fillRect).to.have.been.calledWith(3, 4, 5, 6, [7, 8, 9]);
+        });
+
+        it('should draw an image from an image object on type "img" (if complete)', function () {
+            display.drawImage = sinon.spy();
+            display._renderQ_push({ type: 'img', x: 3, y: 4, img: { complete: true } });
+            expect(display.drawImage).to.have.been.calledOnce;
+            expect(display.drawImage).to.have.been.calledWith({ complete: true }, 3, 4);
+        });
+    });
+});

kasmweb/tests/test.helper.js

@@ -0,0 +1,223 @@
+const expect = chai.expect;
+
+import keysyms from '../core/input/keysymdef.js';
+import * as KeyboardUtil from "../core/input/util.js";
+import * as browser from '../core/util/browser.js';
+
+describe('Helpers', function () {
+    "use strict";
+
+    describe('keysyms.lookup', function () {
+        it('should map ASCII characters to keysyms', function () {
+            expect(keysyms.lookup('a'.charCodeAt())).to.be.equal(0x61);
+            expect(keysyms.lookup('A'.charCodeAt())).to.be.equal(0x41);
+        });
+        it('should map Latin-1 characters to keysyms', function () {
+            expect(keysyms.lookup('ø'.charCodeAt())).to.be.equal(0xf8);
+
+            expect(keysyms.lookup('é'.charCodeAt())).to.be.equal(0xe9);
+        });
+        it('should map characters that are in Windows-1252 but not in Latin-1 to keysyms', function () {
+            expect(keysyms.lookup('Š'.charCodeAt())).to.be.equal(0x01a9);
+        });
+        it('should map characters which aren\'t in Latin1 *or* Windows-1252 to keysyms', function () {
+            expect(keysyms.lookup('ũ'.charCodeAt())).to.be.equal(0x03fd);
+        });
+        it('should map unknown codepoints to the Unicode range', function () {
+            expect(keysyms.lookup('\n'.charCodeAt())).to.be.equal(0x100000a);
+            expect(keysyms.lookup('\u262D'.charCodeAt())).to.be.equal(0x100262d);
+        });
+        // This requires very recent versions of most browsers... skipping for now
+        it.skip('should map UCS-4 codepoints to the Unicode range', function () {
+            //expect(keysyms.lookup('\u{1F686}'.codePointAt())).to.be.equal(0x101f686);
+        });
+    });
+
+    describe('getKeycode', function () {
+        it('should pass through proper code', function () {
+            expect(KeyboardUtil.getKeycode({code: 'Semicolon'})).to.be.equal('Semicolon');
+        });
+        it('should map legacy values', function () {
+            expect(KeyboardUtil.getKeycode({code: ''})).to.be.equal('Unidentified');
+            expect(KeyboardUtil.getKeycode({code: 'OSLeft'})).to.be.equal('MetaLeft');
+        });
+        it('should map keyCode to code when possible', function () {
+            expect(KeyboardUtil.getKeycode({keyCode: 0x14})).to.be.equal('CapsLock');
+            expect(KeyboardUtil.getKeycode({keyCode: 0x5b})).to.be.equal('MetaLeft');
+            expect(KeyboardUtil.getKeycode({keyCode: 0x35})).to.be.equal('Digit5');
+            expect(KeyboardUtil.getKeycode({keyCode: 0x65})).to.be.equal('Numpad5');
+        });
+        it('should map keyCode left/right side', function () {
+            expect(KeyboardUtil.getKeycode({keyCode: 0x10, location: 1})).to.be.equal('ShiftLeft');
+            expect(KeyboardUtil.getKeycode({keyCode: 0x10, location: 2})).to.be.equal('ShiftRight');
+            expect(KeyboardUtil.getKeycode({keyCode: 0x11, location: 1})).to.be.equal('ControlLeft');
+            expect(KeyboardUtil.getKeycode({keyCode: 0x11, location: 2})).to.be.equal('ControlRight');
+        });
+        it('should map keyCode on numpad', function () {
+            expect(KeyboardUtil.getKeycode({keyCode: 0x0d, location: 0})).to.be.equal('Enter');
+            expect(KeyboardUtil.getKeycode({keyCode: 0x0d, location: 3})).to.be.equal('NumpadEnter');
+            expect(KeyboardUtil.getKeycode({keyCode: 0x23, location: 0})).to.be.equal('End');
+            expect(KeyboardUtil.getKeycode({keyCode: 0x23, location: 3})).to.be.equal('Numpad1');
+        });
+        it('should return Unidentified when it cannot map the keyCode', function () {
+            expect(KeyboardUtil.getKeycode({keycode: 0x42})).to.be.equal('Unidentified');
+        });
+
+        describe('Fix Meta on macOS', function () {
+            let origNavigator;
+            beforeEach(function () {
+                // window.navigator is a protected read-only property in many
+                // environments, so we need to redefine it whilst running these
+                // tests.
+                origNavigator = Object.getOwnPropertyDescriptor(window, "navigator");
+                if (origNavigator === undefined) {
+                    // Object.getOwnPropertyDescriptor() doesn't work
+                    // properly in any version of IE
+                    this.skip();
+                }
+
+                Object.defineProperty(window, "navigator", {value: {}});
+                if (window.navigator.platform !== undefined) {
+                    // Object.defineProperty() doesn't work properly in old
+                    // versions of Chrome
+                    this.skip();
+                }
+
+                window.navigator.platform = "Mac x86_64";
+            });
+            afterEach(function () {
+                Object.defineProperty(window, "navigator", origNavigator);
+            });
+
+            it('should respect ContextMenu on modern browser', function () {
+                expect(KeyboardUtil.getKeycode({code: 'ContextMenu', keyCode: 0x5d})).to.be.equal('ContextMenu');
+            });
+            it('should translate legacy ContextMenu to MetaRight', function () {
+                expect(KeyboardUtil.getKeycode({keyCode: 0x5d})).to.be.equal('MetaRight');
+            });
+        });
+    });
+
+    describe('getKey', function () {
+        it('should prefer key', function () {
+            if (browser.isIE() || browser.isEdge()) this.skip();
+            expect(KeyboardUtil.getKey({key: 'a', charCode: 'Š'.charCodeAt(), keyCode: 0x42, which: 0x43})).to.be.equal('a');
+        });
+        it('should map legacy values', function () {
+            expect(KeyboardUtil.getKey({key: 'Spacebar'})).to.be.equal(' ');
+            expect(KeyboardUtil.getKey({key: 'Left'})).to.be.equal('ArrowLeft');
+            expect(KeyboardUtil.getKey({key: 'OS'})).to.be.equal('Meta');
+            expect(KeyboardUtil.getKey({key: 'Win'})).to.be.equal('Meta');
+            expect(KeyboardUtil.getKey({key: 'UIKeyInputLeftArrow'})).to.be.equal('ArrowLeft');
+        });
+        it('should use code if no key', function () {
+            expect(KeyboardUtil.getKey({code: 'NumpadBackspace'})).to.be.equal('Backspace');
+        });
+        it('should not use code fallback for character keys', function () {
+            expect(KeyboardUtil.getKey({code: 'KeyA'})).to.be.equal('Unidentified');
+            expect(KeyboardUtil.getKey({code: 'Digit1'})).to.be.equal('Unidentified');
+            expect(KeyboardUtil.getKey({code: 'Period'})).to.be.equal('Unidentified');
+            expect(KeyboardUtil.getKey({code: 'Numpad1'})).to.be.equal('Unidentified');
+        });
+        it('should use charCode if no key', function () {
+            expect(KeyboardUtil.getKey({charCode: 'Š'.charCodeAt(), keyCode: 0x42, which: 0x43})).to.be.equal('Š');
+        });
+        it('should return Unidentified when it cannot map the key', function () {
+            expect(KeyboardUtil.getKey({keycode: 0x42})).to.be.equal('Unidentified');
+        });
+
+        describe('Broken key AltGraph on IE/Edge', function () {
+            let origNavigator;
+            beforeEach(function () {
+                // window.navigator is a protected read-only property in many
+                // environments, so we need to redefine it whilst running these
+                // tests.
+                origNavigator = Object.getOwnPropertyDescriptor(window, "navigator");
+                if (origNavigator === undefined) {
+                    // Object.getOwnPropertyDescriptor() doesn't work
+                    // properly in any version of IE
+                    this.skip();
+                }
+
+                Object.defineProperty(window, "navigator", {value: {}});
+                if (window.navigator.platform !== undefined) {
+                    // Object.defineProperty() doesn't work properly in old
+                    // versions of Chrome
+                    this.skip();
+                }
+            });
+            afterEach(function () {
+                Object.defineProperty(window, "navigator", origNavigator);
+            });
+
+            it('should ignore printable character key on IE', function () {
+                window.navigator.userAgent = "Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko";
+                expect(KeyboardUtil.getKey({key: 'a'})).to.be.equal('Unidentified');
+            });
+            it('should ignore printable character key on Edge', function () {
+                window.navigator.userAgent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393";
+                expect(KeyboardUtil.getKey({key: 'a'})).to.be.equal('Unidentified');
+            });
+            it('should allow non-printable character key on IE', function () {
+                window.navigator.userAgent = "Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko";
+                expect(KeyboardUtil.getKey({key: 'Shift'})).to.be.equal('Shift');
+            });
+            it('should allow non-printable character key on Edge', function () {
+                window.navigator.userAgent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393";
+                expect(KeyboardUtil.getKey({key: 'Shift'})).to.be.equal('Shift');
+            });
+        });
+    });
+
+    describe('getKeysym', function () {
+        describe('Non-character keys', function () {
+            it('should recognize the right keys', function () {
+                expect(KeyboardUtil.getKeysym({key: 'Enter'})).to.be.equal(0xFF0D);
+                expect(KeyboardUtil.getKeysym({key: 'Backspace'})).to.be.equal(0xFF08);
+                expect(KeyboardUtil.getKeysym({key: 'Tab'})).to.be.equal(0xFF09);
+                expect(KeyboardUtil.getKeysym({key: 'Shift'})).to.be.equal(0xFFE1);
+                expect(KeyboardUtil.getKeysym({key: 'Control'})).to.be.equal(0xFFE3);
+                expect(KeyboardUtil.getKeysym({key: 'Alt'})).to.be.equal(0xFFE9);
+                expect(KeyboardUtil.getKeysym({key: 'Meta'})).to.be.equal(0xFFEB);
+                expect(KeyboardUtil.getKeysym({key: 'Escape'})).to.be.equal(0xFF1B);
+                expect(KeyboardUtil.getKeysym({key: 'ArrowUp'})).to.be.equal(0xFF52);
+            });
+            it('should map left/right side', function () {
+                expect(KeyboardUtil.getKeysym({key: 'Shift', location: 1})).to.be.equal(0xFFE1);
+                expect(KeyboardUtil.getKeysym({key: 'Shift', location: 2})).to.be.equal(0xFFE2);
+                expect(KeyboardUtil.getKeysym({key: 'Control', location: 1})).to.be.equal(0xFFE3);
+                expect(KeyboardUtil.getKeysym({key: 'Control', location: 2})).to.be.equal(0xFFE4);
+            });
+            it('should handle AltGraph', function () {
+                expect(KeyboardUtil.getKeysym({code: 'AltRight', key: 'Alt', location: 2})).to.be.equal(0xFFEA);
+                expect(KeyboardUtil.getKeysym({code: 'AltRight', key: 'AltGraph', location: 2})).to.be.equal(0xFE03);
+            });
+            it('should return null for unknown keys', function () {
+                expect(KeyboardUtil.getKeysym({key: 'Semicolon'})).to.be.null;
+                expect(KeyboardUtil.getKeysym({key: 'BracketRight'})).to.be.null;
+            });
+            it('should handle remappings', function () {
+                expect(KeyboardUtil.getKeysym({code: 'ControlLeft', key: 'Tab'})).to.be.equal(0xFF09);
+            });
+        });
+
+        describe('Numpad', function () {
+            it('should handle Numpad numbers', function () {
+                if (browser.isIE() || browser.isEdge()) this.skip();
+                expect(KeyboardUtil.getKeysym({code: 'Digit5', key: '5', location: 0})).to.be.equal(0x0035);
+                expect(KeyboardUtil.getKeysym({code: 'Numpad5', key: '5', location: 3})).to.be.equal(0xFFB5);
+            });
+            it('should handle Numpad non-character keys', function () {
+                expect(KeyboardUtil.getKeysym({code: 'Home', key: 'Home', location: 0})).to.be.equal(0xFF50);
+                expect(KeyboardUtil.getKeysym({code: 'Numpad5', key: 'Home', location: 3})).to.be.equal(0xFF95);
+                expect(KeyboardUtil.getKeysym({code: 'Delete', key: 'Delete', location: 0})).to.be.equal(0xFFFF);
+                expect(KeyboardUtil.getKeysym({code: 'NumpadDecimal', key: 'Delete', location: 3})).to.be.equal(0xFF9F);
+            });
+            it('should handle Numpad Decimal key', function () {
+                if (browser.isIE() || browser.isEdge()) this.skip();
+                expect(KeyboardUtil.getKeysym({code: 'NumpadDecimal', key: '.', location: 3})).to.be.equal(0xFFAE);
+                expect(KeyboardUtil.getKeysym({code: 'NumpadDecimal', key: ',', location: 3})).to.be.equal(0xFFAC);
+            });
+        });
+    });
+});

kasmweb/tests/test.keyboard.js

@@ -0,0 +1,510 @@
+const expect = chai.expect;
+
+import Keyboard from '../core/input/keyboard.js';
+import * as browser from '../core/util/browser.js';
+
+describe('Key Event Handling', function () {
+    "use strict";
+
+    // The real KeyboardEvent constructor might not work everywhere we
+    // want to run these tests
+    function keyevent(typeArg, KeyboardEventInit) {
+        const e = { type: typeArg };
+        for (let key in KeyboardEventInit) {
+            e[key] = KeyboardEventInit[key];
+        }
+        e.stopPropagation = sinon.spy();
+        e.preventDefault = sinon.spy();
+        return e;
+    }
+
+    describe('Decode Keyboard Events', function () {
+        it('should decode keydown events', function (done) {
+            if (browser.isIE() || browser.isEdge()) this.skip();
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = (keysym, code, down) => {
+                expect(keysym).to.be.equal(0x61);
+                expect(code).to.be.equal('KeyA');
+                expect(down).to.be.equal(true);
+                done();
+            };
+            kbd._handleKeyDown(keyevent('keydown', {code: 'KeyA', key: 'a'}));
+        });
+        it('should decode keyup events', function (done) {
+            if (browser.isIE() || browser.isEdge()) this.skip();
+            let calls = 0;
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = (keysym, code, down) => {
+                expect(keysym).to.be.equal(0x61);
+                expect(code).to.be.equal('KeyA');
+                if (calls++ === 1) {
+                    expect(down).to.be.equal(false);
+                    done();
+                }
+            };
+            kbd._handleKeyDown(keyevent('keydown', {code: 'KeyA', key: 'a'}));
+            kbd._handleKeyUp(keyevent('keyup', {code: 'KeyA', key: 'a'}));
+        });
+
+        describe('Legacy keypress Events', function () {
+            it('should wait for keypress when needed', function () {
+                const kbd = new Keyboard(document);
+                kbd.onkeyevent = sinon.spy();
+                kbd._handleKeyDown(keyevent('keydown', {code: 'KeyA', keyCode: 0x41}));
+                expect(kbd.onkeyevent).to.not.have.been.called;
+            });
+            it('should decode keypress events', function (done) {
+                const kbd = new Keyboard(document);
+                kbd.onkeyevent = (keysym, code, down) => {
+                    expect(keysym).to.be.equal(0x61);
+                    expect(code).to.be.equal('KeyA');
+                    expect(down).to.be.equal(true);
+                    done();
+                };
+                kbd._handleKeyDown(keyevent('keydown', {code: 'KeyA', keyCode: 0x41}));
+                kbd._handleKeyPress(keyevent('keypress', {code: 'KeyA', charCode: 0x61}));
+            });
+            it('should ignore keypress with different code', function () {
+                const kbd = new Keyboard(document);
+                kbd.onkeyevent = sinon.spy();
+                kbd._handleKeyDown(keyevent('keydown', {code: 'KeyA', keyCode: 0x41}));
+                kbd._handleKeyPress(keyevent('keypress', {code: 'KeyB', charCode: 0x61}));
+                expect(kbd.onkeyevent).to.not.have.been.called;
+            });
+            it('should handle keypress with missing code', function (done) {
+                const kbd = new Keyboard(document);
+                kbd.onkeyevent = (keysym, code, down) => {
+                    expect(keysym).to.be.equal(0x61);
+                    expect(code).to.be.equal('KeyA');
+                    expect(down).to.be.equal(true);
+                    done();
+                };
+                kbd._handleKeyDown(keyevent('keydown', {code: 'KeyA', keyCode: 0x41}));
+                kbd._handleKeyPress(keyevent('keypress', {charCode: 0x61}));
+            });
+            it('should guess key if no keypress and numeric key', function (done) {
+                const kbd = new Keyboard(document);
+                kbd.onkeyevent = (keysym, code, down) => {
+                    expect(keysym).to.be.equal(0x32);
+                    expect(code).to.be.equal('Digit2');
+                    expect(down).to.be.equal(true);
+                    done();
+                };
+                kbd._handleKeyDown(keyevent('keydown', {code: 'Digit2', keyCode: 0x32}));
+            });
+            it('should guess key if no keypress and alpha key', function (done) {
+                const kbd = new Keyboard(document);
+                kbd.onkeyevent = (keysym, code, down) => {
+                    expect(keysym).to.be.equal(0x61);
+                    expect(code).to.be.equal('KeyA');
+                    expect(down).to.be.equal(true);
+                    done();
+                };
+                kbd._handleKeyDown(keyevent('keydown', {code: 'KeyA', keyCode: 0x41, shiftKey: false}));
+            });
+            it('should guess key if no keypress and alpha key (with shift)', function (done) {
+                const kbd = new Keyboard(document);
+                kbd.onkeyevent = (keysym, code, down) => {
+                    expect(keysym).to.be.equal(0x41);
+                    expect(code).to.be.equal('KeyA');
+                    expect(down).to.be.equal(true);
+                    done();
+                };
+                kbd._handleKeyDown(keyevent('keydown', {code: 'KeyA', keyCode: 0x41, shiftKey: true}));
+            });
+            it('should not guess key if no keypress and unknown key', function (done) {
+                const kbd = new Keyboard(document);
+                kbd.onkeyevent = (keysym, code, down) => {
+                    expect(keysym).to.be.equal(0);
+                    expect(code).to.be.equal('KeyA');
+                    expect(down).to.be.equal(true);
+                    done();
+                };
+                kbd._handleKeyDown(keyevent('keydown', {code: 'KeyA', keyCode: 0x09}));
+            });
+        });
+
+        describe('suppress the right events at the right time', function () {
+            beforeEach(function () {
+                if (browser.isIE() || browser.isEdge()) this.skip();
+            });
+            it('should suppress anything with a valid key', function () {
+                const kbd = new Keyboard(document, {});
+                const evt1 = keyevent('keydown', {code: 'KeyA', key: 'a'});
+                kbd._handleKeyDown(evt1);
+                expect(evt1.preventDefault).to.have.been.called;
+                const evt2 = keyevent('keyup', {code: 'KeyA', key: 'a'});
+                kbd._handleKeyUp(evt2);
+                expect(evt2.preventDefault).to.have.been.called;
+            });
+            it('should not suppress keys without key', function () {
+                const kbd = new Keyboard(document, {});
+                const evt = keyevent('keydown', {code: 'KeyA', keyCode: 0x41});
+                kbd._handleKeyDown(evt);
+                expect(evt.preventDefault).to.not.have.been.called;
+            });
+            it('should suppress the following keypress event', function () {
+                const kbd = new Keyboard(document, {});
+                const evt1 = keyevent('keydown', {code: 'KeyA', keyCode: 0x41});
+                kbd._handleKeyDown(evt1);
+                const evt2 = keyevent('keypress', {code: 'KeyA', charCode: 0x41});
+                kbd._handleKeyPress(evt2);
+                expect(evt2.preventDefault).to.have.been.called;
+            });
+        });
+    });
+
+    describe('Fake keyup', function () {
+        it('should fake keyup events for virtual keyboards', function (done) {
+            if (browser.isIE() || browser.isEdge()) this.skip();
+            let count = 0;
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = (keysym, code, down) => {
+                switch (count++) {
+                    case 0:
+                        expect(keysym).to.be.equal(0x61);
+                        expect(code).to.be.equal('Unidentified');
+                        expect(down).to.be.equal(true);
+                        break;
+                    case 1:
+                        expect(keysym).to.be.equal(0x61);
+                        expect(code).to.be.equal('Unidentified');
+                        expect(down).to.be.equal(false);
+                        done();
+                }
+            };
+            kbd._handleKeyDown(keyevent('keydown', {code: 'Unidentified', key: 'a'}));
+        });
+
+        describe('iOS', function () {
+            let origNavigator;
+            beforeEach(function () {
+                // window.navigator is a protected read-only property in many
+                // environments, so we need to redefine it whilst running these
+                // tests.
+                origNavigator = Object.getOwnPropertyDescriptor(window, "navigator");
+                if (origNavigator === undefined) {
+                    // Object.getOwnPropertyDescriptor() doesn't work
+                    // properly in any version of IE
+                    this.skip();
+                }
+
+                Object.defineProperty(window, "navigator", {value: {}});
+                if (window.navigator.platform !== undefined) {
+                    // Object.defineProperty() doesn't work properly in old
+                    // versions of Chrome
+                    this.skip();
+                }
+
+                window.navigator.platform = "iPhone 9.0";
+            });
+            afterEach(function () {
+                Object.defineProperty(window, "navigator", origNavigator);
+            });
+
+            it('should fake keyup events on iOS', function (done) {
+                if (browser.isIE() || browser.isEdge()) this.skip();
+                let count = 0;
+                const kbd = new Keyboard(document);
+                kbd.onkeyevent = (keysym, code, down) => {
+                    switch (count++) {
+                        case 0:
+                            expect(keysym).to.be.equal(0x61);
+                            expect(code).to.be.equal('KeyA');
+                            expect(down).to.be.equal(true);
+                            break;
+                        case 1:
+                            expect(keysym).to.be.equal(0x61);
+                            expect(code).to.be.equal('KeyA');
+                            expect(down).to.be.equal(false);
+                            done();
+                    }
+                };
+                kbd._handleKeyDown(keyevent('keydown', {code: 'KeyA', key: 'a'}));
+            });
+        });
+    });
+
+    describe('Track Key State', function () {
+        beforeEach(function () {
+            if (browser.isIE() || browser.isEdge()) this.skip();
+        });
+        it('should send release using the same keysym as the press', function (done) {
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = (keysym, code, down) => {
+                expect(keysym).to.be.equal(0x61);
+                expect(code).to.be.equal('KeyA');
+                if (!down) {
+                    done();
+                }
+            };
+            kbd._handleKeyDown(keyevent('keydown', {code: 'KeyA', key: 'a'}));
+            kbd._handleKeyUp(keyevent('keyup', {code: 'KeyA', key: 'b'}));
+        });
+        it('should send the same keysym for multiple presses', function () {
+            let count = 0;
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = (keysym, code, down) => {
+                expect(keysym).to.be.equal(0x61);
+                expect(code).to.be.equal('KeyA');
+                expect(down).to.be.equal(true);
+                count++;
+            };
+            kbd._handleKeyDown(keyevent('keydown', {code: 'KeyA', key: 'a'}));
+            kbd._handleKeyDown(keyevent('keydown', {code: 'KeyA', key: 'b'}));
+            expect(count).to.be.equal(2);
+        });
+        it('should do nothing on keyup events if no keys are down', function () {
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = sinon.spy();
+            kbd._handleKeyUp(keyevent('keyup', {code: 'KeyA', key: 'a'}));
+            expect(kbd.onkeyevent).to.not.have.been.called;
+        });
+
+        describe('Legacy Events', function () {
+            it('should track keys using keyCode if no code', function (done) {
+                const kbd = new Keyboard(document);
+                kbd.onkeyevent = (keysym, code, down) => {
+                    expect(keysym).to.be.equal(0x61);
+                    expect(code).to.be.equal('Platform65');
+                    if (!down) {
+                        done();
+                    }
+                };
+                kbd._handleKeyDown(keyevent('keydown', {keyCode: 65, key: 'a'}));
+                kbd._handleKeyUp(keyevent('keyup', {keyCode: 65, key: 'b'}));
+            });
+            it('should ignore compositing code', function () {
+                const kbd = new Keyboard(document);
+                kbd.onkeyevent = (keysym, code, down) => {
+                    expect(keysym).to.be.equal(0x61);
+                    expect(code).to.be.equal('Unidentified');
+                };
+                kbd._handleKeyDown(keyevent('keydown', {keyCode: 229, key: 'a'}));
+            });
+            it('should track keys using keyIdentifier if no code', function (done) {
+                const kbd = new Keyboard(document);
+                kbd.onkeyevent = (keysym, code, down) => {
+                    expect(keysym).to.be.equal(0x61);
+                    expect(code).to.be.equal('Platform65');
+                    if (!down) {
+                        done();
+                    }
+                };
+                kbd._handleKeyDown(keyevent('keydown', {keyIdentifier: 'U+0041', key: 'a'}));
+                kbd._handleKeyUp(keyevent('keyup', {keyIdentifier: 'U+0041', key: 'b'}));
+            });
+        });
+    });
+
+    describe('Shuffle modifiers on macOS', function () {
+        let origNavigator;
+        beforeEach(function () {
+            // window.navigator is a protected read-only property in many
+            // environments, so we need to redefine it whilst running these
+            // tests.
+            origNavigator = Object.getOwnPropertyDescriptor(window, "navigator");
+            if (origNavigator === undefined) {
+                // Object.getOwnPropertyDescriptor() doesn't work
+                // properly in any version of IE
+                this.skip();
+            }
+
+            Object.defineProperty(window, "navigator", {value: {}});
+            if (window.navigator.platform !== undefined) {
+                // Object.defineProperty() doesn't work properly in old
+                // versions of Chrome
+                this.skip();
+            }
+
+            window.navigator.platform = "Mac x86_64";
+        });
+        afterEach(function () {
+            Object.defineProperty(window, "navigator", origNavigator);
+        });
+
+        it('should change Alt to AltGraph', function () {
+            let count = 0;
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = (keysym, code, down) => {
+                switch (count++) {
+                    case 0:
+                        expect(keysym).to.be.equal(0xFF7E);
+                        expect(code).to.be.equal('AltLeft');
+                        break;
+                    case 1:
+                        expect(keysym).to.be.equal(0xFE03);
+                        expect(code).to.be.equal('AltRight');
+                        break;
+                }
+            };
+            kbd._handleKeyDown(keyevent('keydown', {code: 'AltLeft', key: 'Alt', location: 1}));
+            kbd._handleKeyDown(keyevent('keydown', {code: 'AltRight', key: 'Alt', location: 2}));
+            expect(count).to.be.equal(2);
+        });
+        it('should change left Super to Alt', function (done) {
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = (keysym, code, down) => {
+                expect(keysym).to.be.equal(0xFFE9);
+                expect(code).to.be.equal('MetaLeft');
+                done();
+            };
+            kbd._handleKeyDown(keyevent('keydown', {code: 'MetaLeft', key: 'Meta', location: 1}));
+        });
+        it('should change right Super to left Super', function (done) {
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = (keysym, code, down) => {
+                expect(keysym).to.be.equal(0xFFEB);
+                expect(code).to.be.equal('MetaRight');
+                done();
+            };
+            kbd._handleKeyDown(keyevent('keydown', {code: 'MetaRight', key: 'Meta', location: 2}));
+        });
+    });
+
+    describe('Escape AltGraph on Windows', function () {
+        let origNavigator;
+        beforeEach(function () {
+            // window.navigator is a protected read-only property in many
+            // environments, so we need to redefine it whilst running these
+            // tests.
+            origNavigator = Object.getOwnPropertyDescriptor(window, "navigator");
+            if (origNavigator === undefined) {
+                // Object.getOwnPropertyDescriptor() doesn't work
+                // properly in any version of IE
+                this.skip();
+            }
+
+            Object.defineProperty(window, "navigator", {value: {}});
+            if (window.navigator.platform !== undefined) {
+                // Object.defineProperty() doesn't work properly in old
+                // versions of Chrome
+                this.skip();
+            }
+
+            window.navigator.platform = "Windows x86_64";
+
+            this.clock = sinon.useFakeTimers();
+        });
+        afterEach(function () {
+            Object.defineProperty(window, "navigator", origNavigator);
+            this.clock.restore();
+        });
+
+        it('should supress ControlLeft until it knows if it is AltGr', function () {
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = sinon.spy();
+            kbd._handleKeyDown(keyevent('keydown', {code: 'ControlLeft', key: 'Control', location: 1}));
+            expect(kbd.onkeyevent).to.not.have.been.called;
+        });
+
+        it('should not trigger on repeating ControlLeft', function () {
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = sinon.spy();
+            kbd._handleKeyDown(keyevent('keydown', {code: 'ControlLeft', key: 'Control', location: 1}));
+            kbd._handleKeyDown(keyevent('keydown', {code: 'ControlLeft', key: 'Control', location: 1}));
+            expect(kbd.onkeyevent).to.have.been.calledTwice;
+            expect(kbd.onkeyevent.firstCall).to.have.been.calledWith(0xffe3, "ControlLeft", true);
+            expect(kbd.onkeyevent.secondCall).to.have.been.calledWith(0xffe3, "ControlLeft", true);
+        });
+
+        it('should not supress ControlRight', function () {
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = sinon.spy();
+            kbd._handleKeyDown(keyevent('keydown', {code: 'ControlRight', key: 'Control', location: 2}));
+            expect(kbd.onkeyevent).to.have.been.calledOnce;
+            expect(kbd.onkeyevent).to.have.been.calledWith(0xffe4, "ControlRight", true);
+        });
+
+        it('should release ControlLeft after 100 ms', function () {
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = sinon.spy();
+            kbd._handleKeyDown(keyevent('keydown', {code: 'ControlLeft', key: 'Control', location: 1}));
+            expect(kbd.onkeyevent).to.not.have.been.called;
+            this.clock.tick(100);
+            expect(kbd.onkeyevent).to.have.been.calledOnce;
+            expect(kbd.onkeyevent).to.have.been.calledWith(0xffe3, "ControlLeft", true);
+        });
+
+        it('should release ControlLeft on other key press', function () {
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = sinon.spy();
+            kbd._handleKeyDown(keyevent('keydown', {code: 'ControlLeft', key: 'Control', location: 1}));
+            expect(kbd.onkeyevent).to.not.have.been.called;
+            kbd._handleKeyDown(keyevent('keydown', {code: 'KeyA', key: 'a'}));
+            expect(kbd.onkeyevent).to.have.been.calledTwice;
+            expect(kbd.onkeyevent.firstCall).to.have.been.calledWith(0xffe3, "ControlLeft", true);
+            expect(kbd.onkeyevent.secondCall).to.have.been.calledWith(0x61, "KeyA", true);
+
+            // Check that the timer is properly dead
+            kbd.onkeyevent.reset();
+            this.clock.tick(100);
+            expect(kbd.onkeyevent).to.not.have.been.called;
+        });
+
+        it('should release ControlLeft on other key release', function () {
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = sinon.spy();
+            kbd._handleKeyDown(keyevent('keydown', {code: 'KeyA', key: 'a'}));
+            kbd._handleKeyDown(keyevent('keydown', {code: 'ControlLeft', key: 'Control', location: 1}));
+            expect(kbd.onkeyevent).to.have.been.calledOnce;
+            expect(kbd.onkeyevent.firstCall).to.have.been.calledWith(0x61, "KeyA", true);
+            kbd._handleKeyUp(keyevent('keyup', {code: 'KeyA', key: 'a'}));
+            expect(kbd.onkeyevent).to.have.been.calledThrice;
+            expect(kbd.onkeyevent.secondCall).to.have.been.calledWith(0xffe3, "ControlLeft", true);
+            expect(kbd.onkeyevent.thirdCall).to.have.been.calledWith(0x61, "KeyA", false);
+
+            // Check that the timer is properly dead
+            kbd.onkeyevent.reset();
+            this.clock.tick(100);
+            expect(kbd.onkeyevent).to.not.have.been.called;
+        });
+
+        it('should generate AltGraph for quick Ctrl+Alt sequence', function () {
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = sinon.spy();
+            kbd._handleKeyDown(keyevent('keydown', {code: 'ControlLeft', key: 'Control', location: 1, timeStamp: Date.now()}));
+            this.clock.tick(20);
+            kbd._handleKeyDown(keyevent('keydown', {code: 'AltRight', key: 'Alt', location: 2, timeStamp: Date.now()}));
+            expect(kbd.onkeyevent).to.have.been.calledOnce;
+            expect(kbd.onkeyevent).to.have.been.calledWith(0xfe03, 'AltRight', true);
+
+            // Check that the timer is properly dead
+            kbd.onkeyevent.reset();
+            this.clock.tick(100);
+            expect(kbd.onkeyevent).to.not.have.been.called;
+        });
+
+        it('should generate Ctrl, Alt for slow Ctrl+Alt sequence', function () {
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = sinon.spy();
+            kbd._handleKeyDown(keyevent('keydown', {code: 'ControlLeft', key: 'Control', location: 1, timeStamp: Date.now()}));
+            this.clock.tick(60);
+            kbd._handleKeyDown(keyevent('keydown', {code: 'AltRight', key: 'Alt', location: 2, timeStamp: Date.now()}));
+            expect(kbd.onkeyevent).to.have.been.calledTwice;
+            expect(kbd.onkeyevent.firstCall).to.have.been.calledWith(0xffe3, "ControlLeft", true);
+            expect(kbd.onkeyevent.secondCall).to.have.been.calledWith(0xffea, "AltRight", true);
+
+            // Check that the timer is properly dead
+            kbd.onkeyevent.reset();
+            this.clock.tick(100);
+            expect(kbd.onkeyevent).to.not.have.been.called;
+        });
+
+        it('should pass through single Alt', function () {
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = sinon.spy();
+            kbd._handleKeyDown(keyevent('keydown', {code: 'AltRight', key: 'Alt', location: 2}));
+            expect(kbd.onkeyevent).to.have.been.calledOnce;
+            expect(kbd.onkeyevent).to.have.been.calledWith(0xffea, 'AltRight', true);
+        });
+
+        it('should pass through single AltGr', function () {
+            const kbd = new Keyboard(document);
+            kbd.onkeyevent = sinon.spy();
+            kbd._handleKeyDown(keyevent('keydown', {code: 'AltRight', key: 'AltGraph', location: 2}));
+            expect(kbd.onkeyevent).to.have.been.calledOnce;
+            expect(kbd.onkeyevent).to.have.been.calledWith(0xfe03, 'AltRight', true);
+        });
+    });
+});

kasmweb/tests/test.localization.js

@@ -0,0 +1,72 @@
+const expect = chai.expect;
+import { l10n } from '../app/localization.js';
+
+describe('Localization', function () {
+    "use strict";
+
+    describe('language selection', function () {
+        let origNavigator;
+        beforeEach(function () {
+            // window.navigator is a protected read-only property in many
+            // environments, so we need to redefine it whilst running these
+            // tests.
+            origNavigator = Object.getOwnPropertyDescriptor(window, "navigator");
+            if (origNavigator === undefined) {
+                // Object.getOwnPropertyDescriptor() doesn't work
+                // properly in any version of IE
+                this.skip();
+            }
+
+            Object.defineProperty(window, "navigator", {value: {}});
+            if (window.navigator.languages !== undefined) {
+                // Object.defineProperty() doesn't work properly in old
+                // versions of Chrome
+                this.skip();
+            }
+
+            window.navigator.languages = [];
+        });
+        afterEach(function () {
+            Object.defineProperty(window, "navigator", origNavigator);
+        });
+
+        it('should use English by default', function () {
+            expect(l10n.language).to.equal('en');
+        });
+        it('should use English if no user language matches', function () {
+            window.navigator.languages = ["nl", "de"];
+            l10n.setup(["es", "fr"]);
+            expect(l10n.language).to.equal('en');
+        });
+        it('should use the most preferred user language', function () {
+            window.navigator.languages = ["nl", "de", "fr"];
+            l10n.setup(["es", "fr", "de"]);
+            expect(l10n.language).to.equal('de');
+        });
+        it('should prefer sub-languages languages', function () {
+            window.navigator.languages = ["pt-BR"];
+            l10n.setup(["pt", "pt-BR"]);
+            expect(l10n.language).to.equal('pt-BR');
+        });
+        it('should fall back to language "parents"', function () {
+            window.navigator.languages = ["pt-BR"];
+            l10n.setup(["fr", "pt", "de"]);
+            expect(l10n.language).to.equal('pt');
+        });
+        it('should not use specific language when user asks for a generic language', function () {
+            window.navigator.languages = ["pt", "de"];
+            l10n.setup(["fr", "pt-BR", "de"]);
+            expect(l10n.language).to.equal('de');
+        });
+        it('should handle underscore as a separator', function () {
+            window.navigator.languages = ["pt-BR"];
+            l10n.setup(["pt_BR"]);
+            expect(l10n.language).to.equal('pt_BR');
+        });
+        it('should handle difference in case', function () {
+            window.navigator.languages = ["pt-br"];
+            l10n.setup(["pt-BR"]);
+            expect(l10n.language).to.equal('pt-BR');
+        });
+    });
+});

kasmweb/tests/test.mouse.js

@@ -0,0 +1,304 @@
+const expect = chai.expect;
+
+import Mouse from '../core/input/mouse.js';
+
+describe('Mouse Event Handling', function () {
+    "use strict";
+
+    let target;
+
+    beforeEach(function () {
+        // For these tests we can assume that the canvas is 100x100
+        // located at coordinates 10x10
+        target = document.createElement('canvas');
+        target.style.position = "absolute";
+        target.style.top = "10px";
+        target.style.left = "10px";
+        target.style.width = "100px";
+        target.style.height = "100px";
+        document.body.appendChild(target);
+    });
+    afterEach(function () {
+        document.body.removeChild(target);
+        target = null;
+    });
+
+    // The real constructors might not work everywhere we
+    // want to run these tests
+    const mouseevent = (typeArg, MouseEventInit) => {
+        const e = { type: typeArg };
+        for (let key in MouseEventInit) {
+            e[key] = MouseEventInit[key];
+        }
+        e.stopPropagation = sinon.spy();
+        e.preventDefault = sinon.spy();
+        return e;
+    };
+    const touchevent = mouseevent;
+
+    describe('Decode Mouse Events', function () {
+        it('should decode mousedown events', function (done) {
+            const mouse = new Mouse(target);
+            mouse.onmousebutton = (x, y, down, bmask) => {
+                expect(bmask).to.be.equal(0x01);
+                expect(down).to.be.equal(1);
+                done();
+            };
+            mouse._handleMouseDown(mouseevent('mousedown', { button: '0x01' }));
+        });
+        it('should decode mouseup events', function (done) {
+            let calls = 0;
+            const mouse = new Mouse(target);
+            mouse.onmousebutton = (x, y, down, bmask) => {
+                expect(bmask).to.be.equal(0x01);
+                if (calls++ === 1) {
+                    expect(down).to.not.be.equal(1);
+                    done();
+                }
+            };
+            mouse._handleMouseDown(mouseevent('mousedown', { button: '0x01' }));
+            mouse._handleMouseUp(mouseevent('mouseup', { button: '0x01' }));
+        });
+        it('should decode mousemove events', function (done) {
+            const mouse = new Mouse(target);
+            mouse.onmousemove = (x, y) => {
+                // Note that target relative coordinates are sent
+                expect(x).to.be.equal(40);
+                expect(y).to.be.equal(10);
+                done();
+            };
+            mouse._handleMouseMove(mouseevent('mousemove',
+                                              { clientX: 50, clientY: 20 }));
+        });
+        it('should decode mousewheel events', function (done) {
+            let calls = 0;
+            const mouse = new Mouse(target);
+            mouse.onmousebutton = (x, y, down, bmask) => {
+                calls++;
+                expect(bmask).to.be.equal(1<<6);
+                if (calls === 1) {
+                    expect(down).to.be.equal(1);
+                } else if (calls === 2) {
+                    expect(down).to.not.be.equal(1);
+                    done();
+                }
+            };
+            mouse._handleMouseWheel(mouseevent('mousewheel',
+                                               { deltaX: 50, deltaY: 0,
+                                                 deltaMode: 0}));
+        });
+    });
+
+    describe('Double-click for Touch', function () {
+
+        beforeEach(function () { this.clock = sinon.useFakeTimers(); });
+        afterEach(function () { this.clock.restore(); });
+
+        it('should use same pos for 2nd tap if close enough', function (done) {
+            let calls = 0;
+            const mouse = new Mouse(target);
+            mouse.onmousebutton = (x, y, down, bmask) => {
+                calls++;
+                if (calls === 1) {
+                    expect(down).to.be.equal(1);
+                    expect(x).to.be.equal(68);
+                    expect(y).to.be.equal(36);
+                } else if (calls === 3) {
+                    expect(down).to.be.equal(1);
+                    expect(x).to.be.equal(68);
+                    expect(y).to.be.equal(36);
+                    done();
+                }
+            };
+            // touch events are sent in an array of events
+            // with one item for each touch point
+            mouse._handleMouseDown(touchevent(
+                'touchstart', { touches: [{ clientX: 78, clientY: 46 }]}));
+            this.clock.tick(10);
+            mouse._handleMouseUp(touchevent(
+                'touchend', { touches: [{ clientX: 79, clientY: 45 }]}));
+            this.clock.tick(200);
+            mouse._handleMouseDown(touchevent(
+                'touchstart', { touches: [{ clientX: 67, clientY: 35 }]}));
+            this.clock.tick(10);
+            mouse._handleMouseUp(touchevent(
+                'touchend', { touches: [{ clientX: 66, clientY: 36 }]}));
+        });
+
+        it('should not modify 2nd tap pos if far apart', function (done) {
+            let calls = 0;
+            const mouse = new Mouse(target);
+            mouse.onmousebutton = (x, y, down, bmask) => {
+                calls++;
+                if (calls === 1) {
+                    expect(down).to.be.equal(1);
+                    expect(x).to.be.equal(68);
+                    expect(y).to.be.equal(36);
+                } else if (calls === 3) {
+                    expect(down).to.be.equal(1);
+                    expect(x).to.not.be.equal(68);
+                    expect(y).to.not.be.equal(36);
+                    done();
+                }
+            };
+            mouse._handleMouseDown(touchevent(
+                'touchstart', { touches: [{ clientX: 78, clientY: 46 }]}));
+            this.clock.tick(10);
+            mouse._handleMouseUp(touchevent(
+                'touchend', { touches: [{ clientX: 79, clientY: 45 }]}));
+            this.clock.tick(200);
+            mouse._handleMouseDown(touchevent(
+                'touchstart', { touches: [{ clientX: 57, clientY: 35 }]}));
+            this.clock.tick(10);
+            mouse._handleMouseUp(touchevent(
+                'touchend', { touches: [{ clientX: 56, clientY: 36 }]}));
+        });
+
+        it('should not modify 2nd tap pos if not soon enough', function (done) {
+            let calls = 0;
+            const mouse = new Mouse(target);
+            mouse.onmousebutton = (x, y, down, bmask) => {
+                calls++;
+                if (calls === 1) {
+                    expect(down).to.be.equal(1);
+                    expect(x).to.be.equal(68);
+                    expect(y).to.be.equal(36);
+                } else if (calls === 3) {
+                    expect(down).to.be.equal(1);
+                    expect(x).to.not.be.equal(68);
+                    expect(y).to.not.be.equal(36);
+                    done();
+                }
+            };
+            mouse._handleMouseDown(touchevent(
+                'touchstart', { touches: [{ clientX: 78, clientY: 46 }]}));
+            this.clock.tick(10);
+            mouse._handleMouseUp(touchevent(
+                'touchend', { touches: [{ clientX: 79, clientY: 45 }]}));
+            this.clock.tick(500);
+            mouse._handleMouseDown(touchevent(
+                'touchstart', { touches: [{ clientX: 67, clientY: 35 }]}));
+            this.clock.tick(10);
+            mouse._handleMouseUp(touchevent(
+                'touchend', { touches: [{ clientX: 66, clientY: 36 }]}));
+        });
+
+        it('should not modify 2nd tap pos if not touch', function (done) {
+            let calls = 0;
+            const mouse = new Mouse(target);
+            mouse.onmousebutton = (x, y, down, bmask) => {
+                calls++;
+                if (calls === 1) {
+                    expect(down).to.be.equal(1);
+                    expect(x).to.be.equal(68);
+                    expect(y).to.be.equal(36);
+                } else if (calls === 3) {
+                    expect(down).to.be.equal(1);
+                    expect(x).to.not.be.equal(68);
+                    expect(y).to.not.be.equal(36);
+                    done();
+                }
+            };
+            mouse._handleMouseDown(mouseevent(
+                'mousedown', { button: '0x01', clientX: 78, clientY: 46 }));
+            this.clock.tick(10);
+            mouse._handleMouseUp(mouseevent(
+                'mouseup', { button: '0x01', clientX: 79, clientY: 45 }));
+            this.clock.tick(200);
+            mouse._handleMouseDown(mouseevent(
+                'mousedown', { button: '0x01', clientX: 67, clientY: 35 }));
+            this.clock.tick(10);
+            mouse._handleMouseUp(mouseevent(
+                'mouseup', { button: '0x01', clientX: 66, clientY: 36 }));
+        });
+
+    });
+
+    describe('Accumulate mouse wheel events with small delta', function () {
+
+        beforeEach(function () { this.clock = sinon.useFakeTimers(); });
+        afterEach(function () { this.clock.restore(); });
+
+        it('should accumulate wheel events if small enough', function () {
+            const mouse = new Mouse(target);
+            mouse.onmousebutton = sinon.spy();
+
+            mouse._handleMouseWheel(mouseevent(
+                'mousewheel', { clientX: 18, clientY: 40,
+                                deltaX: 4, deltaY: 0, deltaMode: 0 }));
+            this.clock.tick(10);
+            mouse._handleMouseWheel(mouseevent(
+                'mousewheel', { clientX: 18, clientY: 40,
+                                deltaX: 4, deltaY: 0, deltaMode: 0 }));
+
+            // threshold is 10
+            expect(mouse._accumulatedWheelDeltaX).to.be.equal(8);
+
+            this.clock.tick(10);
+            mouse._handleMouseWheel(mouseevent(
+                'mousewheel', { clientX: 18, clientY: 40,
+                                deltaX: 4, deltaY: 0, deltaMode: 0 }));
+
+            expect(mouse.onmousebutton).to.have.callCount(2); // mouse down and up
+
+            this.clock.tick(10);
+            mouse._handleMouseWheel(mouseevent(
+                'mousewheel', { clientX: 18, clientY: 40,
+                                deltaX: 4, deltaY: 9, deltaMode: 0 }));
+
+            expect(mouse._accumulatedWheelDeltaX).to.be.equal(4);
+            expect(mouse._accumulatedWheelDeltaY).to.be.equal(9);
+
+            expect(mouse.onmousebutton).to.have.callCount(2); // still
+        });
+
+        it('should not accumulate large wheel events', function () {
+            const mouse = new Mouse(target);
+            mouse.onmousebutton = sinon.spy();
+
+            mouse._handleMouseWheel(mouseevent(
+                'mousewheel', { clientX: 18, clientY: 40,
+                                deltaX: 11, deltaY: 0, deltaMode: 0 }));
+            this.clock.tick(10);
+            mouse._handleMouseWheel(mouseevent(
+                'mousewheel', { clientX: 18, clientY: 40,
+                                deltaX: 0, deltaY: 70, deltaMode: 0 }));
+            this.clock.tick(10);
+            mouse._handleMouseWheel(mouseevent(
+                'mousewheel', { clientX: 18, clientY: 40,
+                                deltaX: 400, deltaY: 400, deltaMode: 0 }));
+
+            expect(mouse.onmousebutton).to.have.callCount(8); // mouse down and up
+        });
+
+        it('should send even small wheel events after a timeout', function () {
+            const mouse = new Mouse(target);
+            mouse.onmousebutton = sinon.spy();
+
+            mouse._handleMouseWheel(mouseevent(
+                'mousewheel', { clientX: 18, clientY: 40,
+                                deltaX: 1, deltaY: 0, deltaMode: 0 }));
+            this.clock.tick(51); // timeout on 50 ms
+
+            expect(mouse.onmousebutton).to.have.callCount(2); // mouse down and up
+        });
+
+        it('should account for non-zero deltaMode', function () {
+            const mouse = new Mouse(target);
+            mouse.onmousebutton = sinon.spy();
+
+            mouse._handleMouseWheel(mouseevent(
+                'mousewheel', { clientX: 18, clientY: 40,
+                                deltaX: 0, deltaY: 2, deltaMode: 1 }));
+
+            this.clock.tick(10);
+
+            mouse._handleMouseWheel(mouseevent(
+                'mousewheel', { clientX: 18, clientY: 40,
+                                deltaX: 1, deltaY: 0, deltaMode: 2 }));
+
+            expect(mouse.onmousebutton).to.have.callCount(4); // mouse down and up
+        });
+    });
+
+});

kasmweb/tests/test.util.js

@@ -0,0 +1,69 @@
+/* eslint-disable no-console */
+const expect = chai.expect;
+
+import * as Log from '../core/util/logging.js';
+
+describe('Utils', function () {
+    "use strict";
+
+    describe('logging functions', function () {
+        beforeEach(function () {
+            sinon.spy(console, 'log');
+            sinon.spy(console, 'debug');
+            sinon.spy(console, 'warn');
+            sinon.spy(console, 'error');
+            sinon.spy(console, 'info');
+        });
+
+        afterEach(function () {
+            console.log.restore();
+            console.debug.restore();
+            console.warn.restore();
+            console.error.restore();
+            console.info.restore();
+            Log.init_logging();
+        });
+
+        it('should use noop for levels lower than the min level', function () {
+            Log.init_logging('warn');
+            Log.Debug('hi');
+            Log.Info('hello');
+            expect(console.log).to.not.have.been.called;
+        });
+
+        it('should use console.debug for Debug', function () {
+            Log.init_logging('debug');
+            Log.Debug('dbg');
+            expect(console.debug).to.have.been.calledWith('dbg');
+        });
+
+        it('should use console.info for Info', function () {
+            Log.init_logging('debug');
+            Log.Info('inf');
+            expect(console.info).to.have.been.calledWith('inf');
+        });
+
+        it('should use console.warn for Warn', function () {
+            Log.init_logging('warn');
+            Log.Warn('wrn');
+            expect(console.warn).to.have.been.called;
+            expect(console.warn).to.have.been.calledWith('wrn');
+        });
+
+        it('should use console.error for Error', function () {
+            Log.init_logging('error');
+            Log.Error('err');
+            expect(console.error).to.have.been.called;
+            expect(console.error).to.have.been.calledWith('err');
+        });
+    });
+
+    // TODO(directxman12): test the conf_default and conf_defaults methods
+    // TODO(directxman12): test decodeUTF8
+    // TODO(directxman12): test the event methods (addEvent, removeEvent, stopEvent)
+    // TODO(directxman12): figure out a good way to test getPosition and getEventPosition
+    // TODO(directxman12): figure out how to test the browser detection functions properly
+    //                     (we can't really test them against the browsers, except for Gecko
+    //                     via PhantomJS, the default test driver)
+});
+/* eslint-enable no-console */

kasmweb/tests/test.websock.js

@@ -0,0 +1,441 @@
+const expect = chai.expect;
+
+import Websock from '../core/websock.js';
+import FakeWebSocket from './fake.websocket.js';
+
+describe('Websock', function () {
+    "use strict";
+
+    describe('Queue methods', function () {
+        let sock;
+        const RQ_TEMPLATE = new Uint8Array([0, 1, 2, 3, 4, 5, 6, 7]);
+
+        beforeEach(function () {
+            sock = new Websock();
+            // skip init
+            sock._allocate_buffers();
+            sock._rQ.set(RQ_TEMPLATE);
+            sock._rQlen = RQ_TEMPLATE.length;
+        });
+        describe('rQlen', function () {
+            it('should return the length of the receive queue', function () {
+                sock.rQi = 0;
+
+                expect(sock.rQlen).to.equal(RQ_TEMPLATE.length);
+            });
+
+            it("should return the proper length if we read some from the receive queue", function () {
+                sock.rQi = 1;
+
+                expect(sock.rQlen).to.equal(RQ_TEMPLATE.length - 1);
+            });
+        });
+
+        describe('rQpeek8', function () {
+            it('should peek at the next byte without poping it off the queue', function () {
+                const bef_len = sock.rQlen;
+                const peek = sock.rQpeek8();
+                expect(sock.rQpeek8()).to.equal(peek);
+                expect(sock.rQlen).to.equal(bef_len);
+            });
+        });
+
+        describe('rQshift8()', function () {
+            it('should pop a single byte from the receive queue', function () {
+                const peek = sock.rQpeek8();
+                const bef_len = sock.rQlen;
+                expect(sock.rQshift8()).to.equal(peek);
+                expect(sock.rQlen).to.equal(bef_len - 1);
+            });
+        });
+
+        describe('rQshift16()', function () {
+            it('should pop two bytes from the receive queue and return a single number', function () {
+                const bef_len = sock.rQlen;
+                const expected = (RQ_TEMPLATE[0] << 8) + RQ_TEMPLATE[1];
+                expect(sock.rQshift16()).to.equal(expected);
+                expect(sock.rQlen).to.equal(bef_len - 2);
+            });
+        });
+
+        describe('rQshift32()', function () {
+            it('should pop four bytes from the receive queue and return a single number', function () {
+                const bef_len = sock.rQlen;
+                const expected = (RQ_TEMPLATE[0] << 24) +
+                               (RQ_TEMPLATE[1] << 16) +
+                               (RQ_TEMPLATE[2] << 8) +
+                               RQ_TEMPLATE[3];
+                expect(sock.rQshift32()).to.equal(expected);
+                expect(sock.rQlen).to.equal(bef_len - 4);
+            });
+        });
+
+        describe('rQshiftStr', function () {
+            it('should shift the given number of bytes off of the receive queue and return a string', function () {
+                const bef_len = sock.rQlen;
+                const bef_rQi = sock.rQi;
+                const shifted = sock.rQshiftStr(3);
+                expect(shifted).to.be.a('string');
+                expect(shifted).to.equal(String.fromCharCode.apply(null, Array.prototype.slice.call(new Uint8Array(RQ_TEMPLATE.buffer, bef_rQi, 3))));
+                expect(sock.rQlen).to.equal(bef_len - 3);
+            });
+
+            it('should shift the entire rest of the queue off if no length is given', function () {
+                sock.rQshiftStr();
+                expect(sock.rQlen).to.equal(0);
+            });
+
+            it('should be able to handle very large strings', function () {
+                const BIG_LEN = 500000;
+                const RQ_BIG = new Uint8Array(BIG_LEN);
+                let expected = "";
+                let letterCode = 'a'.charCodeAt(0);
+                for (let i = 0; i < BIG_LEN; i++) {
+                    RQ_BIG[i] = letterCode;
+                    expected += String.fromCharCode(letterCode);
+
+                    if (letterCode < 'z'.charCodeAt(0)) {
+                        letterCode++;
+                    } else {
+                        letterCode = 'a'.charCodeAt(0);
+                    }
+                }
+                sock._rQ.set(RQ_BIG);
+                sock._rQlen = RQ_BIG.length;
+
+                const shifted = sock.rQshiftStr();
+
+                expect(shifted).to.be.equal(expected);
+                expect(sock.rQlen).to.equal(0);
+            });
+        });
+
+        describe('rQshiftBytes', function () {
+            it('should shift the given number of bytes of the receive queue and return an array', function () {
+                const bef_len = sock.rQlen;
+                const bef_rQi = sock.rQi;
+                const shifted = sock.rQshiftBytes(3);
+                expect(shifted).to.be.an.instanceof(Uint8Array);
+                expect(shifted).to.array.equal(new Uint8Array(RQ_TEMPLATE.buffer, bef_rQi, 3));
+                expect(sock.rQlen).to.equal(bef_len - 3);
+            });
+
+            it('should shift the entire rest of the queue off if no length is given', function () {
+                sock.rQshiftBytes();
+                expect(sock.rQlen).to.equal(0);
+            });
+        });
+
+        describe('rQslice', function () {
+            beforeEach(function () {
+                sock.rQi = 0;
+            });
+
+            it('should not modify the receive queue', function () {
+                const bef_len = sock.rQlen;
+                sock.rQslice(0, 2);
+                expect(sock.rQlen).to.equal(bef_len);
+            });
+
+            it('should return an array containing the given slice of the receive queue', function () {
+                const sl = sock.rQslice(0, 2);
+                expect(sl).to.be.an.instanceof(Uint8Array);
+                expect(sl).to.array.equal(new Uint8Array(RQ_TEMPLATE.buffer, 0, 2));
+            });
+
+            it('should use the rest of the receive queue if no end is given', function () {
+                const sl = sock.rQslice(1);
+                expect(sl).to.have.length(RQ_TEMPLATE.length - 1);
+                expect(sl).to.array.equal(new Uint8Array(RQ_TEMPLATE.buffer, 1));
+            });
+
+            it('should take the current rQi in to account', function () {
+                sock.rQi = 1;
+                expect(sock.rQslice(0, 2)).to.array.equal(new Uint8Array(RQ_TEMPLATE.buffer, 1, 2));
+            });
+        });
+
+        describe('rQwait', function () {
+            beforeEach(function () {
+                sock.rQi = 0;
+            });
+
+            it('should return true if there are not enough bytes in the receive queue', function () {
+                expect(sock.rQwait('hi', RQ_TEMPLATE.length + 1)).to.be.true;
+            });
+
+            it('should return false if there are enough bytes in the receive queue', function () {
+                expect(sock.rQwait('hi', RQ_TEMPLATE.length)).to.be.false;
+            });
+
+            it('should return true and reduce rQi by "goback" if there are not enough bytes', function () {
+                sock.rQi = 5;
+                expect(sock.rQwait('hi', RQ_TEMPLATE.length, 4)).to.be.true;
+                expect(sock.rQi).to.equal(1);
+            });
+
+            it('should raise an error if we try to go back more than possible', function () {
+                sock.rQi = 5;
+                expect(() => sock.rQwait('hi', RQ_TEMPLATE.length, 6)).to.throw(Error);
+            });
+
+            it('should not reduce rQi if there are enough bytes', function () {
+                sock.rQi = 5;
+                sock.rQwait('hi', 1, 6);
+                expect(sock.rQi).to.equal(5);
+            });
+        });
+
+        describe('flush', function () {
+            beforeEach(function () {
+                sock._websocket = {
+                    send: sinon.spy()
+                };
+            });
+
+            it('should actually send on the websocket', function () {
+                sock._websocket.bufferedAmount = 8;
+                sock._websocket.readyState = WebSocket.OPEN;
+                sock._sQ = new Uint8Array([1, 2, 3]);
+                sock._sQlen = 3;
+                const encoded = sock._encode_message();
+
+                sock.flush();
+                expect(sock._websocket.send).to.have.been.calledOnce;
+                expect(sock._websocket.send).to.have.been.calledWith(encoded);
+            });
+
+            it('should not call send if we do not have anything queued up', function () {
+                sock._sQlen = 0;
+                sock._websocket.bufferedAmount = 8;
+
+                sock.flush();
+
+                expect(sock._websocket.send).not.to.have.been.called;
+            });
+        });
+
+        describe('send', function () {
+            beforeEach(function () {
+                sock.flush = sinon.spy();
+            });
+
+            it('should add to the send queue', function () {
+                sock.send([1, 2, 3]);
+                const sq = sock.sQ;
+                expect(new Uint8Array(sq.buffer, sock._sQlen - 3, 3)).to.array.equal(new Uint8Array([1, 2, 3]));
+            });
+
+            it('should call flush', function () {
+                sock.send([1, 2, 3]);
+                expect(sock.flush).to.have.been.calledOnce;
+            });
+        });
+
+        describe('send_string', function () {
+            beforeEach(function () {
+                sock.send = sinon.spy();
+            });
+
+            it('should call send after converting the string to an array', function () {
+                sock.send_string("\x01\x02\x03");
+                expect(sock.send).to.have.been.calledWith([1, 2, 3]);
+            });
+        });
+    });
+
+    describe('lifecycle methods', function () {
+        let old_WS;
+        before(function () {
+            old_WS = WebSocket;
+        });
+
+        let sock;
+        beforeEach(function () {
+            sock = new Websock();
+            // eslint-disable-next-line no-global-assign
+            WebSocket = sinon.spy();
+            WebSocket.OPEN = old_WS.OPEN;
+            WebSocket.CONNECTING = old_WS.CONNECTING;
+            WebSocket.CLOSING = old_WS.CLOSING;
+            WebSocket.CLOSED = old_WS.CLOSED;
+
+            WebSocket.prototype.binaryType = 'arraybuffer';
+        });
+
+        describe('opening', function () {
+            it('should pick the correct protocols if none are given', function () {
+
+            });
+
+            it('should open the actual websocket', function () {
+                sock.open('ws://localhost:8675', 'binary');
+                expect(WebSocket).to.have.been.calledWith('ws://localhost:8675', 'binary');
+            });
+
+            // it('should initialize the event handlers')?
+        });
+
+        describe('closing', function () {
+            beforeEach(function () {
+                sock.open('ws://');
+                sock._websocket.close = sinon.spy();
+            });
+
+            it('should close the actual websocket if it is open', function () {
+                sock._websocket.readyState = WebSocket.OPEN;
+                sock.close();
+                expect(sock._websocket.close).to.have.been.calledOnce;
+            });
+
+            it('should close the actual websocket if it is connecting', function () {
+                sock._websocket.readyState = WebSocket.CONNECTING;
+                sock.close();
+                expect(sock._websocket.close).to.have.been.calledOnce;
+            });
+
+            it('should not try to close the actual websocket if closing', function () {
+                sock._websocket.readyState = WebSocket.CLOSING;
+                sock.close();
+                expect(sock._websocket.close).not.to.have.been.called;
+            });
+
+            it('should not try to close the actual websocket if closed', function () {
+                sock._websocket.readyState = WebSocket.CLOSED;
+                sock.close();
+                expect(sock._websocket.close).not.to.have.been.called;
+            });
+
+            it('should reset onmessage to not call _recv_message', function () {
+                sinon.spy(sock, '_recv_message');
+                sock.close();
+                sock._websocket.onmessage(null);
+                try {
+                    expect(sock._recv_message).not.to.have.been.called;
+                } finally {
+                    sock._recv_message.restore();
+                }
+            });
+        });
+
+        describe('event handlers', function () {
+            beforeEach(function () {
+                sock._recv_message = sinon.spy();
+                sock.on('open', sinon.spy());
+                sock.on('close', sinon.spy());
+                sock.on('error', sinon.spy());
+                sock.open('ws://');
+            });
+
+            it('should call _recv_message on a message', function () {
+                sock._websocket.onmessage(null);
+                expect(sock._recv_message).to.have.been.calledOnce;
+            });
+
+            it('should call the open event handler on opening', function () {
+                sock._websocket.onopen();
+                expect(sock._eventHandlers.open).to.have.been.calledOnce;
+            });
+
+            it('should call the close event handler on closing', function () {
+                sock._websocket.onclose();
+                expect(sock._eventHandlers.close).to.have.been.calledOnce;
+            });
+
+            it('should call the error event handler on error', function () {
+                sock._websocket.onerror();
+                expect(sock._eventHandlers.error).to.have.been.calledOnce;
+            });
+        });
+
+        after(function () {
+            // eslint-disable-next-line no-global-assign
+            WebSocket = old_WS;
+        });
+    });
+
+    describe('WebSocket Receiving', function () {
+        let sock;
+        beforeEach(function () {
+            sock = new Websock();
+            sock._allocate_buffers();
+        });
+
+        it('should support adding binary Uint8Array data to the receive queue', function () {
+            const msg = { data: new Uint8Array([1, 2, 3]) };
+            sock._mode = 'binary';
+            sock._recv_message(msg);
+            expect(sock.rQshiftStr(3)).to.equal('\x01\x02\x03');
+        });
+
+        it('should call the message event handler if present', function () {
+            sock._eventHandlers.message = sinon.spy();
+            const msg = { data: new Uint8Array([1, 2, 3]).buffer };
+            sock._mode = 'binary';
+            sock._recv_message(msg);
+            expect(sock._eventHandlers.message).to.have.been.calledOnce;
+        });
+
+        it('should not call the message event handler if there is nothing in the receive queue', function () {
+            sock._eventHandlers.message = sinon.spy();
+            const msg = { data: new Uint8Array([]).buffer };
+            sock._mode = 'binary';
+            sock._recv_message(msg);
+            expect(sock._eventHandlers.message).not.to.have.been.called;
+        });
+
+        it('should compact the receive queue', function () {
+            // NB(sross): while this is an internal implementation detail, it's important to
+            //            test, otherwise the receive queue could become very large very quickly
+            sock._rQ = new Uint8Array([0, 1, 2, 3, 4, 5, 0, 0, 0, 0]);
+            sock._rQlen = 6;
+            sock.rQi = 6;
+            sock._rQmax = 3;
+            const msg = { data: new Uint8Array([1, 2, 3]).buffer };
+            sock._mode = 'binary';
+            sock._recv_message(msg);
+            expect(sock._rQlen).to.equal(3);
+            expect(sock.rQi).to.equal(0);
+        });
+
+        it('should automatically resize the receive queue if the incoming message is too large', function () {
+            sock._rQ = new Uint8Array(20);
+            sock._rQlen = 0;
+            sock.rQi = 0;
+            sock._rQbufferSize = 20;
+            sock._rQmax = 2;
+            const msg = { data: new Uint8Array(30).buffer };
+            sock._mode = 'binary';
+            sock._recv_message(msg);
+            expect(sock._rQlen).to.equal(30);
+            expect(sock.rQi).to.equal(0);
+            expect(sock._rQ.length).to.equal(240);  // keep the invariant that rQbufferSize / 8 >= rQlen
+        });
+    });
+
+    describe('Data encoding', function () {
+        before(function () { FakeWebSocket.replace(); });
+        after(function () { FakeWebSocket.restore(); });
+
+        describe('as binary data', function () {
+            let sock;
+            beforeEach(function () {
+                sock = new Websock();
+                sock.open('ws://', 'binary');
+                sock._websocket._open();
+            });
+
+            it('should only send the send queue up to the send queue length', function () {
+                sock._sQ = new Uint8Array([1, 2, 3, 4, 5]);
+                sock._sQlen = 3;
+                const res = sock._encode_message();
+                expect(res).to.array.equal(new Uint8Array([1, 2, 3]));
+            });
+
+            it('should properly pass the encoded data off to the actual WebSocket', function () {
+                sock.send([1, 2, 3]);
+                expect(sock._websocket._get_sent_data()).to.array.equal(new Uint8Array([1, 2, 3]));
+            });
+        });
+    });
+});

kasmweb/tests/test.webutil.js

@@ -0,0 +1,184 @@
+/* jshint expr: true */
+
+const expect = chai.expect;
+
+import * as WebUtil from '../app/webutil.js';
+
+describe('WebUtil', function () {
+    "use strict";
+
+    describe('settings', function () {
+
+        describe('localStorage', function () {
+            let chrome = window.chrome;
+            before(function () {
+                chrome = window.chrome;
+                window.chrome = null;
+            });
+            after(function () {
+                window.chrome = chrome;
+            });
+
+            let origLocalStorage;
+            beforeEach(function () {
+                origLocalStorage = Object.getOwnPropertyDescriptor(window, "localStorage");
+                if (origLocalStorage === undefined) {
+                    // Object.getOwnPropertyDescriptor() doesn't work
+                    // properly in any version of IE
+                    this.skip();
+                }
+
+                Object.defineProperty(window, "localStorage", {value: {}});
+                if (window.localStorage.setItem !== undefined) {
+                    // Object.defineProperty() doesn't work properly in old
+                    // versions of Chrome
+                    this.skip();
+                }
+
+                window.localStorage.setItem = sinon.stub();
+                window.localStorage.getItem = sinon.stub();
+                window.localStorage.removeItem = sinon.stub();
+
+                WebUtil.initSettings();
+            });
+            afterEach(function () {
+                Object.defineProperty(window, "localStorage", origLocalStorage);
+            });
+
+            describe('writeSetting', function () {
+                it('should save the setting value to local storage', function () {
+                    WebUtil.writeSetting('test', 'value');
+                    expect(window.localStorage.setItem).to.have.been.calledWithExactly('test', 'value');
+                    expect(WebUtil.readSetting('test')).to.equal('value');
+                });
+            });
+
+            describe('setSetting', function () {
+                it('should update the setting but not save to local storage', function () {
+                    WebUtil.setSetting('test', 'value');
+                    expect(window.localStorage.setItem).to.not.have.been.called;
+                    expect(WebUtil.readSetting('test')).to.equal('value');
+                });
+            });
+
+            describe('readSetting', function () {
+                it('should read the setting value from local storage', function () {
+                    localStorage.getItem.returns('value');
+                    expect(WebUtil.readSetting('test')).to.equal('value');
+                });
+
+                it('should return the default value when not in local storage', function () {
+                    expect(WebUtil.readSetting('test', 'default')).to.equal('default');
+                });
+
+                it('should return the cached value even if local storage changed', function () {
+                    localStorage.getItem.returns('value');
+                    expect(WebUtil.readSetting('test')).to.equal('value');
+                    localStorage.getItem.returns('something else');
+                    expect(WebUtil.readSetting('test')).to.equal('value');
+                });
+
+                it('should cache the value even if it is not initially in local storage', function () {
+                    expect(WebUtil.readSetting('test')).to.be.null;
+                    localStorage.getItem.returns('value');
+                    expect(WebUtil.readSetting('test')).to.be.null;
+                });
+
+                it('should return the default value always if the first read was not in local storage', function () {
+                    expect(WebUtil.readSetting('test', 'default')).to.equal('default');
+                    localStorage.getItem.returns('value');
+                    expect(WebUtil.readSetting('test', 'another default')).to.equal('another default');
+                });
+
+                it('should return the last local written value', function () {
+                    localStorage.getItem.returns('value');
+                    expect(WebUtil.readSetting('test')).to.equal('value');
+                    WebUtil.writeSetting('test', 'something else');
+                    expect(WebUtil.readSetting('test')).to.equal('something else');
+                });
+            });
+
+            // this doesn't appear to be used anywhere
+            describe('eraseSetting', function () {
+                it('should remove the setting from local storage', function () {
+                    WebUtil.eraseSetting('test');
+                    expect(window.localStorage.removeItem).to.have.been.calledWithExactly('test');
+                });
+            });
+        });
+
+        describe('chrome.storage', function () {
+            let chrome = window.chrome;
+            let settings = {};
+            before(function () {
+                chrome = window.chrome;
+                window.chrome = {
+                    storage: {
+                        sync: {
+                            get(cb) { cb(settings); },
+                            set() {},
+                            remove() {}
+                        }
+                    }
+                };
+            });
+            after(function () {
+                window.chrome = chrome;
+            });
+
+            const csSandbox = sinon.createSandbox();
+
+            beforeEach(function () {
+                settings = {};
+                csSandbox.spy(window.chrome.storage.sync, 'set');
+                csSandbox.spy(window.chrome.storage.sync, 'remove');
+                WebUtil.initSettings();
+            });
+            afterEach(function () {
+                csSandbox.restore();
+            });
+
+            describe('writeSetting', function () {
+                it('should save the setting value to chrome storage', function () {
+                    WebUtil.writeSetting('test', 'value');
+                    expect(window.chrome.storage.sync.set).to.have.been.calledWithExactly(sinon.match({ test: 'value' }));
+                    expect(WebUtil.readSetting('test')).to.equal('value');
+                });
+            });
+
+            describe('setSetting', function () {
+                it('should update the setting but not save to chrome storage', function () {
+                    WebUtil.setSetting('test', 'value');
+                    expect(window.chrome.storage.sync.set).to.not.have.been.called;
+                    expect(WebUtil.readSetting('test')).to.equal('value');
+                });
+            });
+
+            describe('readSetting', function () {
+                it('should read the setting value from chrome storage', function () {
+                    settings.test = 'value';
+                    expect(WebUtil.readSetting('test')).to.equal('value');
+                });
+
+                it('should return the default value when not in chrome storage', function () {
+                    expect(WebUtil.readSetting('test', 'default')).to.equal('default');
+                });
+
+                it('should return the last local written value', function () {
+                    settings.test = 'value';
+                    expect(WebUtil.readSetting('test')).to.equal('value');
+                    WebUtil.writeSetting('test', 'something else');
+                    expect(WebUtil.readSetting('test')).to.equal('something else');
+                });
+            });
+
+            // this doesn't appear to be used anywhere
+            describe('eraseSetting', function () {
+                it('should remove the setting from chrome storage', function () {
+                    WebUtil.eraseSetting('test');
+                    expect(window.chrome.storage.sync.remove).to.have.been.calledWithExactly('test');
+                });
+            });
+        });
+    });
+});

kasmweb/tests/vnc_playback.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>VNC Playback</title>
+        <!-- promise polyfills promises for IE11 -->
+        <script src="../vendor/promise.js"></script>
+        <!-- ES2015/ES6 modules polyfill -->
+        <script type="module">
+            window._noVNC_has_module_support = true;
+        </script>
+        <script>
+            window.addEventListener("load", function() {
+                if (window._noVNC_has_module_support) return;
+                var loader = document.createElement("script");
+                loader.src = "../vendor/browser-es-module-loader/dist/browser-es-module-loader.js";
+                document.head.appendChild(loader);
+            });
+        </script>
+        <!-- actual script modules -->
+        <script type="module" src="./playback-ui.js"></script>
+    </head>
+    <body>
+
+        Iterations: <input id='iterations' style='width:50'>&nbsp;
+        Perftest:<input type='radio' id='mode1' name='mode' checked>&nbsp;
+        Realtime:<input type='radio' id='mode2' name='mode'>&nbsp;&nbsp;
+
+        <input id='startButton' type='button' value='Start' style='width:100px' disabled>&nbsp;
+
+        <br><br>
+
+        Results:<br>
+        <textarea id="messages" style="font-size: 9;" cols=80 rows=25></textarea>
+
+        <br><br>
+
+        <div id="VNC_screen">
+            <div id="VNC_status_bar" class="VNC_status_bar" style="margin-top: 0px;">
+                <table border=0 width=100%><tr>
+                    <td><div id="VNC_status">Loading</div></td>
+                </tr></table>
+            </div>
+        </div>
+
+    </body>
+
+    <script type="module" src="./playback-ui.js">
+</html>