fix: Allow to reset unified search using the `nextcloud:unified-search:reset` event

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
5 months ago · 362c6238fc
parent dd3dcf3703
commit 362c6238fc
8 changed files with 240 additions and 25 deletions
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@ -464,7 +464,7 @@ export default defineComponent({

 			logger.debug('View changed', { newView, oldView })
 			this.selectionStore.reset()
-			this.resetSearch()
+			this.triggerResetSearch()
 			this.fetchContent()
 		},

@ -472,7 +472,7 @@ export default defineComponent({
 			logger.debug('Directory changed', { newDir, oldDir })
 			// TODO: preserve selection on browsing?
 			this.selectionStore.reset()
-			this.resetSearch()
+			this.triggerResetSearch()
 			this.fetchContent()

 			// Scroll to top, force virtual scroller to re-render
@ -493,8 +493,8 @@ export default defineComponent({

 		subscribe('files:node:deleted', this.onNodeDeleted)
 		subscribe('files:node:updated', this.onUpdatedNode)
-		subscribe('nextcloud:unified-search.search', this.onSearch)
-		subscribe('nextcloud:unified-search.reset', this.resetSearch)
+		subscribe('nextcloud:unified-search:search', this.onSearch)
+		subscribe('nextcloud:unified-search:reset', this.onResetSearch)

 		// reload on settings change
 		this.unsubscribeStoreCallback = this.userConfigStore.$subscribe(() => this.fetchContent(), { deep: true })
@ -503,8 +503,8 @@ export default defineComponent({
 	unmounted() {
 		unsubscribe('files:node:deleted', this.onNodeDeleted)
 		unsubscribe('files:node:updated', this.onUpdatedNode)
-		unsubscribe('nextcloud:unified-search.search', this.onSearch)
-		unsubscribe('nextcloud:unified-search.reset', this.resetSearch)
+		unsubscribe('nextcloud:unified-search:search', this.onSearch)
+		unsubscribe('nextcloud:unified-search:reset', this.onResetSearch)
 		this.unsubscribeStoreCallback()
 	},

@ -676,15 +676,23 @@ export default defineComponent({
 		},

 		/**
-		 * Reset the search query
+		 * Handle reset search query event
 		 */
-		resetSearch() {
+		onResetSearch() {
 			// Reset debounced calls to not set the query again
 			this.onSearch.clear()
 			// Reset filter query
 			this.filterText = ''
 		},

+		/**
+		 * Trigger a reset of the local search (part of unified search)
+		 * This is usful to reset the search on directory / view change
+		 */
+		triggerResetSearch() {
+			emit('nextcloud:unified-search:reset')
+		},
+
 		openSharingSidebar() {
 			if (!this.currentFolder) {
 				logger.debug('No current folder found for opening sharing sidebar')
--- a/core/src/views/UnifiedSearch.vue
+++ b/core/src/views/UnifiedSearch.vue
@ -99,6 +99,12 @@ export default defineComponent({
 		// register keyboard listener for search shortcut
 		window.addEventListener('keydown', this.onKeyDown)

+		// Allow external reset of the search / close local search
+		subscribe('nextcloud:unified-search:reset', () => {
+			this.showLocalSearch = false
+			this.queryText = ''
+		})
+
 		// Deprecated events to be removed
 		subscribe('nextcloud:unified-search:reset', () => {
 			emit('nextcloud:unified-search.reset', { query: '' })
--- a/cypress/e2e/files/files-searching.cy.ts
+++ b/cypress/e2e/files/files-searching.cy.ts
@ -5,9 +5,10 @@

 import type { User } from '@nextcloud/cypress'
 import { getRowForFile, navigateToFolder } from './FilesUtils'
-import { UnifiedSearchFilter, getUnifiedSearchFilter, getUnifiedSearchInput, getUnifiedSearchModal, openUnifiedSearch } from '../core-utils.ts'
+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) => {
@ -20,17 +21,21 @@ describe('files: Search and filter in files list', { testIsolation: true }, () =
 		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
-		openUnifiedSearch()
-		getUnifiedSearchInput().type('a folder')
-		getUnifiedSearchFilter(UnifiedSearchFilter.FilterCurrentView).click({ force: true })
-		// Wait for modal to close
-		getUnifiedSearchModal().should('not.be.visible')
+		unifiedSearch.openLocalSearch()
+		unifiedSearch.typeLocalSearch('a folder')

 		// See that only the folder is visible
 		getRowForFile('a folder').should('be.visible')
@ -43,11 +48,8 @@ describe('files: Search and filter in files list', { testIsolation: true }, () =
 		getRowForFile('b file').should('be.visible')

 		// Set up a search query
-		openUnifiedSearch()
-		getUnifiedSearchInput().type('a folder')
-		getUnifiedSearchFilter(UnifiedSearchFilter.FilterCurrentView).click({ force: true })
-		// Wait for modal to close
-		getUnifiedSearchModal().should('not.be.visible')
+		unifiedSearch.openLocalSearch()
+		unifiedSearch.typeLocalSearch('a folder')

 		// See that only the folder is visible
 		getRowForFile('a folder').should('be.visible')
@ -66,11 +68,8 @@ describe('files: Search and filter in files list', { testIsolation: true }, () =
 		getRowForFile('b file').should('be.visible')

 		// Set up a search query
-		openUnifiedSearch()
-		getUnifiedSearchInput().type('a folder')
-		getUnifiedSearchFilter(UnifiedSearchFilter.FilterCurrentView).click({ force: true })
-		// Wait for modal to close
-		getUnifiedSearchModal().should('not.be.visible')
+		unifiedSearch.openLocalSearch()
+		unifiedSearch.typeLocalSearch('a folder')

 		// See that only the folder is visible
 		getRowForFile('a folder').should('be.visible')
@ -84,5 +83,8 @@ describe('files: Search and filter in files list', { testIsolation: true }, () =
 		// 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')
 	})
 })
--- a/cypress/pages/UnifiedSearch.ts
+++ b/cypress/pages/UnifiedSearch.ts
@ -0,0 +1,75 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * Page object model for the UnifiedSearch
+ */
+export class UnifiedSearchPage {
+
+	toggleButton() {
+		return cy.findByRole('button', { name: 'Unified search' })
+	}
+
+	globalSearchButton() {
+		return cy.findByRole('button', { name: 'Search everywhere' })
+	}
+
+	localSearchInput() {
+		return cy.findByRole('textbox', { name: 'Search in current app' })
+	}
+
+	globalSearchInput() {
+		return cy.findByRole('textbox', { name: /Search apps, files/ })
+	}
+
+	globalSearchModal() {
+		// TODO: Broken in library
+		// return cy.findByRole('dialog', { name: 'Unified search' })
+		return cy.get('#unified-search')
+	}
+
+	// functions
+
+	openLocalSearch() {
+		this.toggleButton()
+			.if('visible')
+			.click()
+
+		this.localSearchInput().should('exist').and('not.have.css', 'display', 'none')
+	}
+
+	/**
+	 * Type in the local search (must be open before)
+	 * Helper because the input field is overlayed by the global-search button -> cypress thinks the input is not visible
+	 *
+	 * @param text The text to type
+	 * @param options Options as for `cy.type()`
+	 */
+	typeLocalSearch(text: string, options?: Partial<Omit<Cypress.TypeOptions, 'force'>>) {
+		return this.localSearchInput()
+			.type(text, { ...options, force: true })
+	}
+
+	openGlobalSearch() {
+		this.toggleButton()
+			.if('visible').click()
+
+		this.globalSearchButton()
+			.if('visible').click()
+	}
+
+	closeGlobalSearch() {
+		this.globalSearchModal()
+			.findByRole('button', { name: 'Close' })
+			.click()
+	}
+
+	getResults(category: string | RegExp) {
+		return this.globalSearchModal()
+			.findByRole('list', { name: category })
+			.findAllByRole('listitem')
+	}
+
+}
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@ -10,6 +10,7 @@ import { addCommands, User } from '@nextcloud/cypress'
 import { basename } from 'path'

 // Add custom commands
+import '@testing-library/cypress/add-commands'
 import 'cypress-if'
 import 'cypress-wait-until'
 addCommands()
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@ -2,6 +2,12 @@
 	"extends": "../tsconfig.json",
 	"include": ["./**/*.ts"],
 	"compilerOptions": {
-		"types": ["cypress", "cypress-axe", "cypress-wait-until", "dockerode"],
+		"types": [
+			"@testing-library/cypress",
+			"cypress",
+			"cypress-axe",
+			"cypress-wait-until",
+			"dockerode"
+		],
 	}
 }
--- a/package-lock.json
+++ b/package-lock.json
@ -101,6 +101,7 @@
        "@nextcloud/webpack-vue-config": "^6.0.1",
        "@pinia/testing": "^0.1.2",
        "@simplewebauthn/types": "^10.0.0",
+        "@testing-library/cypress": "^10.0.2",
        "@testing-library/jest-dom": "^6.4.5",
        "@testing-library/user-event": "^14.4.3",
        "@testing-library/vue": "^5.8.3",
@ -5255,6 +5256,121 @@
        "string.prototype.matchall": "^4.0.6"
      }
    },
+    "node_modules/@testing-library/cypress": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/cypress/-/cypress-10.0.2.tgz",
+      "integrity": "sha512-dKv95Bre5fDmNb9tOIuWedhGUryxGu1GWYWtXDqUsDPcr9Ekld0fiTb+pcBvSsFpYXAZSpmyEjhoXzLbhh06yQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.14.6",
+        "@testing-library/dom": "^10.1.0"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "cypress": "^12.0.0 || ^13.0.0"
+      }
+    },
+    "node_modules/@testing-library/cypress/node_modules/@testing-library/dom": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.2.0.tgz",
+      "integrity": "sha512-CytIvb6tVOADRngTHGWNxH8LPgO/3hi/BdCEHOf7Qd2GvZVClhVP0Wo/QHzWhpki49Bk0b4VT6xpt3fx8HTSIw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/cypress/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/cypress/node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/@testing-library/cypress/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/cypress/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@testing-library/cypress/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@testing-library/cypress/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/cypress/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/@testing-library/dom": {
      "version": "9.3.4",
      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
--- a/package.json
+++ b/package.json
@ -129,6 +129,7 @@
    "@nextcloud/webpack-vue-config": "^6.0.1",
    "@pinia/testing": "^0.1.2",
    "@simplewebauthn/types": "^10.0.0",
+    "@testing-library/cypress": "^10.0.2",
    "@testing-library/jest-dom": "^6.4.5",
    "@testing-library/user-event": "^14.4.3",
    "@testing-library/vue": "^5.8.3",