1 files changed, 123 insertions, 10 deletions

diff --git a/spec/frontend/invite_members/components/invite_members_modal_spec.js b/spec/frontend/invite_members/components/invite_members_modal_spec.js
index e310a00133c..ca086549f3f 100644
--- a/spec/frontend/invite_members/components/invite_members_modal_spec.js
+++ b/spec/frontend/invite_members/components/invite_members_modal_spec.js
@@ -6,8 +6,9 @@ import Api from '~/api';
 import InviteMembersModal from '~/invite_members/components/invite_members_modal.vue';
 
 const id = '1';
-const name = 'testgroup';
+const name = 'test name';
 const isProject = false;
+const inviteeType = 'members';
 const accessLevels = { Guest: 10, Reporter: 20, Developer: 30, Maintainer: 40, Owner: 50 };
 const defaultAccessLevel = '10';
 const helpLink = 'https://example.com';
@@ -20,16 +21,19 @@ const user3 = {
   username: 'one_2',
   avatar_url: '',
 };
+const sharedGroup = { id: '981' };
 
-const createComponent = (data = {}) => {
+const createComponent = (data = {}, props = {}) => {
   return shallowMount(InviteMembersModal, {
     propsData: {
       id,
       name,
       isProject,
+      inviteeType,
       accessLevels,
       defaultAccessLevel,
       helpLink,
+      ...props,
     },
     data() {
       return data;
@@ -46,6 +50,22 @@ const createComponent = (data = {}) => {
   });
 };
 
+const createInviteMembersToProjectWrapper = () => {
+  return createComponent({ inviteeType: 'members' }, { isProject: true });
+};
+
+const createInviteMembersToGroupWrapper = () => {
+  return createComponent({ inviteeType: 'members' }, { isProject: false });
+};
+
+const createInviteGroupToProjectWrapper = () => {
+  return createComponent({ inviteeType: 'group' }, { isProject: true });
+};
+
+const createInviteGroupToGroupWrapper = () => {
+  return createComponent({ inviteeType: 'group' }, { isProject: false });
+};
+
 describe('InviteMembersModal', () => {
   let wrapper;
 
@@ -54,12 +74,13 @@ describe('InviteMembersModal', () => {
     wrapper = null;
   });
 
-  const findDropdown = () => wrapper.find(GlDropdown);
-  const findDropdownItems = () => findDropdown().findAll(GlDropdownItem);
-  const findDatepicker = () => wrapper.find(GlDatepicker);
-  const findLink = () => wrapper.find(GlLink);
-  const findCancelButton = () => wrapper.find({ ref: 'cancelButton' });
-  const findInviteButton = () => wrapper.find({ ref: 'inviteButton' });
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findDropdownItems = () => findDropdown().findAllComponents(GlDropdownItem);
+  const findDatepicker = () => wrapper.findComponent(GlDatepicker);
+  const findLink = () => wrapper.findComponent(GlLink);
+  const findIntroText = () => wrapper.find({ ref: 'introText' }).text();
+  const findCancelButton = () => wrapper.findComponent({ ref: 'cancelButton' });
+  const findInviteButton = () => wrapper.findComponent({ ref: 'inviteButton' });
   const clickInviteButton = () => findInviteButton().vm.$emit('click');
 
   describe('rendering the modal', () => {
@@ -68,7 +89,7 @@ describe('InviteMembersModal', () => {
     });
 
     it('renders the modal with the correct title', () => {
-      expect(wrapper.find(GlModal).props('title')).toBe('Invite team members');
+      expect(wrapper.findComponent(GlModal).props('title')).toBe('Invite team members');
     });
 
     it('renders the Cancel button text correctly', () => {
@@ -102,6 +123,44 @@ describe('InviteMembersModal', () => {
     });
   });
 
+  describe('displaying the correct introText', () => {
+    describe('when inviting to a project', () => {
+      describe('when inviting members', () => {
+        it('includes the correct invitee, type, and formatted name', () => {
+          wrapper = createInviteMembersToProjectWrapper();
+
+          expect(findIntroText()).toBe("You're inviting members to the TEST NAME project");
+        });
+      });
+
+      describe('when sharing with a group', () => {
+        it('includes the correct invitee, type, and formatted name', () => {
+          wrapper = createInviteGroupToProjectWrapper();
+
+          expect(findIntroText()).toBe("You're inviting a group to the TEST NAME project");
+        });
+      });
+    });
+
+    describe('when inviting to a group', () => {
+      describe('when inviting members', () => {
+        it('includes the correct invitee, type, and formatted name', () => {
+          wrapper = createInviteMembersToGroupWrapper();
+
+          expect(wrapper.html()).toContain("You're inviting members to the TEST NAME group");
+        });
+      });
+
+      describe('when sharing with a group', () => {
+        it('includes the correct invitee, type, and formatted name', () => {
+          wrapper = createInviteGroupToGroupWrapper();
+
+          expect(wrapper.html()).toContain("You're inviting a group to the TEST NAME group");
+        });
+      });
+    });
+  });
+
   describe('submitting the invite form', () => {
     const apiErrorMessage = 'Member already exists';
 
@@ -115,8 +174,9 @@ describe('InviteMembersModal', () => {
 
       describe('when invites are sent successfully', () => {
         beforeEach(() => {
-          wrapper = createComponent({ newUsersToInvite: [user1] });
+          wrapper = createInviteMembersToGroupWrapper();
 
+          wrapper.setData({ newUsersToInvite: [user1] });
           wrapper.vm.$toast = { show: jest.fn() };
           jest.spyOn(Api, 'addGroupMembersByUserId').mockResolvedValue({ data: postData });
           jest.spyOn(wrapper.vm, 'showToastMessageSuccess');
@@ -283,5 +343,58 @@ describe('InviteMembersModal', () => {
         });
       });
     });
+
+    describe('when inviting a group to share', () => {
+      describe('when sharing the group is successful', () => {
+        const groupPostData = {
+          group_id: sharedGroup.id,
+          group_access: '10',
+          expires_at: undefined,
+          format: 'json',
+        };
+
+        beforeEach(() => {
+          wrapper = createComponent({ groupToBeSharedWith: sharedGroup });
+
+          wrapper.setData({ inviteeType: 'group' });
+          wrapper.vm.$toast = { show: jest.fn() };
+          jest.spyOn(Api, 'groupShareWithGroup').mockResolvedValue({ data: groupPostData });
+          jest.spyOn(wrapper.vm, 'showToastMessageSuccess');
+
+          clickInviteButton();
+        });
+
+        it('calls Api groupShareWithGroup with the correct params', () => {
+          expect(Api.groupShareWithGroup).toHaveBeenCalledWith(id, groupPostData);
+        });
+
+        it('displays the successful toastMessage', () => {
+          expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled();
+        });
+      });
+
+      describe('when sharing the group fails', () => {
+        beforeEach(() => {
+          wrapper = createComponent({ groupToBeSharedWith: sharedGroup });
+
+          wrapper.setData({ inviteeType: 'group' });
+          wrapper.vm.$toast = { show: jest.fn() };
+
+          jest
+            .spyOn(Api, 'groupShareWithGroup')
+            .mockRejectedValue({ response: { data: { success: false } } });
+
+          jest.spyOn(wrapper.vm, 'showToastMessageError');
+
+          clickInviteButton();
+        });
+
+        it('displays the generic error toastMessage', async () => {
+          await waitForPromises();
+
+          expect(wrapper.vm.showToastMessageError).toHaveBeenCalled();
+        });
+      });
+    });
   });
 });