Merge pull request #75 from owncloud/feat/different-update-events

feat: emit current folder and fix update type

changelog/unreleased/bugfix-emit-location-as-array

@@ -0,0 +1,7 @@
+Bugfix: Emit location as an array
+
+When loading new folder in Location picker, we are emitting an "update" with the current route as an argument.
+We've fixed that the argument has type array now so that it is consistent with all other arguments returned in the "update" event.
+
+https://github.com/owncloud/file-picker/issues/71
+https://github.com/owncloud/file-picker/pull/75

changelog/unreleased/enhancement-folderLoaded-event

@@ -0,0 +1,7 @@
+Enhancement: Emit current folder in "folderLoaded" event
+
+We've added event called "folderLoaded" that is emitted every time a loading of any folder has ended.
+It is emitting the current folder as an argument.
+
+https://github.com/owncloud/file-picker/issues/71
+https://github.com/owncloud/file-picker/pull/75

docs/accessing-resources.md

@@ -9,7 +9,7 @@ geekdocFilePath: accessing-resources.md
 
 {{< toc >}}
 
-File picker is returning selected resources via event called `selectResources`. To access them, you need to set an event listener where you'll be able to get them as part of the response of the callback function.
+If using File picker as a web component, it is returning selected resources via events called `select` and `update`. To access them, you need to set an event listener where you'll be able to get them as part of the response of the callback function.
 
 ## Access resources
 ```html
@@ -19,7 +19,7 @@ File picker is returning selected resources via event called `selectResources`.
   const item = document.getElementById('file-picker')
   let resources = []
 
-  item.addEventListener('selectResources', event => {
+  item.addEventListener('select', event => {
     resources = event.detail[0]
   })
 </script>

docs/component-reference.md

@@ -31,4 +31,5 @@ geekdocFilePath: component-reference.md
 | :---- | :-------- | :---------- |
 | `update` | Resources array | Emitted when any resource is selected or deselected or if a folder has been loaded in location picker |
 | `select` | Resources array | Emitted when the select button is clicked |
-| `cancel` | Native click event object | Emitted when the cancel button is clicked |
+| `cancel` | Native click event object | Emitted when the cancel button is clicked |
+| `folderLoaded` | Current folder object | Emitted when loading of a folder has ended |

src/App.vue

@@ -18,6 +18,7 @@
       @update="selectResources"
       @select="emitSelectBtnClick"
       @cancel="cancel"
+      @folderLoaded="onFolderLoaded"
     />
   </div>
 </template>
@@ -216,6 +217,10 @@ export default {
       }
       this.$emit('cancel')
     },
+
+    onFolderLoaded(folder) {
+      this.$emit('folderLoaded', folder)
+    }
   },
 }
 </script>

src/components/FilePicker.vue

@@ -119,9 +119,11 @@ export default {
           this.currentFolder = resources[0]
 
           if (this.isLocationPicker) {
-            this.$emit('update', this.currentFolder)
+            this.$emit('update', [this.currentFolder])
           }
 
+          this.$emit('folderLoaded', this.currentFolder)
+
           this.state = 'loaded'
         })
         .catch((error) => {

tests/integration/specs/filePicker.spec.js

@@ -64,13 +64,31 @@ describe('Users can select location from within the file picker', () => {
 
     await waitFor(() => expect(getByTestId('list-resources-table')).toBeVisible())
 
-    expect(emitted().update[emitted().update.length - 1][0].id).toEqual('144055')
+    expect(emitted().update[emitted().update.length - 1][0][0].id).toEqual('144055')
 
     await fireEvent.click(getByText('Photos'))
 
     await waitFor(() => expect(getByText('Teotihuacan')).toBeVisible())
 
-    expect(emitted().update[emitted().update.length - 1][0].id).toEqual('144228')
+    expect(emitted().update[emitted().update.length - 1][0][0].id).toEqual('144228')
+  })
+
+  test('Developers can get current loaded folder from "folderLoaded" event after the load is finished', async () => {
+    const { getByTestId, emitted, getByText } = render(FilePicker, {
+      props: {
+        variation: 'location',
+      },
+    })
+
+    await waitFor(() => expect(getByTestId('list-resources-table')).toBeVisible())
+
+    expect(emitted().folderLoaded[0][0].id).toEqual('144055')
+
+    await fireEvent.click(getByText('Photos'))
+
+    await waitFor(() => expect(getByText('Teotihuacan')).toBeVisible())
+
+    expect(emitted().folderLoaded[1][0].id).toEqual('144228')
   })
 })
 

tests/unit/filePicker.spec.js

@@ -1,4 +1,4 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { mount, createLocalVue, shallowMount } from '@vue/test-utils'
 
 import { listResources } from '../helpers/mocks'
 import { stubs } from '../helpers/stubs'
@@ -14,6 +14,12 @@ localVue.prototype.$client = {
 }
 
 describe('File picker', () => {
+  const waitTillItemsLoaded = async (wrapper) => {
+    // Wait twice to give the list of resources enough time to render
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+  }
+
   it('renders a list of resources', async () => {
     const wrapper = mount(FilePicker, {
       localVue,
@@ -23,9 +29,7 @@ describe('File picker', () => {
       stubs,
     })
 
-    // Wait twice to give the list of resources enough time to render
-    await wrapper.vm.$nextTick()
-    await wrapper.vm.$nextTick()
+    await waitTillItemsLoaded(wrapper)
 
     expect(wrapper.findAll('[filename="ownCloud Manual.pdf"]').length).toEqual(1)
   })
@@ -53,9 +57,7 @@ describe('File picker', () => {
       stubs,
     })
 
-    // Wait twice to give the list of resources enough time to render
-    await wrapper.vm.$nextTick()
-    await wrapper.vm.$nextTick()
+    await waitTillItemsLoaded(wrapper)
 
     // For test purpose set only the folder name instead of the whole object
     await wrapper.setData({ selectedResources: 'Documents' })
@@ -86,4 +88,31 @@ describe('File picker', () => {
 
     expect(wrapper.emitted().cancel).toBeTruthy()
   })
+
+  describe('emits events after loading folders in location variant', () => {
+    const createWrapper = () =>
+      shallowMount(FilePicker, {
+        localVue,
+        propsData: {
+          variation: 'location',
+        },
+        stubs,
+      })
+
+    it('emits "update" with argument of type array', async () => {
+      const wrapper = createWrapper()
+
+      await waitTillItemsLoaded(wrapper)
+
+      expect(Array.isArray(wrapper.emitted().update[0][0])).toBe(true)
+    })
+
+    it('emits "folderLoaded" with current folder as an argument', async () => {
+      const wrapper = createWrapper()
+
+      await waitTillItemsLoaded(wrapper)
+
+      expect(wrapper.emitted().folderLoaded[0][0].id).toEqual('144055')
+    })
+  })
 })