feat(editor): Migrate Design System and Editor UI to Vue 3 (#6476)

* feat: remove vue-fragment (no-changelog) * feat: partial design-system migration * feat: migrate info-accordion and info-tip components * feat: migrate several components to vue 3 * feat: migrated several components * feat: migrate several components * feat: migrate several components * feat: migrate several components * feat: re-exported all design system components * fix: fix design for popper components * fix: editor kind of working, lots of issues to fix * fix: fix several vue 3 migration issues * fix: replace @change with @update:modelValue in several places * fix: fix translation linking * fix: fix inline-edit input * fix: fix ndv and dialog design * fix: update parameter input event bindings * fix: rename deprecated lifecycle methods * fix: fix json view mapping * build: update lock file * fix(editor): revisit last conflict with master and fix issues * fix(editor): revisit last conflict with master and fix issues * fix: fix expression editor bug causing code mirror to no longer be reactive * fix: fix resource locator bug * fix: fix vue-agile integration * fix: remove global import for vue-agile * fix: replace element-plus buttons with n8n-buttons everywhere * fix(editor): Fix various element-plus styles (#6571) * fix(editor): Fix various element-plus styles Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Remove debugging code Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Address PR comments Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix(editor): Fix loading in production mode [Vue 3] (#6578) Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix(editor): First round of e2e tests fixes with Vue 3 (#6579) * fix(editor): Fix broken smoke and workflow list e2e tests * ✔️ Fix failing canvas action tests. Updating some selectors used in credentials and workflow tests * feat: add vue 3 eslint rules and fix issues * fix: fix tags-dropdown * fix: fix white-space issues caused by i18n-t * fix: rename non-generic click events * fix: fix search in resources list layout * fix: fix datatable paginator * fix: fix popper select caret and dropdown size * fix: add width to action-dropdown * fix: fix workflow settings icon not being hidden * fix: refactor newly added code * fix: fix merge issue * fix: fix ndv credentials watcher * fix: fix workflow saving and grabber notch * fix: fix nodes list panel transition * fix: fix node title visibility * fix: fix data unpinning * fix: fix value access * fix: show input panel only if trigger panel enabled or not trigger node * fix: fix tags dropdown and executions status spcing * fix(editor): Prevent execution list to load back when leaving the route (#6697) fix(editor): prevent execution list to load back when leaving the route * fix: fix drawer visibility * fix: fix expression toggle padding * fix: fix expressions editor styling * chore: prepare for testing * fix: fix styling for el-button without patching * test: fix unit tests in design-system * test: fix most unit tests * fix: remove import cycle. * fix: fix personalization modal tests * fix further resource mapper test adjustments * fix: fix multiple tests and n8n-route attr duplication * fix: fix source control tets * fix: fixed remaining unit tests * fix: fix workflows and credentials e2e tests * fix: fix localizeNodeNames * fix: update ndv e2e tests * fix: fix popper left placement arrow * fix: fix 5-ndv e2e tests * fix: fix 6-code-node e2e tests * fix(editor): Drop click outside directive from NodeCreator (#6716) * fix(editor): Drop click outside directive from NodeCreator * fix(editor): make sure mouseup outside is unbound at least before the component is unmounted * fix: fix 10-settings-log-streaming e2e tests * fix: fix node redrawing * fix: fix tooltip buttons styling * fix: fix varous e2e suites * fix: fix 15-scheduler-node e2e suite * fix: fix route watcher * fix: fixed param name update and credential edit * feat: update event names * refactor: Remove deprecated `$data` (#6576) Co-authored-by: Alex Grozav <alex@grozav.com> * fix: fix 17-sharing e2e suite * fix: fix tags dropdown * fix: fix tags manager * fix(editor): move :deep selectors to a separate scoped style block * fix: fix sticky component and inline text edit * fix: update e2e tests * fix: remove button override references * fix(editor): Adjust spacing in templates for Vue 3 (#6744) * fix(editor): Adjust spacing in templates * fix: Undo unneeded change * fix: Undo unneeded change * fix(editor): Adjust NDV height for Vue 3 (#6742) fix(editor): Adjust NDV height * fix(editor): Restore collapsed sidebar items for Vue 3 (#6743) fix(editor): Restore collapsed sidebar items * fix: fix linting issues * fix: fix design-system deps * fix: post-merge fixes * fix: update tests * fix: increase timeout for executionslist tets * chore: fix linting issue * fix: fix 14-mapping e2e tests in ci * fix: re-enable tests * fix: fix workflow duplication e2e tests after tags update * fix(editor): Change component prop to be typed * fix: fix tags dropdown in duplicate wf modal * fix: fix focus behaviour in tags selector * fix: fix tag creation * fix: fix log streaming e2e race condition * fix(editor): Fix Vue 3 linting issues (#6748) * fix(editor): Fix Vue 3 linting issues Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix MainSidebar linter issues * revert pnpm lock * update pnpm lock file --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> Co-authored-by: Alex Grozav <alex@grozav.com> * fix(editor): Some css fixes for vue3 branch (#6749) * ✨ Fixing filter button height * ✨ Update input modal button position * ✨ Updating tags styling * ✨ Fix event logging settings spacing * 👕 Fixing lint errors * fix: fix linting issues * Revert to `// eslint-disable-next-line @typescript-eslint/no-misused-promises` disabling of mixins init Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix: fix css issue * fix(editor): Lint fix * fix(editor): Fix settings initialisation (#6750) Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix: fix initial settings loading * fix: replace realClick with click force * fix: fix randomly failing mapping e2e tests * fix(editor): Fix menu item event handling * fix: fix resource filters dropdown events (#6752) * fix: fix resource filters dropdown events * fix: remove teleported:false * fix: fix event selection event naming (#6753) * fix: removed console.log (#6754) * fix: rever await nextTick changes * fix: redo linting changes * fix(editor): Redraw node connections if adding more than one node to canvas (#6755) * fix(editor): Redraw node connections if adding more than one node to canvas Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Update position before connection two nodes * Lint fix --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> Co-authored-by: Alex Grozav <alex@grozav.com> * fix(editor): Fix `ResourceMapper` unit tests (#6758) * ✔️ Fix matching columns test * ✔️ Fix multiple matching columns test * ✔️ Removing `skip` from the last test * fix: Allow pasting a big workflow (#6760) * fix: pasting a big workflow * chore: update comment * refactor: move try/catch to function * refactor: move try/catch to function * fix(editor): Fix modal layer width * fix: fix position changes * fix: undo it.only * fix: make undo/redo multiple steps more verbose * fix: Fix value survey styles (#6764) * fix: fix value survey styles * fix: lint * Revert "fix: lint" 72869c431f1448861df021be041b61c62f1e3118 * fix: lint * fix(editor): Fix collapsed sub menu * fix: Fix drawer animation (#6767) fix: drawer animation * fix(editor): Fix source control buttons (#6769) * fix(editor): Fix App loading & auth (#6768) * fix(editor): Fix App loading & auth Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Await promises Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Fix eslint error Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> Co-authored-by: Csaba Tuncsik <csaba@n8n.io> Co-authored-by: OlegIvaniv <me@olegivaniv.com> Co-authored-by: Milorad FIlipović <milorad@n8n.io> Co-authored-by: Iván Ovejero <ivov.src@gmail.com> Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
2023-07-28 10:51:07 +03:00
parent d050b99fb2
commit dd6a4c956a
459 changed files with 8815 additions and 9913 deletions
--- a/packages/editor-ui/src/views/tests/AuthView.test.ts
+++ b/packages/editor-ui/src/views/tests/AuthView.test.ts
@@ -1,27 +1,17 @@
-import { PiniaVuePlugin } from 'pinia';
-import { render } from '@testing-library/vue';
 import { createTestingPinia } from '@pinia/testing';
-import { merge } from 'lodash-es';
 import AuthView from '@/views/AuthView.vue';
+import { createComponentRenderer } from '@/__tests__/render';

-const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
-	render(
-		AuthView,
-		merge(
-			{
-				pinia: createTestingPinia(),
-				stubs: {
-					SSOLogin: {
-						template: '<div data-test-id="sso-login"></div>',
-					},
-				},
+const renderComponent = createComponentRenderer(AuthView, {
+	pinia: createTestingPinia(),
+	global: {
+		stubs: {
+			SSOLogin: {
+				template: '<div data-test-id="sso-login"></div>',
 			},
-			renderOptions,
-		),
-		(vue) => {
-			vue.use(PiniaVuePlugin);
 		},
-	);
+	},
+});

 describe('AuthView', () => {
 	it('should render with subtitle', () => {
--- a/packages/editor-ui/src/views/tests/SamlOnboarding.test.ts
+++ b/packages/editor-ui/src/views/tests/SamlOnboarding.test.ts
@@ -1,16 +1,14 @@
-import { PiniaVuePlugin } from 'pinia';
-import { render } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
-import { useRouter } from 'vue-router/composables';
+import { useRouter } from 'vue-router';
 import { createTestingPinia } from '@pinia/testing';
 import { merge } from 'lodash-es';
 import SamlOnboarding from '@/views/SamlOnboarding.vue';
 import { useSSOStore } from '@/stores/sso.store';
 import { STORES } from '@/constants';
 import { SETTINGS_STORE_DEFAULT_STATE, waitAllPromises } from '@/__tests__/utils';
-import { i18nInstance } from '@/plugins/i18n';
+import { createComponentRenderer } from '@/__tests__/render';

-vi.mock('vue-router/composables', () => {
+vi.mock('vue-router', () => {
 	const push = vi.fn();
 	return {
 		useRouter: () => ({
@@ -23,20 +21,7 @@ let pinia: ReturnType<typeof createTestingPinia>;
 let ssoStore: ReturnType<typeof useSSOStore>;
 let router: ReturnType<typeof useRouter>;

-const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
-	render(
-		SamlOnboarding,
-		merge(
-			{
-				pinia,
-				i18n: i18nInstance,
-			},
-			renderOptions,
-		),
-		(vue) => {
-			vue.use(PiniaVuePlugin);
-		},
-	);
+const renderComponent = createComponentRenderer(SamlOnboarding);

 describe('SamlOnboarding', () => {
 	beforeEach(() => {
@@ -61,7 +46,7 @@ describe('SamlOnboarding', () => {
 			isPending: false,
 		});

-		const { getByRole, getAllByRole } = renderComponent();
+		const { getByRole, getAllByRole } = renderComponent({ pinia });

 		const inputs = getAllByRole('textbox');
 		const submit = getByRole('button');
--- a/packages/editor-ui/src/views/tests/SettingsAuditLogs.test.ts
+++ b/packages/editor-ui/src/views/tests/SettingsAuditLogs.test.ts
@@ -1,55 +1,56 @@
 import { vi } from 'vitest';
-import { render } from '@testing-library/vue';
-import { createPinia, setActivePinia, PiniaVuePlugin } from 'pinia';
-import { merge } from 'lodash-es';
-import { i18nInstance } from '@/plugins/i18n';
+import { createPinia, setActivePinia } from 'pinia';
 import { useAuditLogsStore, useSettingsStore } from '@/stores';
 import SettingsAuditLogs from '@/views/SettingsAuditLogs.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+import { EnterpriseEditionFeature } from '@/constants';
+import { nextTick } from 'vue';
+import { setupServer } from '@/__tests__/server';

 let pinia: ReturnType<typeof createPinia>;
 let settingsStore: ReturnType<typeof useSettingsStore>;
 let auditLogsStore: ReturnType<typeof useAuditLogsStore>;
+let server: ReturnType<typeof setupServer>;

-const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
-	render(
-		SettingsAuditLogs,
-		merge(
-			{
-				pinia,
-				i18n: i18nInstance,
-			},
-			renderOptions,
-		),
-		(vue) => {
-			vue.use(PiniaVuePlugin);
-		},
-	);
+const renderComponent = createComponentRenderer(SettingsAuditLogs);

 describe('SettingsAuditLogs', () => {
-	beforeEach(() => {
+	beforeAll(() => {
+		server = setupServer();
+	});
+
+	beforeEach(async () => {
 		pinia = createPinia();
 		setActivePinia(pinia);
 		settingsStore = useSettingsStore();
 		auditLogsStore = useAuditLogsStore();
+
+		await settingsStore.getSettings();
 	});

 	afterEach(() => {
 		vi.clearAllMocks();
 	});

-	it('should render paywall state when there is no license', () => {
-		vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(false);
+	afterAll(() => {
+		server.shutdown();
+	});

-		const { getByTestId, queryByTestId } = renderComponent();
+	it('should render paywall state when there is no license', async () => {
+		settingsStore.settings.enterprise[EnterpriseEditionFeature.AuditLogs] = false;
+		await nextTick();
+
+		const { getByTestId, queryByTestId } = renderComponent({ pinia });

 		expect(queryByTestId('audit-logs-content-licensed')).not.toBeInTheDocument();
 		expect(getByTestId('audit-logs-content-unlicensed')).toBeInTheDocument();
 	});

-	it('should render licensed content', () => {
-		vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(true);
+	it('should render licensed content', async () => {
+		settingsStore.settings.enterprise[EnterpriseEditionFeature.AuditLogs] = true;
+		await nextTick();

-		const { getByTestId, queryByTestId } = renderComponent();
+		const { getByTestId, queryByTestId } = renderComponent({ pinia });

 		expect(getByTestId('audit-logs-content-licensed')).toBeInTheDocument();
 		expect(queryByTestId('audit-logs-content-unlicensed')).not.toBeInTheDocument();
--- a/packages/editor-ui/src/views/tests/SettingsPersonalView.test.ts
+++ b/packages/editor-ui/src/views/tests/SettingsPersonalView.test.ts
@@ -1,63 +1,56 @@
-import { PiniaVuePlugin } from 'pinia';
-import { render } from '@testing-library/vue';
-import { createTestingPinia } from '@pinia/testing';
-import { merge } from 'lodash-es';
+import { createPinia } from 'pinia';
 import type { IN8nUISettings } from 'n8n-workflow';
-import { STORES } from '@/constants';
 import { SETTINGS_STORE_DEFAULT_STATE, waitAllPromises } from '@/__tests__/utils';
-import { i18n } from '@/plugins/i18n';
 import SettingsPersonalView from '@/views/SettingsPersonalView.vue';
 import { useSettingsStore } from '@/stores';
 import { useUsersStore } from '@/stores/users.store';
+import { createComponentRenderer } from '@/__tests__/render';
+import { setupServer } from '@/__tests__/server';

-let pinia: ReturnType<typeof createTestingPinia>;
+let pinia: ReturnType<typeof createPinia>;
 let settingsStore: ReturnType<typeof useSettingsStore>;
 let usersStore: ReturnType<typeof useUsersStore>;
+let server: ReturnType<typeof setupServer>;

 const DEFAULT_SETTINGS: IN8nUISettings = SETTINGS_STORE_DEFAULT_STATE.settings;

-const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
-	render(
-		SettingsPersonalView,
-		merge(
-			{
-				pinia,
-				i18n,
-			},
-			renderOptions,
-		),
-		(vue) => {
-			vue.use(PiniaVuePlugin);
-		},
-	);
+const renderComponent = createComponentRenderer(SettingsPersonalView);
+
+const currentUser = {
+	id: '1',
+	firstName: 'John',
+	lastName: 'Doe',
+	email: 'joh.doe@example.com',
+	createdAt: Date().toString(),
+	isOwner: true,
+	isDefaultUser: false,
+	isPendingUser: false,
+	isPending: false,
+};

 describe('SettingsPersonalView', () => {
-	beforeEach(() => {
-		pinia = createTestingPinia({
-			initialState: {
-				[STORES.SETTINGS]: {
-					settings: DEFAULT_SETTINGS,
-				},
-			},
-		});
+	beforeAll(() => {
+		server = setupServer();
+	});
+
+	beforeEach(async () => {
+		pinia = createPinia();
+
 		settingsStore = useSettingsStore(pinia);
 		usersStore = useUsersStore(pinia);

-		vi.spyOn(usersStore, 'currentUser', 'get').mockReturnValue({
-			id: '1',
-			firstName: 'John',
-			lastName: 'Doe',
-			email: 'joh.doe@example.com',
-			createdAt: Date().toString(),
-			isOwner: true,
-			isDefaultUser: false,
-			isPendingUser: false,
-			isPending: false,
-		});
+		usersStore.users[currentUser.id] = currentUser;
+		usersStore.currentUserId = currentUser.id;
+
+		await settingsStore.getSettings();
+	});
+
+	afterAll(() => {
+		server.shutdown();
 	});

 	it('should enable email and pw change', async () => {
-		const { getByTestId, getAllByRole } = renderComponent();
+		const { getByTestId, getAllByRole } = renderComponent({ pinia });
 		await waitAllPromises();

 		expect(getAllByRole('textbox').find((el) => el.getAttribute('type') === 'email')).toBeEnabled();
@@ -68,7 +61,7 @@ describe('SettingsPersonalView', () => {
 		vi.spyOn(settingsStore, 'isSamlLoginEnabled', 'get').mockReturnValue(true);
 		vi.spyOn(settingsStore, 'isDefaultAuthenticationSaml', 'get').mockReturnValue(true);

-		const { queryByTestId, getAllByRole } = renderComponent();
+		const { queryByTestId, getAllByRole } = renderComponent({ pinia });
 		await waitAllPromises();

 		expect(
--- a/packages/editor-ui/src/views/tests/SettingsSourceControl.test.ts
+++ b/packages/editor-ui/src/views/tests/SettingsSourceControl.test.ts
@@ -1,43 +1,33 @@
 import { vi } from 'vitest';
-import { screen, render, waitFor, within } from '@testing-library/vue';
+import { screen, waitFor, within } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
-import { createPinia, setActivePinia, PiniaVuePlugin } from 'pinia';
-import { merge } from 'lodash-es';
+import { createPinia, setActivePinia } from 'pinia';
 import { setupServer } from '@/__tests__/server';
-import { i18nInstance } from '@/plugins/i18n';
 import { useSettingsStore, useSourceControlStore } from '@/stores';
 import SettingsSourceControl from '@/views/SettingsSourceControl.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+import { EnterpriseEditionFeature } from '@/constants';
+import { nextTick } from 'vue';

 let pinia: ReturnType<typeof createPinia>;
 let server: ReturnType<typeof setupServer>;
 let settingsStore: ReturnType<typeof useSettingsStore>;
 let sourceControlStore: ReturnType<typeof useSourceControlStore>;

-const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
-	render(
-		SettingsSourceControl,
-		merge(
-			{
-				pinia,
-				i18n: i18nInstance,
-			},
-			renderOptions,
-		),
-		(vue) => {
-			vue.use(PiniaVuePlugin);
-		},
-	);
+const renderComponent = createComponentRenderer(SettingsSourceControl);

 describe('SettingsSourceControl', () => {
 	beforeAll(() => {
 		server = setupServer();
 	});

-	beforeEach(() => {
+	beforeEach(async () => {
 		pinia = createPinia();
 		setActivePinia(pinia);
 		settingsStore = useSettingsStore();
 		sourceControlStore = useSourceControlStore();
+
+		await settingsStore.getSettings();
 	});

 	afterEach(() => {
@@ -48,19 +38,25 @@ describe('SettingsSourceControl', () => {
 		server.shutdown();
 	});

-	it('should render paywall state when there is no license', () => {
-		vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(false);
+	it('should render paywall state when there is no license', async () => {
+		settingsStore.settings.enterprise[EnterpriseEditionFeature.SourceControl] = false;
+		await nextTick();

-		const { getByTestId, queryByTestId } = renderComponent();
+		const { getByTestId, queryByTestId } = renderComponent({
+			pinia,
+		});

 		expect(queryByTestId('source-control-content-licensed')).not.toBeInTheDocument();
 		expect(getByTestId('source-control-content-unlicensed')).toBeInTheDocument();
 	});

-	it('should render licensed content', () => {
-		vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(true);
+	it('should render licensed content', async () => {
+		settingsStore.settings.enterprise[EnterpriseEditionFeature.SourceControl] = true;
+		await nextTick();

-		const { getByTestId, queryByTestId } = renderComponent();
+		const { getByTestId, queryByTestId } = renderComponent({
+			pinia,
+		});

 		expect(getByTestId('source-control-content-licensed')).toBeInTheDocument();
 		expect(queryByTestId('source-control-content-unlicensed')).not.toBeInTheDocument();
@@ -68,11 +64,17 @@ describe('SettingsSourceControl', () => {
 	});

 	it('should render user flow happy path', async () => {
-		vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(true);
+		settingsStore.settings.enterprise[EnterpriseEditionFeature.SourceControl] = true;
+		await nextTick();

 		const updatePreferencesSpy = vi.spyOn(sourceControlStore, 'updatePreferences');

-		const { container, getByTestId, queryByTestId, getByRole } = renderComponent();
+		const { html, container, getByTestId, getByText, queryByTestId, getByRole } = renderComponent({
+			pinia,
+			global: {
+				stubs: ['teleport'],
+			},
+		});

 		await waitFor(() => expect(sourceControlStore.preferences.publicKey).not.toEqual(''));

@@ -103,8 +105,8 @@ describe('SettingsSourceControl', () => {
 		const branchSelect = getByTestId('source-control-branch-select');
 		await userEvent.click(within(branchSelect).getByRole('textbox'));

-		await waitFor(() => expect(within(branchSelect).getByText('main')).toBeVisible());
-		await userEvent.click(within(branchSelect).getByText('main'));
+		await waitFor(() => expect(getByText('main')).toBeVisible());
+		await userEvent.click(getByText('main'));

 		await waitFor(() => expect(saveSettingsButton).toBeEnabled());
 		await userEvent.click(saveSettingsButton);
--- a/packages/editor-ui/src/views/tests/SettingsSso.test.ts
+++ b/packages/editor-ui/src/views/tests/SettingsSso.test.ts
@@ -1,31 +1,38 @@
 import { createPinia, setActivePinia } from 'pinia';
 import SettingsSso from '@/views/SettingsSso.vue';

-import { renderComponent, retry } from '@/__tests__/utils';
+import { retry } from '@/__tests__/utils';
 import { setupServer } from '@/__tests__/server';
 import { afterAll, beforeAll } from 'vitest';
-import { useSettingsStore } from '@/stores';
+import { useSettingsStore } from '@/stores/settings.store';
 import userEvent from '@testing-library/user-event';
 import { useSSOStore } from '@/stores/sso.store';
-import { i18nInstance } from '@/plugins/i18n';
+import { createComponentRenderer } from '@/__tests__/render';
+import { EnterpriseEditionFeature } from '@/constants';
+import { nextTick } from 'vue';

 let pinia: ReturnType<typeof createPinia>;
 let ssoStore: ReturnType<typeof useSSOStore>;
+let settingsStore: ReturnType<typeof useSettingsStore>;
 let server: ReturnType<typeof setupServer>;

+const renderComponent = createComponentRenderer(SettingsSso);
+
 describe('SettingsSso', () => {
 	beforeAll(() => {
 		server = setupServer();
 	});

 	beforeEach(async () => {
+		window.open = vi.fn();
+
 		pinia = createPinia();
 		setActivePinia(pinia);

-		window.open = vi.fn();
-
-		await useSettingsStore().getSettings();
 		ssoStore = useSSOStore();
+		settingsStore = useSettingsStore();
+
+		await settingsStore.getSettings();
 	});

 	afterEach(() => {
@@ -37,9 +44,8 @@ describe('SettingsSso', () => {
 	});

 	it('should render paywall state when there is no license', () => {
-		const { getByTestId, queryByTestId, queryByRole } = renderComponent(SettingsSso, {
+		const { getByTestId, queryByTestId, queryByRole } = renderComponent({
 			pinia,
-			i18n: i18nInstance,
 		});

 		expect(queryByRole('checkbox')).not.toBeInTheDocument();
@@ -47,50 +53,54 @@ describe('SettingsSso', () => {
 		expect(getByTestId('sso-content-unlicensed')).toBeInTheDocument();
 	});

-	it('should render licensed content', () => {
-		vi.spyOn(ssoStore, 'isEnterpriseSamlEnabled', 'get').mockReturnValue(true);
+	it('should render licensed content', async () => {
+		settingsStore.settings.enterprise[EnterpriseEditionFeature.Saml] = true;
+		await nextTick();

-		const { getByTestId, queryByTestId, getByRole } = renderComponent(SettingsSso, {
+		const { getByTestId, queryByTestId, getByRole } = renderComponent({
 			pinia,
-			i18n: i18nInstance,
 		});

-		expect(getByRole('checkbox')).toBeInTheDocument();
+		expect(getByRole('switch')).toBeInTheDocument();
 		expect(getByTestId('sso-content-licensed')).toBeInTheDocument();
 		expect(queryByTestId('sso-content-unlicensed')).not.toBeInTheDocument();
 	});

 	it('should enable activation checkbox and test button if data is already saved', async () => {
-		vi.spyOn(ssoStore, 'isEnterpriseSamlEnabled', 'get').mockReturnValue(true);
+		await ssoStore.getSamlConfig();
+		settingsStore.settings.enterprise[EnterpriseEditionFeature.Saml] = true;
+		await nextTick();

-		const { container, getByTestId, getByRole } = renderComponent(SettingsSso, {
+		const { container, getByTestId, getByRole } = renderComponent({
 			pinia,
-			i18n: i18nInstance,
 		});

+		const xmlRadioButton = getByTestId('radio-button-xml');
+		await userEvent.click(xmlRadioButton);
+
 		await retry(() =>
 			expect(container.querySelector('textarea[name="metadata"]')).toHaveValue(
 				'<?xml version="1.0"?>',
 			),
 		);

-		expect(getByRole('checkbox')).toBeEnabled();
+		expect(getByRole('switch')).toBeEnabled();
 		expect(getByTestId('sso-test')).toBeEnabled();
 	});

 	it('should enable activation checkbox after data is saved', async () => {
 		await ssoStore.saveSamlConfig({ metadata: '' });

-		vi.spyOn(ssoStore, 'isEnterpriseSamlEnabled', 'get').mockReturnValue(true);
+		settingsStore.settings.enterprise[EnterpriseEditionFeature.Saml] = true;
+		await nextTick();

 		const saveSpy = vi.spyOn(ssoStore, 'saveSamlConfig');
 		const getSpy = vi.spyOn(ssoStore, 'getSamlConfig');

-		const { container, getByRole, getByTestId } = renderComponent(SettingsSso, {
+		const { container, getByRole, getByTestId } = renderComponent({
 			pinia,
-			i18n: i18nInstance,
 		});
-		const checkbox = getByRole('checkbox');
+		const checkbox = getByRole('switch');
 		const btnSave = getByTestId('sso-save');
 		const btnTest = getByTestId('sso-test');

--- a/packages/editor-ui/src/views/tests/VariablesView.spec.ts
+++ b/packages/editor-ui/src/views/tests/VariablesView.spec.ts
@@ -4,7 +4,8 @@ import { waitFor } from '@testing-library/vue';
 import { setupServer } from '@/__tests__/server';
 import VariablesView from '@/views/VariablesView.vue';
 import { useSettingsStore, useUsersStore } from '@/stores';
-import { renderComponent } from '@/__tests__/utils';
+import { createComponentRenderer } from '@/__tests__/render';
+import { EnterpriseEditionFeature } from '@/constants';

 describe('VariablesView', () => {
 	let server: ReturnType<typeof setupServer>;
@@ -12,6 +13,8 @@ describe('VariablesView', () => {
 	let settingsStore: ReturnType<typeof useSettingsStore>;
 	let usersStore: ReturnType<typeof useUsersStore>;

+	const renderComponent = createComponentRenderer(VariablesView);
+
 	beforeAll(() => {
 		server = setupServer();
 	});
@@ -32,19 +35,19 @@ describe('VariablesView', () => {
 	});

 	it('should render loading state', () => {
-		const wrapper = renderComponent(VariablesView, { pinia });
+		const wrapper = renderComponent({ pinia });

 		expect(wrapper.container.querySelectorAll('.n8n-loading')).toHaveLength(3);
 	});

 	describe('should render empty state', () => {
 		it('when feature is enabled and logged in user is owner', async () => {
-			vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(true);
+			settingsStore.settings.enterprise[EnterpriseEditionFeature.Variables] = true;
 			vi.spyOn(usersStore, 'currentUser', 'get').mockReturnValue({
 				isOwner: true,
 			});

-			const { queryByTestId } = renderComponent(VariablesView, { pinia });
+			const { queryByTestId } = renderComponent({ pinia });

 			await waitFor(() => {
 				expect(queryByTestId('empty-resources-list')).toBeVisible();
@@ -54,7 +57,7 @@ describe('VariablesView', () => {
 		});

 		it('when feature is disabled and logged in user is owner', async () => {
-			vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(false);
+			settingsStore.settings.enterprise[EnterpriseEditionFeature.Variables] = false;
 			vi.spyOn(usersStore, 'currentUser', 'get').mockReturnValue({
 				isOwner: true,
 			});
@@ -69,7 +72,7 @@ describe('VariablesView', () => {
 		});

 		it('when feature is eanbled and logged in user is not owner', async () => {
-			vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(true);
+			settingsStore.settings.enterprise[EnterpriseEditionFeature.Variables] = true;
 			vi.spyOn(usersStore, 'currentUser', 'get').mockReturnValue({
 				isDefaultUser: true,
 			});
@@ -87,7 +90,7 @@ describe('VariablesView', () => {
 	it('should render variable entries', async () => {
 		server.createList('variable', 3);

-		const wrapper = renderComponent(VariablesView, { pinia });
+		const wrapper = renderComponent({ pinia });

 		const table = await wrapper.findByTestId('resources-table');
 		expect(table).toBeVisible();