test: Add Cypress test for renaming loading state

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

2 files changed, 48 insertions, 0 deletions

diff --git a/cypress/e2e/files/files-renaming.cy.ts b/cypress/e2e/files/files-renaming.cy.ts
index deb257b655b..3d5f23e9d45 100644
--- a/cypress/e2e/files/files-renaming.cy.ts
+++ b/cypress/e2e/files/files-renaming.cy.ts
@@ -67,4 +67,49 @@ describe('files: Rename nodes', { testIsolation: true }, () => {
 			// See validity
 			.should(haveValidity(/reserved name/i))
 	})
+
+	it('shows accessible loading information', () => {
+		const { resolve, promise } = Promise.withResolvers()
+
+		getRowForFile('file.txt').should('be.visible')
+
+		// intercept the rename (MOVE)
+		// the callback will wait until the promise resolve (so we have time to check the loading state)
+		cy.intercept(
+			'MOVE',
+			/\/remote.php\/dav\/files\//,
+			async () => { await promise },
+		).as('moveFile')
+
+		// Start the renaming
+		triggerActionForFile('file.txt', 'rename')
+		getRowForFile('file.txt')
+			.findByRole('textbox', { name: 'Filename' })
+			.should('be.visible')
+			.type('{selectAll}new-name.txt{enter}')
+
+		// Loading state is visible
+		getRowForFile('new-name.txt')
+			.findByRole('img', { name: 'File is loading' })
+			.should('be.visible')
+		// checkbox is not visible
+		getRowForFile('new-name.txt')
+			.findByRole('checkbox', { name: /^Toggle selection/ })
+			.should('not.exist')
+
+		cy.log('Resolve promise to preoceed with MOVE request')
+			.then(() => resolve(null))
+
+		// Ensure the request is done (file renamed)
+		cy.wait('@moveFile')
+
+		// checkbox visible again
+		getRowForFile('new-name.txt')
+			.findByRole('checkbox', { name: /^Toggle selection/ })
+			.should('exist')
+		// see the loading state is gone
+		getRowForFile('new-name.txt')
+			.findByRole('img', { name: 'File is loading' })
+			.should('not.exist')
+	})
 })
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
index 333bfb96f63..f0299aa7627 100644
--- a/cypress/support/e2e.ts
+++ b/cypress/support/e2e.ts
@@ -5,6 +5,9 @@
 import 'cypress-axe'
 import './commands.ts'
 
+// Remove with Node 22
+import 'core-js/actual/promise/with-resolvers.js'
+
 // Fix ResizeObserver loop limit exceeded happening in Cypress only
 // @see https://github.com/cypress-io/cypress/issues/20341
 Cypress.on('uncaught:exception', err => !err.message.includes('ResizeObserver loop limit exceeded'))