diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue index 8ba5a85ddac..98a817ac067 100644 --- 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') diff --git a/core/src/views/UnifiedSearch.vue b/core/src/views/UnifiedSearch.vue index 1f0f91cc5fe..a07860c7e79 100644 --- 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: '' }) diff --git a/cypress/e2e/files/files-searching.cy.ts b/cypress/e2e/files/files-searching.cy.ts index 5f81057000d..10ca1b44e2f 100644 --- 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') }) }) diff --git a/cypress/pages/UnifiedSearch.ts b/cypress/pages/UnifiedSearch.ts new file mode 100644 index 00000000000..f6e0dd2e7a7 --- /dev/null +++ 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>) { + 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') + } + +} diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index cbc18ec24dc..5a465d0e4f6 100644 --- 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() diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json index c5dcff95d70..002fdb4f63e 100644 --- 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" + ], } } diff --git a/package-lock.json b/package-lock.json index c159cb2fc65..175eecfb2e9 100644 --- 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", diff --git a/package.json b/package.json index 564535c621a..b0726a5083b 100644 --- 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",