From 7d38ed939d5ba6d8a77b82de834c7a698f8fa7e3 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 21 Jul 2023 12:26:33 +0300
Subject: [PATCH] fix: fix personalization modal tests

---
 .../src/components/N8nFormInput/FormInput.vue        |  3 +++
 .../src/components/N8nFormInputs/FormInputs.vue      |  5 +++++
 packages/editor-ui/src/components/Modal.vue          |  8 +++++++-
 .../src/components/PersonalizationModal.vue          |  7 +++++++
 .../__tests__/PersonalizationModal.spec.ts           | 12 +++++++-----
 5 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/packages/design-system/src/components/N8nFormInput/FormInput.vue b/packages/design-system/src/components/N8nFormInput/FormInput.vue
index 71f701e5b4..9e0b40972c 100644
--- a/packages/design-system/src/components/N8nFormInput/FormInput.vue
+++ b/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<{
diff --git a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue
index 75791269f7..ccd79ab2d5 100644
--- a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue
+++ b/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 {
diff --git a/packages/editor-ui/src/components/Modal.vue b/packages/editor-ui/src/components/Modal.vue
index 635f92f8d6..8f90b4e072 100644
--- a/packages/editor-ui/src/components/Modal.vue
+++ b/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);
diff --git a/packages/editor-ui/src/components/PersonalizationModal.vue b/packages/editor-ui/src/components/PersonalizationModal.vue
index cbd3167ba0..e05b74cca4 100644
--- a/packages/editor-ui/src/components/PersonalizationModal.vue
+++ b/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,
diff --git a/packages/editor-ui/src/components/__tests__/PersonalizationModal.spec.ts b/packages/editor-ui/src/components/__tests__/PersonalizationModal.spec.ts
index 1161202945..222d8f5b8e 100644
--- a/packages/editor-ui/src/components/__tests__/PersonalizationModal.spec.ts
+++ b/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();
 			});
 		}
 	});