test: Add cypress tests for file list filtering

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

3 files changed, 40 insertions, 35 deletions

diff --git a/apps/files/src/components/FileListFilters.vue b/apps/files/src/components/FileListFilters.vue
index 20c9179bd15..5cdc4e877fd 100644
--- a/apps/files/src/components/FileListFilters.vue
+++ b/apps/files/src/components/FileListFilters.vue
@@ -4,14 +4,15 @@
 -->
 <template>
 	<div class="file-list-filters">
-		<div class="file-list-filters__filter">
+		<div class="file-list-filters__filter" data-cy-files-filters>
 			<span v-for="filter of visualFilters"
 				:key="filter.id"
 				ref="filterElements" />
 		</div>
 		<ul v-if="activeChips.length > 0" class="file-list-filters__active" :aria-label="t('files', 'Active filters')">
 			<li v-for="(chip, index) of activeChips" :key="index">
-				<NcChip :icon-svg="chip.icon"
+				<NcChip :aria-label-close="t('files', 'Remove filter')"
+					:icon-svg="chip.icon"
 					:text="chip.text"
 					@close="chip.onclick" />
 			</li>
diff --git a/apps/files/src/components/NavigationQuota.vue b/apps/files/src/components/NavigationQuota.vue
index 557fb240797..0619f6bc3fd 100644
--- a/apps/files/src/components/NavigationQuota.vue
+++ b/apps/files/src/components/NavigationQuota.vue
@@ -4,7 +4,7 @@
  -->
 <template>
 	<NcAppNavigationItem v-if="storageStats"
-		:aria-label="t('files', 'Storage informations')"
+		:aria-description="t('files', 'Storage information')"
 		:class="{ 'app-navigation-entry__settings-quota--not-unlimited': storageStats.quota >= 0}"
 		:loading="loadingStorageStats"
 		:name="storageStatsTitle"
@@ -17,6 +17,7 @@
 		<!-- Progress bar -->
 		<NcProgressBar v-if="storageStats.quota >= 0"
 			slot="extra"
+			:aria-label="t('files', 'Storage quota')"
 			:error="storageStats.relative > 80"
 			:value="Math.min(storageStats.relative, 100)" />
 	</NcAppNavigationItem>
diff --git a/apps/files/src/views/Navigation.vue b/apps/files/src/views/Navigation.vue
index 51430dd54b2..cfd170bd073 100644
--- a/apps/files/src/views/Navigation.vue
+++ b/apps/files/src/views/Navigation.vue
@@ -8,33 +8,40 @@
 		<template #search>
 			<NcAppNavigationSearch v-model="searchQuery" :label="t('files', 'Filter filenames…')" />
 		</template>
-		<template #list>
-			<NcAppNavigationItem v-for="view in parentViews"
-				:key="view.id"
-				:allow-collapse="true"
-				:data-cy-files-navigation-item="view.id"
-				:exact="useExactRouteMatching(view)"
-				:icon="view.iconClass"
-				:name="view.name"
-				:open="isExpanded(view)"
-				:pinned="view.sticky"
-				:to="generateToNavigation(view)"
-				@update:open="onToggleExpand(view)">
-				<!-- Sanitized icon as svg if provided -->
-				<NcIconSvgWrapper v-if="view.icon" slot="icon" :svg="view.icon" />
-
-				<!-- Child views if any -->
-				<NcAppNavigationItem v-for="child in childViews[view.id]"
-					:key="child.id"
-					:data-cy-files-navigation-item="child.id"
-					:exact-path="true"
-					:icon="child.iconClass"
-					:name="child.name"
-					:to="generateToNavigation(child)">
+		<template #default>
+			<NcAppNavigationList :aria-label="t('files', 'Views')">
+				<NcAppNavigationItem v-for="view in parentViews"
+					:key="view.id"
+					:allow-collapse="true"
+					:data-cy-files-navigation-item="view.id"
+					:exact="useExactRouteMatching(view)"
+					:icon="view.iconClass"
+					:name="view.name"
+					:open="isExpanded(view)"
+					:pinned="view.sticky"
+					:to="generateToNavigation(view)"
+					@update:open="onToggleExpand(view)">
 					<!-- Sanitized icon as svg if provided -->
-					<NcIconSvgWrapper v-if="child.icon" slot="icon" :svg="child.icon" />
+					<NcIconSvgWrapper v-if="view.icon" slot="icon" :svg="view.icon" />
+
+					<!-- Child views if any -->
+					<NcAppNavigationItem v-for="child in childViews[view.id]"
+						:key="child.id"
+						:data-cy-files-navigation-item="child.id"
+						:exact-path="true"
+						:icon="child.iconClass"
+						:name="child.name"
+						:to="generateToNavigation(child)">
+						<!-- Sanitized icon as svg if provided -->
+						<NcIconSvgWrapper v-if="child.icon" slot="icon" :svg="child.icon" />
+					</NcAppNavigationItem>
 				</NcAppNavigationItem>
-			</NcAppNavigationItem>
+			</NcAppNavigationList>
+
+			<!-- Settings modal-->
+			<SettingsModal :open="settingsOpened"
+				data-cy-files-navigation-settings
+				@close="onSettingsClose" />
 		</template>
 
 		<!-- Non-scrollable navigation bottom elements -->
@@ -44,19 +51,13 @@
 				<NavigationQuota />
 
 				<!-- Files settings modal toggle-->
-				<NcAppNavigationItem :aria-label="t('files', 'Open the files app settings')"
-					:name="t('files', 'Files settings')"
+				<NcAppNavigationItem :name="t('files', 'Files settings')"
 					data-cy-files-navigation-settings-button
 					@click.prevent.stop="openSettings">
 					<IconCog slot="icon" :size="20" />
 				</NcAppNavigationItem>
 			</ul>
 		</template>
-
-		<!-- Settings modal-->
-		<SettingsModal :open="settingsOpened"
-			data-cy-files-navigation-settings
-			@close="onSettingsClose" />
 	</NcAppNavigation>
 </template>
 
@@ -70,6 +71,7 @@ import { defineComponent } from 'vue'
 import IconCog from 'vue-material-design-icons/Cog.vue'
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcAppNavigationList from '@nextcloud/vue/dist/Components/NcAppNavigationList.js'
 import NcAppNavigationSearch from '@nextcloud/vue/dist/Components/NcAppNavigationSearch.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import NavigationQuota from '../components/NavigationQuota.vue'
@@ -90,6 +92,7 @@ export default defineComponent({
 		NavigationQuota,
 		NcAppNavigation,
 		NcAppNavigationItem,
+		NcAppNavigationList,
 		NcAppNavigationSearch,
 		NcIconSvgWrapper,
 		SettingsModal,