diff options
Diffstat (limited to 'spec/frontend/members/components/table')
8 files changed, 71 insertions, 58 deletions
diff --git a/spec/frontend/members/components/table/created_at_spec.js b/spec/frontend/members/components/table/created_at_spec.js index fa31177564b..2c0493e7c59 100644 --- a/spec/frontend/members/components/table/created_at_spec.js +++ b/spec/frontend/members/components/table/created_at_spec.js @@ -20,10 +20,6 @@ describe('CreatedAt', () => { }); }; - afterEach(() => { - wrapper.destroy(); - }); - describe('created at text', () => { beforeEach(() => { createComponent(); diff --git a/spec/frontend/members/components/table/expiration_datepicker_spec.js b/spec/frontend/members/components/table/expiration_datepicker_spec.js index 9b8f053348b..9176a02a447 100644 --- a/spec/frontend/members/components/table/expiration_datepicker_spec.js +++ b/spec/frontend/members/components/table/expiration_datepicker_spec.js @@ -58,10 +58,6 @@ describe('ExpirationDatepicker', () => { const findInput = () => wrapper.find('input'); const findDatepicker = () => wrapper.findComponent(GlDatepicker); - afterEach(() => { - wrapper.destroy(); - }); - describe('datepicker input', () => { it('sets `member.expiresAt` as initial date', async () => { createComponent({ member: { ...member, expiresAt: '2020-03-17T00:00:00Z' } }); @@ -97,7 +93,7 @@ describe('ExpirationDatepicker', () => { }); describe('when datepicker is changed', () => { - beforeEach(async () => { + beforeEach(() => { createComponent(); findDatepicker().vm.$emit('input', new Date('2020-03-17')); diff --git a/spec/frontend/members/components/table/member_action_buttons_spec.js b/spec/frontend/members/components/table/member_action_buttons_spec.js index 95db30a3683..3a04d1dcb0a 100644 --- a/spec/frontend/members/components/table/member_action_buttons_spec.js +++ b/spec/frontend/members/components/table/member_action_buttons_spec.js @@ -23,10 +23,6 @@ describe('MemberActions', () => { }); }; - afterEach(() => { - wrapper.destroy(); - }); - it.each` memberType | member | expectedComponent | expectedComponentName ${MEMBER_TYPES.user} | ${memberMock} | ${UserActionDropdown} | ${'UserActionDropdown'} diff --git a/spec/frontend/members/components/table/member_avatar_spec.js b/spec/frontend/members/components/table/member_avatar_spec.js index dc5c97f41df..369f8a06cfd 100644 --- a/spec/frontend/members/components/table/member_avatar_spec.js +++ b/spec/frontend/members/components/table/member_avatar_spec.js @@ -18,10 +18,6 @@ describe('MemberList', () => { }); }; - afterEach(() => { - wrapper.destroy(); - }); - it.each` memberType | member | expectedComponent | expectedComponentName ${MEMBER_TYPES.user} | ${memberMock} | ${UserAvatar} | ${'UserAvatar'} diff --git a/spec/frontend/members/components/table/member_source_spec.js b/spec/frontend/members/components/table/member_source_spec.js index fbfd0ca7ae7..bbfbb19fd92 100644 --- a/spec/frontend/members/components/table/member_source_spec.js +++ b/spec/frontend/members/components/table/member_source_spec.js @@ -23,17 +23,13 @@ describe('MemberSource', () => { ...propsData, }, directives: { - GlTooltip: createMockDirective(), + GlTooltip: createMockDirective('gl-tooltip'), }, }); }; const getTooltipDirective = (elementWrapper) => getBinding(elementWrapper.element, 'gl-tooltip'); - afterEach(() => { - wrapper.destroy(); - }); - describe('direct member', () => { describe('when created by is available', () => { it('displays "Direct member by <user name>"', () => { diff --git a/spec/frontend/members/components/table/members_table_cell_spec.js b/spec/frontend/members/components/table/members_table_cell_spec.js index ac5d83d028d..1c6f1b086cf 100644 --- a/spec/frontend/members/components/table/members_table_cell_spec.js +++ b/spec/frontend/members/components/table/members_table_cell_spec.js @@ -97,11 +97,6 @@ describe('MembersTableCell', () => { }); }; - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - it.each` member | expectedMemberType ${memberMock} | ${MEMBER_TYPES.user} diff --git a/spec/frontend/members/components/table/members_table_spec.js b/spec/frontend/members/components/table/members_table_spec.js index b8e0d73d8f6..e3c89bfed53 100644 --- a/spec/frontend/members/components/table/members_table_spec.js +++ b/spec/frontend/members/components/table/members_table_spec.js @@ -96,10 +96,6 @@ describe('MembersTable', () => { ); }; - afterEach(() => { - wrapper.destroy(); - }); - describe('fields', () => { const memberCanUpdate = { ...directMember, diff --git a/spec/frontend/members/components/table/role_dropdown_spec.js b/spec/frontend/members/components/table/role_dropdown_spec.js index a11f67be8f5..1045e3f9849 100644 --- a/spec/frontend/members/components/table/role_dropdown_spec.js +++ b/spec/frontend/members/components/table/role_dropdown_spec.js @@ -1,5 +1,6 @@ import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; +import * as Sentry from '@sentry/browser'; import { within } from '@testing-library/dom'; import { mount, createWrapper } from '@vue/test-utils'; import Vue, { nextTick } from 'vue'; @@ -12,6 +13,7 @@ import { member } from '../../mock_data'; Vue.use(Vuex); jest.mock('ee_else_ce/members/guest_overage_confirm_action'); +jest.mock('@sentry/browser'); describe('RoleDropdown', () => { let wrapper; @@ -20,9 +22,9 @@ describe('RoleDropdown', () => { show: jest.fn(), }; - const createStore = () => { + const createStore = ({ updateMemberRoleReturn = Promise.resolve() } = {}) => { actions = { - updateMemberRole: jest.fn(() => Promise.resolve()), + updateMemberRole: jest.fn(() => updateMemberRoleReturn), }; return new Vuex.Store({ @@ -32,7 +34,7 @@ describe('RoleDropdown', () => { }); }; - const createComponent = (propsData = {}) => { + const createComponent = (propsData = {}, store = createStore()) => { wrapper = mount(RoleDropdown, { provide: { namespace: MEMBER_TYPES.user, @@ -46,7 +48,7 @@ describe('RoleDropdown', () => { permissions: {}, ...propsData, }, - store: createStore(), + store, mocks: { $toast, }, @@ -67,27 +69,19 @@ describe('RoleDropdown', () => { .findAllComponents(GlDropdownItem) .wrappers.find((dropdownItemWrapper) => dropdownItemWrapper.props('isChecked')); - const findDropdownToggle = () => wrapper.find('button[aria-haspopup="true"]'); + const findDropdownToggle = () => wrapper.find('button[aria-haspopup="menu"]'); const findDropdown = () => wrapper.findComponent(GlDropdown); - let originalGon; - beforeEach(() => { - originalGon = window.gon; gon.features = { showOverageOnRolePromotion: true }; }); - afterEach(() => { - window.gon = originalGon; - wrapper.destroy(); - }); - describe('when dropdown is open', () => { - beforeEach(() => { + beforeEach(async () => { guestOverageConfirmAction.mockReturnValue(true); createComponent(); - return findDropdownToggle().trigger('click'); + await findDropdownToggle().trigger('click'); }); it('renders all valid roles', () => { @@ -121,26 +115,74 @@ describe('RoleDropdown', () => { }); }); - it('displays toast when successful', async () => { - await getDropdownItemByText('Developer').trigger('click'); + describe('when updateMemberRole is successful', () => { + it('displays toast', async () => { + await getDropdownItemByText('Developer').trigger('click'); - await nextTick(); + await nextTick(); - expect($toast.show).toHaveBeenCalledWith('Role updated successfully.'); - }); + expect($toast.show).toHaveBeenCalledWith('Role updated successfully.'); + }); - it('puts dropdown in loading state while waiting for `updateMemberRole` to resolve', async () => { - await getDropdownItemByText('Developer').trigger('click'); + it('puts dropdown in loading state while waiting for `updateMemberRole` to resolve', async () => { + await getDropdownItemByText('Developer').trigger('click'); - expect(findDropdown().props('loading')).toBe(true); + expect(findDropdown().props('loading')).toBe(true); + }); + + it('enables dropdown after `updateMemberRole` resolves', async () => { + await getDropdownItemByText('Developer').trigger('click'); + + await waitForPromises(); + + expect(findDropdown().props('disabled')).toBe(false); + }); + + it('does not log error to Sentry', async () => { + await getDropdownItemByText('Developer').trigger('click'); + + await waitForPromises(); + + expect(Sentry.captureException).not.toHaveBeenCalled(); + }); }); - it('enables dropdown after `updateMemberRole` resolves', async () => { - await getDropdownItemByText('Developer').trigger('click'); + describe('when updateMemberRole is not successful', () => { + const reason = 'Rejected ☹️'; + + beforeEach(() => { + createComponent({}, createStore({ updateMemberRoleReturn: Promise.reject(reason) })); + }); + + it('does not display toast', async () => { + await getDropdownItemByText('Developer').trigger('click'); + + await nextTick(); + + expect($toast.show).not.toHaveBeenCalled(); + }); + + it('puts dropdown in loading state while waiting for `updateMemberRole` to resolve', async () => { + await getDropdownItemByText('Developer').trigger('click'); - await waitForPromises(); + expect(findDropdown().props('loading')).toBe(true); + }); + + it('enables dropdown after `updateMemberRole` resolves', async () => { + await getDropdownItemByText('Developer').trigger('click'); + + await waitForPromises(); + + expect(findDropdown().props('disabled')).toBe(false); + }); + + it('logs error to Sentry', async () => { + await getDropdownItemByText('Developer').trigger('click'); - expect(findDropdown().props('disabled')).toBe(false); + await waitForPromises(); + + expect(Sentry.captureException).toHaveBeenCalledWith(reason); + }); }); }); }); |