Merge pull request #49134 from nextcloud/fix/multi-select

apps/files/src/store/filters.ts

@@ -8,7 +8,7 @@ import { getFileListFilters } from '@nextcloud/files'
 import { defineStore } from 'pinia'
 import logger from '../logger'
 
-export const useFiltersStore = defineStore('keyboard', {
+export const useFiltersStore = defineStore('filters', {
 	state: () => ({
 		chips: {} as Record<string, IFileListFilterChip[]>,
 		filters: [] as IFileListFilter[],

cypress/e2e/files/FilesUtils.ts

@@ -33,13 +33,22 @@ export const triggerInlineActionForFile = (filename: string, actionId: string) =
 }
 
 export const selectAllFiles = () => {
-	cy.get('[data-cy-files-list-selection-checkbox]').findByRole('checkbox').click({ force: true })
+	cy.get('[data-cy-files-list-selection-checkbox]')
+		.findByRole('checkbox', { checked: false })
+		.click({ force: true })
+}
+export const deselectAllFiles = () => {
+	cy.get('[data-cy-files-list-selection-checkbox]')
+		.findByRole('checkbox', { checked: true })
+		.click({ force: true })
 }
-export const selectRowForFile = (filename: string) => {
+
+export const selectRowForFile = (filename: string, options: Partial<Cypress.ClickOptions> = {}) => {
 	getRowForFile(filename)
 		.find('[data-cy-files-list-row-checkbox]')
 		.findByRole('checkbox')
-		.click({ force: true })
+		// don't use click to avoid triggering side effects events
+		.trigger('change', { ...options, force: true })
 		.should('be.checked')
 	cy.get('[data-cy-files-list-selection-checkbox]').findByRole('checkbox').should('satisfy', (elements) => {
 		return elements.length === 1 && (elements[0].checked === true || elements[0].indeterminate === true)

cypress/e2e/files/files-selection.cy.ts

@@ -0,0 +1,77 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { User } from '@nextcloud/cypress'
+import { deselectAllFiles, selectAllFiles, selectRowForFile } from './FilesUtils'
+
+const files = {
+	'image.jpg': 'image/jpeg',
+	'document.pdf': 'application/pdf',
+	'archive.zip': 'application/zip',
+	'audio.mp3': 'audio/mpeg',
+	'video.mp4': 'video/mp4',
+	'readme.md': 'text/markdown',
+	'welcome.txt': 'text/plain',
+}
+const filesCount = Object.keys(files).length
+
+describe('files: Select all files', { testIsolation: true }, () => {
+	let user: User
+
+	before(() => {
+		cy.createRandomUser().then(($user) => {
+			user = $user
+			Object.keys(files).forEach((file) => {
+				cy.uploadContent(user, new Blob(), files[file], '/' + file)
+			})
+		})
+	})
+
+	beforeEach(() => {
+		cy.login(user)
+		cy.visit('/apps/files')
+	})
+
+	it('Can select and unselect all files', () => {
+		cy.get('[data-cy-files-list-row-fileid]').should('have.length', filesCount)
+		cy.get('[data-cy-files-list-row-checkbox]').should('have.length', filesCount)
+
+		selectAllFiles()
+
+		cy.get('.files-list__selected').should('have.text', '7 selected')
+		cy.get('[data-cy-files-list-row-checkbox]').findByRole('checkbox').should('be.checked')
+
+		deselectAllFiles()
+
+		cy.get('.files-list__selected').should('not.exist')
+		cy.get('[data-cy-files-list-row-checkbox]').findByRole('checkbox').should('not.be.checked')
+	})
+
+	it('Can select some files randomly', () => {
+		const randomFiles = Object.keys(files).reduce((acc, file) => {
+			if (Math.random() > 0.1) {
+				acc.push(file)
+			}
+			return acc
+		}, [] as string[])
+
+		randomFiles.forEach(name => selectRowForFile(name))
+
+		cy.get('.files-list__selected').should('have.text', `${randomFiles.length} selected`)
+		cy.get('[data-cy-files-list-row-checkbox] input[type="checkbox"]:checked').should('have.length', randomFiles.length)
+	})
+
+	it('Can select range of files with shift key', () => {
+		cy.get('[data-cy-files-list-row-checkbox]').should('have.length', filesCount)
+		selectRowForFile('audio.mp3')
+		cy.window().trigger('keydown', { shiftKey: true })
+		selectRowForFile('readme.md', { shiftKey: true })
+		cy.window().trigger('keyup', { shiftKey: false })
+
+		cy.get('.files-list__selected').should('have.text', '4 selected')
+		cy.get('[data-cy-files-list-row-checkbox] input[type="checkbox"]:checked').should('have.length', 4)
+
+	})
+})