feat(gui-v2,testing): add vitest and a simple component test

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/nc-gui-v2/components/general/Sponsors.test.ts

@@ -0,0 +1,25 @@
+import { mount } from '@vue/test-utils'
+import { expect, test } from 'vitest'
+
+import Sponsors from './Sponsors.vue'
+import { createVuetifyPlugin } from '~/plugins/vuetify'
+import { createI18nPlugin } from '~/plugins/i18n'
+
+test('mount component', async () => {
+  expect(Sponsors).toBeTruthy()
+
+  const vuetify = createVuetifyPlugin()
+  const i18n = await createI18nPlugin()
+
+  const wrapper = mount(Sponsors, {
+    global: {
+      plugins: [vuetify],
+      mocks: {
+        $t: () => i18n.global.t,
+      },
+    },
+    props: {
+      nav: true,
+    },
+  })
+})

packages/nc-gui-v2/package.json

@@ -5,7 +5,10 @@
     "dev": "nuxi dev",
     "generate": "nuxi generate",
     "start": "node .output/server/index.mjs",
-    "lint": "eslint --ext \".js,.jsx,.ts,.tsx,.vue\" --fix --ignore-path .gitignore ."
+    "lint": "eslint --ext \".js,.jsx,.ts,.tsx,.vue\" --fix --ignore-path .gitignore .",
+    "test": "vitest -c test/vite.config.ts",
+    "test:ui": "vitest -c test/vite.config.ts --ui",
+    "coverage": "vitest -c test/vite.config.ts run --coverage"
   },
   "dependencies": {
     "@vueuse/core": "^8.7.5",
@@ -23,18 +26,23 @@
     "@iconify-json/material-symbols": "^1.1.8",
     "@iconify-json/mdi": "^1.1.25",
     "@intlify/vite-plugin-vue-i18n": "^4.0.0",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitest/ui": "^0.18.0",
     "@vue/compiler-sfc": "^3.2.37",
+    "@vue/test-utils": "^2.0.2",
     "@vueuse/nuxt": "^8.6.0",
     "@windicss/plugin-animations": "^1.0.9",
     "@windicss/plugin-question-mark": "^0.1.1",
     "@windicss/plugin-scrollbar": "^1.2.3",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
+    "happy-dom": "^6.0.3",
     "nuxt": "3.0.0-rc.4",
     "nuxt-windicss": "^2.4.2",
     "prettier": "^2.7.1",
     "sass": "^1.53.0",
     "unplugin-icons": "^0.14.7",
+    "vitest": "^0.18.0",
     "windicss": "^3.5.6"
   }
 }

packages/nc-gui-v2/plugins/i18n.ts

@@ -6,8 +6,8 @@ import type en from '~/lang/en.json'
 // Type-define 'en' as the master schema for the resource
 type MessageSchema = typeof en
 
-export default defineNuxtPlugin(async (nuxtApp) => {
+export const createI18nPlugin = async () =>
-  const i18n = createI18n({
+  createI18n({
     locale: 'en', // Set the initial locale
 
     fallbackLocale: 'en', // Set the fallback locale in case the current locale can't be found
@@ -48,6 +48,9 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     },
   })
 
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const i18n = await createI18nPlugin()
+
   nuxtApp.vueApp.i18n = i18n.global
 
   nuxtApp.vueApp.use(i18n)

packages/nc-gui-v2/plugins/vuetify.ts

@@ -13,8 +13,8 @@ const ncLightTheme: ThemeDefinition = {
   colors: themeColors,
 }
 
-export default defineNuxtPlugin((nuxtApp) => {
+export const createVuetifyPlugin = () =>
-  const vuetify = createVuetify({
+  createVuetify({
     components,
     theme: {
       defaultTheme: 'ncLightTheme',
@@ -23,5 +23,7 @@ export default defineNuxtPlugin((nuxtApp) => {
       },
     },
   })
-  nuxtApp.vueApp.use(vuetify)
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(createVuetifyPlugin())
 })

packages/nc-gui-v2/test/vite.config.ts

@@ -0,0 +1,37 @@
+/// <reference types="vitest" />
+
+import path from 'path'
+import vueI18n from '@intlify/vite-plugin-vue-i18n'
+import Icons from 'unplugin-icons/vite'
+import { defineConfig } from 'vite'
+import Vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [
+    Vue(),
+    vueI18n({
+      include: path.resolve(__dirname, '../lang'),
+    }),
+    Icons({
+      autoInstall: true,
+      compiler: 'vue3',
+    }),
+  ],
+  test: {
+    setupFiles: path.resolve(__dirname, './vuetify.config.js'),
+    deps: {
+      inline: ['vuetify'],
+    },
+    globals: true,
+    environment: 'happy-dom',
+  },
+
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, '../'),
+      '~': path.resolve(__dirname, '../'),
+      '#app': path.resolve(__dirname, '../node_modules/nuxt/dist/app'),
+      '#imports': path.resolve(__dirname, '../.nuxt/imports'),
+    },
+  },
+})

packages/nc-gui-v2/test/vuetify.config.js

@@ -0,0 +1,2 @@
+/** fix issue with testing: https://github.com/vuetifyjs/vuetify/issues/14749 */
+global.CSS = { supports: () => false }