Merge pull request #158 from Geode-solutions/next

Next

Author: JulienChampagnol

components/FileSelector.vue

@@ -2,7 +2,7 @@
   <FetchingData v-if="loading" />
   <FileUploader
     v-else
-    v-bind="{ multiple, accept, files }"
+    v-bind="{ multiple, accept, files, auto_upload }"
     @files_uploaded="files_uploaded_event"
   />
 </template>
@@ -21,18 +21,18 @@
     multiple: { type: Boolean, required: true },
     supported_feature: { type: String, required: false, default: null },
     files: { type: Array, required: false, default: [] },
+    auto_upload: { type: Boolean, required: false, default: true },
   })
 
-  const { multiple, supported_feature } = props
-
+  const { auto_upload, multiple, supported_feature } = props
   const accept = ref("")
   const loading = ref(false)
 
   const toggle_loading = useToggle(loading)
 
   function files_uploaded_event(value) {
     if (value.length) {
-      emit("update_values", { files: value })
+      emit("update_values", { files: value, auto_upload: false })
       emit("increment_step")
     }
   }

components/FileUploader.vue

@@ -40,6 +40,7 @@
     multiple: { type: Boolean, required: true },
     accept: { type: String, required: true },
     files: { type: Array, required: false, default: [] },
+    auto_upload: { type: Boolean, required: false, default: false },
   })
 
   const { multiple, accept } = toRefs(props)
@@ -83,7 +84,9 @@
 
   if (props.files.length) {
     files.value = props.files
-    upload_files()
+    if (props.auto_upload) {
+      upload_files()
+    }
   }
 
   function clear() {

test/components/FileSelector.nuxt.test.js

@@ -1,6 +1,6 @@
 // @vitest-environment nuxt
 
-import { describe, expect, test } from "vitest"
+import { describe, expect, test, vi } from "vitest"
 import { registerEndpoint, mountSuspended } from "@nuxt/test-utils/runtime"
 import { flushPromises } from "@vue/test-utils"
 
@@ -54,6 +54,7 @@ describe("FileSelector.vue", async () => {
     const v_file_input = file_uploader.findComponent(components.VFileInput)
     await v_file_input.trigger("click")
     const files = [new File(["fake_file"], "fake_file.txt")]
+    const auto_upload = false
     await v_file_input.setValue(files)
     await v_file_input.trigger("change")
     const v_btn = wrapper.findComponent(components.VBtn)
@@ -63,36 +64,69 @@ describe("FileSelector.vue", async () => {
     expect(wrapper.emitted().update_values).toHaveLength(1)
     expect(wrapper.emitted().update_values[0][0]).toEqual({
       files,
+      auto_upload,
     })
   })
 
-  test(`Files prop`, async () => {
+  describe(`Files prop`, () => {
     registerEndpoint(allowed_files_schema.$id, {
       method: allowed_files_schema.methods[0],
       handler: () => ({
         extensions: ["1", "2", "3"],
       }),
     })
 
-    const files = [new File(["fake_file"], "fake_file.txt")]
-
-    const wrapper = await mountSuspended(FileSelector, {
-      global: {
-        plugins: [vuetify, pinia],
-      },
-      props: { multiple: false, supported_feature: "test", files: files },
-    })
     registerEndpoint(upload_file_schema.$id, {
       method: upload_file_schema.methods[1],
       handler: () => ({}),
     })
 
-    await flushPromises()
+    const files = [new File(["fake_file"], "fake_file.txt")]
+    test("auto_upload true", async () => {
+      const auto_upload = true
+      const wrapper = await mountSuspended(FileSelector, {
+        global: {
+          plugins: [vuetify, pinia],
+        },
+        props: {
+          multiple: false,
+          supported_feature: "test",
+          files: files,
+          auto_upload,
+        },
+      })
+
+      await flushPromises()
+      expect(wrapper.componentVM.files).toEqual(files)
+      expect(wrapper.emitted()).toHaveProperty("update_values")
+      expect(wrapper.emitted().update_values).toHaveLength(1)
+      expect(wrapper.emitted().update_values[0][0]).toEqual({
+        files,
+        auto_upload: false,
+      })
+    })
 
-    expect(wrapper.emitted()).toHaveProperty("update_values")
-    expect(wrapper.emitted().update_values).toHaveLength(1)
-    expect(wrapper.emitted().update_values[0][0]).toEqual({
-      files,
+    test("auto_upload false", async () => {
+      const auto_upload = false
+      const wrapper = await mountSuspended(FileSelector, {
+        global: {
+          plugins: [vuetify, pinia],
+        },
+        props: {
+          multiple: false,
+          supported_feature: "test",
+          files: files,
+          auto_upload,
+        },
+      })
+
+      await flushPromises()
+
+      const file_uploader = wrapper.findComponent(FileUploader)
+      console.log("wrapper", wrapper)
+      expect(wrapper.vm.files).toEqual(files)
+      const upload_files = vi.spyOn(file_uploader.vm, "upload_files")
+      expect(upload_files).not.toHaveBeenCalled()
     })
   })
 })

test/components/FileUploader.nuxt.test.js

@@ -27,31 +27,47 @@ describe("FileUploader.vue", async () => {
   const geode_store = use_geode_store()
   geode_store.base_url = ""
 
-  test(`Upload file`, async () => {
-    registerEndpoint(upload_file_schema.$id, {
-      method: upload_file_schema.methods[0],
-      handler: () => ({}),
-    })
-    const wrapper = await mountSuspended(FileUploader, {
-      global: {
-        plugins: [vuetify, pinia],
-      },
-      props: { multiple: false, accept: "*.txt" },
-    })
-    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)
-
-    registerEndpoint(upload_file_schema.$id, {
-      method: upload_file_schema.methods[1],
-      handler: () => ({}),
+  registerEndpoint(upload_file_schema.$id, {
+    method: upload_file_schema.methods[0],
+    handler: () => ({}),
+  })
+  registerEndpoint(upload_file_schema.$id, {
+    method: upload_file_schema.methods[1],
+    handler: () => ({}),
+  })
+
+  const files = [new File(["fake_file"], "fake_file.txt")]
+
+  describe(`Upload file`, async () => {
+    test(`prop auto_upload false`, async () => {
+      const wrapper = await mountSuspended(FileUploader, {
+        global: {
+          plugins: [vuetify, pinia],
+        },
+        props: { multiple: false, accept: "*.txt" },
+      })
+
+      const v_file_input = wrapper.findComponent(components.VFileInput)
+      await v_file_input.trigger("click")
+
+      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)
     })
 
-    await v_btn.trigger("click")
-    await flushPromises()
-    expect(wrapper.emitted().files_uploaded[0][0]).toEqual(files)
+    test(`prop auto_upload true`, async () => {
+      const wrapper = await mountSuspended(FileUploader, {
+        global: {
+          plugins: [vuetify, pinia],
+        },
+        props: { multiple: false, accept: "*.txt", files, auto_upload: true },
+      })
+      await flushPromises()
+      expect(wrapper.emitted().files_uploaded[0][0]).toEqual(files)
+    })
   })
 })