ui_migration setup(vitest) Add comments to vitestfile, set and optimise packages on test

webapp/vite.config.mjs

@@ -10,7 +10,7 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig(({ command, mode }) => {
   const env = loadEnv(mode, process.cwd(), "");
-  const isProduction = mode === 'production';
+  const isProduction = mode === "production";
 
   var target;
 
@@ -33,16 +33,18 @@ export default defineConfig(({ command, mode }) => {
         // Block for removing data-test-id tags on npm run build
         template: {
           compilerOptions: {
-            nodeTransforms: isProduction ? [
+            nodeTransforms: isProduction
+              ? [
                   (node) => {
                     if (node.type === 1 /* NodeTypes.ELEMENT */) {
-                  node.props = node.props.filter(prop => prop.name !== 'data-test-id');
+                      node.props = node.props.filter((prop) => prop.name !== "data-test-id");
                     }
-              }
+                  },
-            ] : []
+                ]
-          }
+              : [],
-        }
+          },
-      })
+        },
+      }),
     ],
 
     build: {

webapp/vitest.config.js

@@ -1,5 +1,4 @@
-// File: vitest.config.js
+// OFM unit testing configuration file.
-// Generic configuration for vitest
 
 import { defineConfig } from "vitest/config";
 import vue from "@vitejs/plugin-vue";
@@ -10,6 +9,8 @@ export default defineConfig({
     vue({
       template: {
         compilerOptions: {
+          // This configuration is set to avoid vue warns about missing refs.
+          // Forces the test to render all html as dynamic, and avoid hoisting.
           hoistStatic: false,
         },
       },
@@ -17,24 +18,35 @@ export default defineConfig({
   ],
 
   test: {
+    // CSS is disabled for now, the test loads the DOM without styles.
     css: false,
     pool: "forks",
+    // Runs in a single thread to avoid CI pipeline crashing.
     singleThread: true,
 
+    // Switch loading vue features
     define: {
+      // Feature not needed for current testing
       __VUE_PROD_DEVTOOLS__: false,
+      // We use and enforce VUE optionsAPI
+      __VUE_OPTIONS_API__: true,
     },
 
+    // Coverage analysis tools setup
     coverage: {
       enabled: true,
       provider: "v8",
       clean: true,
       cleanOnStart: true,
+      // text gives output on STOUT and html creates an artifact
       reporter: ["text", "html"],
       all: true,
+      // Files to include or exclude in coverage
       include: ["src/**/*.vue", "src/**/*.js"],
       exclude: [],
-
+      // These thresholds raise ERROR if the coverture it's under the provided percentages.
+      // As the coverture is low we set the limit low, as testing spec files increase,
+      // these thresholds need to increase accordingly.
       thresholds: {
         lines: 4,
         statements: 3,
@@ -42,19 +54,26 @@ export default defineConfig({
         branches: 1,
       },
     },
+    // Add largest component dependencies here
+    // This chunks together the largest libraries to avoid recurrent parsing and loading
+    // and increasing memory overhead. Good for CI.
     deps: {
       optimizer: {
         web: {
           enabled: true,
-          include: ["@mui/material", "lucide-react"], // Add your largest component dependencies here
+          include: ["uikit", "openseadragon", "material-design-icons"],
         },
       },
     },
 
+    // This is the package responsible for simulating the DOM the other option is JSDOM
+    // Happy-dom is the most efficient in memory and its future proof for later node versions.
     environment: "happy-dom",
 
-    globals: true,
+    globals: true, // Probably good for Mixins
 
+    // This tells vitest to not skip loading these packages,
+    // and load them from the local node_modules at run time.
     server: {
       deps: {
         inline: ["vue", "@vue/test-utils", "pinia", "@pinia/testing"],
@@ -62,6 +81,9 @@ export default defineConfig({
     },
   },
 
+  // This is to enforce the use of specific packages versions on the testing.
+  // This one for example says to load explicitly the vue package at the project's level,
+  // and not the global vue if existing.
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),