chore(cypress): adjust files-sidebar.cy.ts

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

Author: skjnldsv

apps/files/src/views/Sidebar.vue

@@ -23,7 +23,7 @@
 <template>
 	<NcAppSidebar v-if="file"
 		ref="sidebar"
-		cy-data-sidebar
+		data-cy-sidebar
 		v-bind="appSidebar"
 		:force-menu="true"
 		@close="close"

cypress/e2e/files/FilesUtils.ts

@@ -130,7 +130,7 @@ export const navigateToFolder = (dirPath: string) => {
 
 export const closeSidebar = () => {
 	// {force: true} as it might be hidden behind toasts
-	cy.get('[cy-data-sidebar] .app-sidebar__close').click({ force: true })
+	cy.get('[data-cy-sidebar] .app-sidebar__close').click({ force: true })
 }
 
 export const clickOnBreadcrumbs = (label: string) => {

cypress/e2e/files/files-sidebar.cy.ts

@@ -1,23 +1,6 @@
 /**
- * @copyright Copyright (c) 2024 Ferdinand Thiessen <opensource@fthiessen.de>
- *
- * @author Ferdinand Thiessen <opensource@fthiessen.de>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
 import type { User } from '@nextcloud/cypress'
@@ -44,7 +27,10 @@ describe('Files: Sidebar', { testIsolation: true }, () => {
 
 		triggerActionForFile('file', 'details')
 
-		cy.get('[cy-data-sidebar]').should('be.visible')
+		cy.get('[data-cy-sidebar]')
+			.should('be.visible')
+			.findByRole('heading', { name: 'file' })
+			.should('be.visible')
 	})
 
 	it('changes the current fileid', () => {
@@ -53,7 +39,7 @@ describe('Files: Sidebar', { testIsolation: true }, () => {
 
 		triggerActionForFile('file', 'details')
 
-		cy.get('[cy-data-sidebar]').should('be.visible')
+		cy.get('[data-cy-sidebar]').should('be.visible')
 		cy.url().should('contain', `apps/files/files/${fileId}`)
 	})
 
@@ -84,7 +70,8 @@ describe('Files: Sidebar', { testIsolation: true }, () => {
 		// open the sidebar
 		triggerActionForFile('file', 'details')
 		// validate it is open
-		cy.get('[cy-data-sidebar]').should('be.visible')
+		cy.get('[data-cy-sidebar]')
+			.should('be.visible')
 
 		// if we navigate to the folder
 		navigateToFolder('folder')
@@ -104,7 +91,10 @@ describe('Files: Sidebar', { testIsolation: true }, () => {
 		cy.get('[data-cy-sidebar]').should('be.visible')
 		// delete the file
 		triggerActionForFile('file', 'delete')
-		cy.get('[cy-data-sidebar]').should('not.exist')
+		cy.wait('@deleteFile', { timeout: 10000 })
+		// see the sidebar is closed
+		cy.get('[data-cy-sidebar]')
+			.should(assertNotExistOrNotVisible)
 	})
 
 	it('changes the fileid on delete', () => {
@@ -122,11 +112,13 @@ describe('Files: Sidebar', { testIsolation: true }, () => {
 			// open the sidebar
 			triggerActionForFile('other', 'details')
 			// validate it is open
-			cy.get('[cy-data-sidebar]').should('be.visible')
+			cy.get('[data-cy-sidebar]').should('be.visible')
 			cy.url().should('contain', `apps/files/files/${otherFileId}`)
 
 			triggerActionForFile('other', 'delete')
-			cy.get('[cy-data-sidebar]').should('not.exist')
+			cy.wait('@deleteFile')
+
+			cy.get('[data-cy-sidebar]').should('not.exist')
 			// Ensure the URL is changed
 			cy.url().should('not.contain', `apps/files/files/${otherFileId}`)
 		})

cypress/support/commands.ts

@@ -27,6 +27,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()

dist/files-sidebar.js

@@ -129,6 +129,7 @@
     "@nextcloud/typings": "^1.8.0",
     "@nextcloud/webpack-vue-config": "^6.0.1",
     "@pinia/testing": "^0.1.2",
+    "@testing-library/cypress": "^10.0.2",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/user-event": "^14.4.3",
     "@testing-library/vue": "^5.8.3",
@@ -144,7 +145,7 @@
     "babel-plugin-module-resolver": "^5.0.2",
     "colord": "^2.9.3",
     "css-loader": "^6.8.1",
-    "cypress": "^13.7.3",
+    "cypress": "^13.13.2",
     "cypress-axe": "^1.5.0",
     "cypress-if": "^1.12.3",
     "cypress-split": "^1.21.2",