Merge branch 'winh-refactor-recaptcha-modal' into 'master'

Refactor RecaptchaModal component to allow more than one instance

Closes #31115

See merge request gitlab-org/gitlab!16857

app/assets/javascripts/vue_shared/components/recaptcha_eventhub.js

+import Vue from 'vue';
+
+// see recaptcha_tags in app/views/shared/_recaptcha_form.html.haml
+export const callbackName = 'recaptchaDialogCallback';
+
+export const eventHub = new Vue();
+
+const throwDuplicateCallbackError = () => {
+  throw new Error(`${callbackName} is already defined!`);
+};
+
+if (window[callbackName]) {
+  throwDuplicateCallbackError();
+}
+
+const callback = () => eventHub.$emit('submit');
+
+Object.defineProperty(window, callbackName, {
+  get: () => callback,
+  set: throwDuplicateCallbackError,
+});

app/assets/javascripts/vue_shared/components/recaptcha_modal.vue

 <script>
 import DeprecatedModal from './deprecated_modal.vue';
+import { eventHub } from './recaptcha_eventhub';
 
 export default {
   name: 'RecaptchaModal',
@@ -30,14 +31,11 @@ export default {
   },
 
   mounted() {
-    if (window.recaptchaDialogCallback) {
-      throw new Error('recaptchaDialogCallback is already defined!');
-    }
-    window.recaptchaDialogCallback = this.submit.bind(this);
+    eventHub.$on('submit', this.submit);
   },
 
   beforeDestroy() {
-    window.recaptchaDialogCallback = null;
+    eventHub.$off('submit', this.submit);
   },
 
   methods: {

spec/frontend/vue_shared/components/recaptcha_eventhub_spec.js

+import { eventHub, callbackName } from '~/vue_shared/components/recaptcha_eventhub';
+
+describe('reCAPTCHA event hub', () => {
+  // the following test case currently crashes
+  // see https://gitlab.com/gitlab-org/gitlab/issues/29192#note_217840035
+  // eslint-disable-next-line jest/no-disabled-tests
+  it.skip('throws an error for overriding the callback', () => {
+    expect(() => {
+      window[callbackName] = 'something';
+    }).toThrow();
+  });
+
+  it('triggering callback emits a submit event', () => {
+    const eventHandler = jest.fn();
+    eventHub.$once('submit', eventHandler);
+
+    window[callbackName]();
+
+    expect(eventHandler).toHaveBeenCalled();
+  });
+});

spec/frontend/vue_shared/components/recaptcha_modal_spec.js

+import { shallowMount } from '@vue/test-utils';
+
+import { eventHub } from '~/vue_shared/components/recaptcha_eventhub';
+
+import RecaptchaModal from '~/vue_shared/components/recaptcha_modal';
+
+describe('RecaptchaModal', () => {
+  const recaptchaFormId = 'recaptcha-form';
+  const recaptchaHtml = `<form id="${recaptchaFormId}"></form>`;
+
+  let wrapper;
+
+  const findRecaptchaForm = () => wrapper.find(`#${recaptchaFormId}`).element;
+
+  beforeEach(() => {
+    wrapper = shallowMount(RecaptchaModal, {
+      sync: false,
+      propsData: {
+        html: recaptchaHtml,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('submits the form if event hub emits submit event', () => {
+    const form = findRecaptchaForm();
+    jest.spyOn(form, 'submit').mockImplementation();
+
+    eventHub.$emit('submit');
+
+    expect(form.submit).toHaveBeenCalled();
+  });
+});