chore(nx/client): reintegrate tests

apps/client/package.json

@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
+    "@eslint/js": "9.25.0",
     "@excalidraw/excalidraw": "0.18.0",
     "@fullcalendar/core": "6.1.17",
     "@fullcalendar/daygrid": "6.1.17",
@@ -12,44 +13,44 @@
     "@fullcalendar/timegrid": "6.1.17",
     "@mermaid-js/layout-elk": "0.1.7",
     "@mind-elixir/node-menu": "1.0.5",
-    "i18next-http-backend": "3.0.2",
-    "jquery-hotkeys": "0.2.2",
-    "jquery.fancytree": "2.38.5",
-    "jquery": "3.7.1",
-    "jsplumb": "2.15.6",
-    "knockout": "3.5.1",
-    "leaflet-gpx": "2.1.2",
-    "leaflet": "1.9.4",
-    "mark.js": "8.11.1",
-    "i18next": "25.0.0",
-    "mermaid": "11.6.0",
-    "mind-elixir": "4.5.1",
-    "panzoom": "9.4.3",
-    "react-dom": "18.3.1",
-    "react": "18.3.1",
-    "split.js": "1.6.5",
-    "svg-pan-zoom": "3.6.2",
-    "vanilla-js-wheel-zoom": "9.0.4",
-    "draggabilly": "3.0.0",
-    "force-graph": "1.49.5",
     "@popperjs/core": "2.11.8",
-    "eslint-linter-browserify": "9.25.0",    
-    "@eslint/js": "9.25.0",
+    "@triliumnext/commons": "workspace:*",
     "bootstrap": "5.3.5",
     "dayjs": "1.11.13",
     "dayjs-plugin-utc": "0.1.2",
     "debounce": "2.2.0",
-    "marked": "15.0.8",
+    "draggabilly": "3.0.0",
+    "eslint-linter-browserify": "9.25.0",
+    "force-graph": "1.49.5",
     "globals": "16.0.0",
-    "@triliumnext/commons": "workspace:*"
+    "i18next": "25.0.0",
+    "i18next-http-backend": "3.0.2",
+    "jquery": "3.7.1",
+    "jquery-hotkeys": "0.2.2",
+    "jquery.fancytree": "2.38.5",
+    "jsplumb": "2.15.6",
+    "knockout": "3.5.1",
+    "leaflet": "1.9.4",
+    "leaflet-gpx": "2.1.2",
+    "mark.js": "8.11.1",
+    "marked": "15.0.8",
+    "mermaid": "11.6.0",
+    "mind-elixir": "4.5.1",
+    "panzoom": "9.4.3",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "split.js": "1.6.5",
+    "svg-pan-zoom": "3.6.2",
+    "vanilla-js-wheel-zoom": "9.0.4"
   },
   "devDependencies": {
-    "script-loader": "0.7.2",
-    "@types/jquery": "3.5.32",
-    "@types/leaflet-gpx": "1.3.7",
-    "@types/leaflet": "1.9.17",
     "@types/bootstrap": "5.2.10",
+    "@types/jquery": "3.5.32",
+    "@types/leaflet": "1.9.17",
+    "@types/leaflet-gpx": "1.3.7",
     "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.6"
+    "@types/react-dom": "18.3.6",
+    "happy-dom": "17.4.4",
+    "script-loader": "0.7.2"
   }
 }

apps/client/src/test/setup.ts

@@ -0,0 +1,58 @@
+import { beforeAll, vi } from "vitest";
+import $ from "jquery";
+
+injectGlobals();
+
+beforeAll(() => {
+    vi.mock("../services/ws.js", mockWebsocket);
+    vi.mock("../services/server.js", mockServer);
+});
+
+function injectGlobals() {
+    const uncheckedWindow = window as any;
+    uncheckedWindow.$ = $;
+    uncheckedWindow.WebSocket = () => {};
+    uncheckedWindow.glob = {
+        isMainWindow: true
+    };
+}
+
+function mockWebsocket() {
+    return {
+        default: {
+            subscribeToMessages(callback: (message: unknown) => void) {
+                // Do nothing.
+            }
+        }
+    }
+}
+
+function mockServer() {
+    return {
+        default: {
+            async get(url: string) {
+                if (url === "options") {
+                    return {};
+                }
+
+                if (url === "keyboard-actions") {
+                    return [];
+                }
+
+                if (url === "tree") {
+                    return {
+                        branches: [],
+                        notes: [],
+                        attributes: []
+                    }
+                }
+            },
+
+            async post(url: string, data: object) {
+                if (url === "tree/load") {
+                    throw new Error(`A module tried to load from the server the following notes: ${((data as any).noteIds || []).join(",")}\nThis is not supported, use Froca mocking instead and ensure the note exist in the mock.`)
+                }
+            }
+        }
+    };
+}

apps/client/vite.config.ts

@@ -2,22 +2,19 @@
 import { defineConfig } from 'vite';
 
 export default defineConfig(() => ({
-  root: __dirname,
-  cacheDir: '../../node_modules/.vite/apps/client',
-  plugins: [],
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
-  test: {
-    'watch': false,
-    'globals': true,
-    'environment': "jsdom",
-    'include': ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
-    'reporters': ["default"],
-    'coverage': {
-    'reportsDirectory': './test-output/vitest/coverage',
-    'provider': 'v8' as const,
-}
-  },
+    root: __dirname,
+    cacheDir: '../../node_modules/.vite/apps/client',
+    plugins: [],
+    test: {
+        watch: false,
+        globals: true,
+        setupFiles: ["./src/test/setup.ts"],
+        environment: "happy-dom",
+        include: ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+        reporters: ["default"],
+        coverage: {
+            reportsDirectory: './test-output/vitest/coverage',
+            provider: 'v8' as const,
+        }
+    },
 }));