chore: add hotkeys cypress tests

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

Author: skjnldsv

cypress/components/UploadPicker/hotkeys.cy.ts

@@ -0,0 +1,62 @@
+/* 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'
+import type { ComponentPublicInstance } from 'vue'
+
+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 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('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')
+	})
+})

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