refactor(test): migrate Cypress component test to vitest

.github/workflows/cypress.yml

@@ -102,8 +102,8 @@ jobs:
       matrix:
         # Run multiple copies of the current job in parallel
         # Please increase the number or runners as your tests suite grows (0 based index for e2e tests)
-        containers: ['component', 'setup', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
-        # Hack as strategy.job-total includes the component and GitHub does not allow math expressions
+        containers: ['setup', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
+        # Hack as strategy.job-total includes the "setup" and GitHub does not allow math expressions
         # Always align this number with the total of e2e runners (max. index + 1)
         total-containers: [10]
 

__tests__/setup-global.js

@@ -2,6 +2,7 @@
  * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: CC0-1.0
  */
+
 export function setup() {
 	process.env.TZ = 'UTC'
 }

__tests__/setup-testing-library.js

@@ -2,5 +2,6 @@
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: CC0-1.0
  */
+
 import '@testing-library/jest-dom/vitest'
 import 'core-js/stable/index.js'

apps/federatedfilesharing/src/components/RemoteShareDialog.spec.ts

@@ -0,0 +1,115 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { cleanup, fireEvent, render } from '@testing-library/vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import RemoteShareDialog from './RemoteShareDialog.vue'
+
+describe('RemoteShareDialog', () => {
+	beforeEach(cleanup)
+
+	it('can be mounted', async () => {
+		const component = render(RemoteShareDialog, {
+			props: {
+				owner: 'user123',
+				name: 'my-photos',
+				remote: 'nextcloud.local',
+				passwordRequired: false,
+			},
+		})
+
+		await expect(component.findByRole('dialog', { name: 'Remote share' })).resolves.not.toThrow()
+		expect(component.getByRole('dialog').innerText).toContain(/my-photos from [email protected]/)
+		await expect(component.findByRole('button', { name: 'Cancel' })).resolves.not.toThrow()
+		await expect(component.findByRole('button', { name: /Add remote share/ })).resolves.not.toThrow()
+	})
+
+	it('does not show password input if not enabled', async () => {
+		const component = render(RemoteShareDialog, {
+			props: {
+				owner: 'user123',
+				name: 'my-photos',
+				remote: 'nextcloud.local',
+				passwordRequired: false,
+			},
+		})
+
+		await expect(component.findByLabelText('Remote share password')).rejects.toThrow()
+	})
+
+	it('emits true when accepted', () => {
+		const onClose = vi.fn()
+
+		const component = render(RemoteShareDialog, {
+			listeners: {
+				close: onClose,
+			},
+			props: {
+				owner: 'user123',
+				name: 'my-photos',
+				remote: 'nextcloud.local',
+				passwordRequired: false,
+			},
+		})
+
+		component.getByRole('button', { name: 'Cancel' }).click()
+		expect(onClose).toHaveBeenCalledWith(false)
+	})
+
+	it('show password input if needed', async () => {
+		const component = render(RemoteShareDialog, {
+			props: {
+				owner: 'admin',
+				name: 'secret-data',
+				remote: 'nextcloud.local',
+				passwordRequired: true,
+			},
+		})
+
+		await expect(component.findByLabelText('Remote share password')).resolves.not.toThrow()
+	})
+
+	it('emits the submitted password', async () => {
+		const onClose = vi.fn()
+
+		const component = render(RemoteShareDialog, {
+			listeners: {
+				close: onClose,
+			},
+			props: {
+				owner: 'admin',
+				name: 'secret-data',
+				remote: 'nextcloud.local',
+				passwordRequired: true,
+			},
+		})
+
+		const input = component.getByLabelText('Remote share password')
+		await fireEvent.update(input, 'my password')
+		component.getByRole('button', { name: 'Add remote share' }).click()
+		expect(onClose).toHaveBeenCalledWith(true, 'my password')
+	})
+
+	it('emits no password if cancelled', async () => {
+		const onClose = vi.fn()
+
+		const component = render(RemoteShareDialog, {
+			listeners: {
+				close: onClose,
+			},
+			props: {
+				owner: 'admin',
+				name: 'secret-data',
+				remote: 'nextcloud.local',
+				passwordRequired: true,
+			},
+		})
+
+		const input = component.getByLabelText('Remote share password')
+		await fireEvent.update(input, 'my password')
+		component.getByRole('button', { name: 'Cancel' }).click()
+		expect(onClose).toHaveBeenCalledWith(false)
+	})
+})

apps/federatedfilesharing/src/components/RemoteShareDialog.vue

@@ -35,8 +35,8 @@ const buttons = computed(() => [
 	},
 	{
 		label: t('federatedfilesharing', 'Add remote share'),
-		nativeType: props.passwordRequired ? 'submit' : undefined,
-		type: 'primary',
+		type: props.passwordRequired ? 'submit' : undefined,
+		variant: 'primary',
 		callback: () => emit('close', true, password.value),
 	},
 ])