Add latest changes from gitlab-org/gitlab@master

2 files changed, 49 insertions, 130 deletions

diff --git a/spec/frontend/authentication/two_factor_auth/components/__snapshots__/manage_two_factor_form_spec.js.snap b/spec/frontend/authentication/two_factor_auth/components/__snapshots__/manage_two_factor_form_spec.js.snap
deleted file mode 100644
index 3fe0e570a54..00000000000
--- a/spec/frontend/authentication/two_factor_auth/components/__snapshots__/manage_two_factor_form_spec.js.snap
+++ /dev/null
@@ -1,99 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ManageTwoFactorForm Disable button renders the component correctly 1`] = `
-VueWrapper {
-  "_emitted": Object {},
-  "_emittedByOrder": Array [],
-  "isFunctionalComponent": undefined,
-}
-`;
-
-exports[`ManageTwoFactorForm Disable button renders the component correctly 2`] = `
-<form
-  action="#"
-  class="gl-display-inline-block"
-  method="post"
->
-  <input
-    data-testid="test-2fa-method-field"
-    name="_method"
-    type="hidden"
-  />
-   
-  <input
-    name="authenticity_token"
-    type="hidden"
-  />
-   
-  <div
-    class="form-group gl-form-group"
-    id="__BVID__15"
-    role="group"
-  >
-    <label
-      class="d-block col-form-label"
-      for="current-password"
-      id="__BVID__15__BV_label_"
-    >
-      Current password
-    </label>
-    <div
-      class="bv-no-focus-ring"
-    >
-      <input
-        aria-required="true"
-        class="gl-form-input form-control"
-        data-qa-selector="current_password_field"
-        id="current-password"
-        name="current_password"
-        required="required"
-        type="password"
-      />
-      <!---->
-      <!---->
-      <!---->
-    </div>
-  </div>
-   
-  <button
-    class="btn btn-danger gl-mr-3 gl-display-inline-block btn-danger btn-md gl-button"
-    data-confirm="Are you sure? This will invalidate your registered applications and U2F devices."
-    data-form-action="2fa_auth_path"
-    data-form-method="2fa_auth_method"
-    data-testid="test-2fa-disable-button"
-    type="submit"
-  >
-    <!---->
-     
-    <!---->
-      
-    <span
-      class="gl-button-text"
-    >
-      
-    Disable two-factor authentication
-  
-    </span>
-  </button>
-   
-  <button
-    class="btn gl-display-inline-block btn-default btn-md gl-button"
-    data-form-action="2fa_codes_path"
-    data-form-method="2fa_codes_method"
-    data-testid="test-2fa-regenerate-codes-button"
-    type="submit"
-  >
-    <!---->
-     
-    <!---->
-      
-    <span
-      class="gl-button-text"
-    >
-      
-    Regenerate recovery codes
-  
-    </span>
-  </button>
-</form>
-`;
diff --git a/spec/frontend/authentication/two_factor_auth/components/manage_two_factor_form_spec.js b/spec/frontend/authentication/two_factor_auth/components/manage_two_factor_form_spec.js
index 384579c6876..870375318e3 100644
--- a/spec/frontend/authentication/two_factor_auth/components/manage_two_factor_form_spec.js
+++ b/spec/frontend/authentication/two_factor_auth/components/manage_two_factor_form_spec.js
@@ -1,10 +1,18 @@
 import { within } from '@testing-library/dom';
+import { GlForm } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import ManageTwoFactorForm, {
   i18n,
 } from '~/authentication/two_factor_auth/components/manage_two_factor_form.vue';
 
+const defaultProvide = {
+  profileTwoFactorAuthPath: '2fa_auth_path',
+  profileTwoFactorAuthMethod: '2fa_auth_method',
+  codesProfileTwoFactorAuthPath: '2fa_codes_path',
+  codesProfileTwoFactorAuthMethod: '2fa_codes_method',
+};
+
 describe('ManageTwoFactorForm', () => {
   let wrapper;
 
@@ -12,11 +20,9 @@ describe('ManageTwoFactorForm', () => {
     wrapper = extendedWrapper(
       mount(ManageTwoFactorForm, {
         provide: {
-          webauthnEnabled: options?.webauthnEnabled || false,
-          profileTwoFactorAuthPath: '2fa_auth_path',
-          profileTwoFactorAuthMethod: '2fa_auth_method',
-          codesProfileTwoFactorAuthPath: '2fa_codes_path',
-          codesProfileTwoFactorAuthMethod: '2fa_codes_method',
+          ...defaultProvide,
+          webauthnEnabled: options?.webauthnEnabled ?? false,
+          isCurrentPasswordRequired: options?.currentPasswordRequired ?? true,
         },
       }),
     );
@@ -26,6 +32,11 @@ describe('ManageTwoFactorForm', () => {
   const queryByLabelText = (text, options) =>
     within(wrapper.element).queryByLabelText(text, options);
 
+  const findForm = () => wrapper.findComponent(GlForm);
+  const findMethodInput = () => wrapper.findByTestId('test-2fa-method-field');
+  const findDisableButton = () => wrapper.findByTestId('test-2fa-disable-button');
+  const findRegenerateCodesButton = () => wrapper.findByTestId('test-2fa-regenerate-codes-button');
+
   beforeEach(() => {
     createComponent();
   });
@@ -36,16 +47,30 @@ describe('ManageTwoFactorForm', () => {
     });
   });
 
+  describe('when current password is not required', () => {
+    beforeEach(() => {
+      createComponent({
+        currentPasswordRequired: false,
+      });
+    });
+
+    it('does not render the current password field', () => {
+      expect(queryByLabelText(i18n.currentPassword)).toBe(null);
+    });
+  });
+
   describe('Disable button', () => {
-    it('renders the component correctly', () => {
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper.element).toMatchSnapshot();
+    it('renders the component with correct attributes', () => {
+      expect(findDisableButton().exists()).toBe(true);
+      expect(findDisableButton().attributes()).toMatchObject({
+        'data-confirm': i18n.confirm,
+        'data-form-action': defaultProvide.profileTwoFactorAuthPath,
+        'data-form-method': defaultProvide.profileTwoFactorAuthMethod,
+      });
     });
 
     it('has the right confirm text', () => {
-      expect(wrapper.findByTestId('test-2fa-disable-button').element.dataset.confirm).toEqual(
-        i18n.confirm,
-      );
+      expect(findDisableButton().attributes('data-confirm')).toBe(i18n.confirm);
     });
 
     describe('when webauthnEnabled', () => {
@@ -56,23 +81,19 @@ describe('ManageTwoFactorForm', () => {
       });
 
       it('has the right confirm text', () => {
-        expect(wrapper.findByTestId('test-2fa-disable-button').element.dataset.confirm).toEqual(
-          i18n.confirmWebAuthn,
-        );
+        expect(findDisableButton().attributes('data-confirm')).toBe(i18n.confirmWebAuthn);
       });
     });
 
     it('modifies the form action and method when submitted through the button', async () => {
-      const form = wrapper.find('form');
-      const disableButton = wrapper.findByTestId('test-2fa-disable-button').element;
-      const methodInput = wrapper.findByTestId('test-2fa-method-field').element;
+      const form = findForm();
+      const disableButton = findDisableButton().element;
+      const methodInput = findMethodInput();
 
-      form.trigger('submit', { submitter: disableButton });
+      await form.vm.$emit('submit', { submitter: disableButton });
 
-      await wrapper.vm.$nextTick();
-
-      expect(form.element.getAttribute('action')).toEqual('2fa_auth_path');
-      expect(methodInput.getAttribute('value')).toEqual('2fa_auth_method');
+      expect(form.attributes('action')).toBe(defaultProvide.profileTwoFactorAuthPath);
+      expect(methodInput.attributes('value')).toBe(defaultProvide.profileTwoFactorAuthMethod);
     });
   });
 
@@ -82,17 +103,14 @@ describe('ManageTwoFactorForm', () => {
     });
 
     it('modifies the form action and method when submitted through the button', async () => {
-      const form = wrapper.find('form');
-      const regenerateCodesButton = wrapper.findByTestId('test-2fa-regenerate-codes-button')
-        .element;
-      const methodInput = wrapper.findByTestId('test-2fa-method-field').element;
-
-      form.trigger('submit', { submitter: regenerateCodesButton });
+      const form = findForm();
+      const regenerateCodesButton = findRegenerateCodesButton().element;
+      const methodInput = findMethodInput();
 
-      await wrapper.vm.$nextTick();
+      await form.vm.$emit('submit', { submitter: regenerateCodesButton });
 
-      expect(form.element.getAttribute('action')).toEqual('2fa_codes_path');
-      expect(methodInput.getAttribute('value')).toEqual('2fa_codes_method');
+      expect(form.attributes('action')).toBe(defaultProvide.codesProfileTwoFactorAuthPath);
+      expect(methodInput.attributes('value')).toBe(defaultProvide.codesProfileTwoFactorAuthMethod);
     });
   });
 });