chore(files): add selection cypress tests

Signed-off-by: skjnldsv <[email protected]>

apps/files/src/components/FileEntry/FileEntryCheckbox.vue

@@ -9,6 +9,7 @@
 		<NcCheckboxRadioSwitch v-else
 			:aria-label="ariaLabel"
 			:checked="isSelected"
+			data-cy-files-list-row-checkbox
 			@update:checked="onSelectionChange" />
 	</td>
 </template>

apps/files/src/components/FilesListTableHeader.vue

@@ -6,7 +6,7 @@
 	<tr class="files-list__row-head">
 		<th class="files-list__column files-list__row-checkbox"
 			@keyup.esc.exact="resetSelection">
-			<NcCheckboxRadioSwitch v-bind="selectAllBind" @update:checked="onToggleAll" />
+			<NcCheckboxRadioSwitch v-bind="selectAllBind" data-cy-files-list-selection-checkbox @update:checked="onToggleAll" />
 		</th>
 
 		<!-- Columns display -->

cypress/e2e/files/FilesUtils.ts

@@ -28,6 +28,30 @@ export const triggerInlineActionForFile = (filename: string, actionId: string) =
 	getActionsForFile(filename).get(`button[data-cy-files-list-row-action="${CSS.escape(actionId)}"]`).should('exist').click()
 }
 
+export const selectAllFiles = () => {
+	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, options: Partial<Cypress.ClickOptions> = {}) => {
+	getRowForFile(filename)
+		.find('[data-cy-files-list-row-checkbox]')
+		.findByRole('checkbox')
+		// 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)
+	})
+
+}
+
 export const moveFile = (fileName: string, dirPath: string) => {
 	getRowForFile(fileName).should('be.visible')
 	triggerActionForFile(fileName, 'move-copy')

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