wip [skip ci]

Author: JulienChampagnol

app/components/Viewer/Options/VisibilitySwitch.vue

@@ -1,12 +1,12 @@
 <template>
-  <v-row class="pa-0" align="center">
-    <v-col cols="auto" justify="center">
-      <v-icon size="30" icon="mdi-eye" v-tooltip:left="'Visibility'" />
-    </v-col>
-    <v-col cols="auto" justify="center">
-      <v-switch v-model="visibility" inset hide-details />
-    </v-col>
-  </v-row>
+  <VRow class="pa-0" align="center">
+    <VCol cols="auto" justify="center">
+      <VIcon size="30" icon="mdi-eye" v-tooltip:left="'Visibility'" />
+    </VCol>
+    <VCol cols="auto" justify="center">
+      <VSwitch v-model="visibility" inset hide-details />
+    </VCol>
+  </VRow>
 </template>
 
 <script setup>

package.json

@@ -4,15 +4,18 @@
     "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
     "test": "npm run test:unit",
     "tests": "vitest --config ./tests/vitest.config.js",
-    "test:unit": "npm run tests --project unit",
+    "test:browser": "npm run tests --project browser",
     "test:integration": "npm run tests --project integration",
+    "test:unit": "npm run tests --project unit",
     "geode_objects": "node scripts/generate_geode_objects.js && prettier ./assets/geode_objects.js --write",
     "build": ""
   },
   "devDependencies": {
     "@nuxt/test-utils": "3.21.0",
     "@pinia/testing": "1.0.3",
     "@vitejs/plugin-vue": "5.2.4",
+    "@vitest/browser-playwright": "4.0.16",
+    "@vitest/browser-preview": "4.0.16",
     "@vue/test-utils": "2.4.6",
     "electron": "36.4.0",
     "eslint": "9.26.0",
@@ -30,7 +33,7 @@
     "unplugin-auto-import": "20.0.0",
     "vite": "6.3.5",
     "vite-plugin-vuetify": "2.1.1",
-    "vitest": "4.0.15",
+    "vitest": "4.0.16",
     "vitest-environment-nuxt": "1.0.1"
   },
   "overrides": {
@@ -58,6 +61,7 @@
     "sass": "1.87.0",
     "semver": "7.7.1",
     "uuid": "11.1.0",
+    "vitest-browser-vue": "^2.0.1",
     "vue3-carousel": "0.3.4",
     "vuetify": "3.10.11",
     "ws": "8.18.3",

tests/browser/Viewer/Options/VisibilitySwitch.test.js

@@ -0,0 +1,17 @@
+import { expect, test } from "vitest"
+import { render } from "vitest-browser-vue"
+
+import VisibilitySwitch from "@/components/Viewer/Options/VisibilitySwitch.vue"
+import { vuetify } from "../../../utils"
+
+console.log("VisibilitySwitch", VisibilitySwitch)
+
+test("Graphic test for VisibilitySwitch", async () => {
+  const component = await render(VisibilitySwitch, {
+    global: {
+      plugins: [vuetify],
+    },
+  })
+  console.log("component", component)
+  await expect(component).toMatchScreenshot()
+})

tests/utils.js

@@ -0,0 +1,6 @@
+import { createVuetify } from "vuetify"
+import * as components from "vuetify/components"
+import * as directives from "vuetify/directives"
+const vuetify = createVuetify({ components, directives })
+
+export { vuetify }

tests/vitest.config.js

@@ -1,11 +1,28 @@
 import { defineConfig } from "vitest/config"
 import { defineVitestProject } from "@nuxt/test-utils/config"
+import { playwright } from "@vitest/browser-playwright"
+// import vue from "@vitejs/plugin-vue"
 
 const globalRetry = process.env.CI ? 3 : 0
 
 export default defineConfig({
   test: {
     projects: [
+      await defineVitestProject({
+        // plugins: [vue()],
+        test: {
+          name: "browser",
+          include: ["tests/browser/**/*.test.js"],
+          setupFiles: ["vitest-browser-vue"],
+          browser: {
+            enabled: true,
+            // headless: true,
+            provider: playwright(),
+            instances: [{ browser: "chromium" }],
+          },
+          retry: globalRetry,
+        },
+      }),
       await defineVitestProject({
         test: {
           name: "unit",