diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-01-22 21:09:10 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-01-22 21:09:10 +0300 |
commit | 852877d997ee2b22f185d388992382986a8f2e1d (patch) | |
tree | 2fe0263ec73d5d902a90a3fc798983d5b7bea332 /spec/frontend/admin | |
parent | 7e81076708c00325c922928aa593070b1c9b402c (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/admin')
3 files changed, 188 insertions, 10 deletions
diff --git a/spec/frontend/admin/users/components/user_actions_spec.js b/spec/frontend/admin/users/components/user_actions_spec.js new file mode 100644 index 00000000000..78bc37233c2 --- /dev/null +++ b/spec/frontend/admin/users/components/user_actions_spec.js @@ -0,0 +1,138 @@ +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 { users, paths } from '../mock_data'; + +const BLOCK = 'block'; +const EDIT = 'edit'; +const LDAP = 'ldapBlocked'; +const DELETE = 'delete'; +const DELETE_WITH_CONTRIBUTIONS = 'deleteWithContributions'; + +describe('AdminUserActions component', () => { + let wrapper; + const user = users[0]; + const userPaths = generateUserPaths(paths, user.username); + + const findEditButton = () => wrapper.find('[data-testid="edit"]'); + const findActionsDropdown = () => wrapper.find('[data-testid="actions"'); + const findDropdownDivider = () => wrapper.find(GlDropdownDivider); + + const initComponent = ({ actions = [] } = {}) => { + wrapper = shallowMount(AdminUserActions, { + propsData: { + user: { + ...user, + actions, + }, + paths, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + describe('edit button', () => { + describe('when the user has an edit action attached', () => { + beforeEach(() => { + initComponent({ actions: [EDIT] }); + }); + + it('renders the edit button linking to the user edit path', () => { + expect(findEditButton().exists()).toBe(true); + expect(findEditButton().attributes('href')).toBe(userPaths.edit); + }); + }); + + describe('when there is no edit action attached to the user', () => { + beforeEach(() => { + initComponent({ actions: [] }); + }); + + it('does not render the edit button linking to the user edit path', () => { + expect(findEditButton().exists()).toBe(false); + }); + }); + }); + + describe('actions dropdown', () => { + describe('when there are actions', () => { + const actions = [EDIT, BLOCK]; + + beforeEach(() => { + initComponent({ actions }); + }); + + it('renders the actions dropdown', () => { + 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 is a LDAP action', () => { + beforeEach(() => { + initComponent({ actions: [LDAP] }); + }); + + it('renders the LDAP dropdown item without a link', () => { + const dropdownAction = wrapper.find(`[data-testid="${LDAP}"]`); + expect(dropdownAction.exists()).toBe(true); + expect(dropdownAction.attributes('href')).toBe(undefined); + }); + }); + + describe('when there is a delete action', () => { + const deleteActions = [DELETE, DELETE_WITH_CONTRIBUTIONS]; + + beforeEach(() => { + initComponent({ actions: [BLOCK, ...deleteActions] }); + }); + + it('renders a dropdown divider', () => { + expect(findDropdownDivider().exists()).toBe(true); + }); + + it('only renders delete dropdown items for actions containing the word "delete"', () => { + const { length } = wrapper.findAll(`[data-testid*="delete-"]`); + expect(length).toBe(deleteActions.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]); + }); + }); + + describe('when there are no delete actions', () => { + it('does not render a dropdown divider', () => { + expect(findDropdownDivider().exists()).toBe(false); + }); + + it('does not render a delete dropdown item', () => { + const anyDeleteAction = wrapper.find(`[data-testid*="delete-"]`); + expect(anyDeleteAction.exists()).toBe(false); + }); + }); + }); + + describe('when there are no actions', () => { + beforeEach(() => { + initComponent({ actions: [] }); + }); + + it('does not render the actions dropdown', () => { + expect(findActionsDropdown().exists()).toBe(false); + }); + }); + }); +}); diff --git a/spec/frontend/admin/users/components/user_date_spec.js b/spec/frontend/admin/users/components/user_date_spec.js new file mode 100644 index 00000000000..6428b10059b --- /dev/null +++ b/spec/frontend/admin/users/components/user_date_spec.js @@ -0,0 +1,34 @@ +import { shallowMount } from '@vue/test-utils'; + +import UserDate from '~/admin/users/components/user_date.vue'; +import { users } from '../mock_data'; + +const mockDate = users[0].createdAt; + +describe('FormatDate component', () => { + let wrapper; + + const initComponent = (props = {}) => { + wrapper = shallowMount(UserDate, { + propsData: { + ...props, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + it.each` + date | output + ${mockDate} | ${'13 Nov, 2020'} + ${null} | ${'Never'} + ${undefined} | ${'Never'} + `('renders $date as $output', ({ date, output }) => { + initComponent({ date }); + + expect(wrapper.text()).toBe(output); + }); +}); diff --git a/spec/frontend/admin/users/components/users_table_spec.js b/spec/frontend/admin/users/components/users_table_spec.js index b79d2d4d39d..ac48542cec5 100644 --- a/spec/frontend/admin/users/components/users_table_spec.js +++ b/spec/frontend/admin/users/components/users_table_spec.js @@ -3,6 +3,9 @@ import { mount } from '@vue/test-utils'; import AdminUsersTable from '~/admin/users/components/users_table.vue'; import AdminUserAvatar from '~/admin/users/components/user_avatar.vue'; +import AdminUserDate from '~/admin/users/components/user_date.vue'; +import AdminUserActions from '~/admin/users/components/user_actions.vue'; + import { users, paths } from '../mock_data'; describe('AdminUsersTable component', () => { @@ -39,18 +42,21 @@ describe('AdminUsersTable component', () => { initComponent(); }); - it.each` - key | label - ${'name'} | ${'Name'} - ${'projectsCount'} | ${'Projects'} - ${'createdAt'} | ${'Created on'} - ${'lastActivityOn'} | ${'Last activity'} - `('renders users.$key in column $label', ({ key, label }) => { - expect(getCellByLabel(0, label).text()).toContain(`${user[key]}`); + it('renders the projects count', () => { + expect(getCellByLabel(0, 'Projects').text()).toContain(`${user.projectsCount}`); }); - it('renders an AdminUserAvatar component', () => { - expect(getCellByLabel(0, 'Name').find(AdminUserAvatar).exists()).toBe(true); + it('renders the user actions', () => { + expect(wrapper.find(AdminUserActions).exists()).toBe(true); + }); + + it.each` + component | label + ${AdminUserAvatar} | ${'Name'} + ${AdminUserDate} | ${'Created on'} + ${AdminUserDate} | ${'Last activity'} + `('renders the component for column $label', ({ component, label }) => { + expect(getCellByLabel(0, label).find(component).exists()).toBe(true); }); }); |