2021-02-14 18:09:20 +00:00
|
|
|
import { mount } from '@vue/test-utils';
|
|
|
|
import { merge } from 'lodash';
|
2017-10-06 20:40:41 +00:00
|
|
|
import Vue from 'vue';
|
|
|
|
|
2021-02-01 15:08:56 +00:00
|
|
|
import { TEST_HOST } from 'helpers/test_constants';
|
2019-12-11 09:08:12 +00:00
|
|
|
import deleteAccountModal from '~/profile/account/components/delete_account_modal.vue';
|
2017-10-06 20:40:41 +00:00
|
|
|
|
2020-09-01 21:10:21 +00:00
|
|
|
const GlModalStub = {
|
|
|
|
name: 'gl-modal-stub',
|
|
|
|
template: `
|
|
|
|
<div>
|
|
|
|
<slot></slot>
|
|
|
|
</div>
|
|
|
|
`,
|
|
|
|
};
|
|
|
|
|
2017-10-06 20:40:41 +00:00
|
|
|
describe('DeleteAccountModal component', () => {
|
2020-03-23 21:09:46 +00:00
|
|
|
const actionUrl = `${TEST_HOST}/delete/user`;
|
2017-10-06 20:40:41 +00:00
|
|
|
const username = 'hasnoname';
|
2020-09-01 21:10:21 +00:00
|
|
|
let wrapper;
|
2017-10-06 20:40:41 +00:00
|
|
|
let vm;
|
|
|
|
|
2020-09-01 21:10:21 +00:00
|
|
|
const createWrapper = (options = {}) => {
|
|
|
|
wrapper = mount(
|
|
|
|
deleteAccountModal,
|
|
|
|
merge(
|
|
|
|
{},
|
|
|
|
{
|
|
|
|
propsData: {
|
|
|
|
actionUrl,
|
|
|
|
username,
|
|
|
|
},
|
|
|
|
stubs: {
|
|
|
|
GlModal: GlModalStub,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
options,
|
|
|
|
),
|
|
|
|
);
|
|
|
|
vm = wrapper.vm;
|
|
|
|
};
|
2017-10-06 20:40:41 +00:00
|
|
|
|
|
|
|
afterEach(() => {
|
2020-09-01 21:10:21 +00:00
|
|
|
wrapper.destroy();
|
|
|
|
wrapper = null;
|
|
|
|
vm = null;
|
2017-10-06 20:40:41 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
const findElements = () => {
|
|
|
|
const confirmation = vm.confirmWithPassword ? 'password' : 'username';
|
|
|
|
return {
|
|
|
|
form: vm.$refs.form,
|
|
|
|
input: vm.$el.querySelector(`[name="${confirmation}"]`),
|
|
|
|
};
|
|
|
|
};
|
2020-09-01 21:10:21 +00:00
|
|
|
const findModal = () => wrapper.find(GlModalStub);
|
2017-10-06 20:40:41 +00:00
|
|
|
|
|
|
|
describe('with password confirmation', () => {
|
2020-12-24 00:10:25 +00:00
|
|
|
beforeEach((done) => {
|
2020-09-01 21:10:21 +00:00
|
|
|
createWrapper({
|
|
|
|
propsData: {
|
|
|
|
confirmWithPassword: true,
|
|
|
|
},
|
2017-10-06 20:40:41 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
vm.isOpen = true;
|
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
Vue.nextTick().then(done).catch(done.fail);
|
2017-10-06 20:40:41 +00:00
|
|
|
});
|
|
|
|
|
2020-12-24 00:10:25 +00:00
|
|
|
it('does not accept empty password', (done) => {
|
2020-09-01 21:10:21 +00:00
|
|
|
const { form, input } = findElements();
|
2020-03-23 21:09:46 +00:00
|
|
|
jest.spyOn(form, 'submit').mockImplementation(() => {});
|
2017-10-06 20:40:41 +00:00
|
|
|
input.value = '';
|
|
|
|
input.dispatchEvent(new Event('input'));
|
|
|
|
|
|
|
|
Vue.nextTick()
|
|
|
|
.then(() => {
|
|
|
|
expect(vm.enteredPassword).toBe(input.value);
|
2020-09-01 21:10:21 +00:00
|
|
|
expect(findModal().attributes('ok-disabled')).toBe('true');
|
|
|
|
findModal().vm.$emit('primary');
|
2018-10-09 18:03:09 +00:00
|
|
|
|
2017-10-06 20:40:41 +00:00
|
|
|
expect(form.submit).not.toHaveBeenCalled();
|
|
|
|
})
|
|
|
|
.then(done)
|
|
|
|
.catch(done.fail);
|
|
|
|
});
|
|
|
|
|
2020-12-24 00:10:25 +00:00
|
|
|
it('submits form with password', (done) => {
|
2020-09-01 21:10:21 +00:00
|
|
|
const { form, input } = findElements();
|
2020-03-23 21:09:46 +00:00
|
|
|
jest.spyOn(form, 'submit').mockImplementation(() => {});
|
2017-10-06 20:40:41 +00:00
|
|
|
input.value = 'anything';
|
|
|
|
input.dispatchEvent(new Event('input'));
|
|
|
|
|
|
|
|
Vue.nextTick()
|
|
|
|
.then(() => {
|
|
|
|
expect(vm.enteredPassword).toBe(input.value);
|
2020-09-01 21:10:21 +00:00
|
|
|
expect(findModal().attributes('ok-disabled')).toBeUndefined();
|
|
|
|
findModal().vm.$emit('primary');
|
2018-10-09 18:03:09 +00:00
|
|
|
|
2017-10-06 20:40:41 +00:00
|
|
|
expect(form.submit).toHaveBeenCalled();
|
|
|
|
})
|
|
|
|
.then(done)
|
|
|
|
.catch(done.fail);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('with username confirmation', () => {
|
2020-12-24 00:10:25 +00:00
|
|
|
beforeEach((done) => {
|
2020-09-01 21:10:21 +00:00
|
|
|
createWrapper({
|
|
|
|
propsData: {
|
|
|
|
confirmWithPassword: false,
|
|
|
|
},
|
2017-10-06 20:40:41 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
vm.isOpen = true;
|
|
|
|
|
2020-12-23 12:10:26 +00:00
|
|
|
Vue.nextTick().then(done).catch(done.fail);
|
2017-10-06 20:40:41 +00:00
|
|
|
});
|
|
|
|
|
2020-12-24 00:10:25 +00:00
|
|
|
it('does not accept wrong username', (done) => {
|
2020-09-01 21:10:21 +00:00
|
|
|
const { form, input } = findElements();
|
2020-03-23 21:09:46 +00:00
|
|
|
jest.spyOn(form, 'submit').mockImplementation(() => {});
|
2017-10-06 20:40:41 +00:00
|
|
|
input.value = 'this is wrong';
|
|
|
|
input.dispatchEvent(new Event('input'));
|
|
|
|
|
|
|
|
Vue.nextTick()
|
|
|
|
.then(() => {
|
|
|
|
expect(vm.enteredUsername).toBe(input.value);
|
2020-09-01 21:10:21 +00:00
|
|
|
expect(findModal().attributes('ok-disabled')).toBe('true');
|
|
|
|
findModal().vm.$emit('primary');
|
2018-10-09 18:03:09 +00:00
|
|
|
|
2017-10-06 20:40:41 +00:00
|
|
|
expect(form.submit).not.toHaveBeenCalled();
|
|
|
|
})
|
|
|
|
.then(done)
|
|
|
|
.catch(done.fail);
|
|
|
|
});
|
|
|
|
|
2020-12-24 00:10:25 +00:00
|
|
|
it('submits form with correct username', (done) => {
|
2020-09-01 21:10:21 +00:00
|
|
|
const { form, input } = findElements();
|
2020-03-23 21:09:46 +00:00
|
|
|
jest.spyOn(form, 'submit').mockImplementation(() => {});
|
2017-10-06 20:40:41 +00:00
|
|
|
input.value = username;
|
|
|
|
input.dispatchEvent(new Event('input'));
|
|
|
|
|
|
|
|
Vue.nextTick()
|
|
|
|
.then(() => {
|
|
|
|
expect(vm.enteredUsername).toBe(input.value);
|
2020-09-01 21:10:21 +00:00
|
|
|
expect(findModal().attributes('ok-disabled')).toBeUndefined();
|
|
|
|
findModal().vm.$emit('primary');
|
2018-10-09 18:03:09 +00:00
|
|
|
|
2017-10-06 20:40:41 +00:00
|
|
|
expect(form.submit).toHaveBeenCalled();
|
|
|
|
})
|
|
|
|
.then(done)
|
|
|
|
.catch(done.fail);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|