test(editor): Unit test Version control frontend components

packages/design-system/package.json

@@ -49,6 +49,7 @@
     "@storybook/vue": "^7.0.7",
     "@storybook/vue-webpack5": "^7.0.7",
     "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/user-event": "^14.4.3",
     "@testing-library/vue": "^5.8.3",
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-emoji": "^2.0.2",

packages/design-system/src/components/N8nSelect/__tests__/Select.spec.ts

@@ -1,4 +1,6 @@
-import { render } from '@testing-library/vue';
+import { defineComponent, ref } from 'vue';
+import { render, waitFor, within } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
 import N8nSelect from '../Select.vue';
 import N8nOption from '../../N8nOption/Option.vue';
 
@@ -19,5 +21,38 @@ describe('components', () => {
 			});
 			expect(wrapper.html()).toMatchSnapshot();
 		});
+
+		it('should select an option', async () => {
+			const n8nSelectTestComponent = defineComponent({
+				components: {
+					N8nSelect,
+					N8nOption,
+				},
+				template: `
+					<n8n-select v-model="selected">
+						<n8n-option v-for="o in options" :key="o" :value="o" :label="o" />
+					</n8n-select>
+				`,
+				setup() {
+					const options = ref(['1', '2', '3']);
+					const selected = ref('');
+
+					return {
+						options,
+						selected,
+					};
+				},
+			});
+
+			const { container, getByRole } = render(n8nSelectTestComponent);
+			const getOption = (value: string) => within(container as HTMLElement).getByText(value);
+			const textbox = getByRole('textbox');
+
+			await userEvent.click(textbox);
+			await waitFor(() => expect(getOption('1')).toBeVisible());
+			await userEvent.click(getOption('1'));
+
+			expect(textbox).toHaveValue('1');
+		});
 	});
 });

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,34 +29,115 @@ 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();
 		expect(getByTestId('version-control-content-unlicensed')).toBeInTheDocument();
 	});
 
 	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(),
+		);
 	});
 });