diff --git a/packages/editor-ui/src/components/PersonalizationModal.test.ts b/packages/editor-ui/src/components/PersonalizationModal.test.ts
new file mode 100644
index 0000000000..160beefccd
--- /dev/null
+++ b/packages/editor-ui/src/components/PersonalizationModal.test.ts
@@ -0,0 +1,157 @@
+import userEvent from '@testing-library/user-event';
+import { createComponentRenderer } from '@/__tests__/render';
+import { getDropdownItems, mockedStore } from '@/__tests__/utils';
+import { createUser } from '@/__tests__/data/users';
+import { useSettingsStore } from '@/stores/settings.store';
+import PersonalizationModal from '@/components/PersonalizationModal.vue';
+import { useUsersStore } from '@/stores/users.store';
+import { createTestingPinia } from '@pinia/testing';
+import {
+ COMPANY_TYPE_KEY,
+ EMAIL_KEY,
+ COMPANY_INDUSTRY_EXTENDED_KEY,
+ OTHER_COMPANY_INDUSTRY_EXTENDED_KEY,
+ MARKETING_AUTOMATION_GOAL_KEY,
+ OTHER_MARKETING_AUTOMATION_GOAL_KEY,
+ ROLE_KEY,
+ ROLE_OTHER_KEY,
+ DEVOPS_AUTOMATION_GOAL_OTHER_KEY,
+ DEVOPS_AUTOMATION_GOAL_KEY,
+} from '@/constants';
+
+const renderModal = createComponentRenderer(PersonalizationModal, {
+ global: {
+ stubs: {
+ Modal: {
+ template: `
+
+
+
+
+
+
+ `,
+ },
+ },
+ },
+});
+
+describe('PersonalizationModal', () => {
+ it('mounts', () => {
+ const { getByTitle } = renderModal({ pinia: createTestingPinia() });
+ expect(getByTitle('Customize n8n to you')).toBeInTheDocument();
+ });
+
+ it('shows user input when needed for desktop deployment', () => {
+ const pinia = createTestingPinia();
+ const usersStore = mockedStore(useUsersStore);
+ usersStore.currentUser = createUser({ firstName: undefined });
+
+ const settingsStore = mockedStore(useSettingsStore);
+ settingsStore.isDesktopDeployment = true;
+
+ const { getByTestId } = renderModal({ pinia });
+ expect(getByTestId(EMAIL_KEY)).toBeInTheDocument();
+ });
+
+ describe('Company field', () => {
+ it('allows completion of company related fields', async () => {
+ const { getByTestId } = renderModal({ pinia: createTestingPinia() });
+
+ const companyTypeSelect = getByTestId(COMPANY_TYPE_KEY);
+
+ const otherTypeOfCompanyOption = [...(await getDropdownItems(companyTypeSelect))].find(
+ (node) => node.textContent === 'Other',
+ ) as Element;
+
+ await userEvent.click(otherTypeOfCompanyOption);
+
+ const industrySelect = getByTestId(COMPANY_INDUSTRY_EXTENDED_KEY);
+ expect(industrySelect).toBeInTheDocument();
+
+ const otherIndustryOption = [...(await getDropdownItems(industrySelect))].find(
+ (node) => node.textContent === 'Other (please specify)',
+ ) as Element;
+
+ await userEvent.click(otherIndustryOption);
+
+ expect(getByTestId(OTHER_COMPANY_INDUSTRY_EXTENDED_KEY)).toBeInTheDocument();
+ });
+
+ it('shows only company and source select when not used for work', async () => {
+ const { getByTestId, baseElement } = renderModal({ pinia: createTestingPinia() });
+
+ const companyTypeSelect = getByTestId(COMPANY_TYPE_KEY);
+
+ const nonWorkOption = [...(await getDropdownItems(companyTypeSelect))].find(
+ (node) => node.textContent === "I'm not using n8n for work",
+ ) as Element;
+
+ await userEvent.click(nonWorkOption);
+
+ expect(baseElement.querySelectorAll('input').length).toBe(2);
+ });
+ });
+
+ it('allows completion of role related fields', async () => {
+ const { getByTestId, queryByTestId } = renderModal({ pinia: createTestingPinia() });
+
+ const roleSelect = getByTestId(ROLE_KEY);
+ const roleItems = [...(await getDropdownItems(roleSelect))];
+
+ const devOps = roleItems.find((node) => node.textContent === 'Devops') as Element;
+ const engineering = roleItems.find((node) => node.textContent === 'Engineering') as Element;
+ const it = roleItems.find((node) => node.textContent === 'IT') as Element;
+ const other = roleItems.find(
+ (node) => node.textContent === 'Other (please specify)',
+ ) as Element;
+
+ await userEvent.click(devOps);
+ const automationGoalSelect = getByTestId(DEVOPS_AUTOMATION_GOAL_KEY);
+ expect(automationGoalSelect).toBeInTheDocument();
+
+ await userEvent.click(engineering);
+ expect(automationGoalSelect).toBeInTheDocument();
+
+ await userEvent.click(it);
+ expect(automationGoalSelect).toBeInTheDocument();
+
+ const otherGoalsItem = [...(await getDropdownItems(automationGoalSelect))].find(
+ (node) => node.textContent === 'Other',
+ ) as Element;
+
+ await userEvent.click(otherGoalsItem);
+ expect(getByTestId(DEVOPS_AUTOMATION_GOAL_OTHER_KEY)).toBeInTheDocument();
+
+ await userEvent.click(other);
+ expect(queryByTestId(DEVOPS_AUTOMATION_GOAL_KEY)).not.toBeInTheDocument();
+ expect(getByTestId(ROLE_OTHER_KEY)).toBeInTheDocument();
+ });
+
+ it('allows completion of marketing and sales related fields', async () => {
+ const { getByTestId } = renderModal({ pinia: createTestingPinia() });
+
+ const companyTypeSelect = getByTestId(COMPANY_TYPE_KEY);
+
+ const anyWorkOption = [...(await getDropdownItems(companyTypeSelect))].find(
+ (node) => node.textContent !== "I'm not using n8n for work",
+ ) as Element;
+
+ await userEvent.click(anyWorkOption);
+
+ const roleSelect = getByTestId(ROLE_KEY);
+ const salesAndMarketingOption = [...(await getDropdownItems(roleSelect))].find(
+ (node) => node.textContent === 'Sales and Marketing',
+ ) as Element;
+
+ await userEvent.click(salesAndMarketingOption);
+
+ const salesAndMarketingSelect = getByTestId(MARKETING_AUTOMATION_GOAL_KEY);
+ const otherItem = [...(await getDropdownItems(salesAndMarketingSelect))].find(
+ (node) => node.textContent === 'Other',
+ ) as Element;
+
+ await userEvent.click(otherItem);
+ expect(getByTestId(OTHER_MARKETING_AUTOMATION_GOAL_KEY)).toBeInTheDocument();
+ });
+});
diff --git a/packages/editor-ui/src/components/PersonalizationModal.vue b/packages/editor-ui/src/components/PersonalizationModal.vue
index 13e360c3c1..1eab5e4b20 100644
--- a/packages/editor-ui/src/components/PersonalizationModal.vue
+++ b/packages/editor-ui/src/components/PersonalizationModal.vue
@@ -1,6 +1,5 @@
-
@@ -720,24 +615,10 @@ export default defineComponent({
:inputs="survey"
:column-view="true"
:event-bus="formBus"
- :teleported="teleported"
+ :teleported="true"
tag-size="small"
@submit="onSubmit"
/>
-
-
-
-
-
- {{ $locale.baseText('personalizationModal.registerEmailForTrial.enterprise') }}
-
-
-
-
- {{ $locale.baseText('personalizationModal.registerEmailForTrial.notice') }}
-
-
-
diff --git a/packages/editor-ui/src/components/__tests__/PersonalizationModal.spec.ts b/packages/editor-ui/src/components/__tests__/PersonalizationModal.spec.ts
deleted file mode 100644
index b688af7cfc..0000000000
--- a/packages/editor-ui/src/components/__tests__/PersonalizationModal.spec.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import PersonalizationModal from '@/components/PersonalizationModal.vue';
-import { createTestingPinia } from '@pinia/testing';
-import userEvent from '@testing-library/user-event';
-import { PERSONALIZATION_MODAL_KEY, ROLE, STORES, VIEWS } from '@/constants';
-import { cleanupAppModals, createAppModals, retry } from '@/__tests__/utils';
-import { createComponentRenderer } from '@/__tests__/render';
-import { fireEvent } from '@testing-library/vue';
-import { useUsersStore } from '@/stores/users.store';
-import { useUsageStore } from '@/stores/usage.store';
-
-const pinia = createTestingPinia({
- initialState: {
- [STORES.UI]: {
- modalsById: {
- [PERSONALIZATION_MODAL_KEY]: { open: true },
- },
- },
- [STORES.SETTINGS]: {
- settings: {
- templates: {
- host: '',
- },
- },
- },
- [STORES.USERS]: {
- usersById: {
- 123: {
- email: 'john@doe.com',
- firstName: 'John',
- lastName: 'Doe',
- isDefaultUser: false,
- isPendingUser: false,
- role: ROLE.Owner,
- mfaEnabled: false,
- },
- },
- currentUserId: '123',
- },
- },
-});
-
-const renderComponent = createComponentRenderer(PersonalizationModal, {
- props: {
- teleported: false,
- appendToBody: false,
- },
- pinia,
- global: {
- mocks: {
- $route: {
- name: VIEWS.HOMEPAGE,
- },
- },
- },
-});
-
-describe('PersonalizationModal.vue', () => {
- beforeEach(() => {
- createAppModals();
- });
-
- afterEach(() => {
- cleanupAppModals();
- });
-
- it('should render correctly', async () => {
- const { getByTestId } = renderComponent();
-
- await retry(() => expect(getByTestId('personalization-form')).toBeInTheDocument());
-
- const modalContent = getByTestId('personalization-form');
- expect(modalContent.querySelectorAll('.n8n-select').length).toEqual(5);
- });
-
- it('should display new option when role is "Devops", "Engineering", "IT", or "Sales and marketing"', async () => {
- const { getByTestId } = renderComponent();
-
- await retry(() => expect(getByTestId('personalization-form')).toBeInTheDocument());
-
- for (const index of [3, 4, 5, 6]) {
- const modalContent = getByTestId('personalization-form');
- const expectFn = expect; // So we don't break @typescript-eslint/no-loop-func
- const select = modalContent.querySelectorAll('.n8n-select')[1];
-
- await fireEvent.click(select);
-
- const item = select.querySelectorAll('.el-select-dropdown__item')[index];
-
- await fireEvent.click(item);
-
- await retry(() => {
- expectFn(modalContent.querySelectorAll('.n8n-select').length).toEqual(6);
- expectFn(modalContent.querySelector('[name^="automationGoal"]')).toBeInTheDocument();
- });
- }
- });
-
- it('should display self serve trial option when company size is larger than 500', async () => {
- const { getByTestId } = renderComponent();
-
- await retry(() => expect(getByTestId('personalization-form')).toBeInTheDocument());
-
- const modalContent = getByTestId('personalization-form');
-
- const select = modalContent.querySelectorAll('.n8n-select')[3];
- await fireEvent.click(select);
-
- const item = select.querySelectorAll('.el-select-dropdown__item')[3];
- await fireEvent.click(item);
-
- await retry(() => {
- expect(modalContent.querySelector('.card')).not.toBeNull();
- });
- });
-
- it('should display send telemetry when requesting enterprise trial', async () => {
- const usersStore = useUsersStore(pinia);
- vi.spyOn(usersStore, 'submitPersonalizationSurvey').mockResolvedValue();
-
- const usageStore = useUsageStore(pinia);
- const spyLicenseTrial = vi.spyOn(usageStore, 'requestEnterpriseLicenseTrial');
-
- const { getByTestId, getByRole } = renderComponent();
-
- await retry(() => expect(getByTestId('personalization-form')).toBeInTheDocument());
-
- const modalContent = getByTestId('personalization-form');
-
- const select = modalContent.querySelectorAll('.n8n-select')[3];
- await fireEvent.click(select);
-
- const item = select.querySelectorAll('.el-select-dropdown__item')[3];
- await fireEvent.click(item);
-
- const agreeCheckbox = modalContent.querySelector('.n8n-checkbox');
- assert(agreeCheckbox);
- await fireEvent.click(agreeCheckbox);
-
- const submitButton = getByRole('button');
- await userEvent.click(submitButton);
-
- await retry(() => expect(spyLicenseTrial).toHaveBeenCalled());
- });
-});