Merge pull request #157 from Geode-solutions/fix/auto_upload

fix(FileUploader): upload_files only if auto_upload

Author: JulienChampagnol

components/FileUploader.vue

@@ -82,9 +82,11 @@
     toggle_loading()
   }
 
-  if (props.files.length && props.auto_upload) {
+  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"
 
@@ -68,28 +68,65 @@ describe("FileSelector.vue", async () => {
     })
   })
 
-  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()
-    expect(wrapper.componentVM.files).toEqual(files)
+    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,
+      })
+    })
+
+    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)
+    })
   })
 })