Add latest changes from gitlab-org/gitlab@master

1 files changed, 106 insertions, 30 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 267b46d8749..702dc20619d 100644
--- a/spec/frontend/invite_members/components/invite_members_modal_spec.js
+++ b/spec/frontend/invite_members/components/invite_members_modal_spec.js
@@ -6,6 +6,7 @@ import {
   GlSprintf,
   GlLink,
   GlModal,
+  GlFormCheckboxGroup,
 } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import { stubComponent } from 'helpers/stub_component';
@@ -15,7 +16,8 @@ import Api from '~/api';
 import ExperimentTracking from '~/experimentation/experiment_tracking';
 import InviteMembersModal from '~/invite_members/components/invite_members_modal.vue';
 import MembersTokenSelect from '~/invite_members/components/members_token_select.vue';
-import { INVITE_MEMBERS_IN_COMMENT } from '~/invite_members/constants';
+import { INVITE_MEMBERS_IN_COMMENT, MEMBER_AREAS_OF_FOCUS } from '~/invite_members/constants';
+import eventHub from '~/invite_members/event_hub';
 import axios from '~/lib/utils/axios_utils';
 import httpStatus from '~/lib/utils/http_status';
 import { apiPaths, membersApiResponse, invitationsApiResponse } from '../mock_data/api_responses';
@@ -32,7 +34,12 @@ const inviteeType = 'members';
 const accessLevels = { Guest: 10, Reporter: 20, Developer: 30, Maintainer: 40, Owner: 50 };
 const defaultAccessLevel = 10;
 const inviteSource = 'unknown';
+const noSelectionAreasOfFocus = ['no_selection'];
 const helpLink = 'https://example.com';
+const areasOfFocusOptions = [
+  { text: 'area1', value: 'area1' },
+  { text: 'area2', value: 'area2' },
+];
 
 const user1 = { id: 1, name: 'Name One', username: 'one_1', avatar_url: '' };
 const user2 = { id: 2, name: 'Name Two', username: 'one_2', avatar_url: '' };
@@ -58,7 +65,9 @@ const createComponent = (data = {}, props = {}) => {
       isProject,
       inviteeType,
       accessLevels,
+      areasOfFocusOptions,
       defaultAccessLevel,
+      noSelectionAreasOfFocus,
       helpLink,
       ...props,
     },
