test(settings): adapt dialog specs to script-setup migration

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

Author: pringelmann

apps/settings/src/components/UserList.vue

@@ -47,7 +47,7 @@
 				externalActions,
 				onEditUser: openEditDialog,
 			}"
-			@scrollEnd="handleScrollEnd">
+			@scroll-end="handleScrollEnd">
 			<template #before>
 				<caption class="hidden-visually">
 					{{ t('settings', 'List of accounts. This list is not fully rendered for performance reasons. The accounts will be rendered as you navigate through the list.') }}

apps/settings/src/components/Users/EditUserDialog.spec.ts

@@ -6,9 +6,25 @@
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-const confirmPassword = vi.hoisted(() => vi.fn())
+// `<script setup>` children and `useStore()` are invisible to VTU stubs/mocks,
+// so swap them via `vi.mock` (see dialogTestHelpers).
+const { confirmPassword, dispatch } = vi.hoisted(() => ({ confirmPassword: vi.fn(), dispatch: vi.fn() }))
+
 vi.mock('@nextcloud/password-confirmation', () => ({ confirmPassword }))
 vi.mock('@nextcloud/dialogs', () => ({ showError: vi.fn(), showSuccess: vi.fn() }))
+vi.mock('../../store/index.js', () => ({
+	useStore: () => ({
+		dispatch,
+		getters: {
+			getGroups: [],
+			getServerData: { languages: [], canChangePassword: true },
+			getPasswordPolicyMinLength: 8,
+		},
+	}),
+}))
+vi.mock('@nextcloud/vue/components/NcDialog', async () => ({ default: (await import('./dialogTestHelpers.ts')).NcDialogStub }))
+vi.mock('@nextcloud/vue/components/NcButton', async () => ({ default: (await import('./dialogTestHelpers.ts')).NcButtonStub }))
+vi.mock('./UserFormFields.vue', async () => ({ default: (await import('./dialogTestHelpers.ts')).UserFormFieldsStub }))
 
 // Decouple the dialog test from form-data diffing internals: always report a
 // non-empty change set so save() proceeds past its early return. Other exports
