test(dialog): add Playwright component tests for the dialog

Set up Playwright component testing (@playwright/experimental-ct-vue) and cover
the recipient/permission UI in a real browser:

- PermissionEditor: notice visibility, per-permission toggles, over-cap toggles
  disabled, toggles hidden outside custom mode.
- RecipientRow (via an in-browser fixture, since a Share with methods cannot be
  passed as a serialized prop): preset subtitle, remove from the menu, and the
  custom-permissions modal opening.
- RecipientList: one row per recipient, excluding the link (token).

Specs are named *.ct.ts so Vitest (which globs *.spec/*.test) ignores them.

Assisted-by: ClaudeCode:claude-opus-4-8
Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

Author: skjnldsv

.gitignore

@@ -63,3 +63,8 @@ typings/
 .next
 
 /dist
+
+# Playwright
+test-results/
+playwright-report/
+playwright/.cache/

lib/dialog/components/PermissionEditor.ct.ts

@@ -0,0 +1,38 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { expect, test } from '@playwright/experimental-ct-vue'
+import PermissionEditor from './PermissionEditor.vue'
+
+const baseProps = {
+	presetOptions: [{ value: 'View', label: 'Can view' }, { value: 'custom', label: 'Can…' }],
+	selectedPreset: { value: 'custom', label: 'Can…' },
+	showPermissions: true,
+	permissions: [
+		{ class: 'read', source_class: null, display_name: 'Read', hint: null, priority: 0, presets: [], enabled: true, available: true },
+		{ class: 'write', source_class: null, display_name: 'Write', hint: null, priority: 0, presets: [], enabled: false, available: false },
+	],
+}
+
+test('shows the cap notice only when provided', async ({ mount }) => {
+	const withNotice = await mount(PermissionEditor, { props: { ...baseProps, notice: 'Limited to Can view' } })
+	await expect(withNotice).toContainText('Limited to Can view')
+
+	const withoutNotice = await mount(PermissionEditor, { props: { ...baseProps, notice: null } })
+	await expect(withoutNotice).not.toContainText('Limited to Can view')
+})
+
+test('renders a toggle per permission and disables those over the cap', async ({ mount }) => {
+	const component = await mount(PermissionEditor, { props: baseProps })
+	await expect(component.getByText('Read')).toBeVisible()
+	await expect(component.getByText('Write')).toBeVisible()
+	await expect(component.getByRole('switch', { name: 'Read' })).toBeEnabled()
+	await expect(component.getByRole('switch', { name: 'Write' })).toBeDisabled()
+})
+
+test('hides the toggles when not in custom mode', async ({ mount }) => {
+	const component = await mount(PermissionEditor, { props: { ...baseProps, showPermissions: false } })
+	await expect(component.getByText('Read')).toBeHidden()
+})

lib/dialog/components/RecipientList.ct.ts

@@ -0,0 +1,16 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { expect, test } from '@playwright/experimental-ct-vue'
+import Fixture from '../../../tests/ct/fixtures/RecipientListFixture.vue'
+
+test('renders a row per recipient, excluding the link (token)', async ({ mount }) => {
+	const component = await mount(Fixture)
+	await expect(component.getByText('Alice')).toBeVisible()
+	await expect(component.getByText('Devs')).toBeVisible()
+	// The token recipient is managed by the "Anyone" tab, not listed here.
+	await expect(component.getByText('Public link')).toHaveCount(0)
+	await expect(component.locator('.recipient-row')).toHaveCount(2)
+})

lib/dialog/components/RecipientRow.ct.ts

@@ -0,0 +1,32 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { expect, test } from '@playwright/experimental-ct-vue'
+import Fixture from '../../../tests/ct/fixtures/RecipientRowFixture.vue'
+
+test('shows the recipient name and a static preset subtitle', async ({ mount }) => {
+	const component = await mount(Fixture)
+	await expect(component.getByText('alice')).toBeVisible()
+	// No preset matches an empty share max → "Custom permissions".
+	await expect(component.locator('.recipient-row__subtitle')).toHaveText('Custom permissions')
+})
+
+test('removes the recipient from the menu', async ({ mount, page }) => {
+	let removed = false
+	const onRemoved = () => {
+		removed = true
+	}
+	const component = await mount(Fixture, { on: { removed: onRemoved } })
+	await component.getByRole('button', { name: 'Recipient actions' }).click()
+	await page.getByRole('menuitem', { name: 'Remove' }).click()
+	expect(removed).toBe(true)
+})
+
+test('opens the custom permissions modal from the menu', async ({ mount, page }) => {
+	const component = await mount(Fixture)
+	await component.getByRole('button', { name: 'Recipient actions' }).click()
+	await page.getByRole('menuitem', { name: 'Custom permissions' }).click()
+	await expect(page.getByRole('dialog')).toBeVisible()
+})