diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-16 00:09:12 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-10-16 00:09:12 +0300 |
commit | c083f926c5714ee4dcbb3ae497b14d4cb31aa794 (patch) | |
tree | 2bc13107c4396e3263afe3c13b7e9e32f06a843b /spec/frontend | |
parent | 316fbf9f95dcdd16775f0339415572c3195eea92 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
-rw-r--r-- | spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js | 6 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/members/table/role_dropdown_spec.js | 69 |
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", () => { |