Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add upload menu shortcuts #1529

Merged
merged 4 commits into from
Dec 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions cypress/components/UploadPicker/UploadPicker.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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
Expand Down
61 changes: 61 additions & 0 deletions cypress/components/UploadPicker/hotkeys.cy.ts
Original file line number Diff line number Diff line change
@@ -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')
})
})
74 changes: 36 additions & 38 deletions cypress/components/UploadPicker/new-menu.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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')
})
})
})
39 changes: 6 additions & 33 deletions cypress/support/component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,38 +32,11 @@ window._oc_capabilities = { files: {} }

// Example use:
// cy.mount(MyComponent)
Cypress.Commands.add('mount', (component, optionsOrProps) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See Ferdinand's comment on this: nextcloud/server#48725 (comment)

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