Commit c468016c authored by Natalia Tepluhina's avatar Natalia Tepluhina

Merge branch '229674-update-change-username-modal' into 'master'

Update change username to gl-modal

See merge request gitlab-org/gitlab!44325
parents 5d294320 88d94289
<script>
/* eslint-disable vue/no-v-html */
import { escape } from 'lodash';
import { GlButton } from '@gitlab/ui';
import { GlSafeHtmlDirective as SafeHtml, GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
import axios from '~/lib/utils/axios_utils';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
import { s__, sprintf } from '~/locale';
import { deprecatedCreateFlash as Flash } from '~/flash';
export default {
components: {
GlModal: DeprecatedModal2,
GlModal,
GlButton,
},
directives: {
GlModalDirective,
SafeHtml,
},
props: {
actionUrl: {
type: String,
......@@ -54,6 +56,21 @@ Please update your Git repository remotes as soon as possible.`),
false,
);
},
primaryProps() {
return {
text: s__('Update username'),
attributes: [
{ variant: 'warning' },
{ category: 'primary' },
{ disabled: this.isRequestPending },
],
};
},
cancelProps() {
return {
text: s__('Cancel'),
};
},
},
methods: {
onConfirm() {
......@@ -103,22 +120,21 @@ Please update your Git repository remotes as soon as possible.`),
<p class="form-text text-muted">{{ path }}</p>
</div>
<gl-button
:data-target="`#${$options.modalId}`"
v-gl-modal-directive="$options.modalId"
:disabled="isRequestPending || newUsername === username"
category="primary"
variant="warning"
data-toggle="modal"
data-testid="username-change-confirmation-modal"
>{{ $options.buttonText }}</gl-button
>
{{ $options.buttonText }}
</gl-button>
<gl-modal
:id="$options.modalId"
:header-title-text="s__('Profiles|Change username') + '?'"
:footer-primary-button-text="$options.buttonText"
footer-primary-button-variant="warning"
@submit="onConfirm"
:modal-id="$options.modalId"
:title="s__('Profiles|Change username') + '?'"
:action-primary="primaryProps"
:action-cancel="cancelProps"
@primary="onConfirm"
>
<span v-html="modalText"></span>
<span v-safe-html="modalText"></span>
</gl-modal>
</div>
</template>
---
title: Update change username modal
merge_request: 44325
author:
type: changed
......@@ -28386,6 +28386,9 @@ msgstr ""
msgid "Update now"
msgstr ""
msgid "Update username"
msgstr ""
msgid "Update variable"
msgstr ""
......
......@@ -101,10 +101,10 @@ RSpec.describe 'Profile account page', :js do
it 'changes my username' do
fill_in 'username-change-input', with: 'new-username'
page.find('[data-target="#username-change-confirmation-modal"]').click
page.find('[data-testid="username-change-confirmation-modal"]').click
page.within('.modal') do
find('.js-modal-primary-action').click
find('.js-modal-action-primary').click
end
expect(page).to have_content('new-username')
......
......@@ -128,10 +128,10 @@ def update_username(new_username)
fill_in 'username-change-input', with: new_username
page.find('[data-target="#username-change-confirmation-modal"]').click
page.find('[data-testid="username-change-confirmation-modal"]').click
page.within('.modal') do
find('.js-modal-primary-action').click
find('.js-modal-action-primary').click
end
wait_for_requests
......
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('&lt;i&gt;Italic&lt;/i&gt;');
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);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment