From 3c055e4d8d77addea014d8da363518c4c14c9a98 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 15 Sep 2023 11:22:30 +0200
Subject: [PATCH] fix(editor): No need to add click emitting click events, VUE
 delegates the handler to the root element of the component (#7182)

---
 .../components/CredentialEdit/OauthButton.vue |  3 +--
 .../__tests__/OauthButton.test.ts             | 24 +++++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 packages/editor-ui/src/components/CredentialEdit/__tests__/OauthButton.test.ts

diff --git a/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue b/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue
index 92b3079a0a..27da6ee570 100644
--- a/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue
@@ -1,11 +1,10 @@
 <template>
 	<div :class="$style.container">
-		<GoogleAuthButton v-if="isGoogleOAuthType" @click.stop="$emit('click')" />
+		<GoogleAuthButton v-if="isGoogleOAuthType" />
 		<n8n-button
 			v-else
 			:label="$locale.baseText('credentialEdit.oAuthButton.connectMyAccount')"
 			size="large"
-			@click.stop="$emit('click')"
 		/>
 	</div>
 </template>
diff --git a/packages/editor-ui/src/components/CredentialEdit/__tests__/OauthButton.test.ts b/packages/editor-ui/src/components/CredentialEdit/__tests__/OauthButton.test.ts
new file mode 100644
index 0000000000..d5e91e1c52
--- /dev/null
+++ b/packages/editor-ui/src/components/CredentialEdit/__tests__/OauthButton.test.ts
@@ -0,0 +1,24 @@
+import userEvent from '@testing-library/user-event';
+import { createTestingPinia } from '@pinia/testing';
+import { createComponentRenderer } from '@/__tests__/render';
+import OauthButton from '@/components/CredentialEdit/OauthButton.vue';
+
+const renderComponent = createComponentRenderer(OauthButton, {
+	pinia: createTestingPinia(),
+});
+
+describe('OauthButton', () => {
+	test.each([
+		['GoogleAuthButton', true],
+		['n8n-button', false],
+	])('should emit click event only once when %s is clicked', async (name, isGoogleOAuthType) => {
+		const { emitted, getByRole } = renderComponent({
+			props: { isGoogleOAuthType },
+		});
+
+		const button = getByRole('button');
+		await userEvent.click(button);
+
+		expect(emitted().click).toHaveLength(1);
+	});
+});