Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

1 files changed, 55 insertions, 40 deletions

diff --git a/spec/frontend/invite_members/components/invite_groups_modal_spec.js b/spec/frontend/invite_members/components/invite_groups_modal_spec.js
index 49c55d56080..8085f48f6e2 100644
--- a/spec/frontend/invite_members/components/invite_groups_modal_spec.js
+++ b/spec/frontend/invite_members/components/invite_groups_modal_spec.js
@@ -4,6 +4,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import Api from '~/api';
 import InviteGroupsModal from '~/invite_members/components/invite_groups_modal.vue';
 import InviteModalBase from '~/invite_members/components/invite_modal_base.vue';
+import ContentTransition from '~/vue_shared/components/content_transition.vue';
 import GroupSelect from '~/invite_members/components/group_select.vue';
 import { stubComponent } from 'helpers/stub_component';
 import { propsData, sharedGroup } from '../mock_data/group_modal';
@@ -19,6 +20,7 @@ describe('InviteGroupsModal', () => {
       },
       stubs: {
         InviteModalBase,
+        ContentTransition,
         GlSprintf,
         GlModal: stubComponent(GlModal, {
           template: '<div><slot></slot><slot name="modal-footer"></slot></div>',
@@ -50,6 +52,8 @@ describe('InviteGroupsModal', () => {
   const clickInviteButton = () => findInviteButton().vm.$emit('click');
   const clickCancelButton = () => findCancelButton().vm.$emit('click');
   const triggerGroupSelect = (val) => findGroupSelect().vm.$emit('input', val);
+  const findBase = () => wrapper.findComponent(InviteModalBase);
+  const hideModal = () => wrapper.findComponent(GlModal).vm.$emit('hide');
 
   describe('displaying the correct introText and form group description', () => {
     describe('when inviting to a project', () => {
@@ -70,26 +74,50 @@ describe('InviteGroupsModal', () => {
   });
 
   describe('submitting the invite form', () => {
-    describe('when sharing the group is successful', () => {
-      const groupPostData = {
-        group_id: sharedGroup.id,
-        group_access: propsData.defaultAccessLevel,
-        expires_at: undefined,
-        format: 'json',
-      };
+    let apiResolve;
+    let apiReject;
+    const groupPostData = {
+      group_id: sharedGroup.id,
+      group_access: propsData.defaultAccessLevel,
+      expires_at: undefined,
+      format: 'json',
+    };
+
+    beforeEach(() => {
+      createComponent();
+      triggerGroupSelect(sharedGroup);
+
+      wrapper.vm.$toast = { show: jest.fn() };
+      jest.spyOn(Api, 'groupShareWithGroup').mockImplementation(
+        () =>
+          new Promise((resolve, reject) => {
+            apiResolve = resolve;
+            apiReject = reject;
+          }),
+      );
+
+      clickInviteButton();
+    });
 
-      beforeEach(() => {
-        createComponent();
-        triggerGroupSelect(sharedGroup);
+    it('shows loading', () => {
+      expect(findBase().props('isLoading')).toBe(true);
+    });
+
+    it('calls Api groupShareWithGroup with the correct params', () => {
+      expect(Api.groupShareWithGroup).toHaveBeenCalledWith(propsData.id, groupPostData);
+    });
 
-        wrapper.vm.$toast = { show: jest.fn() };
-        jest.spyOn(Api, 'groupShareWithGroup').mockResolvedValue({ data: groupPostData });
+    describe('when succeeds', () => {
+      beforeEach(() => {
+        apiResolve({ data: groupPostData });
+      });
 
-        clickInviteButton();
+      it('hides loading', () => {
+        expect(findBase().props('isLoading')).toBe(false);
       });
 
-      it('calls Api groupShareWithGroup with the correct params', () => {
-        expect(Api.groupShareWithGroup).toHaveBeenCalledWith(propsData.id, groupPostData);
+      it('has no error message', () => {
+        expect(findBase().props('invalidFeedbackMessage')).toBe('');
       });
 
       it('displays the successful toastMessage', () => {
@@ -99,18 +127,9 @@ describe('InviteGroupsModal', () => {
       });
     });
 
-    describe('when sharing the group fails', () => {
+    describe('when fails', () => {
       beforeEach(() => {
-        createInviteGroupToGroupWrapper();
-        triggerGroupSelect(sharedGroup);
-
-        wrapper.vm.$toast = { show: jest.fn() };
-
-        jest
-          .spyOn(Api, 'groupShareWithGroup')
-          .mockRejectedValue({ response: { data: { success: false } } });
-
-        clickInviteButton();
+        apiReject({ response: { data: { success: false } } });
       });
 
       it('does not show the toast message on failure', () => {
@@ -121,22 +140,18 @@ describe('InviteGroupsModal', () => {
         expect(membersFormGroupInvalidFeedback()).toBe('Something went wrong');
       });
 
-      describe('clearing the invalid state and message', () => {
-        it('clears the error when the cancel button is clicked', async () => {
-          clickCancelButton();
-
-          await nextTick();
+      it.each`
+        desc                                   | act
+        ${'when the cancel button is clicked'} | ${clickCancelButton}
+        ${'when the modal is hidden'}          | ${hideModal}
+        ${'when invite button is clicked'}     | ${clickInviteButton}
+        ${'when group input changes'}          | ${() => triggerGroupSelect(sharedGroup)}
+      `('clears the error, $desc', async ({ act }) => {
+        act();
 
-          expect(membersFormGroupInvalidFeedback()).toBe('');
-        });
-
-        it('clears the error when the modal is hidden', async () => {
-          wrapper.findComponent(GlModal).vm.$emit('hide');
+        await nextTick();
 
-          await nextTick();
-
-          expect(membersFormGroupInvalidFeedback()).toBe('');
-        });
+        expect(membersFormGroupInvalidFeedback()).toBe('');
       });
     });
   });