1 files changed, 45 insertions, 10 deletions

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 e70c83a424e..c26d1d921a5 100644
--- a/spec/frontend/invite_members/components/invite_modal_base_spec.js
+++ b/spec/frontend/invite_members/components/invite_modal_base_spec.js
@@ -1,5 +1,5 @@
 import {
-  GlFormSelect,
+  GlCollapsibleListbox,
   GlDatepicker,
   GlFormGroup,
   GlLink,
@@ -7,9 +7,14 @@ import {
   GlModal,
   GlIcon,
 } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { stubComponent } from 'helpers/stub_component';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
-import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import {
+  mountExtended,
+  shallowMountExtended,
+  extendedWrapper,
+} from 'helpers/vue_test_utils_helper';
 import InviteModalBase from '~/invite_members/components/invite_modal_base.vue';
 import ContentTransition from '~/vue_shared/components/content_transition.vue';
 
@@ -31,7 +36,7 @@ describe('InviteModalBase', () => {
         ? {}
         : {
             ContentTransition,
-            GlFormSelect: true,
+            GlCollapsibleListbox: true,
             GlSprintf,
             GlFormGroup: stubComponent(GlFormGroup, {
               props: ['state', 'invalidFeedback'],
@@ -41,6 +46,7 @@ describe('InviteModalBase', () => {
     wrapper = mountFn(InviteModalBase, {
       propsData: {
         ...propsData,
+        accessLevels: { validRoles: propsData.accessLevels },
         ...props,
       },
       stubs: {
@@ -54,8 +60,8 @@ describe('InviteModalBase', () => {
     });
   };
 
-  const findFormSelect = () => wrapper.findComponent(GlFormSelect);
-  const findFormSelectOptions = () => findFormSelect().findAllComponents('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);
@@ -91,7 +97,6 @@ describe('InviteModalBase', () => {
       const actionButton = findActionButton();
 
       expect(actionButton.text()).toBe(INVITE_BUTTON_TEXT);
-      expect(actionButton.attributes('data-qa-selector')).toBe('invite_button');
 
       expect(actionButton.props()).toMatchObject({
         variant: 'confirm',
@@ -103,17 +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(findFormSelect().exists()).toBe(true);
-        expect(findFormSelect().element.value).toBe('10');
+        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(findFormSelectOptions()).toHaveLength(5);
+        expect(findCollapsibleListboxOptions()).toHaveLength(5);
       });
     });
 
@@ -211,7 +246,7 @@ describe('InviteModalBase', () => {
       it('renders correct blocks', () => {
         expect(findIcon().exists()).toBe(false);
         expect(findDisabledInput().exists()).toBe(false);
-        expect(findFormSelect().exists()).toBe(true);
+        expect(findCollapsibleListbox().exists()).toBe(true);
         expect(findDatepicker().exists()).toBe(true);
         expect(wrapper.findComponent(GlModal).text()).toMatch(textRegex);
       });