test: Add proper styles for Cypress component tests

This also fixes Typescript issue but requires to slightly
adjust the Navigation test as the progress bar is not visible (because it is overlayed by another element).

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

5 files changed, 109 insertions, 96 deletions

diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 23f93ea14d9..28bd335eecf 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 // eslint-disable-next-line n/no-extraneous-import
-import axios, { type AxiosResponse } from 'axios'
+import axios from 'axios'
 import { addCommands, User } from '@nextcloud/cypress'
 import { basename } from 'path'
 
@@ -13,79 +13,6 @@ import 'cypress-if'
 import 'cypress-wait-until'
 addCommands()
 
-// Register this file's custom commands types
-declare global {
-	// eslint-disable-next-line @typescript-eslint/no-namespace
-	namespace Cypress {
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
-		interface Chainable<Subject = any> {
-			/**
-			 * Enable or disable a given user
-			 */
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			enableUser(user: User, enable?: boolean): Cypress.Chainable<Cypress.Response<any>>,
-
-			/**
-			 * Upload a file from the fixtures folder to a given user storage.
-			 * **Warning**: Using this function will reset the previous session
-			 */
-			uploadFile(user: User, fixture?: string, mimeType?: string, target?: string): Cypress.Chainable<void>,
-
-			/**
-			 * Upload a raw content to a given user storage.
-			 * **Warning**: Using this function will reset the previous session
-			 */
-			uploadContent(user: User, content: Blob, mimeType: string, target: string, mtime?: number): Cypress.Chainable<AxiosResponse>,
-
-			/**
-			 * Create a new directory
-			 * **Warning**: Using this function will reset the previous session
-			 */
-			mkdir(user: User, target: string): Cypress.Chainable<void>,
-
-			/**
-			 * Set a file as favorite (or remove from favorite)
-			 */
-			setFileAsFavorite(user: User, target: string, favorite?: boolean): Cypress.Chainable<void>,
-
-			/**
-			 * Reset the admin theming entirely.
-			 * **Warning**: Using this function will reset the previous session
-			 */
-			resetAdminTheming(): Cypress.Chainable<void>,
-
-			/**
-			 * Reset the user theming settings.
-			 * If provided, will clear session and login as the given user.
-			 * **Warning**:  Providing a user will reset the previous session.
-			 */
-			resetUserTheming(user?: User): Cypress.Chainable<void>,
-
-			/**
-			 * Run an occ command in the docker container.
-			 */
-			runOccCommand(command: string, options?: Partial<Cypress.ExecOptions>): Cypress.Chainable<Cypress.Exec>,
-
-			userFileExists(user: string, path: string): Cypress.Chainable<number>
-
-			/**
-			 * Create a snapshot of the current database
-			 */
-			backupDB(): Cypress.Chainable<string>,
-
-			/**
-			 * Restore a snapshot of the database
-			 * Default is the post-setup state
-			 */
-			restoreDB(snapshot?: string): Cypress.Chainable
-
-			backupData(users?: string[]): Cypress.Chainable<string>
-
-			restoreData(snapshot?: string): Cypress.Chainable
-		}
-	}
-}
-
 const url = (Cypress.config('baseUrl') || '').replace(/\/index.php\/?$/g, '')
 Cypress.env('baseUrl', url)
 
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
index e1c33f55eb6..eecb55c69e7 100644
--- a/cypress/support/component.ts
+++ b/cypress/support/component.ts
@@ -2,6 +2,8 @@
  * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
+import '@testing-library/cypress/add-commands'
 import 'cypress-axe'
 
 // styles
@@ -11,29 +13,16 @@ import '../../core/css/server.css'
 /* eslint-disable */
 import { mount } from '@cypress/vue2'
 
