chore: adjusting cypress drag and drop tests

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

diff --git a/cypress/e2e/files/FileSystemAPIUtils.ts b/cypress/e2e/files/FileSystemAPIUtils.ts
new file mode 100644 (file)
index 0000000..995aef2
--- /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 9ede2536f67e17cc6005e0e27ea7b5c9a087b94f..4474f5b634c1cca97af38bbd13087e12bbb4c73e 100644 (file)
--- 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')
        })
 })