Fix UI unit tests

webui/.eslintrc.cjs

@@ -9,7 +9,6 @@ module.exports = {
   env: {
     node: true,
     browser: true,
-    mocha: true,
     'vue/setup-compiler-macros': true
   },
 
@@ -18,14 +17,12 @@ module.exports = {
     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
     'plugin:vue/vue3-essential',
     'plugin:vue/vue3-recommended',
-    'plugin:mocha/recommended',
     'standard'
   ],
 
   // required to lint *.vue files
   plugins: [
     'vue',
-    'mocha'
   ],
 
   globals: {

webui/package.json

@@ -8,12 +8,14 @@
   "scripts": {
     "transfer": "node dev/scripts/transfer.js",
     "lint": "eslint --ext .js,.vue src",
-    "test-unit": "mocha-webpack --mode=production './src/**/*.spec.js'",
     "dev": "export APP_ENV='development' && quasar dev",
     "build-quasar": "quasar build",
     "build-staging": "export NODE_ENV='production' && export APP_ENV='development' && yarn build-quasar",
     "build": "export NODE_ENV='production' && export APP_ENV='production' && yarn build-quasar && yarn transfer spa",
-    "build:nc": "yarn build"
+    "build:nc": "yarn build",
+    "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
+    "test:unit": "vitest",
+    "test:unit:ci": "vitest run"
   },
   "dependencies": {
     "@quasar/extras": "^1.16.9",
@@ -39,18 +41,17 @@
     "@babel/eslint-parser": "^7.23.10",
     "@quasar/app-vite": "^1.4.3",
     "@quasar/babel-preset-app": "^2.0.2",
+    "@quasar/quasar-app-extension-testing-unit-vitest": "^1.0.0",
     "@vue/test-utils": "^2.4.4",
     "autoprefixer": "^10.4.2",
-    "chai": "5.0.3",
     "eslint": "^8.11.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.19.1",
-    "eslint-plugin-mocha": "^10.2.0",
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-vue": "^9.0.0",
-    "mocha": "^10.2.0",
+    "postcss": "^8.4.14",
-    "postcss": "^8.4.14"
+    "vitest": "^1.3.1"
   },
   "engines": {
     "node": "^20 || ^18 || ^16",

webui/quasar.conf.js

@@ -5,7 +5,7 @@ const { configure } = require('quasar/wrappers')
 
 module.exports = configure(function (ctx) {
   return {
-   eslint: {
+    eslint: {
       warnings: true,
       errors: true
     },
@@ -122,10 +122,10 @@ module.exports = configure(function (ctx) {
     build: {
       // Needed to have relative assets in the index.html
       // https://github.com/quasarframework/quasar/issues/8513#issuecomment-1127654470
-      extendViteConf(viteConf, {isServer, isClient}) {
+      extendViteConf (viteConf, { isServer, isClient }) {
-        viteConf.base = "";
+        viteConf.base = ''
       },
-     viteVuePluginOptions: {
+      viteVuePluginOptions: {
         template: {
           compilerOptions: {
             isCustomElement: (tag) => tag.startsWith('hub-')
@@ -139,13 +139,13 @@ module.exports = configure(function (ctx) {
       publicPath: process.env.APP_PUBLIC_PATH || '',
       env: process.env.APP_ENV === 'development'
         ? { // staging:
-          APP_ENV: process.env.APP_ENV,
+            APP_ENV: process.env.APP_ENV,
-          APP_API: process.env.APP_API || '/api'
+            APP_API: process.env.APP_API || '/api'
-        }
+          }
         : { // production:
-          APP_ENV: process.env.APP_ENV,
+            APP_ENV: process.env.APP_ENV,
-          APP_API: process.env.APP_API || '/api'
+            APP_API: process.env.APP_API || '/api'
-        },
+          },
       uglifyOptions: {
         compress: {
           drop_console: process.env.APP_ENV === 'production',
@@ -173,7 +173,7 @@ module.exports = configure(function (ctx) {
     animations: [],
 
     ssr: {
-      pwa: false,
+      pwa: false
     },
 
     pwa: {
@@ -201,29 +201,29 @@ module.exports = configure(function (ctx) {
         theme_color: '#027be3',
         icons: [
           {
-            'src': 'icons/icon-128x128.png',
+            src: 'icons/icon-128x128.png',
-            'sizes': '128x128',
+            sizes: '128x128',
-            'type': 'image/png'
+            type: 'image/png'
           },
           {
-            'src': 'icons/icon-192x192.png',
+            src: 'icons/icon-192x192.png',
-            'sizes': '192x192',
+            sizes: '192x192',
-            'type': 'image/png'
+            type: 'image/png'
           },
           {
-            'src': 'icons/icon-256x256.png',
+            src: 'icons/icon-256x256.png',
-            'sizes': '256x256',
+            sizes: '256x256',
-            'type': 'image/png'
+            type: 'image/png'
           },
           {
-            'src': 'icons/icon-384x384.png',
+            src: 'icons/icon-384x384.png',
-            'sizes': '384x384',
+            sizes: '384x384',
-            'type': 'image/png'
+            type: 'image/png'
           },
           {
-            'src': 'icons/icon-512x512.png',
+            src: 'icons/icon-512x512.png',
-            'sizes': '512x512',
+            sizes: '512x512',
-            'type': 'image/png'
+            type: 'image/png'
           }
         ]
       }

webui/quasar.extensions.json

@@ -0,0 +1,5 @@
+{
+  "@quasar/testing-unit-vitest": {
+    "options": []
+  }
+}

webui/readme.md

@@ -20,7 +20,7 @@ make clean-webui generate-webui # Generate static contents in `webui/static/` fo
 
 ## How to build (only for frontend developer)
 
-- prerequisite: [Node 12.11+](https://nodejs.org) [Yarn](https://yarnpkg.com/)
+- prerequisite: [Node 20.11+](https://nodejs.org) [Yarn 1.22.19](https://yarnpkg.com/)
 
 - Go to the `webui/` directory
 
@@ -57,7 +57,7 @@ make clean-webui generate-webui # Generate static contents in `webui/static/` fo
 
 - [Node](https://nodejs.org)
 - [Yarn](https://yarnpkg.com/)
-- [Webpack](https://github.com/webpack/webpack)
+- [Quasar](https://quasar.dev/)
 - [Vue](https://vuejs.org/)
 - [Bulma](https://bulma.io)
 - [D3](https://d3js.org)

webui/src/store/http/mutations.vitest.spec.js

@@ -1,4 +1,4 @@
-import { expect } from 'chai'
+import { describe, expect, it } from 'vitest'
 import store from './index.js'
 
 const {

webui/src/store/tcp/mutations.vitest.spec.js

@@ -1,4 +1,4 @@
-import { expect } from 'chai'
+import { describe, expect, it } from 'vitest'
 import store from './index.js'
 
 const {

webui/src/store/udp/mutations.vitest.spec.js

@@ -1,4 +1,4 @@
-import { expect } from 'chai'
+import { describe, expect, it } from 'vitest'
 import store from './index.js'
 
 const {

webui/test/vitest/setup-file.js

@@ -0,0 +1 @@
+// This file will be run before each test file

webui/vitest.config.mjs

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vitest/config';
+import vue from '@vitejs/plugin-vue';
+import { quasar, transformAssetUrls } from '@quasar/vite-plugin';
+import jsconfigPaths from 'vite-jsconfig-paths';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  test: {
+    environment: 'happy-dom',
+    setupFiles: 'test/vitest/setup-file.js',
+    include: [
+      // Matches vitest tests in any subfolder of 'src' or into 'test/vitest/__tests__'
+      // Matches all files with extension 'js', 'jsx', 'ts' and 'tsx'
+      'src/**/*.vitest.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
+    ],
+  },
+  plugins: [
+    vue({
+      template: { transformAssetUrls },
+    }),
+    quasar(),
+    jsconfigPaths(),
+  ],
+});