test(editor): Unit test Version control frontend components (#6408)

* test(editor): test n8n-select design system component

* test(editor): test version control settings happy path

* test(editor): test version control settings disconnect

packages/editor-ui/src/__tests__/server/endpoints/index.ts

@@ -5,6 +5,7 @@ import { routesForCredentialTypes } from './credentialType';
 import { routesForVariables } from './variable';
 import { routesForSettings } from './settings';
 import { routesForSSO } from './sso';
+import { routesForVersionControl } from './versionControl';
 
 const endpoints: Array<(server: Server) => void> = [
 	routesForCredentials,
@@ -13,6 +14,7 @@ const endpoints: Array<(server: Server) => void> = [
 	routesForVariables,
 	routesForSettings,
 	routesForSSO,
+	routesForVersionControl,
 ];
 
 export { endpoints };

packages/editor-ui/src/__tests__/server/endpoints/versionControl.ts

@@ -0,0 +1,77 @@
+import type { Server, Request } from 'miragejs';
+import { Response } from 'miragejs';
+import { jsonParse } from 'n8n-workflow';
+import type { AppSchema } from '@/__tests__/server/types';
+import type { VersionControlPreferences } from '@/Interface';
+
+export function routesForVersionControl(server: Server) {
+	const versionControlApiRoot = '/rest/version-control';
+	const defaultVersionControlPreferences: VersionControlPreferences = {
+		branchName: '',
+		branches: [],
+		authorName: '',
+		authorEmail: '',
+		repositoryUrl: '',
+		branchReadOnly: false,
+		branchColor: '#1d6acb',
+		connected: false,
+		publicKey: 'ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIHEX+25m',
+	};
+
+	server.post(`${versionControlApiRoot}/preferences`, (schema: AppSchema, request: Request) => {
+		const requestBody = jsonParse(request.requestBody) as Partial<VersionControlPreferences>;
+
+		return new Response(
+			200,
+			{},
+			{
+				data: {
+					...defaultVersionControlPreferences,
+					...requestBody,
+				},
+			},
+		);
+	});
+
+	server.patch(`${versionControlApiRoot}/preferences`, (schema: AppSchema, request: Request) => {
+		const requestBody = jsonParse(request.requestBody) as Partial<VersionControlPreferences>;
+
+		return new Response(
+			200,
+			{},
+			{
+				data: {
+					...defaultVersionControlPreferences,
+					...requestBody,
+				},
+			},
+		);
+	});
+
+	server.get(`${versionControlApiRoot}/get-branches`, () => {
+		return new Response(
+			200,
+			{},
+			{
+				data: {
+					branches: ['main', 'dev'],
+					currentBranch: 'main',
+				},
+			},
+		);
+	});
+
+	server.post(`${versionControlApiRoot}/disconnect`, () => {
+		return new Response(
+			200,
+			{},
+			{
+				data: {
+					...defaultVersionControlPreferences,
+					branchName: '',
+					connected: false,
+				},
+			},
+		);
+	});
+}

packages/editor-ui/src/__tests__/server/index.ts

@@ -23,14 +23,14 @@ export function setupServer() {
 	// Enable logging
 	server.logging = false;
 
-	// Handle undefined endpoints
-	server.post('/rest/:any', async () => new Promise(() => {}));
-
 	// Handle defined endpoints
 	for (const endpointsFn of endpoints) {
 		endpointsFn(server);
 	}
 
+	// Handle undefined endpoints
+	server.post('/rest/:any', async () => ({}));
+
 	// Reset for everything else
 	server.namespace = '';
 	server.passthrough();

packages/editor-ui/src/views/SettingsVersionControl.vue

@@ -219,6 +219,7 @@ const refreshBranches = async () => {
 						@click="onDisconnect"
 						size="large"
 						icon="trash"
+						data-test-id="version-control-disconnect-button"
 						>{{ locale.baseText('settings.versionControl.button.disconnect') }}</n8n-button
 					>
 				</div>
@@ -291,9 +292,10 @@ const refreshBranches = async () => {
 				size="large"
 				:disabled="!validForConnection"
 				:class="$style.connect"
+				data-test-id="version-control-connect-button"
 				>{{ locale.baseText('settings.versionControl.button.connect') }}</n8n-button
 			>
-			<div v-if="isConnected">
+			<div v-if="isConnected" data-test-id="version-control-connected-content">
 				<div :class="$style.group">
 					<hr />
 					<n8n-heading size="xlarge" tag="h2" class="mb-s">{{
@@ -307,6 +309,7 @@ const refreshBranches = async () => {
 							size="medium"
 							filterable
 							@input="onSelect"
+							data-test-id="version-control-branch-select"
 						>
 							<n8n-option
 								v-for="b in versionControlStore.preferences.branches"
@@ -328,6 +331,7 @@ const refreshBranches = async () => {
 								square
 								:class="$style.refreshBranches"
 								@click="refreshBranches"
+								data-test-id="version-control-refresh-branches-button"
 							/>
 						</n8n-tooltip>
 					</div>
@@ -358,6 +362,7 @@ const refreshBranches = async () => {
 						@click="onSave"
 						size="large"
 						:disabled="!versionControlStore.preferences.branchName"
+						data-test-id="version-control-save-settings-button"
 						>{{ locale.baseText('settings.versionControl.button.save') }}</n8n-button
 					>
 				</div>

packages/editor-ui/src/views/__tests__/SettingsVersionControl.test.ts

@@ -1,14 +1,16 @@
-import { PiniaVuePlugin } from 'pinia';
-import { render } from '@testing-library/vue';
-import { createTestingPinia } from '@pinia/testing';
+import { vi } from 'vitest';
+import { screen, render, 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 { STORES } from '@/constants';
-import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
-import { i18n } from '@/plugins/i18n';
+import { setupServer } from '@/__tests__/server';
+import { i18nInstance } from '@/plugins/i18n';
+import { useSettingsStore, useVersionControlStore } from '@/stores';
 import SettingsVersionControl from '@/views/SettingsVersionControl.vue';
-import { useVersionControlStore } from '@/stores/versionControl.store';
 
-let pinia: ReturnType<typeof createTestingPinia>;
+let pinia: ReturnType<typeof createPinia>;
+let server: ReturnType<typeof setupServer>;
+let settingsStore: ReturnType<typeof useSettingsStore>;
 let versionControlStore: ReturnType<typeof useVersionControlStore>;
 
 const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
@@ -17,7 +19,7 @@ const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
 		merge(
 			{
 				pinia,
-				i18n,
+				i18n: i18nInstance,
 			},
 			renderOptions,
 		),
@@ -27,22 +29,28 @@ const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
 	);
 
 describe('SettingsVersionControl', () => {
+	beforeAll(() => {
+		server = setupServer();
+	});
+
 	beforeEach(() => {
-		pinia = createTestingPinia({
-			initialState: {
-				[STORES.SETTINGS]: {
-					settings: merge({}, SETTINGS_STORE_DEFAULT_STATE.settings),
-				},
-			},
-		});
-		versionControlStore = useVersionControlStore(pinia);
+		pinia = createPinia();
+		setActivePinia(pinia);
+		settingsStore = useSettingsStore();
+		versionControlStore = useVersionControlStore();
 	});
 
 	afterEach(() => {
 		vi.clearAllMocks();
 	});
 
+	afterAll(() => {
+		server.shutdown();
+	});
+
 	it('should render paywall state when there is no license', () => {
+		vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(false);
+
 		const { getByTestId, queryByTestId } = renderComponent();
 
 		expect(queryByTestId('version-control-content-licensed')).not.toBeInTheDocument();
@@ -50,11 +58,86 @@ describe('SettingsVersionControl', () => {
 	});
 
 	it('should render licensed content', () => {
-		vi.spyOn(versionControlStore, 'isEnterpriseVersionControlEnabled', 'get').mockReturnValue(true);
+		vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(true);
 
 		const { getByTestId, queryByTestId } = renderComponent();
 
 		expect(getByTestId('version-control-content-licensed')).toBeInTheDocument();
 		expect(queryByTestId('version-control-content-unlicensed')).not.toBeInTheDocument();
+		expect(queryByTestId('version-control-connected-content')).not.toBeInTheDocument();
+	});
+
+	it('should render user flow happy path', async () => {
+		vi.spyOn(settingsStore, 'isEnterpriseFeatureEnabled').mockReturnValue(true);
+		const updatePreferencesSpy = vi.spyOn(versionControlStore, 'updatePreferences');
+
+		const { container, getByTestId, queryByTestId, getByRole } = renderComponent();
+
+		const connectButton = getByTestId('version-control-connect-button');
+		expect(connectButton).toBeDisabled();
+
+		const repoUrlInput = container.querySelector('input[name="repoUrl"]')!;
+		const authorName = container.querySelector('input[name="authorName"]')!;
+		const authorEmail = container.querySelector('input[name="authorEmail"]')!;
+
+		await userEvent.click(repoUrlInput);
+		await userEvent.type(repoUrlInput, 'git@github');
+		await userEvent.tab();
+		expect(connectButton).toBeDisabled();
+
+		await userEvent.click(repoUrlInput);
+		await userEvent.type(repoUrlInput, '.com:john/n8n-data.git');
+		await userEvent.tab();
+		expect(connectButton).toBeDisabled();
+
+		await userEvent.click(authorName);
+		await userEvent.type(authorName, 'John Doe');
+		await userEvent.tab();
+		expect(connectButton).toBeDisabled();
+
+		await userEvent.click(authorEmail);
+		await userEvent.type(authorEmail, 'john@example.');
+		await userEvent.tab();
+		expect(connectButton).toBeDisabled();
+
+		await userEvent.click(authorEmail);
+		await userEvent.type(authorEmail, 'com');
+		await userEvent.tab();
+
+		expect(connectButton).toBeEnabled();
+		expect(queryByTestId('version-control-save-settings-button')).not.toBeInTheDocument();
+
+		await userEvent.click(connectButton);
+		await waitFor(() => expect(getByTestId('version-control-connected-content')).toBeVisible());
+
+		const saveSettingsButton = getByTestId('version-control-save-settings-button');
+		expect(saveSettingsButton).toBeInTheDocument();
+		expect(saveSettingsButton).toBeDisabled();
+
+		const branchSelect = getByTestId('version-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(saveSettingsButton).toBeEnabled());
+		await userEvent.click(saveSettingsButton);
+
+		expect(updatePreferencesSpy).toHaveBeenCalledWith({
+			branchName: 'main',
+			branchReadOnly: false,
+			branchColor: '#1d6acb',
+		});
+		await waitFor(() => expect(screen.getByText('Settings successfully saved')).toBeVisible());
+
+		await userEvent.click(getByTestId('version-control-disconnect-button'));
+		const disconnectDialog = getByRole('dialog');
+		await waitFor(() => expect(disconnectDialog).toBeVisible());
+
+		await userEvent.click(within(disconnectDialog).getAllByRole('button')[1]);
+		await waitFor(() => expect(disconnectDialog).not.toBeVisible());
+		await waitFor(() =>
+			expect(queryByTestId('version-control-connected-content')).not.toBeInTheDocument(),
+		);
 	});
 });