diff --git a/cypress/components/UploadPicker/UploadPicker.cy.ts b/cypress/components/UploadPicker/UploadPicker.cy.ts index 3686f23d..7b290031 100644 --- a/cypress/components/UploadPicker/UploadPicker.cy.ts +++ b/cypress/components/UploadPicker/UploadPicker.cy.ts @@ -264,8 +264,9 @@ describe('Destination management', () => { ) }) - cy.get('@component').then((component) => { - component.setDestination(new Folder({ + cy.mount(UploadPicker, { propsData }).then(({ component }) => { + const instance = component as InstanceType + instance.setDestination(new Folder({ id: 56, owner: 'user', source: generateRemoteUrl('dav/files/user/Photos'), @@ -273,7 +274,7 @@ describe('Destination management', () => { 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,8 +336,9 @@ describe('Root management', () => { ) }) - cy.get('@component').then((component) => { - component.setDestination(new Folder({ + cy.mount(UploadPicker, { propsData }).then(({ component }) => { + const instance = component as InstanceType + instance.setDestination(new Folder({ id: 56, owner: 'user', source: generateRemoteUrl('dav/photos/user/albums/2022 Summer Vacations'), @@ -344,7 +346,7 @@ describe('Root management', () => { 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 new file mode 100644 index 00000000..e32a7883 --- /dev/null +++ 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: '', + 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 index 430f1baf..e4b0b36a 100644 --- 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 + + // 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 index 43d5fc72..6d04272b 100644 --- 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) }) diff --git a/lib/components/UploadPicker.vue b/lib/components/UploadPicker.vue index bc297e6a..bc8621a0 100644 --- a/lib/components/UploadPicker.vue +++ b/lib/components/UploadPicker.vue @@ -9,7 +9,7 @@ class="upload-picker" data-cy-upload-picker> - {{ buttonName }} +