Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>pull/41609/head
logger.debug('View changed', { newView, oldView }) | logger.debug('View changed', { newView, oldView }) | ||||
this.selectionStore.reset() | this.selectionStore.reset() | ||||
this.resetSearch() | |||||
this.triggerResetSearch() | |||||
this.fetchContent() | this.fetchContent() | ||||
}, | }, | ||||
logger.debug('Directory changed', { newDir, oldDir }) | logger.debug('Directory changed', { newDir, oldDir }) | ||||
// TODO: preserve selection on browsing? | // TODO: preserve selection on browsing? | ||||
this.selectionStore.reset() | this.selectionStore.reset() | ||||
this.resetSearch() | |||||
this.triggerResetSearch() | |||||
this.fetchContent() | this.fetchContent() | ||||
// Scroll to top, force virtual scroller to re-render | // Scroll to top, force virtual scroller to re-render | ||||
subscribe('files:node:deleted', this.onNodeDeleted) | subscribe('files:node:deleted', this.onNodeDeleted) | ||||
subscribe('files:node:updated', this.onUpdatedNode) | 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 | // reload on settings change | ||||
this.unsubscribeStoreCallback = this.userConfigStore.$subscribe(() => this.fetchContent(), { deep: true }) | this.unsubscribeStoreCallback = this.userConfigStore.$subscribe(() => this.fetchContent(), { deep: true }) | ||||
unmounted() { | unmounted() { | ||||
unsubscribe('files:node:deleted', this.onNodeDeleted) | unsubscribe('files:node:deleted', this.onNodeDeleted) | ||||
unsubscribe('files:node:updated', this.onUpdatedNode) | 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() | this.unsubscribeStoreCallback() | ||||
}, | }, | ||||
}, | }, | ||||
/** | /** | ||||
* Reset the search query | |||||
* Handle reset search query event | |||||
*/ | */ | ||||
resetSearch() { | |||||
onResetSearch() { | |||||
// Reset debounced calls to not set the query again | // Reset debounced calls to not set the query again | ||||
this.onSearch.clear() | this.onSearch.clear() | ||||
// Reset filter query | // Reset filter query | ||||
this.filterText = '' | 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() { | openSharingSidebar() { | ||||
if (!this.currentFolder) { | if (!this.currentFolder) { | ||||
logger.debug('No current folder found for opening sharing sidebar') | logger.debug('No current folder found for opening sharing sidebar') |
// register keyboard listener for search shortcut | // register keyboard listener for search shortcut | ||||
window.addEventListener('keydown', this.onKeyDown) | 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 | // Deprecated events to be removed | ||||
subscribe('nextcloud:unified-search:reset', () => { | subscribe('nextcloud:unified-search:reset', () => { | ||||
emit('nextcloud:unified-search.reset', { query: '' }) | emit('nextcloud:unified-search.reset', { query: '' }) |
import type { User } from '@nextcloud/cypress' | import type { User } from '@nextcloud/cypress' | ||||
import { getRowForFile, navigateToFolder } from './FilesUtils' | 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 }, () => { | describe('files: Search and filter in files list', { testIsolation: true }, () => { | ||||
const unifiedSearch = new UnifiedSearchPage() | |||||
let user: User | let user: User | ||||
beforeEach(() => cy.createRandomUser().then(($user) => { | beforeEach(() => cy.createRandomUser().then(($user) => { | ||||
cy.visit('/apps/files') | 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', () => { | it('filters current view', () => { | ||||
// All are visible by default | // All are visible by default | ||||
getRowForFile('a folder').should('be.visible') | getRowForFile('a folder').should('be.visible') | ||||
getRowForFile('b file').should('be.visible') | getRowForFile('b file').should('be.visible') | ||||
// Set up a search query | // 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 | // See that only the folder is visible | ||||
getRowForFile('a folder').should('be.visible') | getRowForFile('a folder').should('be.visible') | ||||
getRowForFile('b file').should('be.visible') | getRowForFile('b file').should('be.visible') | ||||
// Set up a search query | // 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 | // See that only the folder is visible | ||||
getRowForFile('a folder').should('be.visible') | getRowForFile('a folder').should('be.visible') | ||||
getRowForFile('b file').should('be.visible') | getRowForFile('b file').should('be.visible') | ||||
// Set up a search query | // 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 | // See that only the folder is visible | ||||
getRowForFile('a folder').should('be.visible') | getRowForFile('a folder').should('be.visible') | ||||
// see that the folder is not filtered | // see that the folder is not filtered | ||||
getRowForFile('a folder').should('be.visible') | getRowForFile('a folder').should('be.visible') | ||||
getRowForFile('b file').should('be.visible') | getRowForFile('b file').should('be.visible') | ||||
// see the filter bar is gone | |||||
unifiedSearch.localSearchInput().should('not.exist') | |||||
}) | }) | ||||
}) | }) |
/** | |||||
* 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') | |||||
} | |||||
} |
import { basename } from 'path' | import { basename } from 'path' | ||||
// Add custom commands | // Add custom commands | ||||
import '@testing-library/cypress/add-commands' | |||||
import 'cypress-if' | import 'cypress-if' | ||||
import 'cypress-wait-until' | import 'cypress-wait-until' | ||||
addCommands() | addCommands() |
"extends": "../tsconfig.json", | "extends": "../tsconfig.json", | ||||
"include": ["./**/*.ts"], | "include": ["./**/*.ts"], | ||||
"compilerOptions": { | "compilerOptions": { | ||||
"types": ["cypress", "cypress-axe", "cypress-wait-until", "dockerode"], | |||||
"types": [ | |||||
"@testing-library/cypress", | |||||
"cypress", | |||||
"cypress-axe", | |||||
"cypress-wait-until", | |||||
"dockerode" | |||||
], | |||||
} | } | ||||
} | } |
"@nextcloud/webpack-vue-config": "^6.0.1", | "@nextcloud/webpack-vue-config": "^6.0.1", | ||||
"@pinia/testing": "^0.1.2", | "@pinia/testing": "^0.1.2", | ||||
"@simplewebauthn/types": "^10.0.0", | "@simplewebauthn/types": "^10.0.0", | ||||
"@testing-library/cypress": "^10.0.2", | |||||
"@testing-library/jest-dom": "^6.4.5", | "@testing-library/jest-dom": "^6.4.5", | ||||
"@testing-library/user-event": "^14.4.3", | "@testing-library/user-event": "^14.4.3", | ||||
"@testing-library/vue": "^5.8.3", | "@testing-library/vue": "^5.8.3", | ||||
"string.prototype.matchall": "^4.0.6" | "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": { | "node_modules/@testing-library/dom": { | ||||
"version": "9.3.4", | "version": "9.3.4", | ||||
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz", | "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz", |
"@nextcloud/webpack-vue-config": "^6.0.1", | "@nextcloud/webpack-vue-config": "^6.0.1", | ||||
"@pinia/testing": "^0.1.2", | "@pinia/testing": "^0.1.2", | ||||
"@simplewebauthn/types": "^10.0.0", | "@simplewebauthn/types": "^10.0.0", | ||||
"@testing-library/cypress": "^10.0.2", | |||||
"@testing-library/jest-dom": "^6.4.5", | "@testing-library/jest-dom": "^6.4.5", | ||||
"@testing-library/user-event": "^14.4.3", | "@testing-library/user-event": "^14.4.3", | ||||
"@testing-library/vue": "^5.8.3", | "@testing-library/vue": "^5.8.3", |