@@ -31,30 +47,14 @@ vi.mock('./userFormUtils.ts', async (importActual) => ({
 
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import EditUserDialog from './EditUserDialog.vue'
-import { flushPromises, NcButtonStub, NcDialogStub, UserFormFieldsStub } from './dialogTestHelpers.ts'
+import { flushPromises, NcDialogStub } from './dialogTestHelpers.ts'
 
-function mountDialog({ dispatch = vi.fn() } = {}) {
+function mountDialog() {
 	return mount(EditUserDialog, {
 		propsData: {
 			user: { id: 'bob', backendCapabilities: { setPassword: true } },
 			quotaOptions: [],
 		},
-		mocks: {
-			t: (_app: string, text: string) => text,
-			$store: {
-				dispatch,
-				getters: {
-					getGroups: [],
-					getServerData: { languages: [], canChangePassword: true },
-					getPasswordPolicyMinLength: 8,
-				},
-			},
-		},
-		stubs: {
-			NcDialog: NcDialogStub,
-			NcButton: NcButtonStub,
-			UserFormFields: UserFormFieldsStub,
-		},
 	})
 }
 
@@ -65,8 +65,8 @@ describe('EditUserDialog loading feedback', () => {
 	})
 
 	it('does not dispatch a second save request while one is in flight', async () => {
-		const dispatch = vi.fn().mockReturnValue(new Promise(() => {}))
-		const wrapper = mountDialog({ dispatch })
+		dispatch.mockReturnValue(new Promise(() => {}))
+		const wrapper = mountDialog()
 
 		await wrapper.find('form').trigger('submit')
 		await flushPromises()

apps/settings/src/components/Users/NewUserDialog.spec.ts

@@ -5,9 +5,27 @@
 
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+// `<script setup>` children and `useStore()` are invisible to VTU stubs/mocks,
+// so swap them via `vi.mock` (see dialogTestHelpers).
+const { dispatch } = vi.hoisted(() => ({ dispatch: vi.fn() }))
+
+vi.mock('../../store/index.js', () => ({
+	useStore: () => ({
+		dispatch,
+		getters: {
+			getServerData: { newUserGenerateUserID: false, newUserRequireEmail: false },
+			getPasswordPolicyMinLength: 8,
+		},
+	}),
+}))
+vi.mock('@nextcloud/vue/components/NcDialog', async () => ({ default: (await import('./dialogTestHelpers.ts')).NcDialogStub }))
+vi.mock('@nextcloud/vue/components/NcButton', async () => ({ default: (await import('./dialogTestHelpers.ts')).NcButtonStub }))
+vi.mock('./UserFormFields.vue', async () => ({ default: (await import('./dialogTestHelpers.ts')).UserFormFieldsStub }))
+
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NewUserDialog from './NewUserDialog.vue'
-import { flushPromises, NcButtonStub, NcDialogStub, UserFormFieldsStub } from './dialogTestHelpers.ts'
+import { flushPromises, NcDialogStub } from './dialogTestHelpers.ts'
 
 function makeNewUser(overrides = {}) {
 	return {
@@ -24,28 +42,13 @@ function makeNewUser(overrides = {}) {
 	}
 }
 
-function mountDialog({ dispatch = vi.fn(), loading = { all: false } } = {}) {
+function mountDialog({ loading = { all: false } } = {}) {
 	return mount(NewUserDialog, {
 		propsData: {
 			loading,
 			newUser: makeNewUser(),
 			quotaOptions: [],
 		},
-		mocks: {
-			t: (_app: string, text: string) => text,
-			$store: {
-				dispatch,
-				getters: {
-					getServerData: { newUserGenerateUserID: false, newUserRequireEmail: false },
-					getPasswordPolicyMinLength: 8,
-				},
-			},
-		},
-		stubs: {
-			NcDialog: NcDialogStub,
-			NcButton: NcButtonStub,
-			UserFormFields: UserFormFieldsStub,
-		},
 	})
 }
 
@@ -55,8 +58,8 @@ describe('NewUserDialog loading feedback', () => {
 	})
 
 	it('does not dispatch a second create request while one is in flight', async () => {
-		const dispatch = vi.fn().mockReturnValue(new Promise(() => {}))
-		const wrapper = mountDialog({ dispatch })
+		dispatch.mockReturnValue(new Promise(() => {}))
+		const wrapper = mountDialog()
 
 		await wrapper.find('form').trigger('submit')
 		await wrapper.find('form').trigger('submit')
@@ -66,8 +69,8 @@ describe('NewUserDialog loading feedback', () => {
 	})
 
 	it('marks the form as busy and inert while creating', async () => {
-		const dispatch = vi.fn().mockReturnValue(new Promise(() => {}))
-		const wrapper = mountDialog({ dispatch })
+		dispatch.mockReturnValue(new Promise(() => {}))
+		const wrapper = mountDialog()
 
 		await wrapper.find('form').trigger('submit')
 
@@ -77,8 +80,8 @@ describe('NewUserDialog loading feedback', () => {
 	})
 
 	it('shows a spinner and busy label on the submit button while creating', async () => {
-		const dispatch = vi.fn().mockReturnValue(new Promise(() => {}))
-		const wrapper = mountDialog({ dispatch })
+		dispatch.mockReturnValue(new Promise(() => {}))
+		const wrapper = mountDialog()
 
 		await wrapper.find('form').trigger('submit')
 
@@ -87,8 +90,8 @@ describe('NewUserDialog loading feedback', () => {
 	})
 
 	it('sets aria-disabled (not disabled) on the submit button while creating', async () => {
-		const dispatch = vi.fn().mockReturnValue(new Promise(() => {}))
-		const wrapper = mountDialog({ dispatch })
+		dispatch.mockReturnValue(new Promise(() => {}))
+		const wrapper = mountDialog()
 		const submit = wrapper.find('[data-test="submit"]')
 
 		expect(submit.attributes('aria-disabled')).toBe('false')
@@ -101,8 +104,8 @@ describe('NewUserDialog loading feedback', () => {
 	})
 
 	it('prevents closing the dialog while creating', async () => {
-		const dispatch = vi.fn().mockReturnValue(new Promise(() => {}))
-		const wrapper = mountDialog({ dispatch })
+		dispatch.mockReturnValue(new Promise(() => {}))
+		const wrapper = mountDialog()
 		const dialog = wrapper.findComponent(NcDialogStub)
 
 		expect(dialog.props('noClose')).toBe(false)
@@ -114,9 +117,9 @@ describe('NewUserDialog loading feedback', () => {
 
 	it('re-enables the form when the request fails', async () => {
 		const error = { response: { data: { ocs: { meta: { statuscode: 0 } } } } }
-		const dispatch = vi.fn().mockRejectedValue(error)
+		dispatch.mockRejectedValue(error)
 		const loading = { all: false }
-		const wrapper = mountDialog({ dispatch, loading })
+		const wrapper = mountDialog({ loading })
 
 		await wrapper.find('form').trigger('submit')
 		await flushPromises()

apps/settings/src/components/Users/dialogTestHelpers.ts

@@ -6,9 +6,23 @@
 // Shared scaffolding for the NewUserDialog / EditUserDialog specs. The mount
 // factories stay per-spec (they differ in props, store getters, and mocks);
 // only the version-agnostic stubs and helpers live here.
+//
+// The dialogs use `<script setup>`, so child components resolve from local
+// imports and the store from `useStore()`. VTU's `stubs` and `mocks.$store`
+// reach neither, so each spec swaps them with `vi.mock`. Stubs are render
+// functions, not `template`: the runtime-only test build has no compiler.
 
-// The dialogs call the bare global `t`/`n` (injected at runtime by
-// core/src/globals.js) inside <script>. Provide identity stand-ins on import.
+// Minimal local typings so the stubs don't depend on a particular Vue version's
+// type exports (the IDE resolves bare `vue` to the Vue 3 types).
+type StubChild = unknown
+type CreateElement = (tag: string, data?: Record<string, unknown> | StubChild[], children?: StubChild[]) => StubChild
+interface StubVm {
+	$attrs: Record<string, string>
+	$scopedSlots: Record<string, ((props: object) => StubChild) | undefined>
+}
+
+// The dialogs translate via the imported `translate`, but the store and some
+// helpers still call the bare globals. Provide identity stand-ins on import.
 globalThis.t = (_app: string, text: string) => text
 globalThis.n = (_app: string, singular: string, plural: string, count: number) => (count === 1 ? singular : plural)
 
@@ -24,19 +38,29 @@ export const flushPromises = () => new Promise((resolve) => setTimeout(resolve))
 export const NcDialogStub = {
 	name: 'NcDialog',
 	props: ['name', 'size', 'noClose', 'closeOnClickOutside', 'outTransition'],
-	template: '<div><slot /><div data-test="actions"><slot name="actions" /></div></div>',
+	render(this: StubVm, h: CreateElement) {
+		return h('div', [
+			this.$scopedSlots.default?.({}),
+			h('div', { attrs: { 'data-test': 'actions' } }, [this.$scopedSlots.actions?.({})]),
+		])
+	},
 }
 
 /** Stub that forwards attrs (e.g. aria-disabled) and renders icon + default slots. */
 export const NcButtonStub = {
 	name: 'NcButton',
 	inheritAttrs: false,
-	template: '<button v-bind="$attrs"><slot name="icon" /><slot /></button>',
+	render(this: StubVm, h: CreateElement) {
+		return h('button', { attrs: this.$attrs }, [
+			this.$scopedSlots.icon?.({}),
+			this.$scopedSlots.default?.({}),
+		])
+	},
 }
 
 /** Stub exposing focusField, which the dialogs call on mount and on errors. */
 export const UserFormFieldsStub = {
 	name: 'UserFormFields',
 	methods: { focusField() {} },
-	template: '<div />',
+	render: (h: CreateElement) => h('div'),
 }