@@ -119,6 +128,7 @@ describe('InviteMembersModal', () => {
   const findMembersFormGroup = () => wrapper.findByTestId('members-form-group');
   const membersFormGroupInvalidFeedback = () => findMembersFormGroup().props('invalidFeedback');
   const findMembersSelect = () => wrapper.findComponent(MembersTokenSelect);
+  const findAreaofFocusCheckBoxGroup = () => wrapper.findComponent(GlFormCheckboxGroup);
 
   describe('rendering the modal', () => {
     beforeEach(() => {
@@ -164,6 +174,21 @@ describe('InviteMembersModal', () => {
     });
   });
 
+  describe('rendering the areas_of_focus', () => {
+    it('renders the areas_of_focus checkboxes', () => {
+      createComponent();
+
+      expect(findAreaofFocusCheckBoxGroup().props('options')).toBe(areasOfFocusOptions);
+      expect(findAreaofFocusCheckBoxGroup().exists()).toBe(true);
+    });
+
+    it('does not render the areas_of_focus checkboxes', () => {
+      createComponent({}, { areasOfFocusOptions: [] });
+
+      expect(findAreaofFocusCheckBoxGroup().exists()).toBe(false);
+    });
+  });
+
   describe('displaying the correct introText', () => {
     describe('when inviting to a project', () => {
       describe('when inviting members', () => {
@@ -214,6 +239,20 @@ describe('InviteMembersModal', () => {
       "email 'email@example.com' does not match the allowed domains: example1.org";
     const expectedSyntaxError = 'email contains an invalid email address';
 
+    it('calls the API with the expected focus data when an areas_of_focus checkbox is clicked', () => {
+      const spy = jest.spyOn(Api, 'addGroupMembersByUserId');
+      const expectedFocus = [areasOfFocusOptions[0].value];
+      createComponent({ newUsersToInvite: [user1] });
+
+      findAreaofFocusCheckBoxGroup().vm.$emit('input', expectedFocus);
+      clickInviteButton();
+
+      expect(spy).toHaveBeenCalledWith(
+        user1.id.toString(),
+        expect.objectContaining({ areas_of_focus: expectedFocus }),
+      );
+    });
+
     describe('when inviting an existing user to group by user ID', () => {
       const postData = {
         user_id: '1,2',
@@ -221,6 +260,7 @@ describe('InviteMembersModal', () => {
         expires_at: undefined,
         invite_source: inviteSource,
         format: 'json',
+        areas_of_focus: noSelectionAreasOfFocus,
       };
 
       describe('when member is added successfully', () => {
@@ -230,30 +270,34 @@ describe('InviteMembersModal', () => {
           wrapper.vm.$toast = { show: jest.fn() };
           jest.spyOn(Api, 'addGroupMembersByUserId').mockResolvedValue({ data: postData });
           jest.spyOn(wrapper.vm, 'showToastMessageSuccess');
-
-          clickInviteButton();
         });
 
-        it('sets isLoading on the Invite button when it is clicked', () => {
-          expect(findInviteButton().props('loading')).toBe(true);
-        });
+        it('includes the non-default selected areas of focus', () => {
+          const focus = ['abc'];
+          const updatedPostData = { ...postData, areas_of_focus: focus };
+          wrapper.setData({ selectedAreasOfFocus: focus });
 
-        it('removes isLoading from the Invite button when request completes', async () => {
-          await waitForPromises();
+          clickInviteButton();
 
-          expect(findInviteButton().props('loading')).toBe(false);
+          expect(Api.addGroupMembersByUserId).toHaveBeenCalledWith(id, updatedPostData);
         });
 
-        it('calls Api addGroupMembersByUserId with the correct params', async () => {
-          await waitForPromises;
+        describe('when triggered from regular mounting', () => {
+          beforeEach(() => {
+            clickInviteButton();
+          });
 
-          expect(Api.addGroupMembersByUserId).toHaveBeenCalledWith(id, postData);
-        });
+          it('sets isLoading on the Invite button when it is clicked', () => {
+            expect(findInviteButton().props('loading')).toBe(true);
+          });
 
-        it('displays the successful toastMessage', async () => {
-          await waitForPromises;
+          it('calls Api addGroupMembersByUserId with the correct params', () => {
+            expect(Api.addGroupMembersByUserId).toHaveBeenCalledWith(id, postData);
+          });
 
-          expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled();
+          it('displays the successful toastMessage', () => {
+            expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled();
+          });
         });
       });
 
@@ -353,6 +397,7 @@ describe('InviteMembersModal', () => {
         expires_at: undefined,
         email: 'email@example.com',
         invite_source: inviteSource,
+        areas_of_focus: noSelectionAreasOfFocus,
         format: 'json',
       };
 
@@ -363,16 +408,30 @@ describe('InviteMembersModal', () => {
           wrapper.vm.$toast = { show: jest.fn() };
           jest.spyOn(Api, 'inviteGroupMembersByEmail').mockResolvedValue({ data: postData });
           jest.spyOn(wrapper.vm, 'showToastMessageSuccess');
+        });
+
+        it('includes the non-default selected areas of focus', () => {
+          const focus = ['abc'];
+          const updatedPostData = { ...postData, areas_of_focus: focus };
+          wrapper.setData({ selectedAreasOfFocus: focus });
 
           clickInviteButton();
-        });
 
-        it('calls Api inviteGroupMembersByEmail with the correct params', () => {
-          expect(Api.inviteGroupMembersByEmail).toHaveBeenCalledWith(id, postData);
+          expect(Api.inviteGroupMembersByEmail).toHaveBeenCalledWith(id, updatedPostData);
         });
 
-        it('displays the successful toastMessage', () => {
-          expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled();
+        describe('when triggered from regular mounting', () => {
+          beforeEach(() => {
+            clickInviteButton();
+          });
+
+          it('calls Api inviteGroupMembersByEmail with the correct params', () => {
+            expect(Api.inviteGroupMembersByEmail).toHaveBeenCalledWith(id, postData);
+          });
+
+          it('displays the successful toastMessage', () => {
+            expect(wrapper.vm.showToastMessageSuccess).toHaveBeenCalled();
+          });
         });
       });
 
@@ -465,6 +524,7 @@ describe('InviteMembersModal', () => {
         access_level: defaultAccessLevel,
         expires_at: undefined,
         invite_source: inviteSource,
+        areas_of_focus: noSelectionAreasOfFocus,
         format: 'json',
       };
 
@@ -501,7 +561,7 @@ describe('InviteMembersModal', () => {
         });
 
         it('calls Apis with the invite source passed through to openModal', () => {
-          wrapper.vm.openModal({ inviteeType: 'members', source: '_invite_source_' });
+          eventHub.$emit('openModal', { inviteeType: 'members', source: '_invite_source_' });
 
           clickInviteButton();
 
@@ -579,9 +639,7 @@ describe('InviteMembersModal', () => {
           clickInviteButton();
         });
 
-        it('displays the generic error message', async () => {
-          await waitForPromises();
-
+        it('displays the generic error message', () => {
           expect(membersFormGroupInvalidFeedback()).toBe('Something went wrong');
         });
       });
@@ -596,7 +654,7 @@ describe('InviteMembersModal', () => {
       });
 
       it('tracks the invite', () => {
-        wrapper.vm.openModal({ inviteeType: 'members', source: INVITE_MEMBERS_IN_COMMENT });
+        eventHub.$emit('openModal', { inviteeType: 'members', source: INVITE_MEMBERS_IN_COMMENT });
 
         clickInviteButton();
 
@@ -605,19 +663,37 @@ describe('InviteMembersModal', () => {
       });
 
       it('does not track invite for unknown source', () => {
-        wrapper.vm.openModal({ inviteeType: 'members', source: 'unknown' });
+        eventHub.$emit('openModal', { inviteeType: 'members', source: 'unknown' });
 
         clickInviteButton();
 
-        expect(ExperimentTracking).not.toHaveBeenCalled();
+        expect(ExperimentTracking).not.toHaveBeenCalledWith(INVITE_MEMBERS_IN_COMMENT);
       });
 
       it('does not track invite undefined source', () => {
-        wrapper.vm.openModal({ inviteeType: 'members' });
+        eventHub.$emit('openModal', { inviteeType: 'members' });
+
+        clickInviteButton();
+
+        expect(ExperimentTracking).not.toHaveBeenCalledWith(INVITE_MEMBERS_IN_COMMENT);
+      });
+
+      it('tracks the view for areas_of_focus', () => {
+        eventHub.$emit('openModal', { inviteeType: 'members' });
+
+        expect(ExperimentTracking).toHaveBeenCalledWith(MEMBER_AREAS_OF_FOCUS.name);
+        expect(ExperimentTracking.prototype.event).toHaveBeenCalledWith(MEMBER_AREAS_OF_FOCUS.view);
+      });
+
+      it('tracks the invite for areas_of_focus', () => {
+        eventHub.$emit('openModal', { inviteeType: 'members' });
 
         clickInviteButton();
 
-        expect(ExperimentTracking).not.toHaveBeenCalled();
+        expect(ExperimentTracking).toHaveBeenCalledWith(MEMBER_AREAS_OF_FOCUS.name);
+        expect(ExperimentTracking.prototype.event).toHaveBeenCalledWith(
+          MEMBER_AREAS_OF_FOCUS.submit,
+        );
       });
     });
   });