Skip to content

Commit e14f324

Browse files
skjnldsvskjnldsv
committed
chore: add hotkeys cypress tests
Signed-off-by: skjnldsv <[email protected]>
1 parent 0d4e4f0 commit e14f324

File tree

4 files changed

+112
-77
lines changed

4 files changed

+112
-77
lines changed

‎cypress/components/UploadPicker/UploadPicker.cy.ts

+8-6
Original file line numberDiff line numberDiff line change
@@ -264,16 +264,17 @@ describe('Destination management', () => {
264264
)
265265
})
266266

267-
cy.get('@component').then((component) => {
268-
component.setDestination(new Folder({
267+
cy.mount(UploadPicker, { propsData }).then(({ component }) => {
268+
const instance = component as InstanceType<typeof UploadPicker>
269+
instance.setDestination(new Folder({
269270
id: 56,
270271
owner: 'user',
271272
source: generateRemoteUrl('dav/files/user/Photos'),
272273
permissions: Permission.ALL,
273274
root: '/files/user',
274275
}))
275276
// Wait for prop propagation
276-
expect(component.uploadManager.root).to.have.string('/remote.php/dav/files/user/Photos')
277+
expect(instance.uploadManager.root).to.have.string('/remote.php/dav/files/user/Photos')
277278
})
278279

279280
cy.get('@input').attachFile({
@@ -335,16 +336,17 @@ describe('Root management', () => {
335336
)
336337
})
337338

338-
cy.get('@component').then((component) => {
339-
component.setDestination(new Folder({
339+
cy.mount(UploadPicker, { propsData }).then(({ component }) => {
340+
const instance = component as InstanceType<typeof UploadPicker>
341+
instance.setDestination(new Folder({
340342
id: 56,
341343
owner: 'user',
342344
source: generateRemoteUrl('dav/photos/user/albums/2022 Summer Vacations'),
343345
permissions: Permission.ALL,
344346
root: '/photos/user',
345347
}))
346348
// Wait for prop propagation
347-
expect(component.uploadManager.root).to.have.string('/remote.php/dav/photos/user/albums/2022 Summer Vacations')
349+
expect(instance.uploadManager.root).to.have.string('/remote.php/dav/photos/user/albums/2022 Summer Vacations')
348350
})
349351

350352
// Intercept single upload

‎cypress/components/UploadPicker/hotkeys.cy.ts

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/* eslint-disable no-unused-expressions */
2+
/**
3+
* SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
4+
* SPDX-License-Identifier: AGPL-3.0-or-later
5+
*/
6+
// dist file might not be built when running eslint only
7+
// eslint-disable-next-line import/no-unresolved,n/no-missing-import
8+
import { Folder, Permission, addNewFileMenuEntry, type Entry } from '@nextcloud/files'
9+
import { generateRemoteUrl } from '@nextcloud/router'
10+
import { UploadPicker } from '../../../lib/index.ts'
11+
import type { ComponentPublicInstance } from 'vue'
12+
13+
describe('UploadPicker: hotkeys testing', () => {
14+
const propsData = {
15+
content: () => [],
16+
destination: new Folder({
17+
id: 56,
18+
owner: 'user',
19+
source: generateRemoteUrl('dav/files/user/Folder'),
20+
permissions: Permission.ALL,
21+
root: '/files/user',
22+
}),
23+
}
24+
25+
before(() => {
26+
addNewFileMenuEntry({
27+
id: 'test',
28+
displayName: 'Test',
29+
iconSvgInline: '<svg></svg>',
30+
handler: (...args) => console.debug(args),
31+
} as Entry)
32+
})
33+
34+
it('opens the upload menu when pressing u', () => {
35+
cy.mount(UploadPicker, { propsData })
36+
37+
// Check and init aliases
38+
cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').as('input').should('exist')
39+
cy.get('[data-cy-upload-picker] .upload-picker__progress').as('progress').should('exist')
40+
41+
cy.get('[role="menu"]').should('not.exist')
42+
43+
cy.get('body').type('u')
44+
cy.get('[role="menu"]').should('be.visible')
45+
})
46+
47+
it('closes the upload menu when pressing escape', () => {
48+
cy.mount(UploadPicker, { propsData })
49+
.then(({ component }) => {
50+
// force the menu to be opened
51+
component.openedMenu = true
52+
})
53+
54+
cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').as('input').should('exist')
55+
cy.get('[data-cy-upload-picker] .upload-picker__progress').as('progress').should('exist')
56+
57+
cy.get('[role="menu"]').should('be.visible')
58+
59+
cy.get('body').type('{esc}')
60+
cy.get('[role="menu"]').should('not.be.visible')
61+
})
62+
})

‎cypress/components/UploadPicker/new-menu.cy.ts

+36-38
Original file line numberDiff line numberDiff line change
@@ -137,11 +137,9 @@ describe('UploadPicker: "new"-menu', () => {
137137
// Check and init aliases
138138
cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').as('input').should('exist')
139139
cy.get('[data-cy-upload-picker] .upload-picker__progress').as('progress').should('exist')
140-
cy.get('[data-cy-upload-picker] .action-item__menutoggle')
141-
.as('menuButton')
142-
.should('exist')
140+
cy.get('[data-cy-upload-picker] .action-item__menutoggle').should('exist')
143141

144-
cy.get('@menuButton').click()
142+
cy.get('[data-cy-upload-picker] .action-item__menutoggle').click()
145143
cy.get('[data-cy-upload-picker-menu-entry="upload-file"]').should('have.length', 1)
146144
cy.get('[data-cy-upload-picker-menu-entry="empty-file"]').should('have.length', 1)
147145

@@ -152,42 +150,42 @@ describe('UploadPicker: "new"-menu', () => {
152150
})
153151
})
154152

155-
it('Changes the context', () => {
153+
it.only('Changes the context', () => {
156154
// Mount picker
157-
cy.mount(UploadPicker, { propsData })
158-
159-
// Check and init aliases
160-
cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').as('input').should('exist')
161-
cy.get('[data-cy-upload-picker] .upload-picker__progress').as('progress').should('exist')
162-
cy.get('[data-cy-upload-picker] .action-item__menutoggle')
163-
.as('menuButton')
164-
.should('exist')
165-
166-
cy.get('@menuButton').click()
167-
cy.get('[data-cy-upload-picker-menu-entry="upload-file"]').should('have.length', 1)
168-
cy.get('[data-cy-upload-picker-menu-entry="empty-file"]').should('have.length', 1)
169-
170-
// Close menu
171-
cy.get('body').click()
172-
cy.get('[data-cy-upload-picker-menu-entry="upload-file"]').should('not.be.visible')
173-
cy.get('[data-cy-upload-picker-menu-entry="empty-file"]').should('not.be.visible')
174-
175-
cy.get('@component').then((component) => {
176-
component.setDestination(new Folder({
177-
id: 56,
178-
owner: 'user',
179-
source: generateRemoteUrl('dav/files/user/Folder'),
180-
permissions: Permission.NONE,
181-
root: '/files/user',
182-
}))
155+
cy.mount(UploadPicker, { propsData }).then(({ component }) => {
156+
const instance = component as InstanceType<typeof UploadPicker>
157+
158+
// Check and init aliases
159+
cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').as('input').should('exist')
160+
cy.get('[data-cy-upload-picker] .upload-picker__progress').as('progress').should('exist')
161+
cy.get('[data-cy-upload-picker] .action-item__menutoggle').should('exist')
162+
163+
cy.get('[data-cy-upload-picker] .action-item__menutoggle').click()
164+
cy.get('[data-cy-upload-picker-menu-entry="upload-file"]').should('have.length', 1)
165+
cy.get('[data-cy-upload-picker-menu-entry="empty-file"]').should('have.length', 1)
166+
167+
// Close menu
168+
cy.get('body').click()
169+
cy.get('[data-cy-upload-picker-menu-entry="upload-file"]').should('not.be.visible')
170+
cy.get('[data-cy-upload-picker-menu-entry="empty-file"]').should('not.be.visible')
171+
172+
// Change context when we're sure the menu is closed
173+
cy.get('[role="menu"]').should('not.be.visible')
174+
.then(() => {
175+
instance.setDestination(new Folder({
176+
id: 56,
177+
owner: 'user',
178+
source: generateRemoteUrl('dav/files/user/Folder'),
179+
permissions: Permission.NONE,
180+
root: '/files/user',
181+
}))
182+
})
183+
184+
// Menu should not be visible anymore
185+
cy.get('[data-cy-upload-picker] .action-item__menutoggle').should('not.exist')
186+
cy.get('[data-cy-upload-picker-menu-entry="upload-file"]').should('have.length', 1)
187+
cy.get('[data-cy-upload-picker-menu-entry="empty-file"]').should('not.exist')
183188
})
184-
185-
// Menu should not be visible anymore
186-
cy.get('[data-cy-upload-picker] .action-item__menutoggle')
187-
.as('menuButton')
188-
.should('not.exist')
189-
cy.get('[data-cy-upload-picker-menu-entry="upload-file"]').should('have.length', 1)
190-
cy.get('[data-cy-upload-picker-menu-entry="empty-file"]').should('not.exist')
191189
})
192190
})
193191
})

‎cypress/support/component.ts

+6-33
Original file line numberDiff line numberDiff line change
@@ -32,38 +32,11 @@ window._oc_capabilities = { files: {} }
3232

3333
// Example use:
3434
// cy.mount(MyComponent)
35-
Cypress.Commands.add('mount', (component, optionsOrProps) => {
36-
let instance = null
35+
Cypress.Commands.add('mount', (component, options = {}) => {
36+
// Setup options object
37+
options.extensions = options.extensions || {}
38+
options.extensions.plugins = options.extensions.plugins || []
39+
options.extensions.components = options.extensions.components || {}
3740

38-
// Add our mounted method to expose the component instance to cypress
39-
40-
// Support old vue 2 options
41-
if (component.options) {
42-
if (!component.options.mounted) {
43-
component.options.mounted = []
44-
}
45-
component.options.mounted.push(function() {
46-
instance = this
47-
})
48-
}
49-
50-
// Support new vue 3 options
51-
if (typeof component?.mounted !== 'function') {
52-
component.mounted = function() {
53-
instance = this
54-
}
55-
} else {
56-
// If the component already has a mounted method, we need to chain them
57-
const originalMounted = component.mounted
58-
component.mounted = function() {
59-
originalMounted.call(this)
60-
instance = this
61-
}
62-
}
63-
64-
// Expose the component with cy.get('@component')
65-
const mounted = mount(component, optionsOrProps).then(() => {
66-
cy.wrap(instance).as('component')
67-
return mounted
68-
})
41+
return mount(component, options)
6942
})

0 commit comments

Comments
 (0)