From 0d74ed8b33e9ae04091853f6b50fe0ea7b157227 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Wed, 4 Sep 2024 22:29:56 +0200 Subject: [PATCH] fix(UploadPicker): Show menu if folders are enabled If folders are enabled but no "new"-menu entries, we need to also show the menu, to allow users to choose between folder and file upload. Signed-off-by: Ferdinand Thiessen --- .../UploadPicker/UploadPicker.cy.ts | 87 ---------- .../components/UploadPicker/new-menu.cy.ts | 154 ++++++++++++++++++ lib/components/UploadPicker.vue | 2 +- 3 files changed, 155 insertions(+), 88 deletions(-) create mode 100644 cypress/components/UploadPicker/new-menu.cy.ts diff --git a/cypress/components/UploadPicker/UploadPicker.cy.ts b/cypress/components/UploadPicker/UploadPicker.cy.ts index ea6e9834..3686f23d 100644 --- a/cypress/components/UploadPicker/UploadPicker.cy.ts +++ b/cypress/components/UploadPicker/UploadPicker.cy.ts @@ -113,93 +113,6 @@ describe('UploadPicker valid uploads', () => { }) }) -describe('NewFileMenu handling', () => { - const propsData = { - destination: new Folder({ - id: 56, - owner: 'user', - source: generateRemoteUrl('dav/files/user/Folder'), - permissions: Permission.ALL, - root: '/files/user', - }), - } - const entry = { - id: 'empty-file', - displayName: 'Create empty file', - templateName: 'New file', - iconClass: 'icon-file', - enabled: (folder: Folder) => (folder.permissions & Permission.CREATE) !== 0, - handler() {}, - } as Entry - - before(() => { - cy.spy(entry, 'handler') - addNewFileMenuEntry(entry) - }) - - afterEach(() => resetDocument()) - - it('Open the New File Menu', () => { - // 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) - - cy.get('[data-cy-upload-picker-menu-entry="empty-file"]') - .click() - .then(() => { - expect(entry.handler).to.be.called - }) - }) - - it('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', - })) - }) - - // 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') - }) -}) - describe('UploadPicker valid uploads', () => { beforeEach(() => { // Make sure we reset the destination diff --git a/cypress/components/UploadPicker/new-menu.cy.ts b/cypress/components/UploadPicker/new-menu.cy.ts new file mode 100644 index 00000000..5e792182 --- /dev/null +++ b/cypress/components/UploadPicker/new-menu.cy.ts @@ -0,0 +1,154 @@ +/* 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' + +let state: string | undefined +before(() => { + cy.window().then((win) => { + state = win.document.body.innerHTML + }) +}) + +const resetDocument = () => { + if (state) { + cy.window().then((win) => { + win.document.body.innerHTML = state! + }) + } +} + +describe('UploadPicker: "new"-menu', () => { + const propsData = { + content: () => [], + destination: new Folder({ + id: 56, + owner: 'user', + source: generateRemoteUrl('dav/files/user/Folder'), + permissions: Permission.ALL, + root: '/files/user', + }), + } + + afterEach(() => resetDocument()) + + it('without folder-upload enabled no menu is shown', () => { + 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]') + .contains('button', 'New') + .should('be.visible') + // Directly trigger upload + .and('have.attr', 'data-cy-upload-picker-menu-entry', 'upload-file') + .click() + + cy.get('[role="menu"]').should('not.exist') + }) + + it('with folder-upload enabled a menu is shown', () => { + cy.mount(UploadPicker, { propsData: { ...propsData, allowFolders: true } }) + + // 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]') + .contains('button', 'New') + .should('be.visible') + // Directly no trigger + .and('not.have.attr', 'data-cy-upload-picker-menu-entry', 'upload-file') + // click should open the menu + .click() + + cy.get('[role="menu"]') + .should('be.visible') + .get('[role="menuitem"]') + // two entries: uploader folder + upload files + .should('have.length', 2) + }) + + describe('With new-menu entries', () => { + const entry = { + id: 'empty-file', + displayName: 'Create empty file', + templateName: 'New file', + iconClass: 'icon-file', + enabled: (folder: Folder) => (folder.permissions & Permission.CREATE) !== 0, + handler() {}, + } as Entry + + before(() => { + cy.spy(entry, 'handler') + addNewFileMenuEntry(entry) + }) + afterEach(() => resetDocument()) + + it('Open the New File Menu', () => { + // 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) + + cy.get('[data-cy-upload-picker-menu-entry="empty-file"]') + .click() + .then(() => { + expect(entry.handler).to.be.called + }) + }) + + it('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', + })) + }) + + // 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/lib/components/UploadPicker.vue b/lib/components/UploadPicker.vue index e4c88106..2bf097fb 100644 --- a/lib/components/UploadPicker.vue +++ b/lib/components/UploadPicker.vue @@ -9,7 +9,7 @@ class="upload-picker" data-cy-upload-picker> -