Merge pull request #1529 from nextcloud-libraries/feat/keyboard-shortcut

nextcloud-libraries · Dec 18, 2024 · 6184c17 · 6184c17
2 parents 070d762 + 42269c4
commit 6184c17
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 104 deletions.
diff --git a/cypress/components/UploadPicker/UploadPicker.cy.ts b/cypress/components/UploadPicker/UploadPicker.cy.ts
@@ -264,16 +264,17 @@ describe('Destination management', () => {
 			)
 		})
 
-		cy.get('@component').then((component) => {
-			component.setDestination(new Folder({
+		cy.mount(UploadPicker, { propsData }).then(({ component }) => {
+			const instance = component as InstanceType<typeof UploadPicker>
+			instance.setDestination(new Folder({
 				id: 56,
 				owner: 'user',
 				source: generateRemoteUrl('dav/files/user/Photos'),
 				permissions: Permission.ALL,
 				root: '/files/user',
 			}))
 			// Wait for prop propagation
-			expect(component.uploadManager.root).to.have.string('/remote.php/dav/files/user/Photos')
+			expect(instance.uploadManager.root).to.have.string('/remote.php/dav/files/user/Photos')
 		})
 
 		cy.get('@input').attachFile({
@@ -335,16 +336,17 @@ describe('Root management', () => {
 			)
 		})
 
-		cy.get('@component').then((component) => {
-			component.setDestination(new Folder({
+		cy.mount(UploadPicker, { propsData }).then(({ component }) => {
+			const instance = component as InstanceType<typeof UploadPicker>
+			instance.setDestination(new Folder({
 				id: 56,
 				owner: 'user',
 				source: generateRemoteUrl('dav/photos/user/albums/2022 Summer Vacations'),
 				permissions: Permission.ALL,
 				root: '/photos/user',
 			}))
 			// Wait for prop propagation
-			expect(component.uploadManager.root).to.have.string('/remote.php/dav/photos/user/albums/2022 Summer Vacations')
+			expect(instance.uploadManager.root).to.have.string('/remote.php/dav/photos/user/albums/2022 Summer Vacations')
 		})
 
 		// Intercept single upload

diff --git a/cypress/components/UploadPicker/hotkeys.cy.ts b/cypress/components/UploadPicker/hotkeys.cy.ts
@@ -0,0 +1,61 @@
+/* eslint-disable no-unused-expressions */
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+// dist file might not be built when running eslint only
+// eslint-disable-next-line import/no-unresolved,n/no-missing-import
+import { Folder, Permission, addNewFileMenuEntry, type Entry } from '@nextcloud/files'
+import { generateRemoteUrl } from '@nextcloud/router'
+import { UploadPicker } from '../../../lib/index.ts'
+
+describe('UploadPicker: hotkeys testing', () => {
+	const propsData = {
+		content: () => [],
+		destination: new Folder({
+			id: 56,
+			owner: 'user',
+			source: generateRemoteUrl('dav/files/user/Folder'),
+			permissions: Permission.ALL,
+			root: '/files/user',
+		}),
+	}
+
+	before(() => {
+		addNewFileMenuEntry({
+			id: 'test',
+			displayName: 'Test',
+			iconSvgInline: '<svg></svg>',
+			handler: (...args) => console.debug(args),
+		} as Entry)
+	})
+
+	it('opens the upload menu when pressing shift+u', () => {
+		cy.mount(UploadPicker, { propsData })
+
+		// Check and init aliases
+		cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').as('input').should('exist')
+		cy.get('[data-cy-upload-picker] .upload-picker__progress').as('progress').should('exist')
+
+		cy.get('[role="menu"]').should('not.exist')
+
+		cy.get('body').type('{shift}u')
+		cy.get('[role="menu"]').should('be.visible')
+	})
+
+	it('closes the upload menu when pressing escape', () => {
+		cy.mount(UploadPicker, { propsData })
+			.then(({ component }) => {
+				// force the menu to be opened
+				component.openedMenu = true
+			})
+
+		cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').as('input').should('exist')
+		cy.get('[data-cy-upload-picker] .upload-picker__progress').as('progress').should('exist')
+
+		cy.get('[role="menu"]').should('be.visible')
+
+		cy.get('body').type('{esc}')
+		cy.get('[role="menu"]').should('not.be.visible')
+	})
+})
diff --git a/cypress/components/UploadPicker/new-menu.cy.ts b/cypress/components/UploadPicker/new-menu.cy.ts
@@ -137,11 +137,9 @@ describe('UploadPicker: "new"-menu', () => {
 			// Check and init aliases
 			cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').as('input').should('exist')
 			cy.get('[data-cy-upload-picker] .upload-picker__progress').as('progress').should('exist')
-			cy.get('[data-cy-upload-picker] .action-item__menutoggle')
-				.as('menuButton')
-				.should('exist')
+			cy.get('[data-cy-upload-picker] .action-item__menutoggle').should('exist')
 
-			cy.get('@menuButton').click()
+			cy.get('[data-cy-upload-picker] .action-item__menutoggle').click()
 			cy.get('[data-cy-upload-picker-menu-entry="upload-file"]').should('have.length', 1)
 			cy.get('[data-cy-upload-picker-menu-entry="empty-file"]').should('have.length', 1)
 
@@ -152,42 +150,42 @@ describe('UploadPicker: "new"-menu', () => {
 				})
 		})
 
-		it('Changes the context', () => {
+		it.only('Changes the context', () => {
 			// Mount picker
-			cy.mount(UploadPicker, { propsData })
-
-			// Check and init aliases
-			cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').as('input').should('exist')
-			cy.get('[data-cy-upload-picker] .upload-picker__progress').as('progress').should('exist')
-			cy.get('[data-cy-upload-picker] .action-item__menutoggle')
-				.as('menuButton')
-				.should('exist')
-
-			cy.get('@menuButton').click()
-			cy.get('[data-cy-upload-picker-menu-entry="upload-file"]').should('have.length', 1)
-			cy.get('[data-cy-upload-picker-menu-entry="empty-file"]').should('have.length', 1)
-
-			// Close menu
-			cy.get('body').click()
-			cy.get('[data-cy-upload-picker-menu-entry="upload-file"]').should('not.be.visible')
-			cy.get('[data-cy-upload-picker-menu-entry="empty-file"]').should('not.be.visible')
-
-			cy.get('@component').then((component) => {
-				component.setDestination(new Folder({
-					id: 56,
-					owner: 'user',
-					source: generateRemoteUrl('dav/files/user/Folder'),
-					permissions: Permission.NONE,
-					root: '/files/user',
-				}))
+			cy.mount(UploadPicker, { propsData }).then(({ component }) => {
+				const instance = component as InstanceType<typeof UploadPicker>
+
+				// Check and init aliases
+				cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').as('input').should('exist')
+				cy.get('[data-cy-upload-picker] .upload-picker__progress').as('progress').should('exist')
+				cy.get('[data-cy-upload-picker] .action-item__menutoggle').should('exist')
+
+				cy.get('[data-cy-upload-picker] .action-item__menutoggle').click()
+				cy.get('[data-cy-upload-picker-menu-entry="upload-file"]').should('have.length', 1)
+				cy.get('[data-cy-upload-picker-menu-entry="empty-file"]').should('have.length', 1)
+
+				// Close menu
+				cy.get('body').click()
+				cy.get('[data-cy-upload-picker-menu-entry="upload-file"]').should('not.be.visible')
+				cy.get('[data-cy-upload-picker-menu-entry="empty-file"]').should('not.be.visible')
+
+				// Change context when we're sure the menu is closed
+				cy.get('[role="menu"]').should('not.be.visible')
+					.then(() => {
+						instance.setDestination(new Folder({
+							id: 56,
+							owner: 'user',
+							source: generateRemoteUrl('dav/files/user/Folder'),
+							permissions: Permission.NONE,
+							root: '/files/user',
+						}))
+					})
+
+				// Menu should not be visible anymore
+				cy.get('[data-cy-upload-picker] .action-item__menutoggle').should('not.exist')
+				cy.get('[data-cy-upload-picker-menu-entry="upload-file"]').should('have.length', 1)
+				cy.get('[data-cy-upload-picker-menu-entry="empty-file"]').should('not.exist')
 			})
-
-			// Menu should not be visible anymore
-			cy.get('[data-cy-upload-picker] .action-item__menutoggle')
-				.as('menuButton')
-				.should('not.exist')
-			cy.get('[data-cy-upload-picker-menu-entry="upload-file"]').should('have.length', 1)
-			cy.get('[data-cy-upload-picker-menu-entry="empty-file"]').should('not.exist')
 		})
 	})
 })
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
@@ -32,38 +32,11 @@ window._oc_capabilities = { files: {} }
 
 // Example use:
 // cy.mount(MyComponent)
-Cypress.Commands.add('mount', (component, optionsOrProps) => {
-	let instance = null
+Cypress.Commands.add('mount', (component, options = {}) => {
+	// Setup options object
+	options.extensions = options.extensions || {}
+	options.extensions.plugins = options.extensions.plugins || []
+	options.extensions.components = options.extensions.components || {}
 
-	// Add our mounted method to expose the component instance to cypress
-
-	// Support old vue 2 options
-	if (component.options) {
-		if (!component.options.mounted) {
-			component.options.mounted = []
-		}
-		component.options.mounted.push(function() {
-			instance = this
-		})
-	}
-
-	// Support new vue 3 options
-	if (typeof component?.mounted !== 'function') {
-		component.mounted = function() {
-			instance = this
-		}
-	} else {
-		// If the component already has a mounted method, we need to chain them
-		const originalMounted = component.mounted
-		component.mounted = function() {
-			originalMounted.call(this)
-			instance = this
-		}
-	}
-
-	// Expose the component with cy.get('@component')
-	const mounted = mount(component, optionsOrProps).then(() => {
-		cy.wrap(instance).as('component')
-		return mounted
-	})
+	return mount(component, options)
 })