Fix/graphic tests

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,8 @@
     "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-browser-vue": "2.0.1",
     "vitest-environment-nuxt": "1.0.1"
   },
   "overrides": {

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

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

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

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

tests/integration/microservices/back/requirements.txt

@@ -5,4 +5,3 @@
 #    pip-compile --output-file=tests/integration/microservices/back/requirements.txt tests/integration/microservices/back/requirements.in
 #
 
-opengeodeweb-back==5.*,>=5.14.3rc1

tests/integration/microservices/viewer/requirements.txt

@@ -5,4 +5,3 @@
 #    pip-compile --output-file=tests/integration/microservices/viewer/requirements.txt tests/integration/microservices/viewer/requirements.in
 #
 
-opengeodeweb-viewer==1.*,>=1.13.2

tests/unit/components/CrsSelector.nuxt.test.js

@@ -1,25 +1,17 @@
-import { registerEndpoint, mountSuspended } from "@nuxt/test-utils/runtime"
-
+import { mountSuspended } from "@nuxt/test-utils/runtime"
 import { describe, expect, test, vi } from "vitest"
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
-import { createVuetify } from "vuetify"
-import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
 
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
-
 import CrsSelector from "@ogw_front/components/CrsSelector"
 import { useGeodeStore } from "@ogw_front/stores/geode"
 
+import { vuetify } from "../../utils"
+
 const crs_selector_schema =
   schemas.opengeodeweb_back.geographic_coordinate_systems
 
-const vuetify = createVuetify({
-  components,
-  directives,
-})
-
 describe("CrsSelector", () => {
   const pinia = createTestingPinia({
     stubActions: false,

tests/unit/components/ExtensionSelector.nuxt.test.js

@@ -1,76 +1,67 @@
 import { describe, expect, test, vi } from "vitest"
 import { registerEndpoint, mountSuspended } from "@nuxt/test-utils/runtime"
-
-import { createVuetify } from "vuetify"
-import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
+import * as components from "vuetify/components"
 
+import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 import ExtensionSelector from "@ogw_front/components/ExtensionSelector"
-
 import { useGeodeStore } from "@ogw_front/stores/geode"
-
-import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
+import { vuetify } from "../../utils"
 
 const schema = schemas.opengeodeweb_back.geode_objects_and_output_extensions
 
-const vuetify = createVuetify({
-  components,
-  directives,
-})
-
 describe("ExtensionSelector", async () => {
   const pinia = createTestingPinia({
     stubActions: false,
     createSpy: vi.fn,
   })
   setActivePinia(pinia)
   const geodeStore = useGeodeStore()
   geodeStore.base_url = ""
 
   // Mock the request method to simulate API call
   geodeStore.request = vi.fn((schema, params, callbacks) => {
     const response = {
       _data: {
         geode_objects_and_output_extensions: {
           BRep: { msh: { is_saveable: true } },
         },
       },
     }
     if (callbacks?.response_function) {
       callbacks.response_function(response)
     }
     return Promise.resolve(response)
   })
 
   test(`Select geode_object & extension`, async () => {
     const output_geode_object = "BRep"
     const output_extension = "msh"
 
     registerEndpoint(schema.$id, {
       method: schema.methods[0],
       handler: () => ({
         geode_objects_and_output_extensions: {
           BRep: { msh: { is_saveable: true } },
         },
       }),
     })
     const wrapper = await mountSuspended(ExtensionSelector, {
       global: {
         plugins: [vuetify, pinia],
       },
       props: { geode_object_type: "BRep", filenames: ["test.toto"] },
     })
     await nextTick()
     expect(wrapper.exists()).toBe(true)
     const v_card = await wrapper.findAllComponents(components.VCard)
     await v_card[1].trigger("click")
     expect(wrapper.emitted()).toHaveProperty("update_values")
     expect(wrapper.emitted().update_values).toHaveLength(1)
     expect(wrapper.emitted().update_values[0][0]).toStrictEqual({
       output_geode_object,
       output_extension,
     })
   })
 })

tests/unit/components/FeedBack/ErrorsBanner.nuxt.test.js

@@ -1,18 +1,11 @@
 import { describe, expect, test, vi } from "vitest"
 import { mount } from "@vue/test-utils"
-import { createVuetify } from "vuetify"
-import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
 import { createTestingPinia } from "@pinia/testing"
 import { setActivePinia } from "pinia"
 
 import FeedBackErrorBanner from "@ogw_front/components/FeedBack/ErrorBanner"
 import { useFeedbackStore } from "@ogw_front/stores/feedback"
-
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+import { vuetify } from "../../../utils"
 
 describe("FeedBackErrorBanner", async () => {
   ;(test(`Test reload`, async () => {

tests/unit/components/FeedBack/Snackers.nuxt.test.js

@@ -2,20 +2,13 @@
 vi.stubGlobal("visualViewport", new EventTarget())
 import { describe, expect, test, vi } from "vitest"
 import { mount } from "@vue/test-utils"
-import { createVuetify } from "vuetify"
 import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
-
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
 
 import FeedBackSnackers from "@ogw_front/components/FeedBack/Snackers"
 import { useFeedbackStore } from "@ogw_front/stores/feedback"
-
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+import { vuetify } from "../../../utils"
 
 describe("FeedBackSnackers", async () => {
   test(`Test delete error`, async () => {

tests/unit/components/FileSelector.nuxt.test.js

@@ -1,10 +1,7 @@
 import { describe, expect, test, vi } from "vitest"
 import { registerEndpoint, mountSuspended } from "@nuxt/test-utils/runtime"
 import { flushPromises } from "@vue/test-utils"
-
-import { createVuetify } from "vuetify"
 import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
 
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
@@ -14,15 +11,11 @@ import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 import FileSelector from "@ogw_front/components/FileSelector"
 import FileUploader from "@ogw_front/components/FileUploader"
 import { useGeodeStore } from "@ogw_front/stores/geode"
+import { vuetify } from "../../utils"
 
 const allowed_files_schema = schemas.opengeodeweb_back.allowed_files
 const upload_file_schema = schemas.opengeodeweb_back.upload_file
 
-const vuetify = createVuetify({
-  components,
-  directives,
-})
-
 describe("FileSelector", async () => {
   const pinia = createTestingPinia({
     stubActions: false,

tests/unit/components/FileUploader.nuxt.test.js

@@ -1,10 +1,7 @@
 import { describe, expect, test, vi } from "vitest"
 import { registerEndpoint, mountSuspended } from "@nuxt/test-utils/runtime"
 import { flushPromises } from "@vue/test-utils"
-
-import { createVuetify } from "vuetify"
 import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
 
@@ -13,12 +10,9 @@ import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 import FileUploader from "@ogw_front/components/FileUploader"
 import { useGeodeStore } from "@ogw_front/stores/geode"
 
-const upload_file_schema = schemas.opengeodeweb_back.upload_file
+import { vuetify } from "../../utils"
 
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+const upload_file_schema = schemas.opengeodeweb_back.upload_file
 
 describe("FileUploader", async () => {
   const pinia = createTestingPinia({

tests/unit/components/Inspector/InspectionButton.nuxt.test.js

@@ -1,22 +1,16 @@
 import { describe, expect, test, vi } from "vitest"
-import { registerEndpoint, mountSuspended } from "@nuxt/test-utils/runtime"
+import { mountSuspended } from "@nuxt/test-utils/runtime"
 import { flushPromises } from "@vue/test-utils"
-
-import { createVuetify } from "vuetify"
 import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
 
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 import InspectorInspectionButton from "@ogw_front/components/Inspector/InspectionButton"
 import { useGeodeStore } from "@ogw_front/stores/geode"
-const schema = schemas.opengeodeweb_back.inspect_file
+import { vuetify } from "../../../utils"
 
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+const schema = schemas.opengeodeweb_back.inspect_file
 
 describe("Inspector/InspectionButton", async () => {
   const pinia = createTestingPinia({

tests/unit/components/Inspector/ResultPanel.nuxt.test.js

@@ -1,16 +1,8 @@
 import { describe, expect, test } from "vitest"
 import { mountSuspended } from "@nuxt/test-utils/runtime"
 
-import { createVuetify } from "vuetify"
-import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
-
 import InspectorResultPanel from "@ogw_front/components/Inspector/ResultPanel"
-
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+import { vuetify } from "../../../utils"
 
 describe("Inspector/ResultPanel", async () => {
   test(`Test with issues`, async () => {

tests/unit/components/Launcher.nuxt.test.js

@@ -1,22 +1,13 @@
 import { describe, expect, test, vi } from "vitest"
 import { flushPromises } from "@vue/test-utils"
 import { mountSuspended } from "@nuxt/test-utils/runtime"
-
-import { createVuetify } from "vuetify"
-import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
-
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
 
 import Launcher from "@ogw_front/components/Launcher"
 
 import { useInfraStore } from "@ogw_front/stores/infra"
-
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+import { vuetify } from "../../utils"
 
 // Mock navigator.locks API
 const mockLockRequest = vi.fn().mockImplementation(async (name, callback) => {

tests/unit/components/MissingFilesSelector.nuxt.test.js

@@ -1,10 +1,7 @@
 import { describe, expect, test, vi } from "vitest"
 import { registerEndpoint, mountSuspended } from "@nuxt/test-utils/runtime"
 import { flushPromises } from "@vue/test-utils"
-
-import { createVuetify } from "vuetify"
 import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
 
@@ -14,14 +11,11 @@ import MissingFilesSelector from "@ogw_front/components/MissingFilesSelector"
 import FileUploader from "@ogw_front/components/FileUploader"
 import { useGeodeStore } from "@ogw_front/stores/geode"
 
+import { vuetify } from "../../utils"
+
 const missing_files_schema = schemas.opengeodeweb_back.missing_files
 const upload_file_schema = schemas.opengeodeweb_back.upload_file
 
-const vuetify = createVuetify({
-  components,
-  directives,
-})
-
 describe("MissingFilesSelector", async () => {
   const pinia = createTestingPinia({
     stubActions: false,

tests/unit/components/ObjectSelector.nuxt.test.js

@@ -1,26 +1,17 @@
 import { describe, expect, test, vi } from "vitest"
 import { registerEndpoint, mountSuspended } from "@nuxt/test-utils/runtime"
 import { flushPromises } from "@vue/test-utils"
-
-import { createVuetify } from "vuetify"
 import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
 
+import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 import ObjectSelector from "@ogw_front/components/ObjectSelector"
-
 import { useGeodeStore } from "@ogw_front/stores/geode"
-
-import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
+import { vuetify } from "../../utils"
 
 const allowed_objects = schemas.opengeodeweb_back.allowed_objects
 
-const vuetify = createVuetify({
-  components,
-  directives,
-})
-
 describe("ObjectSelector", async () => {
   const pinia = createTestingPinia({
     stubActions: false,

tests/unit/components/PackagesVersions.nuxt.test.js

@@ -1,20 +1,11 @@
 import { describe, expect, test, vi } from "vitest"
 import { mountSuspended, registerEndpoint } from "@nuxt/test-utils/runtime"
-
-import { createVuetify } from "vuetify"
-import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
-
 import { setActivePinia } from "pinia"
 import { createTestingPinia } from "@pinia/testing"
 
 import PackagesVersions from "@ogw_front/components/PackagesVersions"
 import { useGeodeStore } from "@ogw_front/stores/geode"
-
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+import { vuetify } from "../../utils"
 
 describe("PackagesVersions", async () => {
   test(`Mount`, async () => {

tests/unit/components/Step.nuxt.test.js

@@ -1,26 +1,18 @@
 import { describe, expect, test } from "vitest"
 import { mount } from "@vue/test-utils"
-
-import { createVuetify } from "vuetify"
-import * as components from "vuetify/components"
-import * as directives from "vuetify/directives"
-
 import Step from "@ogw_front/components/Step"
 import ObjectSelector from "@ogw_front/components/ObjectSelector"
 
-const vuetify = createVuetify({
-  components,
-  directives,
-})
+import { vuetify } from "../../utils"
 
 global.ResizeObserver = require("resize-observer-polyfill")
 
 describe("Step", async () => {
   test(`BRep`, async () => {
     const geode_object_type = ref("BRep")
     const files = ref([])
     const stepper_tree = reactive({
       current_step_index: ref(0),
       geode_object_type,
       steps: [
         {
@@ -36,7 +28,7 @@
           },
           chips: computed(() => {
             if (geode_object_type.value === "") {
               return []
             } else {
               return [geode_object_type.value]
             }
@@ -51,6 +43,6 @@
       },
       props: { step_index: 0 },
     })
     expect(wrapper.exists()).toBe(true)
   })
 })