update tests/components/composables/stores

JulienChampagnol · JulienChampagnol · commit 8491f0a124b8 · 2024-08-19T17:39:47.000+02:00
diff --git a/components/Errors/Banner.vue b/components/Errors/Banner.vue
@@ -1,8 +1,8 @@
 <template>
   <v-banner
-    v-if="server_error"
+    v-if="feedback_store.server_error"
     elevation="2"
-    style="background-color: grey; z-index: 100"
+    style="background-color: grey; z-index: 9999"
     position="fixed"
   >
     <v-row>
@@ -33,7 +33,7 @@
           size="20"
           color="grey"
           class=".align-center"
-          @click="errors_store.delete_server_error()"
+          @click="feedback_store.delete_server_error()"
         >
           <v-icon icon="mdi-close" size="20" color="white" />
         </v-btn>
@@ -43,8 +43,7 @@
 </template>
 
 <script setup>
-  const errors_store = use_errors_store()
-  const { server_error } = storeToRefs(errors_store)
+  const feedback_store = use_feedback_store()
 
   function reload() {
     window.location.reload()
diff --git a/components/Errors/Snackers.vue b/components/Errors/Snackers.vue
@@ -1,21 +1,21 @@
 <template>
   <v-snackbar
-    v-for="(error, index) in errors"
-    :key="index"
-    v-model="show"
+    v-for="(feedback, index) in feedback_store.feedbacks"
+    :key="feedback"
     :style="{ 'margin-bottom': calc_margin(index) }"
-    color="error"
+    :color="feedback.type"
     location="bottom right"
     transition="slide-x-reverse-transition"
-    max-width="30%"
+    width="200px"
     height="20px"
+    z-index="99999"
   >
     <v-row dense class="flex-nowrap">
       <v-col cols="auto">
-        <v-tooltip location="left">
+        <v-tooltip v-if="feedback.type === 'error'" location="left">
           <span>
-            error: {{ error.code }} {{ error.name }}<br />
-            ressource: {{ error.route }}
+            error: {{ feedback.code }} {{ feedback.name }}<br />
+            ressource: {{ feedback.route }}
             <br />
           </span>
           <template #activator="{ props }">
@@ -24,16 +24,21 @@
             </v-icon>
           </template>
         </v-tooltip>
+        <v-tooltip v-else-if="feedback.type === 'success'" location="left">
+            <v-icon color="white" class="justify-right">
+              mdi-check-circle-outline
+            </v-icon>
+        </v-tooltip>
       </v-col>
       <v-col cols="9" class="text-no-wrap overflow-hidden">
         <v-tooltip location="top">
           <span>
-            {{ error.description }}
+            {{ feedback.description }}
             <br />
           </span>
           <template #activator="{ props }">
             <div v-bind="props">
-              {{ error.description }}
+              {{ feedback.description }}
             </div>
           </template>
         </v-tooltip>
@@ -44,8 +49,8 @@
           icon
           variant="flat"
           size="20"
-          color="error"
-          @click="errors_store.delete_error(index)"
+          :color="feedback.type"
+          @click="feedback_store.delete_feedback(index)"
         >
           <v-icon icon="mdi-close" size="20" color="white" />
         </v-btn>
@@ -55,10 +60,7 @@
 </template>
 
 <script setup>
-  const errors_store = use_errors_store()
-  const { errors } = storeToRefs(errors_store)
-
-  const show = true
+  const feedback_store = use_feedback_store()
 
   function calc_margin(index) {
     return index * 60 + 8 + "px"
diff --git a/composables/api_fetch.js b/composables/api_fetch.js
@@ -1,18 +1,20 @@
 import _ from "lodash"
+import { type } from "os"
 
 export function api_fetch(
   { schema, params },
   { request_error_function, response_function, response_error_function } = {},
 ) {
-  const errors_store = use_errors_store()
+  const feedback_store = use_feedback_store()
   const geode_store = use_geode_store()
 
   const body = params || {}
 
   const { valid, error } = validate_schema(schema, body)
 
   if (!valid) {
-    errors_store.add_error({
+    feedback_store.add_feedback({
+      type: "error",
       code: 400,
       route: schema.$id,
       name: "Bad request",
@@ -39,7 +41,8 @@ export function api_fetch(
     ...request_options,
     onRequestError({ error }) {
       geode_store.stop_request()
-      errors_store.add_error({
+      feedback_store.add_feedback({
+        type: "error",
         code: error.code,
         route: schema.$id,
         name: error.message,
@@ -59,7 +62,8 @@ export function api_fetch(
     },
     onResponseError({ response }) {
       geode_store.stop_request()
-      errors_store.add_error({
+      feedback_store.add_feedback({
+        type: "error",
         code: response.status,
         route: schema.$id,
         name: response._data.name,
diff --git a/composables/upload_file.js b/composables/upload_file.js
@@ -2,7 +2,7 @@ export async function upload_file(
   { route, file },
   { request_error_function, response_function, response_error_function } = {},
 ) {
-  const errors_store = use_errors_store()
+  const feedback_store = use_feedback_store()
   const geode_store = use_geode_store()
   if (!(file instanceof File)) {
     throw new Error("file must be a instance of File")
@@ -22,7 +22,8 @@ export async function upload_file(
     ...request_options,
     onRequestError({ error }) {
       geode_store.stop_request()
-      errors_store.add_error({
+      feedback_store.add_feedback({
+        type: "error",
         code: error.code,
         route: route,
         name: error.message,
@@ -42,7 +43,8 @@ export async function upload_file(
     },
     onResponseError({ response }) {
       geode_store.stop_request()
-      errors_store.add_error({
+      feedback_store.add_feedback({
+        type: "error",
         code: response.status,
         route: route,
         name: response._data.name,
diff --git a/composables/viewer_call.js b/composables/viewer_call.js
@@ -2,13 +2,14 @@ export function viewer_call(
   { schema, params = {} },
   { request_error_function, response_function, response_error_function } = {},
 ) {
-  const errors_store = use_errors_store()
+  const feedback_store = use_feedback_store()
   const viewer_store = use_viewer_store()
 
   const { valid, error } = validate_schema(schema, params)
 
   if (!valid) {
-    errors_store.add_error({
+    feedback_store.add_feedback({
+      type: "error",
       code: 400,
       route: schema.route,
       name: "Bad request",
@@ -41,7 +42,8 @@ export function viewer_call(
           },
         )
         .catch((error) => {
-          errors_store.add_error({
+          feedback_store.add_feedback({
+            type: "error",
             code: error.code,
             route: schema.route,
             name: error.message,
diff --git a/stores/errors.js b/stores/errors.js
diff --git a/stores/feedback.js b/stores/feedback.js
@@ -0,0 +1,17 @@
+export const use_feedback_store = defineStore("feedback", {
+  state: () => ({
+    feedbacks: [],
+    server_error: false,
+  }),
+  actions: {
+    add_feedback(feedback) {
+      this.feedbacks.push(feedback)
+    },
+    delete_feedback(feedback_index) {
+      this.feedbacks.splice(feedback_index, 1)
+    },
+    delete_server_error() {
+      this.server_error = false
+    },
+  },
+})
diff --git a/stores/geode.js b/stores/geode.js
@@ -24,15 +24,15 @@ export const use_geode_store = defineStore("geode", {
       setInterval(() => this.do_ping(), 10 * 1000)
     },
     async do_ping() {
-      const errors_store = use_errors_store()
+      const feedback_store = use_feedback_store()
       const { data } = await useFetch(`${this.base_url}/ping`, {
         method: "POST",
       })
       if (data.value !== null) {
         this.is_running = true
         return
       } else {
-        errors_store.$patch({ server_error: true })
+        feedback_store.$patch({ server_error: true })
         return
       }
     },
diff --git a/stores/infra.js b/stores/infra.js
@@ -63,7 +63,7 @@ export const use_infra_store = defineStore("infra", {
     async create_backend() {
       const geode_store = use_geode_store()
       const viewer_store = use_viewer_store()
-      const errors_store = use_errors_store()
+      const feedback_store = use_feedback_store()
 
       if (isElectron()) {
         await window.electronAPI.run_back(geode_store.PORT)
@@ -87,7 +87,7 @@ export const use_infra_store = defineStore("infra", {
           geode_store.$patch({ is_running: true })
           return geode_store.ping_task()
         } else {
-          errors_store.server_error = true
+          feedback_store.server_error = true
         }
       }
     },
diff --git a/test/components/Errors/ErrorsBanner.nuxt.test.js b/test/components/Errors/ErrorsBanner.nuxt.test.js
@@ -21,9 +21,9 @@ describe("ErrorsBanner.vue", async () => {
       },
     })
     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 feedback_store = use_feedback_store()
+    await feedback_store.$patch({ server_error: true })
+    expect(feedback_store.server_error).toBe(true)
     const v_btn = wrapper.findAll(".v-btn")
     await v_btn[0].trigger("click")
 
@@ -36,11 +36,11 @@ describe("ErrorsBanner.vue", async () => {
         },
       })
 
-      const errors_store = use_errors_store()
-      await errors_store.$patch({ server_error: true })
-      expect(errors_store.server_error).toBe(true)
+      const feedback_store = use_feedback_store()
+      await feedback_store.$patch({ server_error: true })
+      expect(feedback_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)
+      expect(feedback_store.server_error).toBe(false)
     })
 })
diff --git a/test/components/Errors/ErrorsSnackers.nuxt.test.js b/test/components/Errors/ErrorsSnackers.nuxt.test.js
@@ -30,17 +30,22 @@ describe("ErrorsSnackers.vue", async () => {
       },
     )
 
-    const errors_store = use_errors_store()
+
+    console.log("wrapper", wrapper)
+
+    const feedback_store = use_feedback_store()
     const error = {
+      type: "error",
       code: 404,
       route: "/test",
       name: "Test message",
       description: "Test desription",
     }
-    await errors_store.add_error(error)
-    expect(errors_store.errors.length).toBe(1)
+    await feedback_store.add_feedback(error)
+    expect(feedback_store.feedbacks.length).toBe(1)
     const v_btn = await wrapper.findComponent(components.VBtn)
+    console.log("v_btn", v_btn)
     await v_btn.trigger("click")
-    expect(errors_store.errors.length).toBe(0)
+    expect(feedback_store.feedbacks.length).toBe(0)
   })
 })
diff --git a/test/composables/api_fetch.nuxt.test.js b/test/composables/api_fetch.nuxt.test.js
@@ -2,7 +2,7 @@ import { describe, expect, test, beforeEach } from "vitest"
 import { registerEndpoint } from "@nuxt/test-utils/runtime"
 
 describe("api_fetch.js", () => {
-  const errors_store = use_errors_store()
+  const feedback_store = use_feedback_store()
 
   const schema = {
     $id: "/test",
@@ -19,7 +19,7 @@ describe("api_fetch.js", () => {
   var params
 
   beforeEach(async () => {
-    await errors_store.$patch({ errors: [] })
+    await feedback_store.$patch({ feedbacks: [] })
   })
 
   test("Ajv wrong params", async () => {
@@ -35,8 +35,8 @@ describe("api_fetch.js", () => {
         "/test: data must have required property 'test'",
       )
     }
-    expect(errors_store.errors.length).toBe(1)
-    expect(errors_store.errors[0].code).toBe(400)
+    expect(feedback_store.feedbacks.length).toBe(1)
+    expect(feedback_store.feedbacks[0].code).toBe(400)
   })
 
   test("onResponse", async () => {
@@ -55,7 +55,7 @@ describe("api_fetch.js", () => {
           },
         },
       )
-      expect(errors_store.errors.length).toBe(0)
+      expect(feedback_store.feedbacks.length).toBe(0)
       expect(response_value).toBe("toto")
     }
   })
@@ -83,7 +83,7 @@ describe("api_fetch.js", () => {
         },
       },
     )
-    expect(errors_store.errors.length).toBe(1)
+    expect(feedback_store.feedbacks.length).toBe(1)
     expect(response_error_value).toBe("error")
   })
 })
diff --git a/test/composables/upload_file.nuxt.test.js b/test/composables/upload_file.nuxt.test.js
diff --git a/test/stores/Errors.test.js b/test/stores/Errors.test.js
diff --git a/test/stores/Feedback.test.js b/test/stores/Feedback.test.js
diff --git a/test/stores/Geode.test.js b/test/stores/Geode.test.js
