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/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');
+		});
 	});
 });