Add latest changes from gitlab-org/gitlab@master

2 files changed, 69 insertions, 6 deletions

diff --git a/spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js b/spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js
index 99cb864ce34..7c1a4ff1085 100644
--- a/spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js
+++ b/spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js
@@ -1,6 +1,6 @@
 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { GlDeprecatedDropdownItem, GlDropdown } from '@gitlab/ui';
+import { GlDropdownItem, GlDropdown } from '@gitlab/ui';
 import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown.vue';
 import createStore from '~/deploy_freeze/store';
 
@@ -29,8 +29,8 @@ describe('Deploy freeze timezone dropdown', () => {
     wrapper.setData({ searchTerm });
   };
 
-  const findAllDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
-  const findDropdownItemByIndex = index => wrapper.findAll(GlDeprecatedDropdownItem).at(index);
+  const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem);
+  const findDropdownItemByIndex = index => wrapper.findAll(GlDropdownItem).at(index);
 
   afterEach(() => {
     wrapper.destroy();
diff --git a/spec/frontend/vue_shared/components/members/table/role_dropdown_spec.js b/spec/frontend/vue_shared/components/members/table/role_dropdown_spec.js
index 5e5a013018b..1e47953a510 100644
--- a/spec/frontend/vue_shared/components/members/table/role_dropdown_spec.js
+++ b/spec/frontend/vue_shared/components/members/table/role_dropdown_spec.js
@@ -1,13 +1,30 @@
-import { mount, createWrapper } from '@vue/test-utils';
+import { mount, createWrapper, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
 import { nextTick } from 'vue';
 import { within } from '@testing-library/dom';
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
+import waitForPromises from 'helpers/wait_for_promises';
 import RoleDropdown from '~/vue_shared/components/members/table/role_dropdown.vue';
 import { member } from '../mock_data';
 
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
 describe('RoleDropdown', () => {
   let wrapper;
+  let actions;
+  const $toast = {
+    show: jest.fn(),
+  };
+
+  const createStore = () => {
+    actions = {
+      updateMemberRole: jest.fn(() => Promise.resolve()),
+    };
+
+    return new Vuex.Store({ actions });
+  };
 
   const createComponent = (propsData = {}) => {
     wrapper = mount(RoleDropdown, {
@@ -15,6 +32,11 @@ describe('RoleDropdown', () => {
         member,
         ...propsData,
       },
+      localVue,
+      store: createStore(),
+      mocks: {
+        $toast,
+      },
     });
   };
 
@@ -22,7 +44,11 @@ describe('RoleDropdown', () => {
   const getByTextInDropdownMenu = (text, options = {}) =>
     createWrapper(within(getDropdownMenu()).getByText(text, options));
   const getDropdownItemByText = text =>
-    getByTextInDropdownMenu(text, { selector: '[role="menuitem"] p' });
+    createWrapper(
+      within(getDropdownMenu())
+        .getByText(text, { selector: '[role="menuitem"] p' })
+        .closest('[role="menuitem"]'),
+    );
   const getCheckedDropdownItem = () =>
     wrapper
       .findAll(GlDropdownItem)
@@ -55,10 +81,47 @@ describe('RoleDropdown', () => {
       expect(getByTextInDropdownMenu('Change permissions').exists()).toBe(true);
     });
 
-    it('sets dropdown toggle and checks selected role', async () => {
+    it('sets dropdown toggle and checks selected role', () => {
       expect(findDropdownToggle().text()).toBe('Owner');
       expect(getCheckedDropdownItem().text()).toBe('Owner');
     });
+
+    describe('when dropdown item is selected', () => {
+      it('does nothing if the item selected was already selected', () => {
+        getDropdownItemByText('Owner').trigger('click');
+
+        expect(actions.updateMemberRole).not.toHaveBeenCalled();
+      });
+
+      it('calls `updateMemberRole` Vuex action', () => {
+        getDropdownItemByText('Developer').trigger('click');
+
+        expect(actions.updateMemberRole).toHaveBeenCalledWith(expect.any(Object), {
+          memberId: member.id,
+          accessLevel: { integerValue: 30, stringValue: 'Developer' },
+        });
+      });
+
+      it('displays toast when successful', async () => {
+        getDropdownItemByText('Developer').trigger('click');
+
+        await waitForPromises();
+
+        expect($toast.show).toHaveBeenCalledWith('Role updated successfully.');
+      });
+
+      it('disables dropdown while waiting for `updateMemberRole` to resolve', async () => {
+        getDropdownItemByText('Developer').trigger('click');
+
+        await nextTick();
+
+        expect(findDropdown().attributes('disabled')).toBe('disabled');
+
+        await waitForPromises();
+
+        expect(findDropdown().attributes('disabled')).toBeUndefined();
+      });
+    });
   });
 
   it("sets initial dropdown toggle value to member's role", () => {