test(files): add test case for loading indicator during folder navigation

Signed-off-by: Luka Trovic <luka@nextcloud.com>

Author: luka-nextcloud

apps/files/src/views/FilesList.vue

@@ -99,6 +99,7 @@
 				<!-- Initial loading -->
 				<NcLoadingIcon
 					v-if="loading && !isRefreshing"
+					data-cy-files-loading
 					class="files-list__loading-icon"
 					:size="38"
 					:name="t('files', 'Loading current folder')" />

tests/playwright/e2e/files/files-navigation.spec.ts

@@ -48,4 +48,46 @@ test.describe('Files: Navigation', () => {
 		await expect(filesListPage.getRowForFile('baz')).toBeVisible()
 		await expect(filesListPage.getRowForFile('baz')).toBeActiveRow()
 	})
+
+	test('show loading indicator when navigating', async ({ page, filesListPage }) => {
+		await filesListPage.navigateToFolder('foo/bar/baz')
+		await expect(page.locator('[data-cy-files-list-row-fileid]')).toHaveCount(0)
+
+		// Block the PROPFIND request to simulate a slow network and show the loading indicator
+		let releaseNavigation!: () => void
+		const navigationBlocked = new Promise<void>((resolve) => {
+			releaseNavigation = resolve
+		})
+		let blockedNavigationRequest = false
+		await page.route(/remote\.php\/dav\/files\//, async (route) => {
+			const request = route.request()
+			if (!blockedNavigationRequest && request.method() === 'PROPFIND' && request.url().includes('/foo/bar')) {
+				blockedNavigationRequest = true
+				await navigationBlocked
+			}
+
+			await route.continue()
+		})
+
+		// Navigate back to the parent folder — the PROPFIND request will be blocked
+		const navigationResponse = page.waitForResponse((response) => response.url().includes('/remote.php/dav/files/')
+			&& response.request().method() === 'PROPFIND'
+			&& response.url().includes('/foo/bar'))
+
+		await page.goBack()
+
+		await expect.poll(() => new URL(page.url()).searchParams.get('dir')).toBe('/foo/bar')
+		await expect(page.locator('[data-cy-files-loading]')).toBeVisible()
+		expect(blockedNavigationRequest).toBe(true)
+
+		// Release the blocked navigation request and wait for it to complete
+		releaseNavigation()
+		await navigationResponse
+		await page.unroute(/remote\.php\/dav\/files\//)
+
+		// Wait for the loading indicator to disappear and the folder to be rendered
+		await expect(page.locator('[data-cy-files-loading]')).not.toBeVisible()
+		await expect(filesListPage.getRowForFile('baz')).toBeVisible()
+		await expect(filesListPage.getRowForFile('baz')).toBeActiveRow()
+	})
 })