From 76d6e4f981e2c3e08e99504bf7c36e22270613cc Mon Sep 17 00:00:00 2001 From: Lukas Hirt Date: Wed, 23 Jun 2021 16:38:42 +0200 Subject: [PATCH] feat: emit current folder --- .../unreleased/bugfix-emit-location-as-array | 7 +++ .../unreleased/enhancement-folderLoaded-event | 7 +++ docs/accessing-resources.md | 4 +- docs/component-reference.md | 3 +- src/App.vue | 5 +++ src/components/FilePicker.vue | 4 +- tests/integration/specs/filePicker.spec.js | 22 +++++++++- tests/unit/filePicker.spec.js | 43 ++++++++++++++++--- 8 files changed, 82 insertions(+), 13 deletions(-) create mode 100644 changelog/unreleased/bugfix-emit-location-as-array create mode 100644 changelog/unreleased/enhancement-folderLoaded-event diff --git a/changelog/unreleased/bugfix-emit-location-as-array b/changelog/unreleased/bugfix-emit-location-as-array new file mode 100644 index 0000000..b6ae500 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/changelog/unreleased/enhancement-folderLoaded-event b/changelog/unreleased/enhancement-folderLoaded-event new file mode 100644 index 0000000..249c52e --- /dev/null +++ b/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 \ No newline at end of file diff --git a/docs/accessing-resources.md b/docs/accessing-resources.md index 8dd59e8..10ab1ae 100644 --- a/docs/accessing-resources.md +++ b/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] }) diff --git a/docs/component-reference.md b/docs/component-reference.md index 863d76c..e4b2cd4 100644 --- a/docs/component-reference.md +++ b/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 | \ No newline at end of file +| `cancel` | Native click event object | Emitted when the cancel button is clicked | +| `folderLoaded` | Current folder object | Emitted when loading of a folder has ended | \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index e5dc607..4873736 100644 --- a/src/App.vue +++ b/src/App.vue @@ -18,6 +18,7 @@ @update="selectResources" @select="emitSelectBtnClick" @cancel="cancel" + @folderLoaded="onFolderLoaded" /> @@ -216,6 +217,10 @@ export default { } this.$emit('cancel') }, + + onFolderLoaded(folder) { + this.$emit('folderLoaded', folder) + } }, } diff --git a/src/components/FilePicker.vue b/src/components/FilePicker.vue index 6080052..7ae6d78 100644 --- a/src/components/FilePicker.vue +++ b/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) => { diff --git a/tests/integration/specs/filePicker.spec.js b/tests/integration/specs/filePicker.spec.js index ea23517..91980fc 100644 --- a/tests/integration/specs/filePicker.spec.js +++ b/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') }) }) diff --git a/tests/unit/filePicker.spec.js b/tests/unit/filePicker.spec.js index 8735ffa..9513dc4 100644 --- a/tests/unit/filePicker.spec.js +++ b/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') + }) + }) })