diff --git a/changelog/unreleased/bugfix-do-not-propagate-click-event b/changelog/unreleased/bugfix-do-not-propagate-click-event new file mode 100644 index 0000000..ffd0292 --- /dev/null +++ b/changelog/unreleased/bugfix-do-not-propagate-click-event @@ -0,0 +1,6 @@ +Bugfix: Do not propagate click event on checkbox + +When clicking on the checkbox to select a resource, it hasn't been selected because a click on the row would have been caught as well which would reset the selection again. +We've fixed this issue by not propagating the click event on checkbox to the parent. + +https://github.com/owncloud/file-picker/pull/53 \ No newline at end of file diff --git a/src/components/ListResources.vue b/src/components/ListResources.vue index 4fd7350..ed6edc1 100644 --- a/src/components/ListResources.vue +++ b/src/components/ListResources.vue @@ -12,11 +12,12 @@ diff --git a/tests/integration/specs/filePicker.spec.js b/tests/integration/specs/filePicker.spec.js index 92e08ce..14e8ebf 100644 --- a/tests/integration/specs/filePicker.spec.js +++ b/tests/integration/specs/filePicker.spec.js @@ -7,8 +7,8 @@ describe('Users can select location from within the file picker', () => { test('User can select the current folder', async () => { const { getByTestId, emitted } = render(FilePicker, { props: { - variation: 'location' - } + variation: 'location', + }, }) await waitFor(() => expect(getByTestId('list-resources-table')).toBeVisible()) @@ -25,8 +25,8 @@ describe('Users can select location from within the file picker', () => { test('User can select a nested folder as a location', async () => { const { getByTestId, emitted, getByText } = render(FilePicker, { props: { - variation: 'location' - } + variation: 'location', + }, }) await waitFor(() => expect(getByTestId('list-resources-table')).toBeVisible()) @@ -47,7 +47,7 @@ describe('Users can select location from within the file picker', () => { await fireEvent.click(getByTestId('list-header-btn-select')) const expectedFolder = resources['/Photos'].find( - r => r.fileInfo['{http://owncloud.org/ns}fileid'] === '1' + (r) => r.fileInfo['{http://owncloud.org/ns}fileid'] === '1' ) expect(emitted().selectResources[0][0][0].id).toMatch( @@ -57,5 +57,45 @@ describe('Users can select location from within the file picker', () => { }) describe('Users can select resources from within the file picker', () => { - test.todo('User can select resources from the current folder') + test('User can select resources from the current folder', async () => { + const { getByTestId, getByText, emitted } = render(FilePicker, { + props: { + variation: 'resource', + }, + }) + + await waitFor(() => expect(getByTestId('list-resources-table')).toBeVisible()) + + expect(getByText('Photos')).toBeVisible() + + await fireEvent.click(getByText('Photos')) + + await waitFor(() => expect(getByText('Vacation')).toBeVisible()) + expect(getByText('Teotihuacan')).toBeVisible() + expect(getByTestId('list-resources-row-9')).not.toHaveClass('files-list-row-disabled') + + await fireEvent.click(getByTestId('list-resources-checkbox-1').querySelector('.oc-checkbox')) + await fireEvent.click(getByTestId('list-resources-checkbox-9').querySelector('.oc-checkbox')) + + expect(getByTestId('list-resources-row-1')).toHaveClass('oc-background-selected') + expect(getByTestId('list-resources-row-9')).toHaveClass('oc-background-selected') + expect(getByTestId('list-header-btn-select')).toBeVisible() + + await fireEvent.click(getByTestId('list-header-btn-select')) + + const expectedResources = resources['/Photos'] + + expect( + expectedResources.find( + (r) => + r.fileInfo['{http://owncloud.org/ns}fileid'] === emitted().selectResources[0][0][0].id + ) + ).toBeTruthy() + expect( + expectedResources.find( + (r) => + r.fileInfo['{http://owncloud.org/ns}fileid'] === emitted().selectResources[0][0][1].id + ) + ).toBeTruthy() + }) })