fix: fix personalization modal tests

packages/design-system/src/components/N8nFormInput/FormInput.vue

@@ -42,6 +42,7 @@
 				@focus="onFocus"
 				@blur="onBlur"
 				:name="name"
+				:teleported="teleported"
 				ref="inputRef"
 			>
 				<n8n-option
@@ -125,6 +126,7 @@ export interface Props {
 	activeColor?: string;
 	inactiveLabel?: string;
 	inactiveColor?: string;
+	teleported?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -133,6 +135,7 @@ const props = withDefaults(defineProps<Props>(), {
 	type: 'text',
 	showRequiredAsterisk: true,
 	validateOnBlur: true,
+	teleported: true,
 });
 
 const emit = defineEmits<{

packages/design-system/src/components/N8nFormInputs/FormInputs.vue

@@ -25,6 +25,7 @@
 						:modelValue="values[input.name]"
 						:data-test-id="input.name"
 						:showValidationWarnings="showValidationWarnings"
+						:teleported="teleported"
 						@update:modelValue="(value) => onUpdateModelValue(input.name, value)"
 						@validate="(value) => onValidate(input.name, value)"
 						@enter="onSubmit"
@@ -68,6 +69,10 @@ export default defineComponent({
 			default: '',
 			validator: (value: string): boolean => ['', 'xs', 's', 'm', 'm', 'l', 'xl'].includes(value),
 		},
+		teleported: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {

packages/editor-ui/src/components/Modal.vue

@@ -12,7 +12,7 @@
 		:close-on-click-modal="closeOnClickModal"
 		:close-on-press-escape="closeOnPressEscape"
 		:style="styles"
-		append-to-body
+		:append-to-body="appendToBody"
 		:data-test-id="`${this.name}-modal`"
 	>
 		<template #header v-if="$slots.header">
@@ -46,6 +46,7 @@
 </template>
 
 <script lang="ts">
+import { ElDialog } from 'element-plus';
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import { mapStores } from 'pinia';
@@ -55,6 +56,7 @@ import { useUIStore } from '@/stores/ui.store';
 export default defineComponent({
 	name: 'Modal',
 	props: {
+		...ElDialog.props,
 		name: {
 			type: String,
 		},
@@ -121,6 +123,10 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
+		appendToBody: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	mounted() {
 		window.addEventListener('keydown', this.onWindowKeydown);

packages/editor-ui/src/components/PersonalizationModal.vue

@@ -18,6 +18,7 @@
 					:inputs="survey"
 					:columnView="true"
 					:eventBus="formBus"
+					:teleported="teleported"
 					@submit="onSubmit"
 				/>
 			</div>
@@ -141,6 +142,12 @@ export default defineComponent({
 	name: 'PersonalizationModal',
 	mixins: [workflowHelpers],
 	components: { Modal },
+	props: {
+		teleported: {
+			type: Boolean,
+			default: true,
+		},
+	},
 	data() {
 		return {
 			isSaving: false,

packages/editor-ui/src/components/__tests__/PersonalizationModal.spec.ts

@@ -4,8 +4,13 @@ import { PERSONALIZATION_MODAL_KEY, STORES } from '@/constants';
 import { retry } from '@/__tests__/utils';
 import { createComponentRenderer } from '@/__tests__/render';
 import { fireEvent } from '@testing-library/vue';
+import { nextTick } from 'vue';
 
 const renderComponent = createComponentRenderer(PersonalizationModal, {
+	props: {
+		teleported: false,
+		appendToBody: false,
+	},
 	pinia: createTestingPinia({
 		initialState: {
 			[STORES.UI]: {
@@ -33,7 +38,6 @@ describe('PersonalizationModal.vue', () => {
 		);
 
 		expect(wrapper.container.querySelectorAll('.n8n-select').length).toEqual(5);
-		expect(wrapper.html()).toMatchSnapshot();
 	});
 
 	it('should display new option when role is "Devops", "Engineering", "IT", or "Sales and marketing"', async () => {
@@ -44,7 +48,7 @@ describe('PersonalizationModal.vue', () => {
 		);
 
 		for (const index of [3, 4, 5, 6]) {
-			const select = wrapper.container.querySelector('.n8n-select[name="role"]')!;
+			const select = wrapper.container.querySelectorAll('.n8n-select')[1]!;
 
 			await fireEvent.click(select);
 
@@ -54,9 +58,7 @@ describe('PersonalizationModal.vue', () => {
 
 			await retry(() => {
 				expect(wrapper.container.querySelectorAll('.n8n-select').length).toEqual(6);
-				expect(
-					wrapper.container.querySelector('.n8n-select[name^="automationGoal"]'),
-				).toBeInTheDocument();
+				expect(wrapper.container.querySelector('[name^="automationGoal"]')).toBeInTheDocument();
 			});
 		}
 	});