diff options
Diffstat (limited to 'spec/frontend/profile/account/components/update_username_spec.js')
-rw-r--r-- | spec/frontend/profile/account/components/update_username_spec.js | 208 |
1 files changed, 85 insertions, 123 deletions
diff --git a/spec/frontend/profile/account/components/update_username_spec.js b/spec/frontend/profile/account/components/update_username_spec.js index be39a7f4d80..45e5e0f885f 100644 --- a/spec/frontend/profile/account/components/update_username_spec.js +++ b/spec/frontend/profile/account/components/update_username_spec.js @@ -1,173 +1,135 @@ -import Vue from 'vue'; +import { shallowMount } from '@vue/test-utils'; +import { GlModal } from '@gitlab/ui'; import MockAdapter from 'axios-mock-adapter'; import { TEST_HOST } from 'helpers/test_constants'; -import mountComponent from 'helpers/vue_mount_component_helper'; import axios from '~/lib/utils/axios_utils'; -import updateUsername from '~/profile/account/components/update_username.vue'; +import UpdateUsername from '~/profile/account/components/update_username.vue'; describe('UpdateUsername component', () => { const rootUrl = TEST_HOST; const actionUrl = `${TEST_HOST}/update/username`; - const username = 'hasnoname'; - const newUsername = 'new_username'; - let Component; - let vm; + const defaultProps = { + actionUrl, + rootUrl, + initialUsername: 'hasnoname', + }; + let wrapper; let axiosMock; + const createComponent = (props = {}) => { + wrapper = shallowMount(UpdateUsername, { + propsData: { + ...defaultProps, + ...props, + }, + stubs: { + GlModal, + }, + }); + }; + beforeEach(() => { axiosMock = new MockAdapter(axios); - Component = Vue.extend(updateUsername); - vm = mountComponent(Component, { - actionUrl, - rootUrl, - initialUsername: username, - }); + createComponent(); }); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); axiosMock.restore(); }); const findElements = () => { - const modalSelector = `#${vm.$options.modalId}`; + const modal = wrapper.find(GlModal); return { - input: vm.$el.querySelector(`#${vm.$options.inputId}`), - openModalBtn: vm.$el.querySelector(`[data-target="${modalSelector}"]`), - modal: vm.$el.querySelector(modalSelector), - modalBody: vm.$el.querySelector(`${modalSelector} .modal-body`), - modalHeader: vm.$el.querySelector(`${modalSelector} .modal-title`), - confirmModalBtn: vm.$el.querySelector(`${modalSelector} .btn-warning`), + modal, + input: wrapper.find(`#${wrapper.vm.$options.inputId}`), + openModalBtn: wrapper.find('[data-testid="username-change-confirmation-modal"]'), + modalBody: modal.find('.modal-body'), + modalHeader: modal.find('.modal-title'), + confirmModalBtn: wrapper.find('.btn-warning'), }; }; - it('has a disabled button if the username was not changed', done => { - const { input, openModalBtn } = findElements(); - input.dispatchEvent(new Event('input')); - - Vue.nextTick() - .then(() => { - expect(vm.username).toBe(username); - expect(vm.newUsername).toBe(username); - expect(openModalBtn).toBeDisabled(); - }) - .then(done) - .catch(done.fail); + it('has a disabled button if the username was not changed', async () => { + const { openModalBtn } = findElements(); + + await wrapper.vm.$nextTick(); + + expect(openModalBtn.props('disabled')).toBe(true); }); - it('has an enabled button which if the username was changed', done => { + it('has an enabled button which if the username was changed', async () => { const { input, openModalBtn } = findElements(); - input.value = newUsername; - input.dispatchEvent(new Event('input')); - - Vue.nextTick() - .then(() => { - expect(vm.username).toBe(username); - expect(vm.newUsername).toBe(newUsername); - expect(openModalBtn).not.toBeDisabled(); - }) - .then(done) - .catch(done.fail); - }); - it('confirmation modal contains proper header and body', done => { - const { modalBody, modalHeader } = findElements(); + input.element.value = 'newUsername'; + input.trigger('input'); - vm.newUsername = newUsername; + await wrapper.vm.$nextTick(); - Vue.nextTick() - .then(() => { - expect(modalHeader.textContent).toContain('Change username?'); - expect(modalBody.textContent).toContain( - `You are going to change the username ${username} to ${newUsername}`, - ); - }) - .then(done) - .catch(done.fail); + expect(openModalBtn.props('disabled')).toBe(false); }); - it('confirmation modal should escape usernames properly', done => { - const { modalBody } = findElements(); + describe('changing username', () => { + const newUsername = 'new_username'; - vm.username = '<i>Italic</i>'; - vm.newUsername = vm.username; + beforeEach(async () => { + createComponent(); + wrapper.setData({ newUsername }); - Vue.nextTick() - .then(() => { - expect(modalBody.innerHTML).toContain('<i>Italic</i>'); - expect(modalBody.innerHTML).not.toContain(vm.username); - }) - .then(done) - .catch(done.fail); - }); + await wrapper.vm.$nextTick(); + }); - it('executes API call on confirmation button click', done => { - const { confirmModalBtn } = findElements(); + it('confirmation modal contains proper header and body', async () => { + const { modal } = findElements(); - axiosMock.onPut(actionUrl).replyOnce(() => [200, { message: 'Username changed' }]); - jest.spyOn(axios, 'put'); + expect(modal.attributes('title')).toBe('Change username?'); + expect(modal.text()).toContain( + `You are going to change the username ${defaultProps.initialUsername} to ${newUsername}`, + ); + }); - vm.newUsername = newUsername; + it('executes API call on confirmation button click', async () => { + axiosMock.onPut(actionUrl).replyOnce(() => [200, { message: 'Username changed' }]); + jest.spyOn(axios, 'put'); - Vue.nextTick() - .then(() => { - confirmModalBtn.click(); + await wrapper.vm.onConfirm(); + await wrapper.vm.$nextTick(); - expect(axios.put).toHaveBeenCalledWith(actionUrl, { user: { username: newUsername } }); - }) - .then(done) - .catch(done.fail); - }); + expect(axios.put).toHaveBeenCalledWith(actionUrl, { user: { username: newUsername } }); + }); - it('sets the username after a successful update', done => { - const { input, openModalBtn } = findElements(); + it('sets the username after a successful update', async () => { + const { input, openModalBtn } = findElements(); - axiosMock.onPut(actionUrl).replyOnce(() => { - expect(input).toBeDisabled(); - expect(openModalBtn).toBeDisabled(); + axiosMock.onPut(actionUrl).replyOnce(() => { + expect(input.attributes('disabled')).toBe('disabled'); + expect(openModalBtn.props('disabled')).toBe(true); - return [200, { message: 'Username changed' }]; + return [200, { message: 'Username changed' }]; + }); + + await wrapper.vm.onConfirm(); + await wrapper.vm.$nextTick(); + + expect(input.attributes('disabled')).toBe(undefined); + expect(openModalBtn.props('disabled')).toBe(true); }); - vm.newUsername = newUsername; - - vm.onConfirm() - .then(() => { - expect(vm.username).toBe(newUsername); - expect(vm.newUsername).toBe(newUsername); - expect(input).not.toBeDisabled(); - expect(input.value).toBe(newUsername); - expect(openModalBtn).toBeDisabled(); - }) - .then(done) - .catch(done.fail); - }); + it('does not set the username after a erroneous update', async () => { + const { input, openModalBtn } = findElements(); - it('does not set the username after a erroneous update', done => { - const { input, openModalBtn } = findElements(); + axiosMock.onPut(actionUrl).replyOnce(() => { + expect(input.attributes('disabled')).toBe('disabled'); + expect(openModalBtn.props('disabled')).toBe(true); - axiosMock.onPut(actionUrl).replyOnce(() => { - expect(input).toBeDisabled(); - expect(openModalBtn).toBeDisabled(); + return [400, { message: 'Invalid username' }]; + }); - return [400, { message: 'Invalid username' }]; + await expect(wrapper.vm.onConfirm()).rejects.toThrow(); + expect(input.attributes('disabled')).toBe(undefined); + expect(openModalBtn.props('disabled')).toBe(false); }); - - const invalidUsername = 'anything.git'; - vm.newUsername = invalidUsername; - - vm.onConfirm() - .then(() => done.fail('Expected onConfirm to throw!')) - .catch(() => { - expect(vm.username).toBe(username); - expect(vm.newUsername).toBe(invalidUsername); - expect(input).not.toBeDisabled(); - expect(input.value).toBe(invalidUsername); - expect(openModalBtn).not.toBeDisabled(); - }) - .then(done) - .catch(done.fail); }); }); |