1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
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 axios from '~/lib/utils/axios_utils';
import UpdateUsername from '~/profile/account/components/update_username.vue';
describe('UpdateUsername component', () => {
const rootUrl = TEST_HOST;
const actionUrl = `${TEST_HOST}/update/username`;
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);
createComponent();
});
afterEach(() => {
wrapper.destroy();
axiosMock.restore();
});
const findElements = () => {
const modal = wrapper.find(GlModal);
return {
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', 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', async () => {
const { input, openModalBtn } = findElements();
input.element.value = 'newUsername';
input.trigger('input');
await wrapper.vm.$nextTick();
expect(openModalBtn.props('disabled')).toBe(false);
});
describe('changing username', () => {
const newUsername = 'new_username';
beforeEach(async () => {
createComponent();
wrapper.setData({ newUsername });
await wrapper.vm.$nextTick();
});
it('confirmation modal contains proper header and body', async () => {
const { modal } = findElements();
expect(modal.attributes('title')).toBe('Change username?');
expect(modal.text()).toContain(
`You are going to change the username ${defaultProps.initialUsername} to ${newUsername}`,
);
});
it('executes API call on confirmation button click', async () => {
axiosMock.onPut(actionUrl).replyOnce(() => [200, { message: 'Username changed' }]);
jest.spyOn(axios, 'put');
await wrapper.vm.onConfirm();
await wrapper.vm.$nextTick();
expect(axios.put).toHaveBeenCalledWith(actionUrl, { user: { username: newUsername } });
});
it('sets the username after a successful update', async () => {
const { input, openModalBtn } = findElements();
axiosMock.onPut(actionUrl).replyOnce(() => {
expect(input.attributes('disabled')).toBe('disabled');
expect(openModalBtn.props('disabled')).toBe(true);
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);
});
it('does not set the username after a erroneous update', async () => {
const { input, openModalBtn } = findElements();
axiosMock.onPut(actionUrl).replyOnce(() => {
expect(input.attributes('disabled')).toBe('disabled');
expect(openModalBtn.props('disabled')).toBe(true);
return [400, { message: 'Invalid username' }];
});
await expect(wrapper.vm.onConfirm()).rejects.toThrow();
expect(input.attributes('disabled')).toBe(undefined);
expect(openModalBtn.props('disabled')).toBe(false);
});
});
});
|
