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()
+ })
})