diff --git a/kasmweb/tests/test.copyrect.js b/kasmweb/tests/test.copyrect.js
new file mode 100644
index 0000000..5a2b73b
--- /dev/null
+++ b/kasmweb/tests/test.copyrect.js
@@ -0,0 +1,58 @@
+const expect = chai.expect;
+
+import Websock from '../core/websock.js';
+import Display from '../core/display.js';
+
+import CopyRectDecoder from '../core/decoders/copyrect.js';
+
+import FakeWebSocket from './fake.websocket.js';
+
+function testDecodeRect(decoder, x, y, width, height, data, display, depth) {
+    let sock;
+
+    sock = new Websock;
+    sock.open("ws://example.com");
+
+    sock.on('message', () => {
+        decoder.decodeRect(x, y, width, height, sock, display, depth);
+    });
+
+    sock._websocket._receiveData(new Uint8Array(data));
+
+    display.flip();
+}
+
+describe('CopyRect Decoder', function () {
+    let decoder;
+    let display;
+
+    before(FakeWebSocket.replace);
+    after(FakeWebSocket.restore);
+
+    beforeEach(function () {
+        decoder = new CopyRectDecoder();
+        display = new Display(document.createElement('canvas'));
+        display.resize(4, 4);
+    });
+
+    it('should handle the CopyRect encoding', function () {
+        let targetData = 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
+        ]);
+
+        // seed some initial data to copy
+        display.blitRgbxImage(0, 0, 4, 2, new Uint8Array(targetData.slice(0, 32)), 0);
+
+        testDecodeRect(decoder, 0, 2, 2, 2,
+                       [0x00, 0x02, 0x00, 0x00],
+                       display, 24);
+        testDecodeRect(decoder, 2, 2, 2, 2,
+                       [0x00, 0x00, 0x00, 0x00],
+                       display, 24);
+
+        expect(display).to.have.displayed(targetData);
+    });
+});
diff --git a/kasmweb/tests/test.hextile.js b/kasmweb/tests/test.hextile.js
new file mode 100644
index 0000000..406b062
--- /dev/null
+++ b/kasmweb/tests/test.hextile.js
@@ -0,0 +1,208 @@
+const expect = chai.expect;
+
+import Websock from '../core/websock.js';
+import Display from '../core/display.js';
+
+import HextileDecoder from '../core/decoders/hextile.js';
+
+import FakeWebSocket from './fake.websocket.js';
+
+function testDecodeRect(decoder, x, y, width, height, data, display, depth) {
+    let sock;
+
+    sock = new Websock;
+    sock.open("ws://example.com");
+
+    sock.on('message', () => {
+        decoder.decodeRect(x, y, width, height, sock, display, depth);
+    });
+
+    sock._websocket._receiveData(new Uint8Array(data));
+
+    display.flip();
+}
+
+function push32(arr, num) {
+    arr.push((num >> 24) & 0xFF,
+             (num >> 16) & 0xFF,
+             (num >>  8) & 0xFF,
+             num & 0xFF);
+}
+
+describe('Hextile Decoder', function () {
+    let decoder;
+    let display;
+
+    before(FakeWebSocket.replace);
+    after(FakeWebSocket.restore);
+
+    beforeEach(function () {
+        decoder = new HextileDecoder();
+        display = new Display(document.createElement('canvas'));
+        display.resize(4, 4);
+    });
+
+    it('should handle a tile with fg, bg specified, normal subrects', function () {
+        let data = [];
+        data.push(0x02 | 0x04 | 0x08); // bg spec, fg spec, anysubrects
+        push32(data, 0xff00ff); // becomes 00ff00ff --> #00FF00 bg color
+        data.push(0xff); // becomes ff0000ff --> #0000FF fg color
+        data.push(0x00);
+        data.push(0x00);
+        data.push(0xff);
+        data.push(2); // 2 subrects
+        data.push(0); // x: 0, y: 0
+        data.push(1 | (1 << 4)); // width: 2, height: 2
+        data.push(2 | (2 << 4)); // x: 2, y: 2
+        data.push(1 | (1 << 4)); // width: 2, height: 2
+
+        testDecodeRect(decoder, 0, 0, 4, 4, data, display, 24);
+
+        let targetData = 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
+        ]);
+
+        expect(display).to.have.displayed(targetData);
+    });
+
+    it('should handle a raw tile', function () {
+        let targetData = 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
+        ]);
+
+        let data = [];
+        data.push(0x01); // raw
+        for (let i = 0; i < targetData.length; i += 4) {
+            data.push(targetData[i + 2]);
+            data.push(targetData[i + 1]);
+            data.push(targetData[i]);
+            data.push(targetData[i + 3]);
+        }
+
+        testDecodeRect(decoder, 0, 0, 4, 4, data, display, 24);
+
+        expect(display).to.have.displayed(targetData);
+    });
+
+    it('should handle a tile with only bg specified (solid bg)', function () {
+        let data = [];
+        data.push(0x02);
+        push32(data, 0xff00ff); // becomes 00ff00ff --> #00FF00 bg color
+
+        testDecodeRect(decoder, 0, 0, 4, 4, data, display, 24);
+
+        let expected = [];
+        for (let i = 0; i < 16; i++) {
+            push32(expected, 0xff00ff);
+        }
+
+        expect(display).to.have.displayed(new Uint8Array(expected));
+    });
+
+    it('should handle a tile with only bg specified and an empty frame afterwards', function () {
+        // set the width so we can have two tiles
+        display.resize(8, 4);
+
+        let data = [];
+
+        // send a bg frame
+        data.push(0x02);
+        push32(data, 0xff00ff); // becomes 00ff00ff --> #00FF00 bg color
+
+        // send an empty frame
+        data.push(0x00);
+
+        testDecodeRect(decoder, 0, 0, 32, 4, data, display, 24);
+
+        let expected = [];
+        for (let i = 0; i < 16; i++) {
+            push32(expected, 0xff00ff);     // rect 1: solid
+        }
+        for (let i = 0; i < 16; i++) {
+            push32(expected, 0xff00ff);    // rect 2: same bkground color
+        }
+
+        expect(display).to.have.displayed(new Uint8Array(expected));
+    });
+
+    it('should handle a tile with bg and coloured subrects', function () {
+        let data = [];
+        data.push(0x02 | 0x08 | 0x10); // bg spec, anysubrects, colouredsubrects
+        push32(data, 0xff00ff); // becomes 00ff00ff --> #00FF00 bg color
+        data.push(2); // 2 subrects
+        data.push(0xff); // becomes ff0000ff --> #0000FF fg color
+        data.push(0x00);
+        data.push(0x00);
+        data.push(0xff);
+        data.push(0); // x: 0, y: 0
+        data.push(1 | (1 << 4)); // width: 2, height: 2
+        data.push(0xff); // becomes ff0000ff --> #0000FF fg color
+        data.push(0x00);
+        data.push(0x00);
+        data.push(0xff);
+        data.push(2 | (2 << 4)); // x: 2, y: 2
+        data.push(1 | (1 << 4)); // width: 2, height: 2
+
+        testDecodeRect(decoder, 0, 0, 4, 4, data, display, 24);
+
+        let targetData = 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
+        ]);
+
+        expect(display).to.have.displayed(targetData);
+    });
+
+    it('should carry over fg and bg colors from the previous tile if not specified', function () {
+        display.resize(4, 17);
+
+        let data = [];
+        data.push(0x02 | 0x04 | 0x08); // bg spec, fg spec, anysubrects
+        push32(data, 0xff00ff); // becomes 00ff00ff --> #00FF00 bg color
+        data.push(0xff); // becomes ff0000ff --> #0000FF fg color
+        data.push(0x00);
+        data.push(0x00);
+        data.push(0xff);
+        data.push(8); // 8 subrects
+        for (let i = 0; i < 4; i++) {
+            data.push((0 << 4) | (i * 4)); // x: 0, y: i*4
+            data.push(1 | (1 << 4)); // width: 2, height: 2
+            data.push((2 << 4) | (i * 4 + 2)); // x: 2, y: i * 4 + 2
+            data.push(1 | (1 << 4)); // width: 2, height: 2
+        }
+        data.push(0x08); // anysubrects
+        data.push(1); // 1 subrect
+        data.push(0); // x: 0, y: 0
+        data.push(1 | (1 << 4)); // width: 2, height: 2
+
+        testDecodeRect(decoder, 0, 0, 4, 17, data, display, 24);
+
+        let targetData = [
+            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
+        ];
+
+        let expected = [];
+        for (let i = 0; i < 4; i++) {
+            expected = expected.concat(targetData);
+        }
+        expected = expected.concat(targetData.slice(0, 16));
+
+        expect(display).to.have.displayed(new Uint8Array(expected));
+    });
+
+    it('should fail on an invalid subencoding', function () {
+        let data = [45];  // an invalid subencoding
+        expect(() => testDecodeRect(decoder, 0, 0, 4, 4, data, display, 24)).to.throw();
+    });
+});
diff --git a/kasmweb/tests/test.raw.js b/kasmweb/tests/test.raw.js
new file mode 100644
index 0000000..b42e4f3
--- /dev/null
+++ b/kasmweb/tests/test.raw.js
@@ -0,0 +1,89 @@
+const expect = chai.expect;
+
+import Websock from '../core/websock.js';
+import Display from '../core/display.js';
+
+import RawDecoder from '../core/decoders/raw.js';
+
+import FakeWebSocket from './fake.websocket.js';
+
+function testDecodeRect(decoder, x, y, width, height, data, display, depth) {
+    let sock;
+
+    sock = new Websock;
+    sock.open("ws://example.com");
+
+    sock.on('message', () => {
+        decoder.decodeRect(x, y, width, height, sock, display, depth);
+    });
+
+    sock._websocket._receiveData(new Uint8Array(data));
+
+    display.flip();
+}
+
+describe('Raw Decoder', function () {
+    let decoder;
+    let display;
+
+    before(FakeWebSocket.replace);
+    after(FakeWebSocket.restore);
+
+    beforeEach(function () {
+        decoder = new RawDecoder();
+        display = new Display(document.createElement('canvas'));
+        display.resize(4, 4);
+    });
+
+    it('should handle the Raw encoding', function () {
+        testDecodeRect(decoder, 0, 0, 2, 2,
+                       [0x00, 0x00, 0xff, 0, 0x00, 0xff, 0x00, 0,
+                        0x00, 0xff, 0x00, 0, 0x00, 0x00, 0xff, 0],
+                       display, 24);
+        testDecodeRect(decoder, 2, 0, 2, 2,
+                       [0xff, 0x00, 0x00, 0, 0xff, 0x00, 0x00, 0,
+                        0xff, 0x00, 0x00, 0, 0xff, 0x00, 0x00, 0],
+                       display, 24);
+        testDecodeRect(decoder, 0, 2, 4, 1,
+                       [0xff, 0x00, 0xee, 0, 0xff, 0xee, 0x00, 0,
+                        0xff, 0xee, 0xaa, 0, 0xff, 0xee, 0xab, 0],
+                       display, 24);
+        testDecodeRect(decoder, 0, 3, 4, 1,
+                       [0xff, 0x00, 0xee, 0, 0xff, 0xee, 0x00, 0,
+                        0xff, 0xee, 0xaa, 0, 0xff, 0xee, 0xab, 0],
+                       display, 24);
+
+        let targetData = new Uint8Array([
+            0xff, 0x00, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255,
+            0x00, 0xff, 0x00, 255, 0xff, 0x00, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255,
+            0xee, 0x00, 0xff, 255, 0x00, 0xee, 0xff, 255, 0xaa, 0xee, 0xff, 255, 0xab, 0xee, 0xff, 255,
+            0xee, 0x00, 0xff, 255, 0x00, 0xee, 0xff, 255, 0xaa, 0xee, 0xff, 255, 0xab, 0xee, 0xff, 255
+        ]);
+
+        expect(display).to.have.displayed(targetData);
+    });
+
+    it('should handle the Raw encoding in low colour mode', function () {
+        testDecodeRect(decoder, 0, 0, 2, 2,
+                       [0x03, 0x03, 0x03, 0x03],
+                       display, 8);
+        testDecodeRect(decoder, 2, 0, 2, 2,
+                       [0x0c, 0x0c, 0x0c, 0x0c],
+                       display, 8);
+        testDecodeRect(decoder, 0, 2, 4, 1,
+                       [0x0c, 0x0c, 0x03, 0x03],
+                       display, 8);
+        testDecodeRect(decoder, 0, 3, 4, 1,
+                       [0x0c, 0x0c, 0x03, 0x03],
+                       display, 8);
+
+        let targetData = 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
+        ]);
+
+        expect(display).to.have.displayed(targetData);
+    });
+});
diff --git a/kasmweb/tests/test.rfb.js b/kasmweb/tests/test.rfb.js
index c93eef8..4d8c34d 100644
--- a/kasmweb/tests/test.rfb.js
+++ b/kasmweb/tests/test.rfb.js
@@ -1643,28 +1643,6 @@ describe('Remote Frame Buffer Protocol Client', function () {
         });
 
         describe('Framebuffer Update Handling', function () {
-            const targetDataArr = [
-                0xff, 0x00, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255,
-                0x00, 0xff, 0x00, 255, 0xff, 0x00, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255,
-                0xee, 0x00, 0xff, 255, 0x00, 0xee, 0xff, 255, 0xaa, 0xee, 0xff, 255, 0xab, 0xee, 0xff, 255,
-                0xee, 0x00, 0xff, 255, 0x00, 0xee, 0xff, 255, 0xaa, 0xee, 0xff, 255, 0xab, 0xee, 0xff, 255
-            ];
-            let targetData;
-
-            const targetDataCheckArr = [
-                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
-            ];
-            let targetDataCheck;
-
-            before(function () {
-                // NB(directxman12): PhantomJS 1.x doesn't implement Uint8ClampedArray
-                targetData = new Uint8Array(targetDataArr);
-                targetDataCheck = new Uint8Array(targetDataCheckArr);
-            });
-
             function sendFbuMsg(rectInfo, rectData, client, rectCnt) {
                 let data = [];
 
@@ -1733,22 +1711,6 @@ describe('Remote Frame Buffer Protocol Client', function () {
                 expect(client._fail).to.have.been.calledOnce;
             });
 
-            it('should be able to pause and resume receiving rects if not enought data', function () {
-                // seed some initial data to copy
-                client._fbWidth = 4;
-                client._fbHeight = 4;
-                client._display.resize(4, 4);
-                client._display.blitRgbxImage(0, 0, 4, 2, new Uint8Array(targetDataCheckArr.slice(0, 32)), 0);
-
-                const info = [{ x: 0, y: 2, width: 2, height: 2, encoding: 0x01},
-                              { x: 2, y: 2, width: 2, height: 2, encoding: 0x01}];
-                // data says [{ old_x: 2, old_y: 0 }, { old_x: 0, old_y: 0 }]
-                const rects = [[0, 2, 0, 0], [0, 0, 0, 0]];
-                sendFbuMsg([info[0]], [rects[0]], client, 2);
-                sendFbuMsg([info[1]], [rects[1]], client, -1);
-                expect(client._display).to.have.displayed(targetDataCheck);
-            });
-
             describe('Message Encoding Handlers', function () {
                 beforeEach(function () {
                     // a really small frame
@@ -1758,216 +1720,6 @@ describe('Remote Frame Buffer Protocol Client', function () {
                     client._display.resize(4, 4);
                 });
 
-                it('should handle the RAW encoding', function () {
-                    const info = [{ x: 0, y: 0, width: 2, height: 2, encoding: 0x00 },
-                                  { x: 2, y: 0, width: 2, height: 2, encoding: 0x00 },
-                                  { x: 0, y: 2, width: 4, height: 1, encoding: 0x00 },
-                                  { x: 0, y: 3, width: 4, height: 1, encoding: 0x00 }];
-                    // data is in bgrx
-                    const rects = [
-                        [0x00, 0x00, 0xff, 0, 0x00, 0xff, 0x00, 0, 0x00, 0xff, 0x00, 0, 0x00, 0x00, 0xff, 0],
-                        [0xff, 0x00, 0x00, 0, 0xff, 0x00, 0x00, 0, 0xff, 0x00, 0x00, 0, 0xff, 0x00, 0x00, 0],
-                        [0xff, 0x00, 0xee, 0, 0xff, 0xee, 0x00, 0, 0xff, 0xee, 0xaa, 0, 0xff, 0xee, 0xab, 0],
-                        [0xff, 0x00, 0xee, 0, 0xff, 0xee, 0x00, 0, 0xff, 0xee, 0xaa, 0, 0xff, 0xee, 0xab, 0]];
-                    sendFbuMsg(info, rects, client);
-                    expect(client._display).to.have.displayed(targetData);
-                });
-
-                it('should handle the RAW encoding in low colour mode', function () {
-                    const info = [{ x: 0, y: 0, width: 2, height: 2, encoding: 0x00 },
-                                  { x: 2, y: 0, width: 2, height: 2, encoding: 0x00 },
-                                  { x: 0, y: 2, width: 4, height: 1, encoding: 0x00 },
-                                  { x: 0, y: 3, width: 4, height: 1, encoding: 0x00 }];
-                    const rects = [
-                        [0x03, 0x03, 0x03, 0x03],
-                        [0x0c, 0x0c, 0x0c, 0x0c],
-                        [0x0c, 0x0c, 0x03, 0x03],
-                        [0x0c, 0x0c, 0x03, 0x03]];
-                    client._fbDepth = 8;
-                    sendFbuMsg(info, rects, client);
-                    expect(client._display).to.have.displayed(targetDataCheck);
-                });
-
-                it('should handle the COPYRECT encoding', function () {
-                    // seed some initial data to copy
-                    client._display.blitRgbxImage(0, 0, 4, 2, new Uint8Array(targetDataCheckArr.slice(0, 32)), 0);
-
-                    const info = [{ x: 0, y: 2, width: 2, height: 2, encoding: 0x01},
-                                  { x: 2, y: 2, width: 2, height: 2, encoding: 0x01}];
-                    // data says [{ old_x: 0, old_y: 0 }, { old_x: 0, old_y: 0 }]
-                    const rects = [[0, 2, 0, 0], [0, 0, 0, 0]];
-                    sendFbuMsg(info, rects, client);
-                    expect(client._display).to.have.displayed(targetDataCheck);
-                });
-
-                // TODO(directxman12): for encodings with subrects, test resuming on partial send?
-                // TODO(directxman12): test rre_chunk_sz (related to above about subrects)?
-
-                it('should handle the RRE encoding', function () {
-                    const info = [{ x: 0, y: 0, width: 4, height: 4, encoding: 0x02 }];
-                    const rect = [];
-                    push32(rect, 2); // 2 subrects
-                    push32(rect, 0xff00ff); // becomes 00ff00ff --> #00FF00 bg color
-                    rect.push(0xff); // becomes ff0000ff --> #0000FF color
-                    rect.push(0x00);
-                    rect.push(0x00);
-                    rect.push(0xff);
-                    push16(rect, 0); // x: 0
-                    push16(rect, 0); // y: 0
-                    push16(rect, 2); // width: 2
-                    push16(rect, 2); // height: 2
-                    rect.push(0xff); // becomes ff0000ff --> #0000FF color
-                    rect.push(0x00);
-                    rect.push(0x00);
-                    rect.push(0xff);
-                    push16(rect, 2); // x: 2
-                    push16(rect, 2); // y: 2
-                    push16(rect, 2); // width: 2
-                    push16(rect, 2); // height: 2
-                    sendFbuMsg(info, [rect], client);
-                    expect(client._display).to.have.displayed(targetDataCheck);
-                });
-
-                describe('the HEXTILE encoding handler', function () {
-                    it('should handle a tile with fg, bg specified, normal subrects', function () {
-                        const info = [{ x: 0, y: 0, width: 4, height: 4, encoding: 0x05 }];
-                        const rect = [];
-                        rect.push(0x02 | 0x04 | 0x08); // bg spec, fg spec, anysubrects
-                        push32(rect, 0xff00ff); // becomes 00ff00ff --> #00FF00 bg color
-                        rect.push(0xff); // becomes ff0000ff --> #0000FF fg color
-                        rect.push(0x00);
-                        rect.push(0x00);
-                        rect.push(0xff);
-                        rect.push(2); // 2 subrects
-                        rect.push(0); // x: 0, y: 0
-                        rect.push(1 | (1 << 4)); // width: 2, height: 2
-                        rect.push(2 | (2 << 4)); // x: 2, y: 2
-                        rect.push(1 | (1 << 4)); // width: 2, height: 2
-                        sendFbuMsg(info, [rect], client);
-                        expect(client._display).to.have.displayed(targetDataCheck);
-                    });
-
-                    it('should handle a raw tile', function () {
-                        const info = [{ x: 0, y: 0, width: 4, height: 4, encoding: 0x05 }];
-                        const rect = [];
-                        rect.push(0x01); // raw
-                        for (let i = 0; i < targetData.length; i += 4) {
-                            rect.push(targetData[i + 2]);
-                            rect.push(targetData[i + 1]);
-                            rect.push(targetData[i]);
-                            rect.push(targetData[i + 3]);
-                        }
-                        sendFbuMsg(info, [rect], client);
-                        expect(client._display).to.have.displayed(targetData);
-                    });
-
-                    it('should handle a tile with only bg specified (solid bg)', function () {
-                        const info = [{ x: 0, y: 0, width: 4, height: 4, encoding: 0x05 }];
-                        const rect = [];
-                        rect.push(0x02);
-                        push32(rect, 0xff00ff); // becomes 00ff00ff --> #00FF00 bg color
-                        sendFbuMsg(info, [rect], client);
-
-                        const expected = [];
-                        for (let i = 0; i < 16; i++) { push32(expected, 0xff00ff); }
-                        expect(client._display).to.have.displayed(new Uint8Array(expected));
-                    });
-
-                    it('should handle a tile with only bg specified and an empty frame afterwards', function () {
-                        // set the width so we can have two tiles
-                        client._fbWidth = 8;
-                        client._display.resize(8, 4);
-
-                        const info = [{ x: 0, y: 0, width: 32, height: 4, encoding: 0x05 }];
-
-                        const rect = [];
-
-                        // send a bg frame
-                        rect.push(0x02);
-                        push32(rect, 0xff00ff); // becomes 00ff00ff --> #00FF00 bg color
-
-                        // send an empty frame
-                        rect.push(0x00);
-
-                        sendFbuMsg(info, [rect], client);
-
-                        const expected = [];
-                        for (let i = 0; i < 16; i++) { push32(expected, 0xff00ff); }     // rect 1: solid
-                        for (let i = 0; i < 16; i++) { push32(expected, 0xff00ff); }    // rect 2: same bkground color
-                        expect(client._display).to.have.displayed(new Uint8Array(expected));
-                    });
-
-                    it('should handle a tile with bg and coloured subrects', function () {
-                        const info = [{ x: 0, y: 0, width: 4, height: 4, encoding: 0x05 }];
-                        const rect = [];
-                        rect.push(0x02 | 0x08 | 0x10); // bg spec, anysubrects, colouredsubrects
-                        push32(rect, 0xff00ff); // becomes 00ff00ff --> #00FF00 bg color
-                        rect.push(2); // 2 subrects
-                        rect.push(0xff); // becomes ff0000ff --> #0000FF fg color
-                        rect.push(0x00);
-                        rect.push(0x00);
-                        rect.push(0xff);
-                        rect.push(0); // x: 0, y: 0
-                        rect.push(1 | (1 << 4)); // width: 2, height: 2
-                        rect.push(0xff); // becomes ff0000ff --> #0000FF fg color
-                        rect.push(0x00);
-                        rect.push(0x00);
-                        rect.push(0xff);
-                        rect.push(2 | (2 << 4)); // x: 2, y: 2
-                        rect.push(1 | (1 << 4)); // width: 2, height: 2
-                        sendFbuMsg(info, [rect], client);
-                        expect(client._display).to.have.displayed(targetDataCheck);
-                    });
-
-                    it('should carry over fg and bg colors from the previous tile if not specified', function () {
-                        client._fbWidth = 4;
-                        client._fbHeight = 17;
-                        client._display.resize(4, 17);
-
-                        const info = [{ x: 0, y: 0, width: 4, height: 17, encoding: 0x05}];
-                        const rect = [];
-                        rect.push(0x02 | 0x04 | 0x08); // bg spec, fg spec, anysubrects
-                        push32(rect, 0xff00ff); // becomes 00ff00ff --> #00FF00 bg color
-                        rect.push(0xff); // becomes ff0000ff --> #0000FF fg color
-                        rect.push(0x00);
-                        rect.push(0x00);
-                        rect.push(0xff);
-                        rect.push(8); // 8 subrects
-                        for (let i = 0; i < 4; i++) {
-                            rect.push((0 << 4) | (i * 4)); // x: 0, y: i*4
-                            rect.push(1 | (1 << 4)); // width: 2, height: 2
-                            rect.push((2 << 4) | (i * 4 + 2)); // x: 2, y: i * 4 + 2
-                            rect.push(1 | (1 << 4)); // width: 2, height: 2
-                        }
-                        rect.push(0x08); // anysubrects
-                        rect.push(1); // 1 subrect
-                        rect.push(0); // x: 0, y: 0
-                        rect.push(1 | (1 << 4)); // width: 2, height: 2
-                        sendFbuMsg(info, [rect], client);
-
-                        let expected = [];
-                        for (let i = 0; i < 4; i++) { expected = expected.concat(targetDataCheckArr); }
-                        expected = expected.concat(targetDataCheckArr.slice(0, 16));
-                        expect(client._display).to.have.displayed(new Uint8Array(expected));
-                    });
-
-                    it('should fail on an invalid subencoding', function () {
-                        sinon.spy(client, "_fail");
-                        const info = [{ x: 0, y: 0, width: 4, height: 4, encoding: 0x05 }];
-                        const rects = [[45]];  // an invalid subencoding
-                        sendFbuMsg(info, rects, client);
-                        expect(client._fail).to.have.been.calledOnce;
-                    });
-                });
-
-                it.skip('should handle the TIGHT encoding', function () {
-                    // TODO(directxman12): test this
-                });
-
-                it.skip('should handle the TIGHT_PNG encoding', function () {
-                    // TODO(directxman12): test this
-                });
-
                 it('should handle the DesktopSize pseduo-encoding', function () {
                     sinon.spy(client._display, 'resize');
                     sendFbuMsg([{ x: 0, y: 0, width: 20, height: 50, encoding: -223 }], [[]], client);
diff --git a/kasmweb/tests/test.rre.js b/kasmweb/tests/test.rre.js
new file mode 100644
index 0000000..a24bec4
--- /dev/null
+++ b/kasmweb/tests/test.rre.js
@@ -0,0 +1,84 @@
+const expect = chai.expect;
+
+import Websock from '../core/websock.js';
+import Display from '../core/display.js';
+
+import RREDecoder from '../core/decoders/rre.js';
+
+import FakeWebSocket from './fake.websocket.js';
+
+function testDecodeRect(decoder, x, y, width, height, data, display, depth) {
+    let sock;
+
+    sock = new Websock;
+    sock.open("ws://example.com");
+
+    sock.on('message', () => {
+        decoder.decodeRect(x, y, width, height, sock, display, depth);
+    });
+
+    sock._websocket._receiveData(new Uint8Array(data));
+
+    display.flip();
+}
+
+function push16(arr, num) {
+    arr.push((num >> 8) & 0xFF,
+             num & 0xFF);
+}
+
+function push32(arr, num) {
+    arr.push((num >> 24) & 0xFF,
+             (num >> 16) & 0xFF,
+             (num >>  8) & 0xFF,
+             num & 0xFF);
+}
+
+describe('RRE Decoder', function () {
+    let decoder;
+    let display;
+
+    before(FakeWebSocket.replace);
+    after(FakeWebSocket.restore);
+
+    beforeEach(function () {
+        decoder = new RREDecoder();
+        display = new Display(document.createElement('canvas'));
+        display.resize(4, 4);
+    });
+
+    // TODO(directxman12): test rre_chunk_sz?
+
+    it('should handle the RRE encoding', function () {
+        let data = [];
+        push32(data, 2); // 2 subrects
+        push32(data, 0xff00ff); // becomes 00ff00ff --> #00FF00 bg color
+        data.push(0xff); // becomes ff0000ff --> #0000FF color
+        data.push(0x00);
+        data.push(0x00);
+        data.push(0xff);
+        push16(data, 0); // x: 0
+        push16(data, 0); // y: 0
+        push16(data, 2); // width: 2
+        push16(data, 2); // height: 2
+        data.push(0xff); // becomes ff0000ff --> #0000FF color
+        data.push(0x00);
+        data.push(0x00);
+        data.push(0xff);
+        push16(data, 2); // x: 2
+        push16(data, 2); // y: 2
+        push16(data, 2); // width: 2
+        push16(data, 2); // height: 2
+
+        testDecodeRect(decoder, 0, 0, 4, 4, data, display, 24);
+
+        let targetData = 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
+        ]);
+
+        expect(display).to.have.displayed(targetData);
+    });
+});
diff --git a/kasmweb/tests/test.tight.js b/kasmweb/tests/test.tight.js
new file mode 100644
index 0000000..c6823dd
--- /dev/null
+++ b/kasmweb/tests/test.tight.js
@@ -0,0 +1,41 @@
+const expect = chai.expect;
+
+import Websock from '../core/websock.js';
+import Display from '../core/display.js';
+
+import TightDecoder from '../core/decoders/tight.js';
+
+import FakeWebSocket from './fake.websocket.js';
+
+function testDecodeRect(decoder, x, y, width, height, data, display, depth) {
+    let sock;
+
+    sock = new Websock;
+    sock.open("ws://example.com");
+
+    sock.on('message', () => {
+        decoder.decodeRect(x, y, width, height, sock, display, depth);
+    });
+
+    sock._websocket._receiveData(new Uint8Array(data));
+
+    display.flip();
+}
+
+describe('Tight Decoder', function () {
+    let decoder;
+    let display;
+
+    before(FakeWebSocket.replace);
+    after(FakeWebSocket.restore);
+
+    beforeEach(function () {
+        decoder = new TightDecoder();
+        display = new Display(document.createElement('canvas'));
+        display.resize(4, 4);
+    });
+
+    it.skip('should handle the Tight encoding', function () {
+        // TODO(directxman12): test this
+    });
+});
diff --git a/kasmweb/tests/test.tightpng.js b/kasmweb/tests/test.tightpng.js
new file mode 100644
index 0000000..46dbf5a
--- /dev/null
+++ b/kasmweb/tests/test.tightpng.js
@@ -0,0 +1,41 @@
+const expect = chai.expect;
+
+import Websock from '../core/websock.js';
+import Display from '../core/display.js';
+
+import TightPngDecoder from '../core/decoders/tightpng.js';
+
+import FakeWebSocket from './fake.websocket.js';
+
+function testDecodeRect(decoder, x, y, width, height, data, display, depth) {
+    let sock;
+
+    sock = new Websock;
+    sock.open("ws://example.com");
+
+    sock.on('message', () => {
+        decoder.decodeRect(x, y, width, height, sock, display, depth);
+    });
+
+    sock._websocket._receiveData(new Uint8Array(data));
+
+    display.flip();
+}
+
+describe('TightPng Decoder', function () {
+    let decoder;
+    let display;
+
+    before(FakeWebSocket.replace);
+    after(FakeWebSocket.restore);
+
+    beforeEach(function () {
+        decoder = new TightPngDecoder();
+        display = new Display(document.createElement('canvas'));
+        display.resize(4, 4);
+    });
+
+    it.skip('should handle the TightPng encoding', function () {
+        // TODO(directxman12): test this
+    });
+});