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>

apps/federatedfilesharing/src/external.js

@@ -10,6 +10,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { showRemoteShareDialog } from './services/dialogService.ts'
+import logger from './services/logger.ts'
 
 window.OCA.Sharing = window.OCA.Sharing ?? {}
 
@@ -105,7 +106,7 @@ function processIncomingShareFromUrl() {
 					showInfo(data.message)
 				}
 			}).catch((error) => {
-				console.error('Error while processing incoming share', error)
+				logger.error('Error while processing incoming share', { error })
 
 				if (isAxiosError(error) && error.response.data.message) {
 					showError(error.response.data.message)

apps/federatedfilesharing/src/services/logger.ts

@@ -0,0 +1,10 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { getLoggerBuilder } from '@nextcloud/logger'
+
+const logger = getLoggerBuilder()
+	.setApp('federatedfilesharing')
+	.build()
+export default logger

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)
 

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')

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>
+		}
+	}
+}

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
+		}
+	}
+}

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",

tsconfig.json

@@ -1,6 +1,7 @@
 {
 	"extends": "@vue/tsconfig/tsconfig.json",
 	"include": ["./apps/**/*.ts", "./apps/**/*.vue", "./core/**/*.ts", "./core/**/*.vue", "./*.d.ts"],
+	"exclude": ["./**/*.cy.ts"],
 	"compilerOptions": {
 		"types": ["node", "vue", "vue-router"],
 		"outDir": "./dist/",