debian-mirror-gitlab/spec/javascripts/issue_show/components/app_spec.js

442 lines
12 KiB
JavaScript
Raw Normal View History

2017-09-10 17:25:29 +05:30
import Vue from 'vue';
2018-03-17 18:26:18 +05:30
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
2018-05-09 12:01:36 +05:30
import '~/behaviors/markdown/render_gfm';
2017-09-10 17:25:29 +05:30
import issuableApp from '~/issue_show/components/app.vue';
import eventHub from '~/issue_show/event_hub';
2018-03-27 19:54:05 +05:30
import setTimeoutPromise from 'spec/helpers/set_timeout_promise_helper';
2017-09-10 17:25:29 +05:30
import issueShowData from '../mock_data';
function formatText(text) {
return text.trim().replace(/\s\s+/g, ' ');
}
2018-12-13 13:39:08 +05:30
const REALTIME_REQUEST_STACK = [issueShowData.initialRequest, issueShowData.secondRequest];
2018-03-17 18:26:18 +05:30
2017-09-10 17:25:29 +05:30
describe('Issuable output', () => {
2018-03-17 18:26:18 +05:30
let mock;
let realtimeRequestCount = 0;
let vm;
2017-09-10 17:25:29 +05:30
document.body.innerHTML = '<span id="task_status"></span>';
2018-12-13 13:39:08 +05:30
beforeEach(done => {
2017-09-10 17:25:29 +05:30
spyOn(eventHub, '$emit');
const IssuableDescriptionComponent = Vue.extend(issuableApp);
2018-03-17 18:26:18 +05:30
mock = new MockAdapter(axios);
mock.onGet('/gitlab-org/gitlab-shell/issues/9/realtime_changes/realtime_changes').reply(() => {
const res = Promise.resolve([200, REALTIME_REQUEST_STACK[realtimeRequestCount]]);
realtimeRequestCount += 1;
return res;
});
2017-09-10 17:25:29 +05:30
vm = new IssuableDescriptionComponent({
propsData: {
canUpdate: true,
canDestroy: true,
endpoint: '/gitlab-org/gitlab-shell/issues/9/realtime_changes',
2018-03-17 18:26:18 +05:30
updateEndpoint: gl.TEST_HOST,
2017-09-10 17:25:29 +05:30
issuableRef: '#1',
initialTitleHtml: '',
initialTitleText: '',
2018-03-17 18:26:18 +05:30
initialDescriptionHtml: 'test',
initialDescriptionText: 'test',
markdownPreviewPath: '/',
markdownDocsPath: '/',
2017-09-10 17:25:29 +05:30
projectNamespace: '/',
projectPath: '/',
},
}).$mount();
setTimeout(done);
});
afterEach(() => {
2018-03-17 18:26:18 +05:30
mock.restore();
realtimeRequestCount = 0;
2017-09-10 17:25:29 +05:30
vm.poll.stop();
2018-03-17 18:26:18 +05:30
vm.$destroy();
2017-09-10 17:25:29 +05:30
});
2018-12-13 13:39:08 +05:30
it('should render a title/description/edited and update title/description/edited on update', done => {
2017-09-10 17:25:29 +05:30
let editedText;
Vue.nextTick()
2018-12-13 13:39:08 +05:30
.then(() => {
editedText = vm.$el.querySelector('.edited-text');
})
.then(() => {
expect(document.querySelector('title').innerText).toContain('this is a title (#1)');
expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>this is a title</p>');
expect(vm.$el.querySelector('.wiki').innerHTML).toContain('<p>this is a description!</p>');
expect(vm.$el.querySelector('.js-task-list-field').value).toContain(
'this is a description',
);
expect(formatText(editedText.innerText)).toMatch(/Edited[\s\S]+?by Some User/);
expect(editedText.querySelector('.author-link').href).toMatch(/\/some_user$/);
expect(editedText.querySelector('time')).toBeTruthy();
})
.then(() => {
vm.poll.makeRequest();
})
.then(() => new Promise(resolve => setTimeout(resolve)))
.then(() => {
expect(document.querySelector('title').innerText).toContain('2 (#1)');
expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>2</p>');
expect(vm.$el.querySelector('.wiki').innerHTML).toContain('<p>42</p>');
expect(vm.$el.querySelector('.js-task-list-field').value).toContain('42');
expect(vm.$el.querySelector('.edited-text')).toBeTruthy();
expect(formatText(vm.$el.querySelector('.edited-text').innerText)).toMatch(
/Edited[\s\S]+?by Other User/,
);
expect(editedText.querySelector('.author-link').href).toMatch(/\/other_user$/);
expect(editedText.querySelector('time')).toBeTruthy();
})
.then(done)
.catch(done.fail);
2017-09-10 17:25:29 +05:30
});
2018-12-13 13:39:08 +05:30
it('shows actions if permissions are correct', done => {
2017-09-10 17:25:29 +05:30
vm.showForm = true;
Vue.nextTick(() => {
2018-12-13 13:39:08 +05:30
expect(vm.$el.querySelector('.btn')).not.toBeNull();
2017-09-10 17:25:29 +05:30
done();
});
});
2018-12-13 13:39:08 +05:30
it('does not show actions if permissions are incorrect', done => {
2017-09-10 17:25:29 +05:30
vm.showForm = true;
vm.canUpdate = false;
Vue.nextTick(() => {
2018-12-13 13:39:08 +05:30
expect(vm.$el.querySelector('.btn')).toBeNull();
2017-09-10 17:25:29 +05:30
done();
});
});
2018-12-13 13:39:08 +05:30
it('does not update formState if form is already open', done => {
2017-09-10 17:25:29 +05:30
vm.openForm();
vm.state.titleText = 'testing 123';
vm.openForm();
Vue.nextTick(() => {
2018-12-13 13:39:08 +05:30
expect(vm.store.formState.title).not.toBe('testing 123');
2017-09-10 17:25:29 +05:30
done();
});
});
describe('updateIssuable', () => {
2018-12-13 13:39:08 +05:30
it('fetches new data after update', done => {
2017-09-10 17:25:29 +05:30
spyOn(vm.service, 'getData').and.callThrough();
2018-12-13 13:39:08 +05:30
spyOn(vm.service, 'updateIssuable').and.callFake(
() =>
new Promise(resolve => {
resolve({
data: {
confidential: false,
web_url: window.location.pathname,
},
});
}),
);
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
vm.updateIssuable()
.then(() => {
expect(vm.service.getData).toHaveBeenCalled();
})
.then(done)
.catch(done.fail);
2017-09-10 17:25:29 +05:30
});
2018-12-13 13:39:08 +05:30
it('correctly updates issuable data', done => {
spyOn(vm.service, 'updateIssuable').and.callFake(
() =>
new Promise(resolve => {
resolve();
}),
);
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
vm.updateIssuable()
.then(() => {
expect(vm.service.updateIssuable).toHaveBeenCalledWith(vm.formState);
expect(eventHub.$emit).toHaveBeenCalledWith('close.form');
})
.then(done)
.catch(done.fail);
2017-09-10 17:25:29 +05:30
});
2018-12-13 13:39:08 +05:30
it('does not redirect if issue has not moved', done => {
2018-10-15 14:42:47 +05:30
const visitUrl = spyOnDependency(issuableApp, 'visitUrl');
2018-12-13 13:39:08 +05:30
spyOn(vm.service, 'updateIssuable').and.callFake(
() =>
new Promise(resolve => {
resolve({
data: {
web_url: window.location.pathname,
confidential: vm.isConfidential,
},
});
}),
);
2017-09-10 17:25:29 +05:30
vm.updateIssuable();
setTimeout(() => {
2018-10-15 14:42:47 +05:30
expect(visitUrl).not.toHaveBeenCalled();
2017-09-10 17:25:29 +05:30
done();
});
});
2018-12-13 13:39:08 +05:30
it('redirects if returned web_url has changed', done => {
2018-10-15 14:42:47 +05:30
const visitUrl = spyOnDependency(issuableApp, 'visitUrl');
2018-12-13 13:39:08 +05:30
spyOn(vm.service, 'updateIssuable').and.callFake(
() =>
new Promise(resolve => {
resolve({
data: {
web_url: '/testing-issue-move',
confidential: vm.isConfidential,
},
});
}),
);
2017-09-10 17:25:29 +05:30
vm.updateIssuable();
setTimeout(() => {
2018-10-15 14:42:47 +05:30
expect(visitUrl).toHaveBeenCalledWith('/testing-issue-move');
2017-09-10 17:25:29 +05:30
done();
});
});
2018-03-17 18:26:18 +05:30
describe('shows dialog when issue has unsaved changed', () => {
2018-12-13 13:39:08 +05:30
it('confirms on title change', done => {
2018-03-17 18:26:18 +05:30
vm.showForm = true;
vm.state.titleText = 'title has changed';
const e = { returnValue: null };
vm.handleBeforeUnloadEvent(e);
Vue.nextTick(() => {
expect(e.returnValue).not.toBeNull();
done();
});
});
2018-12-13 13:39:08 +05:30
it('confirms on description change', done => {
2018-03-17 18:26:18 +05:30
vm.showForm = true;
vm.state.descriptionText = 'description has changed';
const e = { returnValue: null };
vm.handleBeforeUnloadEvent(e);
Vue.nextTick(() => {
expect(e.returnValue).not.toBeNull();
done();
});
});
2018-12-13 13:39:08 +05:30
it('does nothing when nothing has changed', done => {
2018-03-17 18:26:18 +05:30
const e = { returnValue: null };
vm.handleBeforeUnloadEvent(e);
Vue.nextTick(() => {
expect(e.returnValue).toBeNull();
done();
});
});
});
describe('error when updating', () => {
beforeEach(() => {
spyOn(window, 'Flash').and.callThrough();
2018-12-13 13:39:08 +05:30
spyOn(vm.service, 'updateIssuable').and.callFake(
() =>
new Promise((resolve, reject) => {
reject();
}),
);
2018-03-17 18:26:18 +05:30
});
2017-09-10 17:25:29 +05:30
2018-12-13 13:39:08 +05:30
it('closes form on error', done => {
2018-03-17 18:26:18 +05:30
vm.updateIssuable();
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
setTimeout(() => {
2018-12-13 13:39:08 +05:30
expect(eventHub.$emit).toHaveBeenCalledWith('close.form');
expect(window.Flash).toHaveBeenCalledWith('Error updating issue');
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
done();
});
});
2017-09-10 17:25:29 +05:30
2018-12-13 13:39:08 +05:30
it('returns the correct error message for issuableType', done => {
2018-03-17 18:26:18 +05:30
vm.issuableType = 'merge request';
Vue.nextTick(() => {
vm.updateIssuable();
setTimeout(() => {
2018-12-13 13:39:08 +05:30
expect(eventHub.$emit).toHaveBeenCalledWith('close.form');
expect(window.Flash).toHaveBeenCalledWith('Error updating merge request');
2018-03-17 18:26:18 +05:30
done();
});
});
2017-09-10 17:25:29 +05:30
});
});
2018-03-17 18:26:18 +05:30
});
2017-09-10 17:25:29 +05:30
2018-12-13 13:39:08 +05:30
it('opens recaptcha modal if update rejected as spam', done => {
2018-03-17 18:26:18 +05:30
function mockScriptSrc() {
2018-12-13 13:39:08 +05:30
const recaptchaChild = vm.$children.find(
// eslint-disable-next-line no-underscore-dangle
child => child.$options._componentTag === 'recaptcha-modal',
);
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
recaptchaChild.scriptSrc = '//scriptsrc';
}
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
let modal;
2018-12-13 13:39:08 +05:30
const promise = new Promise(resolve => {
2018-03-17 18:26:18 +05:30
resolve({
data: {
recaptcha_html: '<div class="g-recaptcha">recaptcha_html</div>',
},
2017-09-10 17:25:29 +05:30
});
});
2018-03-17 18:26:18 +05:30
spyOn(vm.service, 'updateIssuable').and.returnValue(promise);
vm.canUpdate = true;
vm.showForm = true;
vm.$nextTick()
.then(() => mockScriptSrc())
.then(() => vm.updateIssuable())
.then(promise)
.then(() => setTimeoutPromise())
.then(() => {
modal = vm.$el.querySelector('.js-recaptcha-modal');
expect(modal.style.display).not.toEqual('none');
expect(modal.querySelector('.g-recaptcha').textContent).toEqual('recaptcha_html');
expect(document.body.querySelector('.js-recaptcha-script').src).toMatch('//scriptsrc');
})
.then(() => modal.querySelector('.close').click())
.then(() => vm.$nextTick())
.then(() => {
expect(modal.style.display).toEqual('none');
expect(document.body.querySelector('.js-recaptcha-script')).toBeNull();
})
.then(done)
.catch(done.fail);
2017-09-10 17:25:29 +05:30
});
describe('deleteIssuable', () => {
2018-12-13 13:39:08 +05:30
it('changes URL when deleted', done => {
2018-10-15 14:42:47 +05:30
const visitUrl = spyOnDependency(issuableApp, 'visitUrl');
2018-12-13 13:39:08 +05:30
spyOn(vm.service, 'deleteIssuable').and.callFake(
() =>
new Promise(resolve => {
resolve({
data: {
web_url: '/test',
},
});
}),
);
2017-09-10 17:25:29 +05:30
vm.deleteIssuable();
setTimeout(() => {
2018-10-15 14:42:47 +05:30
expect(visitUrl).toHaveBeenCalledWith('/test');
2017-09-10 17:25:29 +05:30
done();
});
});
2018-12-13 13:39:08 +05:30
it('stops polling when deleting', done => {
2018-10-15 14:42:47 +05:30
spyOnDependency(issuableApp, 'visitUrl');
2017-09-10 17:25:29 +05:30
spyOn(vm.poll, 'stop').and.callThrough();
2018-12-13 13:39:08 +05:30
spyOn(vm.service, 'deleteIssuable').and.callFake(
() =>
new Promise(resolve => {
resolve({
data: {
web_url: '/test',
},
});
}),
);
2017-09-10 17:25:29 +05:30
vm.deleteIssuable();
setTimeout(() => {
2018-12-13 13:39:08 +05:30
expect(vm.poll.stop).toHaveBeenCalledWith();
2017-09-10 17:25:29 +05:30
done();
});
});
2018-12-13 13:39:08 +05:30
it('closes form on error', done => {
2017-09-10 17:25:29 +05:30
spyOn(window, 'Flash').and.callThrough();
2018-12-13 13:39:08 +05:30
spyOn(vm.service, 'deleteIssuable').and.callFake(
() =>
new Promise((resolve, reject) => {
reject();
}),
);
2017-09-10 17:25:29 +05:30
vm.deleteIssuable();
setTimeout(() => {
2018-12-13 13:39:08 +05:30
expect(eventHub.$emit).toHaveBeenCalledWith('close.form');
expect(window.Flash).toHaveBeenCalledWith('Error deleting issue');
2017-09-10 17:25:29 +05:30
done();
});
});
});
describe('open form', () => {
2018-12-13 13:39:08 +05:30
it('shows locked warning if form is open & data is different', done => {
2018-03-17 18:26:18 +05:30
vm.$nextTick()
2017-09-10 17:25:29 +05:30
.then(() => {
vm.openForm();
vm.poll.makeRequest();
})
2018-03-17 18:26:18 +05:30
// Wait for the request
.then(vm.$nextTick)
// Wait for the successCallback to update the store state
.then(vm.$nextTick)
// Wait for the new state to flow to the Vue components
.then(vm.$nextTick)
2017-09-10 17:25:29 +05:30
.then(() => {
2018-03-17 18:26:18 +05:30
expect(vm.formState.lockedWarningVisible).toEqual(true);
expect(vm.$el.querySelector('.alert')).not.toBeNull();
2017-09-10 17:25:29 +05:30
})
.then(done)
.catch(done.fail);
});
});
2018-03-17 18:26:18 +05:30
describe('show inline edit button', () => {
it('should not render by default', () => {
expect(vm.$el.querySelector('.title-container .note-action-button')).toBeDefined();
});
it('should render if showInlineEditButton', () => {
vm.showInlineEditButton = true;
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(vm.$el.querySelector('.title-container .note-action-button')).toBeDefined();
});
});
2017-09-10 17:25:29 +05:30
});