Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>pull/41609/head
@@ -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') |
@@ -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: '' }) |
@@ -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') | |||
}) | |||
}) |
@@ -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') | |||
} | |||
} |
@@ -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() |
@@ -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" | |||
], | |||
} | |||
} |
@@ -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", |
@@ -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", |