@geode/opengeodeweb-front 6.2.1-rc.1 → 6.3.0-rc.1

package/components/Wrapper.vue

@@ -1,9 +1,6 @@
 <template>
   <v-container>
     <v-row class="flex-column">
-      <v-col>
-        <Header :tool_name="tool_name" :cards_list="cards_list" />
-      </v-col>
       <v-col v-if="!is_running">
         <Launcher />
       </v-col>
@@ -23,10 +20,6 @@
 
   const props = defineProps({
     versions_schema: { type: Object, required: true },
-    cards_list: { type: Array, required: true },
   })
-  const { cards_list, versions_schema } = props
-
-  const stepper_tree = inject("stepper_tree")
-  const { tool_name } = stepper_tree
+  const { versions_schema } = props
 </script>

package/composables/api_fetch.js

@@ -17,14 +17,13 @@ export function api_fetch(
   const valid = ajv.validate(schema, body)
   if (!valid) {
     errors_store.add_error({
-      code: "400",
+      code: 400,
       route: schema.$id,
       name: "Bad request",
       description: ajv.errorsText(),
     })
-    return
+    throw new Error(schema.$id.concat(": ", ajv.errorsText()))
   }
-
   geode_store.start_request()
 
   const request_options = { method: schema["method"] }
@@ -35,12 +34,10 @@ export function api_fetch(
   if (schema.max_retry) {
     request_options.max_retry = schema.max_retry
   }
-
   return useFetch(schema.$id, {
     baseURL: geode_store.base_url,
     ...request_options,
     onRequestError({ error }) {
-      // console.log("onRequestError", error)
       geode_store.stop_request()
       errors_store.add_error({
         code: error.code,
@@ -53,7 +50,6 @@ export function api_fetch(
       }
     },
     onResponse({ response }) {
-      // console.log(response)
       if (response.ok) {
         geode_store.stop_request()
         if (response_function) {
@@ -62,7 +58,6 @@ export function api_fetch(
       }
     },
     onResponseError({ response }) {
-      // console.log(response)
       geode_store.stop_request()
       errors_store.add_error({
         code: response.status,

package/composables/runFunctionIfCloudRunning.js

@@ -1,7 +1,6 @@
-export default function (function_to_run) {
+export default async function (function_to_run) {
   const cloud_store = use_cloud_store()
   const { is_running } = storeToRefs(cloud_store)
-
   if (is_running.value) {
     function_to_run()
   } else {

package/composables/upload_file.js

@@ -1,9 +1,12 @@
-export function upload_file(
+export async function upload_file(
   { route, file },
   { request_error_function, response_function, response_error_function } = {},
 ) {
   const errors_store = use_errors_store()
   const geode_store = use_geode_store()
+  if (!(file instanceof File)) {
+    throw new Error("file must be a instance of File")
+  }
 
   const body = new FormData()
   body.append("file", file)

package/nuxt.config.js

@@ -1,7 +1,35 @@
 export default defineNuxtConfig({
+  runtimeConfig: {
+    public: {
+      VIEWER_PROTOCOL: process.env.NODE_ENV === "production" ? "wss" : "ws",
+      GEODE_PROTOCOL: process.env.NODE_ENV === "production" ? "https" : "http",
+      VIEWER_PORT: process.env.NODE_ENV === "production" ? "443" : "1234",
+      GEODE_PORT: process.env.NODE_ENV === "production" ? "443" : "5000",
+      SITE_BRANCH:
+        process.env.NODE_ENV === "production" ? process.env.SITE_BRANCH : "",
+      PROJECT: process.env.NODE_ENV === "production" ? process.env.PROJECT : "",
+      NODE_ENV: process.env.NODE_ENV,
+    },
+  },
+
+  modules: [["@pinia/nuxt", { autoImports: ["defineStore"] }], "@vueuse/nuxt"],
   imports: {
     dirs: ["stores"],
   },
 
-  modules: [["@pinia/nuxt", { autoImports: ["defineStore"] }], "@vueuse/nuxt"],
+  // ** Global CSS
+  css: ["vuetify/lib/styles/main.sass"],
+
+  // ** Build configuration
+  build: {
+    transpile: ["vuetify"],
+  },
+
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag) => ["md-linedivider"].includes(tag),
+    },
+  },
+
+  testUtils: {},
 })

package/package.json

@@ -1,40 +1,56 @@
 {
   "name": "@geode/opengeodeweb-front",
   "scripts": {
-    "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
+    "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "devDependencies": {
+    "@nuxt/test-utils": "^3.11.0",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitest/coverage-v8": "^1.2.2",
+    "@vue/test-utils": "^2.4.4",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-nuxt": "^4.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-prettier-vue": "^5.0.0",
-    "eslint-plugin-vue": "^9.19.2",
+    "eslint-plugin-vue": "^9.21.0",
     "eslint-plugin-vuetify": "^2.1.1",
-    "nuxt": "^3.8.2",
-    "prettier": "3.1.1"
+    "happy-dom": "^13.3.8",
+    "jsdom": "^24.0.0",
+    "nuxt": "^3.10.0",
+    "playwright-core": "^1.41.1",
+    "prettier": "3.2.4",
+    "resize-observer-polyfill": "^1.5.1",
+    "vite": "^5.0.12",
+    "vite-plugin-vuetify": "^2.0.1",
+    "vitest": "^1.2.2",
+    "vitest-environment-nuxt": "^1.0.0"
   },
   "overrides": {
     "vue": "latest"
   },
   "description": "OpenSource Vue/Vuetify framework for web applications",
   "type": "module",
-  "version": "6.2.1-rc.1",
+  "version": "6.3.0-rc.1",
   "main": "./nuxt.config.js",
   "dependencies": {
-    "@kitware/vtk.js": "^29.2.0",
-    "@mdi/font": "^7.3.67",
+    "@kitware/vtk.js": "^29.4.6",
+    "@mdi/font": "^7.4.47",
     "@pinia/nuxt": "^0.5.1",
-    "@types/node": "^20.10.5",
-    "@vueuse/components": "^10.7.0",
-    "@vueuse/core": "^10.7.0",
+    "@types/node": "^20.11.13",
+    "@vueuse/components": "^10.7.2",
+    "@vueuse/core": "^10.7.2",
+    "@vueuse/nuxt": "^10.7.2",
     "ajv": "^8.12.0",
     "lodash": "^4.17.21",
     "pinia": "^2.1.7",
-    "sass": "^1.69.5",
+    "sass": "^1.70.0",
     "semver": "^7.5.4",
     "vue-recaptcha": "^2.0.3",
-    "vuetify": "^3.4.7",
+    "vue3-carousel": "^0.3.1",
+    "vuetify": "^3.5.1",
     "wslink": "^1.12.4"
   },
   "repository": {

package/stores/cloud.js

@@ -1,4 +1,4 @@
-import { useStorage } from "@vueuse/core"
+import { useFetch, useStorage } from "@vueuse/core"
 
 export const use_cloud_store = defineStore("cloud", {
   state: () => ({
@@ -7,6 +7,14 @@ export const use_cloud_store = defineStore("cloud", {
     is_connexion_launched: false,
   }),
   getters: {
+    api_url: () => {
+      const public_runtime_config = useRuntimeConfig().public
+      if (public_runtime_config.NODE_ENV == "test") {
+        return ""
+      }
+      var api_url = `${public_runtime_config.GEODE_PROTOCOL}://${public_runtime_config.API_URL}:${public_runtime_config.GEODE_PORT}`
+      return api_url
+    },
     is_running: () => {
       return use_geode_store().is_running && use_websocket_store().is_running
     },
@@ -31,7 +39,6 @@ export const use_cloud_store = defineStore("cloud", {
         const { data, error } = await useFetch(`${geode_store.base_url}/ping`, {
           method: "POST",
         })
-        console.log("error", error)
         if (data.value !== null) {
           geode_store.is_running = true
           return geode_store.ping_task()
@@ -43,16 +50,20 @@ export const use_cloud_store = defineStore("cloud", {
     async create_backend() {
       const geode_store = use_geode_store()
       const errors_store = use_errors_store()
-      const config = useRuntimeConfig()
-      const public_runtime_config = config.public
-      const { data, error } = await useFetch(
-        `${public_runtime_config.GEODE_PROTOCOL}://${public_runtime_config.API_URL}:${public_runtime_config.GEODE_PORT}${public_runtime_config.SITE_BRANCH}/${public_runtime_config.PROJECT}/createbackend`,
-        { method: "POST" },
+      const public_runtime_config = useRuntimeConfig().public
+      const url = this.api_url.concat(
+        public_runtime_config.PROJECT,
+        public_runtime_config.SITE_BRANCH,
+        "/createbackend",
       )
+      const { data, error } = await useFetch(url, {
+        method: "POST",
+      })
       if (data.value !== null) {
+        console.log("DATA", data)
         this.ID = data.value.ID
         localStorage.setItem("ID", data.value.ID)
-        geode_store.is_running = true
+        geode_store.$patch({ is_running: true })
         return geode_store.ping_task()
       } else {
         console.log("error : ", error)

package/stores/geode.js

@@ -6,9 +6,10 @@ export const use_geode_store = defineStore("geode", {
   getters: {
     base_url: () => {
       const cloud_store = use_cloud_store()
+      const api_url = cloud_store.api_url
+      var geode_url = `${api_url}`
       const public_runtime_config = useRuntimeConfig().public
-      var geode_url = `${public_runtime_config.GEODE_PROTOCOL}://${public_runtime_config.API_URL}:${public_runtime_config.GEODE_PORT}`
-      if (process.env.NODE_ENV == "production") {
+      if (public_runtime_config.NODE_ENV == "production") {
         geode_url += `/${cloud_store.ID}/geode`
       }
       return geode_url
@@ -23,14 +24,15 @@ export const use_geode_store = defineStore("geode", {
     },
     async do_ping() {
       const errors_store = use_errors_store()
-      const { data, error } = await useFetch(`${this.base_url}/ping`, {
+      const { data } = await useFetch(`${this.base_url}/ping`, {
         method: "POST",
       })
       if (data.value !== null) {
         this.is_running = true
+        return
       } else {
-        errors_store.server_error = true
-        console.log("error : ", error)
+        errors_store.$patch({ server_error: true })
+        return
       }
     },
     start_request() {

package/test/components/CrsSelector.nuxt.test.js

@@ -0,0 +1,51 @@
+// @vitest-environment nuxt
+
+import { describe, expect, test } 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 CrsSelector from "@/components/CrsSelector.vue"
+import schema from "@/assets/schemas/CrsSelector.json"
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+global.ResizeObserver = require("resize-observer-polyfill")
+
+describe("CrsSelector.vue", async () => {
+  test(`BRep`, async () => {
+    const crs_list = [
+      {
+        authority: "EPSG",
+        code: "2000",
+        name: "Anguilla 1957 / British West Indies Grid",
+      },
+    ]
+    registerEndpoint(schema.$id, {
+      method: schema.method,
+      handler: () => ({
+        crs_list,
+      }),
+    })
+    const key_to_update = "key"
+    const wrapper = await mountSuspended(CrsSelector, {
+      global: {
+        plugins: [vuetify],
+      },
+      props: { input_geode_object: "BRep", key_to_update },
+    })
+    const td = await wrapper.find("td")
+    const imput = await td.find("input")
+    await imput.trigger("click")
+    expect(wrapper.emitted()).toHaveProperty("update_values")
+    expect(wrapper.emitted().update_values).toHaveLength(1)
+    expect(wrapper.emitted().update_values[0][0]).toEqual({
+      [key_to_update]: crs_list[0],
+    })
+  })
+})

package/test/components/ErrorsBanner.nuxt.test.js

@@ -0,0 +1,46 @@
+// @vitest-environment nuxt
+
+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 ErrorsBanner from "@/components/Errors/Banner.vue"
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+describe("ErrorsBanner.vue", async () => {
+  test(`Test reload`, async () => {
+    const wrapper = mount(ErrorsBanner, {
+      global: {
+        plugins: [vuetify],
+      },
+    })
+    const reload_spy = vi.spyOn(wrapper.vm, "reload")
+    const errors_store = use_errors_store()
+    await errors_store.$patch({ server_error: true })
+    expect(errors_store.server_error).toBe(true)
+    const v_btn = wrapper.findAll(".v-btn")
+    await v_btn[0].trigger("click")
+
+    expect(reload_spy).toHaveBeenCalledTimes(1)
+  }),
+    test(`Test delete error`, async () => {
+      const wrapper = mount(ErrorsBanner, {
+        global: {
+          plugins: [vuetify],
+        },
+      })
+
+      const errors_store = use_errors_store()
+      await errors_store.$patch({ server_error: true })
+      expect(errors_store.server_error).toBe(true)
+      const v_btn = wrapper.findAll(".v-btn")
+      await v_btn[1].trigger("click")
+      expect(errors_store.server_error).toBe(false)
+    })
+})

package/test/components/ErrorsSnackers.nuxt.test.js

@@ -0,0 +1,37 @@
+// @vitest-environment nuxt
+
+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 ErrorsSnackers from "@/components/Errors/Snackers.vue"
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+describe("ErrorsSnackers.vue", async () => {
+  test(`Test delete error`, async () => {
+    const wrapper = await mount(ErrorsSnackers, {
+      global: {
+        plugins: [vuetify],
+      },
+    })
+
+    const errors_store = use_errors_store()
+    const error = {
+      code: 404,
+      route: "/test",
+      name: "Test message",
+      description: "Test desription",
+    }
+    await errors_store.add_error(error)
+    expect(errors_store.errors.length).toBe(1)
+    const v_btn = wrapper.findComponent(components.VBtn)
+    await v_btn.trigger("click")
+    expect(errors_store.errors.length).toBe(0)
+  })
+})

package/test/components/ExtensionSelector.nuxt.test.js

@@ -0,0 +1,51 @@
+// @vitest-environment nuxt
+
+import { describe, expect, test } 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 ExtensionSelector from "@/components/ExtensionSelector.vue"
+import schema from "@/assets/schemas/ExtensionSelector.json"
+import { flushPromises } from "@vue/test-utils"
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+global.ResizeObserver = require("resize-observer-polyfill")
+
+describe("ExtensionSelector.vue", async () => {
+  test(`Select geode_object & extension`, async () => {
+    const output_geode_object = "BRep"
+    const output_extension = "msh"
+
+    registerEndpoint(schema.$id, {
+      method: schema.method,
+      handler: () => ({
+        geode_objects_and_output_extensions: {
+          BRep: { msh: { is_saveable: true } },
+        },
+      }),
+    })
+    const wrapper = await mountSuspended(ExtensionSelector, {
+      global: {
+        plugins: [vuetify],
+      },
+      props: { input_geode_object: "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]).toEqual({
+      output_geode_object,
+      output_extension,
+    })
+  })
+})

package/test/components/FileSelector.nuxt.test.js

@@ -0,0 +1,58 @@
+// @vitest-environment nuxt
+
+import { describe, expect, test } 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 FileSelector from "@/components/FileSelector.vue"
+import FileUploader from "@/components/FileUploader.vue"
+import schema from "@/assets/schemas/FileSelector.json"
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+global.ResizeObserver = require("resize-observer-polyfill")
+
+describe("FileSelector.vue", async () => {
+  test(`Select file`, async () => {
+    registerEndpoint(schema.$id, {
+      method: schema.method,
+      handler: () => ({
+        extensions: ["1", "2", "3"],
+      }),
+    })
+    const wrapper = await mountSuspended(FileSelector, {
+      global: {
+        plugins: [vuetify],
+      },
+      props: { multiple: false, key: "test", route: "/upload" },
+    })
+
+    const file_uploader = wrapper.findComponent(FileUploader)
+
+    registerEndpoint("/upload", {
+      method: "PUT",
+      handler: () => ({}),
+    })
+
+    const v_file_input = file_uploader.findComponent(components.VFileInput)
+    await v_file_input.trigger("click")
+    const files = [new File(["fake_file"], "fake_file.txt")]
+    await v_file_input.setValue(files)
+    await v_file_input.trigger("change")
+    const v_btn = wrapper.findComponent(components.VBtn)
+    await v_btn.trigger("click")
+    await flushPromises()
+    expect(wrapper.emitted()).toHaveProperty("update_values")
+    expect(wrapper.emitted().update_values).toHaveLength(1)
+    expect(wrapper.emitted().update_values[0][0]).toEqual({
+      files,
+    })
+  })
+})

package/test/components/FileUploader.nuxt.test.js

@@ -0,0 +1,42 @@
+// @vitest-environment nuxt
+
+import { describe, expect, test } 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 FileUploader from "@/components/FileUploader.vue"
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+global.ResizeObserver = require("resize-observer-polyfill")
+
+describe("FileUploader.vue", async () => {
+  test(`Upload file`, async () => {
+    registerEndpoint("/upload", {
+      method: "PUT",
+      handler: () => ({}),
+    })
+    const wrapper = await mountSuspended(FileUploader, {
+      global: {
+        plugins: [vuetify],
+      },
+      props: { multiple: false, accept: "*.txt", route: "/upload" },
+    })
+    const v_file_input = wrapper.findComponent(components.VFileInput)
+    await v_file_input.trigger("click")
+    const files = [new File(["fake_file"], "fake_file.txt")]
+    await v_file_input.setValue(files)
+    await v_file_input.trigger("change")
+    const v_btn = wrapper.findComponent(components.VBtn)
+    await v_btn.trigger("click")
+    await flushPromises()
+    expect(wrapper.emitted().files_uploaded[0][0]).toEqual(files)
+  })
+})

package/test/components/Launcher.nuxt.test.js

@@ -0,0 +1,34 @@
+// @vitest-environment nuxt
+
+import { describe, expect, test, vi } from "vitest"
+import { flushPromises, mount } from "@vue/test-utils"
+
+import { createVuetify } from "vuetify"
+import * as components from "vuetify/components"
+import * as directives from "vuetify/directives"
+
+import Launcher from "@/components/Launcher.vue"
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+const cloud_store = use_cloud_store()
+
+global.ResizeObserver = require("resize-observer-polyfill")
+
+describe("Launcher.vue", async () => {
+  test(`Mount`, async () => {
+    const spy_cloud_store = vi.spyOn(cloud_store, "create_connexion")
+    const wrapper = mount(Launcher, {
+      global: {
+        plugins: [vuetify],
+      },
+    })
+    expect(wrapper.exists()).toBe(true)
+    await cloud_store.$patch({ is_captcha_validated: true })
+    flushPromises()
+    expect(spy_cloud_store).toHaveBeenCalled()
+  })
+})

package/test/components/MissingFilesSelector.nuxt.test.js

@@ -0,0 +1,67 @@
+// @vitest-environment nuxt
+
+import { describe, expect, test } 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 MissingFilesSelector from "@/components/MissingFilesSelector.vue"
+import FileUploader from "@/components/FileUploader.vue"
+
+import schema from "@/assets/schemas/MissingFilesSelector.json"
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+global.ResizeObserver = require("resize-observer-polyfill")
+
+describe("MissingFilesSelector.vue", async () => {
+  test(`Select file`, async () => {
+    registerEndpoint(schema.$id, {
+      method: schema.method,
+      handler: () => ({
+        has_missing_files: true,
+        mandatory_files: ["fake_file.txt"],
+        additional_files: ["fake_file_2.txt"],
+      }),
+    })
+    const wrapper = await mountSuspended(MissingFilesSelector, {
+      global: {
+        plugins: [vuetify],
+      },
+      props: {
+        multiple: false,
+        input_geode_object: "BRep",
+        filenames: ["fake_file.txt"],
+        route: "/upload_file",
+      },
+    })
+
+    const file_uploader = wrapper.findComponent(FileUploader)
+    expect(file_uploader.exists()).toBe(true)
+
+    const v_file_input = file_uploader.findComponent(components.VFileInput)
+    await v_file_input.trigger("click")
+    const files = [new File(["fake_file"], "fake_file.txt")]
+    await v_file_input.setValue(files)
+    await v_file_input.trigger("change")
+    const v_btn = file_uploader.findComponent(components.VBtn)
+
+    registerEndpoint("/upload_file", {
+      method: "PUT",
+      handler: () => ({}),
+    })
+    await v_btn.trigger("click")
+    await flushPromises()
+    expect(wrapper.emitted()).toHaveProperty("update_values")
+    expect(wrapper.emitted().update_values).toHaveLength(1)
+    expect(wrapper.emitted().update_values[0][0]).toEqual({
+      additional_files: files,
+    })
+  })
+})