diff options
Diffstat (limited to 'spec/frontend/admin/users/components/modals/delete_user_modal_spec.js')
-rw-r--r-- | spec/frontend/admin/users/components/modals/delete_user_modal_spec.js | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/spec/frontend/admin/users/components/modals/delete_user_modal_spec.js b/spec/frontend/admin/users/components/modals/delete_user_modal_spec.js new file mode 100644 index 00000000000..fee74764645 --- /dev/null +++ b/spec/frontend/admin/users/components/modals/delete_user_modal_spec.js @@ -0,0 +1,167 @@ +import { GlButton, GlFormInput } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import DeleteUserModal from '~/admin/users/components/modals/delete_user_modal.vue'; +import OncallSchedulesList from '~/vue_shared/components/oncall_schedules_list.vue'; +import ModalStub from './stubs/modal_stub'; + +const TEST_DELETE_USER_URL = 'delete-url'; +const TEST_BLOCK_USER_URL = 'block-url'; +const TEST_CSRF = 'csrf'; + +describe('User Operation confirmation modal', () => { + let wrapper; + let formSubmitSpy; + + const findButton = (variant, category) => + wrapper + .findAll(GlButton) + .filter((w) => w.attributes('variant') === variant && w.attributes('category') === category) + .at(0); + const findForm = () => wrapper.find('form'); + const findUsernameInput = () => wrapper.findComponent(GlFormInput); + const findPrimaryButton = () => findButton('danger', 'primary'); + const findSecondaryButton = () => findButton('danger', 'secondary'); + const findAuthenticityToken = () => new FormData(findForm().element).get('authenticity_token'); + const getUsername = () => findUsernameInput().attributes('value'); + const getMethodParam = () => new FormData(findForm().element).get('_method'); + const getFormAction = () => findForm().attributes('action'); + const findOnCallSchedulesList = () => wrapper.findComponent(OncallSchedulesList); + + const setUsername = (username) => { + findUsernameInput().vm.$emit('input', username); + }; + + const username = 'username'; + const badUsername = 'bad_username'; + const oncallSchedules = '["schedule1", "schedule2"]'; + + const createComponent = (props = {}) => { + wrapper = shallowMount(DeleteUserModal, { + propsData: { + username, + title: 'title', + content: 'content', + action: 'action', + secondaryAction: 'secondaryAction', + deleteUserUrl: TEST_DELETE_USER_URL, + blockUserUrl: TEST_BLOCK_USER_URL, + csrfToken: TEST_CSRF, + oncallSchedules, + ...props, + }, + stubs: { + GlModal: ModalStub, + }, + }); + }; + + beforeEach(() => { + formSubmitSpy = jest.spyOn(HTMLFormElement.prototype, 'submit').mockImplementation(); + }); + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + it('renders modal with form included', () => { + createComponent(); + expect(wrapper.element).toMatchSnapshot(); + }); + + describe('on created', () => { + beforeEach(() => { + createComponent(); + }); + + it('has disabled buttons', () => { + expect(findPrimaryButton().attributes('disabled')).toBeTruthy(); + expect(findSecondaryButton().attributes('disabled')).toBeTruthy(); + }); + }); + + describe('with incorrect username', () => { + beforeEach(() => { + createComponent(); + setUsername(badUsername); + + return wrapper.vm.$nextTick(); + }); + + it('shows incorrect username', () => { + expect(getUsername()).toEqual(badUsername); + }); + + it('has disabled buttons', () => { + expect(findPrimaryButton().attributes('disabled')).toBeTruthy(); + expect(findSecondaryButton().attributes('disabled')).toBeTruthy(); + }); + }); + + describe('with correct username', () => { + beforeEach(() => { + createComponent(); + setUsername(username); + + return wrapper.vm.$nextTick(); + }); + + it('shows correct username', () => { + expect(getUsername()).toEqual(username); + }); + + it('has enabled buttons', () => { + expect(findPrimaryButton().attributes('disabled')).toBeFalsy(); + expect(findSecondaryButton().attributes('disabled')).toBeFalsy(); + }); + + describe('when primary action is submitted', () => { + beforeEach(() => { + findPrimaryButton().vm.$emit('click'); + + return wrapper.vm.$nextTick(); + }); + + it('clears the input', () => { + expect(getUsername()).toEqual(''); + }); + + it('has correct form attributes and calls submit', () => { + expect(getFormAction()).toBe(TEST_DELETE_USER_URL); + expect(getMethodParam()).toBe('delete'); + expect(findAuthenticityToken()).toBe(TEST_CSRF); + expect(formSubmitSpy).toHaveBeenCalled(); + }); + }); + + describe('when secondary action is submitted', () => { + beforeEach(() => { + findSecondaryButton().vm.$emit('click'); + + return wrapper.vm.$nextTick(); + }); + + it('has correct form attributes and calls submit', () => { + expect(getFormAction()).toBe(TEST_BLOCK_USER_URL); + expect(getMethodParam()).toBe('put'); + expect(findAuthenticityToken()).toBe(TEST_CSRF); + expect(formSubmitSpy).toHaveBeenCalled(); + }); + }); + }); + + describe('Related oncall-schedules list', () => { + it('does NOT render the list when user has no related schedules', () => { + createComponent({ oncallSchedules: '[]' }); + expect(findOnCallSchedulesList().exists()).toBe(false); + }); + + it('renders the list when user has related schedules', () => { + createComponent(); + + const schedules = findOnCallSchedulesList(); + expect(schedules.exists()).toBe(true); + expect(schedules.props('schedules')).toEqual(JSON.parse(oncallSchedules)); + }); + }); +}); |