Add latest changes from gitlab-org/gitlab@master

3 files changed, 64 insertions, 6 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 4136de75545..358d70d8117 100644
--- a/spec/frontend/invite_members/components/invite_groups_modal_spec.js
+++ b/spec/frontend/invite_members/components/invite_groups_modal_spec.js
@@ -77,6 +77,16 @@ describe('InviteGroupsModal', () => {
   const clickInviteButton = emitClickFromModal('invite-modal-submit');
   const clickCancelButton = emitClickFromModal('invite-modal-cancel');
 
+  describe('passes correct props to InviteModalBase', () => {
+    it('set accessLevel', () => {
+      createInviteGroupToProjectWrapper();
+
+      expect(findBase().props('accessLevels')).toMatchObject({
+        validRoles: propsData.accessLevels,
+      });
+    });
+  });
+
   describe('displaying the correct introText and form group description', () => {
     describe('when inviting to a project', () => {
       it('includes the correct type, and formatted intro text', () => {
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 19b7fad5fc8..ad3174b8946 100644
--- a/spec/frontend/invite_members/components/invite_members_modal_spec.js
+++ b/spec/frontend/invite_members/components/invite_members_modal_spec.js
@@ -128,6 +128,7 @@ describe('InviteMembersModal', () => {
   });
 
   const findModal = () => wrapper.findComponent(GlModal);
+  const findBase = () => wrapper.findComponent(InviteModalBase);
   const findIntroText = () => wrapper.findByTestId('modal-base-intro-text').text();
   const findEmptyInvitesAlert = () => wrapper.findByTestId('empty-invites-alert');
   const findMemberErrorAlert = () => wrapper.findByTestId('alert-member-error');
@@ -168,6 +169,22 @@ describe('InviteMembersModal', () => {
     await nextTick();
   };
 
+  describe('passes correct props to InviteModalBase', () => {
+    it('set defaultMemberRoleId', () => {
+      createInviteMembersToProjectWrapper();
+
+      expect(findBase().props('defaultMemberRoleId')).toBeNull();
+    });
+
+    it('set accessLevel', () => {
+      createInviteMembersToProjectWrapper();
+
+      expect(findBase().props('accessLevels')).toMatchObject({
+        validRoles: propsData.accessLevels,
+      });
+    });
+  });
+
   describe('rendering with tracking considerations', () => {
     describe('when inviting to a project', () => {
       describe('when inviting members', () => {
diff --git a/spec/frontend/invite_members/components/invite_modal_base_spec.js b/spec/frontend/invite_members/components/invite_modal_base_spec.js
index 345df1722bc..c26d1d921a5 100644
--- a/spec/frontend/invite_members/components/invite_modal_base_spec.js
+++ b/spec/frontend/invite_members/components/invite_modal_base_spec.js
@@ -7,6 +7,7 @@ import {
   GlModal,
   GlIcon,
 } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { stubComponent } from 'helpers/stub_component';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import {
@@ -45,6 +46,7 @@ describe('InviteModalBase', () => {
     wrapper = mountFn(InviteModalBase, {
       propsData: {
         ...propsData,
+        accessLevels: { validRoles: propsData.accessLevels },
         ...props,
       },
       stubs: {
@@ -58,8 +60,8 @@ describe('InviteModalBase', () => {
     });
   };
 
-  const findListbox = () => extendedWrapper(wrapper.findComponent(GlCollapsibleListbox));
-  const findListboxOptions = () => findListbox().findAllByRole('option');
+  const findCollapsibleListbox = () => extendedWrapper(wrapper.findComponent(GlCollapsibleListbox));
+  const findCollapsibleListboxOptions = () => findCollapsibleListbox().findAllByRole('option');
   const findDatepicker = () => wrapper.findComponent(GlDatepicker);
   const findLink = () => wrapper.findComponent(GlLink);
   const findIcon = () => wrapper.findComponent(GlIcon);
@@ -106,18 +108,47 @@ describe('InviteModalBase', () => {
     describe('rendering the access levels dropdown', () => {
       beforeEach(() => {
         createComponent({
+          props: { isLoadingRoles: true },
           mountFn: mountExtended,
         });
       });
 
+      it('passes `isLoadingRoles` prop to the dropdown', () => {
+        expect(findCollapsibleListbox().props('loading')).toBe(true);
+      });
+
       it('sets the default dropdown text to the default access level name', () => {
-        expect(findListbox().exists()).toBe(true);
-        const option = findListbox().find('[aria-selected]');
+        expect(findCollapsibleListbox().exists()).toBe(true);
+        const option = findCollapsibleListbox().find('[aria-selected]');
+        expect(option.text()).toBe('Reporter');
+      });
+
+      it('updates the selection base on changes in the dropdown', async () => {
+        wrapper.setProps({ accessLevels: { validRoles: [] } });
+        expect(findCollapsibleListbox().props('selected')).not.toHaveLength(0);
+        await nextTick();
+
+        expect(findCollapsibleListboxOptions()).toHaveLength(0);
+        expect(findCollapsibleListbox().props('selected')).toHaveLength(0);
+      });
+
+      it('reset the dropdown to the default option', async () => {
+        const developerOption = findCollapsibleListboxOptions().at(2);
+        await developerOption.trigger('click');
+
+        let option;
+        option = findCollapsibleListbox().find('[aria-selected]');
+        expect(option.text()).toBe('Developer');
+
+        // Reset the dropdown by clicking cancel button
+        await findCancelButton().trigger('click');
+
+        option = findCollapsibleListbox().find('[aria-selected]');
         expect(option.text()).toBe('Reporter');
       });
 
       it('renders dropdown items for each accessLevel', () => {
-        expect(findListboxOptions()).toHaveLength(5);
+        expect(findCollapsibleListboxOptions()).toHaveLength(5);
       });
     });
 
@@ -215,7 +246,7 @@ describe('InviteModalBase', () => {
       it('renders correct blocks', () => {
         expect(findIcon().exists()).toBe(false);
         expect(findDisabledInput().exists()).toBe(false);
-        expect(findListbox().exists()).toBe(true);
+        expect(findCollapsibleListbox().exists()).toBe(true);
         expect(findDatepicker().exists()).toBe(true);
         expect(wrapper.findComponent(GlModal).text()).toMatch(textRegex);
       });