-// Example use:
-// cy.mount(MyComponent)
-Cypress.Commands.add('mount', (component, optionsOrProps) => {
-	let instance = null
-	const oldMounted = component?.mounted || false
-
-	// Override the mounted method to expose
-	// the component instance to cypress
-	component.mounted = function() {
-		// eslint-disable-next-line
-		instance = this
-		if (oldMounted) {
-			oldMounted.call(instance)
-		}
-	}
+Cypress.Commands.add('mount', (component, options = {}) => {
+	// Setup options object
+	options.extensions = options.extensions || {}
+	options.extensions.plugins = options.extensions.plugins || []
+	options.extensions.components = options.extensions.components || {}
 
-	// Expose the component with cy.get('@component')
-	return mount(component, optionsOrProps).then(() => {
-		return cy.wrap(instance).as('component')
-	})
+	return mount(component, options)
 })
 
-Cypress.Commands.add('mockInitialState', (app: string, key: string, value: any) => {
+Cypress.Commands.add('mockInitialState', (app: string, key: string, value: unknown) => {
 	cy.document().then(($document) => {
 		const input = $document.createElement('input')
 		input.setAttribute('type', 'hidden')
@@ -48,4 +37,4 @@ Cypress.Commands.add('unmockInitialState', (app?: string, key?: string) => {
 		$document.querySelectorAll('body > input[type="hidden"]' + (app ? `[id="initial-state-${app}-${key}"]` : ''))
 			.forEach((node) => $document.body.removeChild(node))
 	})
-})
\ No newline at end of file
+})
diff --git a/cypress/support/cypress-component.d.ts b/cypress/support/cypress-component.d.ts
new file mode 100644
index 00000000000..735db871e35
--- /dev/null
+++ b/cypress/support/cypress-component.d.ts
@@ -0,0 +1,17 @@
+/*!
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { mount } from '@cypress/vue2'
+
+declare global {
+	// eslint-disable-next-line @typescript-eslint/no-namespace
+	namespace Cypress {
+		interface Chainable {
+			mount: typeof mount
+			mockInitialState: (app: string, key: string, value: unknown) => Cypress.Chainable<void>
+			unmockInitialState: (app?: string, key?: string) => Cypress.Chainable<void>
+		}
+	}
+}
diff --git a/cypress/support/cypress-e2e.d.ts b/cypress/support/cypress-e2e.d.ts
new file mode 100644
index 00000000000..13b181e6db6
--- /dev/null
+++ b/cypress/support/cypress-e2e.d.ts
@@ -0,0 +1,79 @@
+/*!
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+// eslint-disable-next-line n/no-extraneous-import
+import type { AxiosResponse } from 'axios'
+
+declare global {
+	// eslint-disable-next-line @typescript-eslint/no-namespace
+	namespace Cypress {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+		interface Chainable<Subject = any> {
+			/**
+			 * Enable or disable a given user
+			 */
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			enableUser(user: User, enable?: boolean): Cypress.Chainable<Cypress.Response<any>>,
+
+			/**
+			 * Upload a file from the fixtures folder to a given user storage.
+			 * **Warning**: Using this function will reset the previous session
+			 */
+			uploadFile(user: User, fixture?: string, mimeType?: string, target?: string): Cypress.Chainable<void>,
+
+			/**
+			 * Upload a raw content to a given user storage.
+			 * **Warning**: Using this function will reset the previous session
+			 */
+			uploadContent(user: User, content: Blob, mimeType: string, target: string, mtime?: number): Cypress.Chainable<AxiosResponse>,
+
+			/**
+			 * Create a new directory
+			 * **Warning**: Using this function will reset the previous session
+			 */
+			mkdir(user: User, target: string): Cypress.Chainable<void>,
+
+			/**
+			 * Set a file as favorite (or remove from favorite)
+			 */
+			setFileAsFavorite(user: User, target: string, favorite?: boolean): Cypress.Chainable<void>,
+
+			/**
+			 * Reset the admin theming entirely.
+			 * **Warning**: Using this function will reset the previous session
+			 */
+			resetAdminTheming(): Cypress.Chainable<void>,
+
+			/**
+			 * Reset the user theming settings.
+			 * If provided, will clear session and login as the given user.
+			 * **Warning**:  Providing a user will reset the previous session.
+			 */
+			resetUserTheming(user?: User): Cypress.Chainable<void>,
+
+			/**
+			 * Run an occ command in the docker container.
+			 */
+			runOccCommand(command: string, options?: Partial<Cypress.ExecOptions>): Cypress.Chainable<Cypress.Exec>,
+
+			userFileExists(user: string, path: string): Cypress.Chainable<number>
+
+			/**
+			 * Create a snapshot of the current database
+			 */
+			backupDB(): Cypress.Chainable<string>,
+
+			/**
+			 * Restore a snapshot of the database
+			 * Default is the post-setup state
+			 */
+			restoreDB(snapshot?: string): Cypress.Chainable
+
+			backupData(users?: string[]): Cypress.Chainable<string>
+
+			restoreData(snapshot?: string): Cypress.Chainable
+		}
+	}
+}
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
index 002fdb4f63e..510c64d633c 100644
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -1,6 +1,7 @@
 {
 	"extends": "../tsconfig.json",
-	"include": ["./**/*.ts"],
+	"include": ["./**/*.ts", "../**/*.cy.ts", "./cypress-e2e.d.ts", "./cypress-component.d.ts"],
+	"exclude": [],
 	"compilerOptions": {
 		"types": [
 			"@testing-library/cypress",