diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-10 15:09:45 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-02-10 15:09:45 +0300 |
commit | ec0ecba05cf7712bc8095af9363ee8ff8d999654 (patch) | |
tree | 703b6290381599c58b502e2b94b2d273cfcb00fe /spec/frontend/admin | |
parent | b6e10aaed70a798a57a40987b3aafcbb5b2a1f78 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/admin')
-rw-r--r-- | spec/frontend/admin/users/components/actions/actions_spec.js | 98 | ||||
-rw-r--r-- | spec/frontend/admin/users/components/user_actions_spec.js | 58 | ||||
-rw-r--r-- | spec/frontend/admin/users/constants.js | 19 |
3 files changed, 156 insertions, 19 deletions
diff --git a/spec/frontend/admin/users/components/actions/actions_spec.js b/spec/frontend/admin/users/components/actions/actions_spec.js new file mode 100644 index 00000000000..22cd908449e --- /dev/null +++ b/spec/frontend/admin/users/components/actions/actions_spec.js @@ -0,0 +1,98 @@ +import { nextTick } from 'vue'; +import { shallowMount } from '@vue/test-utils'; +import { GlDropdownItem } from '@gitlab/ui'; +import { kebabCase } from 'lodash'; +import { capitalizeFirstCharacter } from '~/lib/utils/text_utility'; +import Actions from '~/admin/users/components/actions'; +import SharedDeleteAction from '~/admin/users/components/actions/shared/shared_delete_action.vue'; + +import { CONFIRMATION_ACTIONS, DELETE_ACTIONS } from '../../constants'; + +describe('Action components', () => { + let wrapper; + + const findDropdownItem = () => wrapper.find(GlDropdownItem); + + const initComponent = ({ component, props, stubs = {} } = {}) => { + wrapper = shallowMount(component, { + propsData: { + ...props, + }, + stubs, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + describe('CONFIRMATION_ACTIONS', () => { + it.each(CONFIRMATION_ACTIONS)('renders a dropdown item for "%s"', async (action) => { + initComponent({ + component: Actions[capitalizeFirstCharacter(action)], + props: { + username: 'John Doe', + path: '/test', + }, + }); + + await nextTick(); + + const div = wrapper.find('div'); + expect(div.attributes('data-path')).toBe('/test'); + expect(div.attributes('data-modal-attributes')).toContain('John Doe'); + expect(findDropdownItem().exists()).toBe(true); + }); + }); + + describe('LINK_ACTIONS', () => { + it.each` + action | method + ${'Approve'} | ${'put'} + ${'Reject'} | ${'delete'} + `( + 'renders a dropdown item link with method "$method" for "$action"', + async ({ action, method }) => { + initComponent({ + component: Actions[action], + props: { + path: '/test', + }, + }); + + await nextTick(); + + const item = wrapper.find(GlDropdownItem); + expect(item.attributes('href')).toBe('/test'); + expect(item.attributes('data-method')).toContain(method); + }, + ); + }); + + describe('DELETE_ACTION_COMPONENTS', () => { + it.each(DELETE_ACTIONS)('renders a dropdown item for "%s"', async (action) => { + initComponent({ + component: Actions[capitalizeFirstCharacter(action)], + props: { + username: 'John Doe', + paths: { + delete: '/delete', + block: '/block', + }, + }, + stubs: { SharedDeleteAction }, + }); + + await nextTick(); + + const sharedAction = wrapper.find(SharedDeleteAction); + + expect(sharedAction.attributes('data-block-user-url')).toBe('/block'); + expect(sharedAction.attributes('data-delete-user-url')).toBe('/delete'); + expect(sharedAction.attributes('data-gl-modal-action')).toBe(kebabCase(action)); + expect(sharedAction.attributes('data-username')).toBe('John Doe'); + expect(findDropdownItem().exists()).toBe(true); + }); + }); +}); diff --git a/spec/frontend/admin/users/components/user_actions_spec.js b/spec/frontend/admin/users/components/user_actions_spec.js index 78bc37233c2..ec625c228be 100644 --- a/spec/frontend/admin/users/components/user_actions_spec.js +++ b/spec/frontend/admin/users/components/user_actions_spec.js @@ -2,14 +2,12 @@ import { shallowMount } from '@vue/test-utils'; import { GlDropdownDivider } from '@gitlab/ui'; import AdminUserActions from '~/admin/users/components/user_actions.vue'; import { generateUserPaths } from '~/admin/users/utils'; +import { I18N_USER_ACTIONS } from '~/admin/users/constants'; +import Actions from '~/admin/users/components/actions'; +import { capitalizeFirstCharacter } from '~/lib/utils/text_utility'; import { users, paths } from '../mock_data'; - -const BLOCK = 'block'; -const EDIT = 'edit'; -const LDAP = 'ldapBlocked'; -const DELETE = 'delete'; -const DELETE_WITH_CONTRIBUTIONS = 'deleteWithContributions'; +import { CONFIRMATION_ACTIONS, DELETE_ACTIONS, LINK_ACTIONS, LDAP, EDIT } from '../constants'; describe('AdminUserActions component', () => { let wrapper; @@ -62,7 +60,7 @@ describe('AdminUserActions component', () => { describe('actions dropdown', () => { describe('when there are actions', () => { - const actions = [EDIT, BLOCK]; + const actions = [EDIT, ...LINK_ACTIONS]; beforeEach(() => { initComponent({ actions }); @@ -72,10 +70,31 @@ describe('AdminUserActions component', () => { expect(findActionsDropdown().exists()).toBe(true); }); - it.each(actions)('renders a dropdown item for %s', (action) => { - const dropdownAction = wrapper.find(`[data-testid="${action}"]`); - expect(dropdownAction.exists()).toBe(true); - expect(dropdownAction.attributes('href')).toBe(userPaths[action]); + describe('when there are actions that should render as links', () => { + beforeEach(() => { + initComponent({ actions: LINK_ACTIONS }); + }); + + it.each(LINK_ACTIONS)('renders an action component item for "%s"', (action) => { + const component = wrapper.find(Actions[capitalizeFirstCharacter(action)]); + + expect(component.props('path')).toBe(userPaths[action]); + expect(component.text()).toBe(I18N_USER_ACTIONS[action]); + }); + }); + + describe('when there are actions that require confirmation', () => { + beforeEach(() => { + initComponent({ actions: CONFIRMATION_ACTIONS }); + }); + + it.each(CONFIRMATION_ACTIONS)('renders an action component item for "%s"', (action) => { + const component = wrapper.find(Actions[capitalizeFirstCharacter(action)]); + + expect(component.props('username')).toBe(user.name); + expect(component.props('path')).toBe(userPaths[action]); + expect(component.text()).toBe(I18N_USER_ACTIONS[action]); + }); }); describe('when there is a LDAP action', () => { @@ -87,14 +106,13 @@ describe('AdminUserActions component', () => { const dropdownAction = wrapper.find(`[data-testid="${LDAP}"]`); expect(dropdownAction.exists()).toBe(true); expect(dropdownAction.attributes('href')).toBe(undefined); + expect(dropdownAction.text()).toBe(I18N_USER_ACTIONS[LDAP]); }); }); describe('when there is a delete action', () => { - const deleteActions = [DELETE, DELETE_WITH_CONTRIBUTIONS]; - beforeEach(() => { - initComponent({ actions: [BLOCK, ...deleteActions] }); + initComponent({ actions: [LDAP, ...DELETE_ACTIONS] }); }); it('renders a dropdown divider', () => { @@ -103,13 +121,15 @@ describe('AdminUserActions component', () => { it('only renders delete dropdown items for actions containing the word "delete"', () => { const { length } = wrapper.findAll(`[data-testid*="delete-"]`); - expect(length).toBe(deleteActions.length); + expect(length).toBe(DELETE_ACTIONS.length); }); - it.each(deleteActions)('renders a delete dropdown item for %s', (action) => { - const deleteAction = wrapper.find(`[data-testid="delete-${action}"]`); - expect(deleteAction.exists()).toBe(true); - expect(deleteAction.attributes('href')).toBe(userPaths[action]); + it.each(DELETE_ACTIONS)('renders a delete action component item for "%s"', (action) => { + const component = wrapper.find(Actions[capitalizeFirstCharacter(action)]); + + expect(component.props('username')).toBe(user.name); + expect(component.props('paths')).toEqual(userPaths); + expect(component.text()).toBe(I18N_USER_ACTIONS[action]); }); }); diff --git a/spec/frontend/admin/users/constants.js b/spec/frontend/admin/users/constants.js new file mode 100644 index 00000000000..60abdc6c248 --- /dev/null +++ b/spec/frontend/admin/users/constants.js @@ -0,0 +1,19 @@ +const BLOCK = 'block'; +const UNBLOCK = 'unblock'; +const DELETE = 'delete'; +const DELETE_WITH_CONTRIBUTIONS = 'deleteWithContributions'; +const UNLOCK = 'unlock'; +const ACTIVATE = 'activate'; +const DEACTIVATE = 'deactivate'; +const REJECT = 'reject'; +const APPROVE = 'approve'; + +export const EDIT = 'edit'; + +export const LDAP = 'ldapBlocked'; + +export const LINK_ACTIONS = [APPROVE, REJECT]; + +export const CONFIRMATION_ACTIONS = [ACTIVATE, BLOCK, DEACTIVATE, UNLOCK, UNBLOCK]; + +export const DELETE_ACTIONS = [DELETE, DELETE_WITH_CONTRIBUTIONS]; |