test: Add cypress tests for file list filtering

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

4 files changed, 300 insertions, 90 deletions

diff --git a/cypress/e2e/files/files-filtering.cy.ts b/cypress/e2e/files/files-filtering.cy.ts
new file mode 100644
index 00000000000..c7b147d4a9c
--- /dev/null
+++ b/cypress/e2e/files/files-filtering.cy.ts
@@ -0,0 +1,231 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { User } from '@nextcloud/cypress'
+import { getRowForFile, navigateToFolder } from './FilesUtils'
+import { FilesNavigationPage } from '../../pages/FilesNavigation'
+import { FilesFilterPage } from '../../pages/FilesFilters'
+
+describe('files: Filter in files list', { testIsolation: true }, () => {
+	const appNavigation = new FilesNavigationPage()
+	const filesFilters = new FilesFilterPage()
+	let user: User
+
+	beforeEach(() => cy.createRandomUser().then(($user) => {
+		user = $user
+
+		cy.mkdir(user, '/folder')
+		cy.uploadContent(user, new Blob([]), 'text/plain', '/file.txt')
+		cy.uploadContent(user, new Blob([]), 'text/csv', '/spreadsheet.csv')
+		cy.uploadContent(user, new Blob([]), 'text/plain', '/folder/text.txt')
+		cy.login(user)
+		cy.visit('/apps/files')
+	}))
+
+	it('filters current view by name', () => {
+		// All are visible by default
+		getRowForFile('folder').should('be.visible')
+		getRowForFile('file.txt').should('be.visible')
+
+		// Set up a search query
+		appNavigation.searchInput()
+			.type('folder')
+
+		// See that only the folder is visible
+		getRowForFile('folder').should('be.visible')
+		getRowForFile('file.txt').should('not.exist')
+		getRowForFile('spreadsheet.csv').should('not.exist')
+	})
+
+	it('can reset name filter', () => {
+		// All are visible by default
+		getRowForFile('folder').should('be.visible')
+		getRowForFile('file.txt').should('be.visible')
+
+		// Set up a search query
+		appNavigation.searchInput()
+			.type('folder')
+
+		// See that only the folder is visible
+		getRowForFile('folder').should('be.visible')
+		getRowForFile('file.txt').should('not.exist')
+
+		// reset the filter
+		appNavigation.searchInput().should('have.value', 'folder')
+		appNavigation.searchClearButton().should('exist').click()
+		appNavigation.searchInput().should('have.value', '')
+
+		// All are visible again
+		getRowForFile('folder').should('be.visible')
+		getRowForFile('file.txt').should('be.visible')
+	})
+
+	it('filters current view by type', () => {
+		// All are visible by default
+		getRowForFile('folder').should('be.visible')
+		getRowForFile('file.txt').should('be.visible')
+		getRowForFile('spreadsheet.csv').should('be.visible')
+
+		filesFilters.filterContainter()
+			.findByRole('button', { name: 'Type' })
+			.should('be.visible')
+			.click()
+		cy.findByRole('menuitemcheckbox', { name: 'Spreadsheets' })
+			.should('be.visible')
+			.click()
+		filesFilters.filterContainter()
+			.findByRole('button', { name: 'Type' })
+			.should('be.visible')
+			.click()
+
+		// See that only the spreadsheet is visible
+		getRowForFile('spreadsheet.csv').should('be.visible')
+		getRowForFile('file.txt').should('not.exist')
+		getRowForFile('folder').should('not.exist')
+	})
+
+	it('can reset filter by type', () => {
+		// All are visible by default
+		getRowForFile('folder').should('be.visible')
+
+		filesFilters.filterContainter()
+			.findByRole('button', { name: 'Type' })
+			.should('be.visible')
+			.click()
+		cy.findByRole('menuitemcheckbox', { name: 'Spreadsheets' })
+			.should('be.visible')
+			.click()
+		filesFilters.filterContainter()
+			.findByRole('button', { name: 'Type' })
+			.should('be.visible')
+			.click()
+
+		// See folder is not visible
+		getRowForFile('folder').should('not.exist')
+
+		// clear filter
+		filesFilters.filterContainter()
+			.findByRole('button', { name: 'Type' })
+			.should('be.visible')
+			.click()
+		cy.findByRole('menuitem', { name: /clear filter/i })
+			.should('be.visible')
+			.click()
+		filesFilters.filterContainter()
+			.findByRole('button', { name: 'Type' })
+			.should('be.visible')
+			.click()
+
+		// See folder is visible again
+		getRowForFile('folder').should('be.visible')
+	})
+
+	it('can reset filter by clicking chip button', () => {
+		// All are visible by default
+		getRowForFile('folder').should('be.visible')
+
+		filesFilters.filterContainter()
+			.findByRole('button', { name: 'Type' })
+			.should('be.visible')
+			.click()
+		cy.findByRole('menuitemcheckbox', { name: 'Spreadsheets' })
+			.should('be.visible')
+			.click()
+		filesFilters.filterContainter()
+			.findByRole('button', { name: 'Type' })
+			.should('be.visible')
+			.click()
+
+		// See folder is not visible
+		getRowForFile('folder').should('not.exist')
+
+		// clear filter
+		filesFilters.removeFilter('Spreadsheets')
+
+		// See folder is visible again
+		getRowForFile('folder').should('be.visible')
+	})
+
+	it('keeps name filter when changing the directory', () => {
+		// All are visible by default
+		getRowForFile('folder').should('be.visible')
+		getRowForFile('file.txt').should('be.visible')
+
+		// Set up a search query
+		appNavigation.searchInput()
+			.type('folder')
+
+		// See that only the folder is visible
+		getRowForFile('folder').should('be.visible')
+		getRowForFile('file.txt').should('not.exist')
+
+		// go to that folder
+		navigateToFolder('folder')
+
+		// see that the folder is also filtered
+		getRowForFile('text.txt').should('not.exist')
+	})
+
+	it('keeps type filter when changing the directory', () => {
+		// All are visible by default
+		getRowForFile('folder').should('be.visible')
+		getRowForFile('file.txt').should('be.visible')
+
+		filesFilters.filterContainter()
+			.findByRole('button', { name: 'Type' })
+			.should('be.visible')
+			.click()
+		cy.findByRole('menuitemcheckbox', { name: 'Folders' })
+			.should('be.visible')
+			.click()
+		filesFilters.filterContainter()
+			.findByRole('button', { name: 'Type' })
+			.click()
+
+		// See that only the folder is visible
+		getRowForFile('folder').should('be.visible')
+		getRowForFile('file.txt').should('not.exist')
+
+		// see filter is active
+		filesFilters.activeFilters().contains(/Folder/).should('be.visible')
+
+		// go to that folder
+		navigateToFolder('folder')
+
+		// see filter is still active
+		filesFilters.activeFilters().contains(/Folder/).should('be.visible')
+
+		// see that the folder is filtered
+		getRowForFile('text.txt').should('not.exist')
+	})
+
+	it('resets filter when changing the view', () => {
+		// All are visible by default
+		getRowForFile('folder').should('be.visible')
+		getRowForFile('file.txt').should('be.visible')
+
+		// Set up a search query
+		appNavigation.searchInput()
+			.type('folder')
+
+		// See that only the folder is visible
+		getRowForFile('folder').should('be.visible')
+		getRowForFile('file.txt').should('not.exist')
+
+		// go to other view
+		appNavigation.views()
+			.findByRole('link', { name: /Personal Files/i })
+			.click()
+		// wait for view changed
+		cy.url().should('match', /apps\/files\/personal/)
+
+		// see that the folder is not filtered
+		getRowForFile('folder').should('be.visible')
+		getRowForFile('file.txt').should('be.visible')
+
+		// see the filter bar is gone
+		appNavigation.searchInput().should('have.value', '')
+	})
+})
diff --git a/cypress/e2e/files/files-searching.cy.ts b/cypress/e2e/files/files-searching.cy.ts
deleted file mode 100644
index 10ca1b44e2f..00000000000
--- a/cypress/e2e/files/files-searching.cy.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import type { User } from '@nextcloud/cypress'
-import { getRowForFile, navigateToFolder } from './FilesUtils'
-import { UnifiedSearchPage } from '../../pages/UnifiedSearch.ts'
-
-describe('files: Search and filter in files list', { testIsolation: true }, () => {
-	const unifiedSearch = new UnifiedSearchPage()
-	let user: User
-
-	beforeEach(() => cy.createRandomUser().then(($user) => {
-		user = $user
-
-		cy.mkdir(user, '/a folder')
-		cy.uploadContent(user, new Blob([]), 'text/plain', '/b file')
-		cy.uploadContent(user, new Blob([]), 'text/plain', '/a folder/c file')
-		cy.login(user)
-		cy.visit('/apps/files')
-	}))
-
-	it('files app supports local search', () => {
-		unifiedSearch.openLocalSearch()
-		unifiedSearch.localSearchInput()
-			.should('not.have.css', 'display', 'none')
-			.and('not.be.disabled')
-	})
-
-	it('filters current view', () => {
-		// All are visible by default
-		getRowForFile('a folder').should('be.visible')
-		getRowForFile('b file').should('be.visible')
-
-		// Set up a search query
-		unifiedSearch.openLocalSearch()
-		unifiedSearch.typeLocalSearch('a folder')
-
-		// See that only the folder is visible
-		getRowForFile('a folder').should('be.visible')
-		getRowForFile('b file').should('not.exist')
-	})
-
-	it('resets filter when changeing the directory', () => {
-		// All are visible by default
-		getRowForFile('a folder').should('be.visible')
-		getRowForFile('b file').should('be.visible')
-
-		// Set up a search query
-		unifiedSearch.openLocalSearch()
-		unifiedSearch.typeLocalSearch('a folder')
-
-		// See that only the folder is visible
-		getRowForFile('a folder').should('be.visible')
-		getRowForFile('b file').should('not.exist')
-
-		// go to that folder
-		navigateToFolder('a folder')
-
-		// see that the folder is not filtered
-		getRowForFile('c file').should('be.visible')
-	})
-
-	it('resets filter when changeing the view', () => {
-		// All are visible by default
-		getRowForFile('a folder').should('be.visible')
-		getRowForFile('b file').should('be.visible')
-
-		// Set up a search query
-		unifiedSearch.openLocalSearch()
-		unifiedSearch.typeLocalSearch('a folder')
-
-		// See that only the folder is visible
-		getRowForFile('a folder').should('be.visible')
-		getRowForFile('b file').should('not.exist')
-
-		// go to other view
-		cy.get('[data-cy-files-navigation-item="personal"] a').click({ force: true })
-		// wait for view changed
-		cy.url().should('match', /apps\/files\/personal/)
-
-		// see that the folder is not filtered
-		getRowForFile('a folder').should('be.visible')
-		getRowForFile('b file').should('be.visible')
-
-		// see the filter bar is gone
-		unifiedSearch.localSearchInput().should('not.exist')
-	})
-})
diff --git a/cypress/pages/FilesFilters.ts b/cypress/pages/FilesFilters.ts
new file mode 100644
index 00000000000..036530f1e8a
--- /dev/null
+++ b/cypress/pages/FilesFilters.ts
@@ -0,0 +1,34 @@
+/*!
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * Page object model for the files filters
+ */
+export class FilesFilterPage {
+
+	filterContainter() {
+		return cy.get('[data-cy-files-filters]')
+	}
+
+	activeFiltersList() {
+		return cy.findByRole('list', { name: 'Active filters' })
+	}
+
+	activeFilters() {
+		return this.activeFiltersList().findAllByRole('listitem')
+	}
+
+	removeFilter(name: string | RegExp) {
+		const el = typeof name === 'string'
+			? this.activeFilters().should('contain.text', name)
+			: this.activeFilters().should('match', name)
+		el.should('exist')
+		// click the button
+		el.findByRole('button', { name: 'Remove filter' })
+			.should('exist')
+			.click({ force: true })
+	}
+
+}
diff --git a/cypress/pages/FilesNavigation.ts b/cypress/pages/FilesNavigation.ts
new file mode 100644
index 00000000000..cb3897afb90
--- /dev/null
+++ b/cypress/pages/FilesNavigation.ts
@@ -0,0 +1,35 @@
+/*!
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * Page object model for the files app navigation
+ */
+export class FilesNavigationPage {
+
+	navigation() {
+		return cy.findByRole('navigation', { name: 'Files' })
+	}
+
+	searchInput() {
+		return this.navigation().findByRole('searchbox', { name: /filter filenames/i })
+	}
+
+	searchClearButton() {
+		return this.navigation().findByRole('button', { name: /clear search/i })
+	}
+
+	settingsToggle() {
+		return this.navigation().findByRole('link', { name: 'Files settings' })
+	}
+
+	views() {
+		return this.navigation().findByRole('list', { name: 'Views' })
+	}
+
+	quota() {
+		return this.navigation().find('[data-cy-files-navigation-settings-quota]')
+	}
+
+}