feat: use vitest instead of karma

package.json

@@ -15,6 +15,8 @@
     "release:windows": "set NODE_ENV=production&& gulp release",
     "pretest": "yarn run lint",
     "test": "karma start test/karma.conf.js",
+    "TODO": "remove the above test after the migration to vitest is complete",
+    "test:vitest": "vitest",
     "lint": "eslint --ext .js,.vue src gulpfile.js gulp-appdmg.js",
     "lint:fix": "eslint --fix src gulpfile.js gulp-appdmg.js",
     "storybook": "start-storybook -p 6006"
@@ -66,6 +68,7 @@
     "jquery-textcomplete": "^1.8.5",
     "jquery-touchswipe": "^1.6.19",
     "jquery-ui-npm": "^1.12.0",
+    "jsdom": "^21.0.0",
     "lru_map": "^0.3.3",
     "marked": "^4.1.1",
     "multicast-dns": "^7.2.5",
@@ -139,6 +142,8 @@
     "temp": "^0.9.4",
     "through2": "^4.0.2",
     "vinyl-source-stream": "^2.0.0",
+    "vite": "^4.0.4",
+    "vitest": "^0.27.1",
     "vue-loader": "^15.9.8",
     "vue-template-compiler": "^2.7.10",
     "yarn": "^1.22.19"

src/js/gui.js

@@ -1,7 +1,9 @@
 import { get as getConfig } from './ConfigStorage';
 import MSP from './msp';
 
-window.TABS = {}; // filled by individual tab js file
+const TABS = {};
+
+window.TABS = TABS; // filled by individual tab js file
 
 const GUI_MODES = {
     NWJS: "NW.js",
@@ -523,7 +525,7 @@ function GUI_checkOperatingSystem() {
 
 const GUI = new GuiControl();
 
+export { TABS };
 // initialize object into GUI variable
 window.GUI = GUI;
-
 export default GUI;

test/tabs/cli.js

@@ -50,22 +50,6 @@ describe('TABS.cli', () => {
             TABS.cli.cliBuffer = "";
         });
 
-        it('ambiguous auto-complete results', () => {
-            TABS.cli.cliBuffer = 'se';
-
-            TABS.cli.read({
-                data: toArrayBuffer('\r\x1B[Kserialpassthrough\tservo\r\n# ser'),
-            });
-
-            // Ambigous auto-complete from firmware is preceded with an \r carriage return
-            // which only renders a line break on Mac
-            const expectedValue = GUI.operating_system !== "Windows" ?
-                'se<br>serialpassthrough\tservo<br>' :
-                'seserialpassthrough\tservo<br>';
-            expect(cliOutput.html()).to.equal(expectedValue);
-            expect(cliPrompt.val()).to.equal('ser');
-        });
-
         it('unambiguous auto-complete result', () => {
             TABS.cli.read({
                 data: toArrayBuffer('serialpassthrough'),

tests/cli.test.js

@@ -0,0 +1,73 @@
+import { describe, it, expect, beforeAll, afterAll, beforeEach } from "vitest";
+import CliAutoComplete from "../src/js/CliAutoComplete";
+import { cli } from "../src/js/tabs/cli";
+import $ from "jquery";
+import CONFIGURATOR from "../src/js/data_storage";
+
+class MockAnalytics {
+    sendEvent() {
+        // Empty
+    }
+}
+
+MockAnalytics.prototype.EVENT_CATEGORIES = {};
+
+    function toArrayBuffer(string) {
+        const bufferOut = new ArrayBuffer(string.length);
+        const bufView = new Uint8Array(bufferOut);
+
+        for (let i = 0; i < string.length; i++) {
+            bufView[i] = string.charCodeAt(i);
+        }
+
+        return bufferOut;
+    }
+
+describe("cli", () => {
+    describe("output", () => {
+        let cliTab;
+        let cliOutput;
+        let cliPrompt;
+        let tracking;
+
+        beforeAll(() => {
+            cliTab = $("<div>").addClass("tab-cli");
+            cliOutput = $("<div>").addClass("wrapper");
+            cliPrompt = $('<textarea name="commands">');
+
+            cliTab.append($("<div>").addClass("window").append(cliOutput));
+            cliTab.append(cliPrompt);
+
+            CliAutoComplete.setEnabled(false); // not testing the client-side autocomplete
+
+            tracking = new MockAnalytics();
+
+            $("body").append(cliTab);
+
+            CONFIGURATOR.cliValid = true;
+            cli.GUI.windowWrapper = cliOutput;
+        });
+        afterAll(() => {
+            cliTab.remove();
+        });
+        beforeEach(() => {
+            cliOutput.empty();
+            cliPrompt.val("");
+            cli.cliBuffer = "";
+        });
+        it("ambiguous auto-complete results", () => {
+            cli.cliBuffer = "se";
+            cli.read({
+                data: toArrayBuffer('\r\x1B[Kserialpassthrough\tservo\r\n# ser'),
+            });
+            // Ambigous auto-complete from firmware is preceded with an \r carriage return
+            // which only renders a line break on Mac
+            const expectedValue = GUI.operating_system !== "Windows" ?
+                'se<br>serialpassthrough\tservo<br>' :
+                'seserialpassthrough\tservo<br>';
+            expect(cliOutput.html()).to.equal(expectedValue);
+            expect(cliPrompt.val()).to.equal('ser');
+
+        });
+    });
+});

tests/setup.js

@@ -0,0 +1,7 @@
+import { JSDOM } from "jsdom";
+import $ from "jquery";
+
+// Note: this can go away once jquery is used as module everywhere
+const { window } = new JSDOM("");
+$(window);
+globalThis.$ = $;

vite.config.js

@@ -0,0 +1,12 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+    test: {
+        // TODO: create test dir once karma is gone
+        // TODO: eventually it's bettter to have tetss next to the code
+        include: ['tests/**/*.test.{js,mjs,cjs}'],
+        environment: 'jsdom',
+        setupFiles: ['tests/setup.js'],
+    },
+});