diff --git a/cypress/e2e/files/FileSystemAPIUtils.ts b/cypress/e2e/files/FileSystemAPIUtils.ts new file mode 100644 index 00000000000..995aef2ced5 --- /dev/null +++ b/cypress/e2e/files/FileSystemAPIUtils.ts @@ -0,0 +1,59 @@ +import { basename } from 'node:path' + +class FileSystemEntry { + + private _isFile: boolean + private _fullPath: string + + constructor(isFile: boolean, fullPath: string) { + this._isFile = isFile + this._fullPath = fullPath + } + + get isFile() { + return !!this._isFile + } + + get isDirectory() { + return !this.isFile + } + + get name() { + return basename(this._fullPath) + } + +} + +export class FileSystemFileEntry extends FileSystemEntry { + + private _contents: string + + constructor(fullPath: string, contents: string) { + super(true, fullPath) + this._contents = contents + } + + file(success: (file: File) => void) { + success(new File([this._contents], this.name)) + } + +} + +export class FileSystemDirectoryEntry extends FileSystemEntry { + + private _entries: FileSystemEntry[] + + constructor(fullPath: string, entries: FileSystemEntry[]) { + super(false, fullPath) + this._entries = entries || [] + } + + createReader() { + return { + readEntries: (success: (entries: FileSystemEntry[]) => void) => { + success(this._entries) + }, + } + } + +} diff --git a/cypress/e2e/files/drag-n-drop.cy.ts b/cypress/e2e/files/drag-n-drop.cy.ts index 9ede2536f67..4474f5b634c 100644 --- a/cypress/e2e/files/drag-n-drop.cy.ts +++ b/cypress/e2e/files/drag-n-drop.cy.ts @@ -1,6 +1,6 @@ import { getRowForFile } from './FilesUtils.ts' -describe('files: Drag and Drop', { testIsolation: true }, () => { +describe('files: Drag and Drop legacy', { testIsolation: true }, () => { beforeEach(() => { cy.createRandomUser().then((user) => { cy.login(user) @@ -14,7 +14,9 @@ describe('files: Drag and Drop', { testIsolation: true }, () => { cy.intercept('PUT', /\/remote.php\/dav\/files\//).as('uploadFile') + // Make sure the drop notice is not visible cy.get('[data-cy-files-drag-drop-area]').should('not.be.visible') + // Trigger the drop notice cy.get('main.app-content').trigger('dragover', { dataTransfer }) cy.get('[data-cy-files-drag-drop-area]').should('be.visible') @@ -27,6 +29,11 @@ describe('files: Drag and Drop', { testIsolation: true }, () => { cy.wait('@uploadFile') + // Make sure the upload is finished + cy.get('[data-cy-files-drag-drop-area]').should('not.be.visible') + cy.get('[data-cy-upload-picker] progress').should('not.be.visible') + cy.get('@uploadFile.all').should('have.length', 1) + getRowForFile('single-file.txt').should('be.visible') getRowForFile('single-file.txt').find('[data-cy-files-list-row-size]').should('contain', '6 KB') }) @@ -38,6 +45,58 @@ describe('files: Drag and Drop', { testIsolation: true }, () => { cy.intercept('PUT', /\/remote.php\/dav\/files\//).as('uploadFile') + // Make sure the drop notice is not visible + cy.get('[data-cy-files-drag-drop-area]').should('not.be.visible') + + // Trigger the drop notice + cy.get('main.app-content').trigger('dragover', { dataTransfer }) + cy.get('[data-cy-files-drag-drop-area]').should('be.visible') + + // Upload drop a file + cy.get('[data-cy-files-drag-drop-area]').selectFile([ + { + fileName: 'first.txt', + contents: ['Hello'], + }, + { + fileName: 'second.txt', + contents: ['World'], + }, + ], { action: 'drag-drop' }) + + cy.wait('@uploadFile') + + // Make sure the upload is finished + cy.get('[data-cy-files-drag-drop-area]').should('not.be.visible') + cy.get('[data-cy-upload-picker] progress').should('not.be.visible') + cy.get('@uploadFile.all').should('have.length', 2) + + getRowForFile('first.txt').should('be.visible') + getRowForFile('second.txt').should('be.visible') + }) + + it('will ignore legacy Folders', () => { + cy.window().then((win) => { + // Remove the Filesystem API to force the legacy File API + // See how cypress mocks the Filesystem API in https://github.com/cypress-io/cypress/blob/74109094a92df3bef073dda15f17194f31850d7d/packages/driver/src/cy/commands/actions/selectFile.ts#L24-L37 + Object.defineProperty(win.DataTransferItem.prototype, 'getAsEntry', { get: undefined }) + Object.defineProperty(win.DataTransferItem.prototype, 'webkitGetAsEntry', { get: undefined }) + }) + + const dataTransfer = new DataTransfer() + dataTransfer.items.add(new File([], 'first.txt')) + dataTransfer.items.add(new File([], 'second.txt')) + + // Legacy File API (not FileSystem API), will treat Folders as Files + // with empty type and empty content + dataTransfer.items.add(new File([], 'Foo', { type: 'httpd/unix-directory' })) + dataTransfer.items.add(new File([], 'Bar')) + + cy.intercept('PUT', /\/remote.php\/dav\/files\//).as('uploadFile') + + // Make sure the drop notice is not visible + cy.get('[data-cy-files-drag-drop-area]').should('not.be.visible') + // Trigger the drop notice cy.get('main.app-content').trigger('dragover', { dataTransfer }) cy.get('[data-cy-files-drag-drop-area]').should('be.visible') @@ -52,11 +111,26 @@ describe('files: Drag and Drop', { testIsolation: true }, () => { fileName: 'second.txt', contents: ['World'], }, + { + fileName: 'Foo', + contents: {}, + }, + { + fileName: 'Bar', + contents: { mimeType: 'httpd/unix-directory' }, + }, ], { action: 'drag-drop' }) cy.wait('@uploadFile') + // Make sure the upload is finished + cy.get('[data-cy-files-drag-drop-area]').should('not.be.visible') + cy.get('[data-cy-upload-picker] progress').should('not.be.visible') + cy.get('@uploadFile.all').should('have.length', 2) + getRowForFile('first.txt').should('be.visible') getRowForFile('second.txt').should('be.visible') + getRowForFile('Foo').should('not.exist') + getRowForFile('Bar').should('not.exist') }) })