2018-03-09 15:18:59 -05:00
|
|
|
import $ from 'jquery';
|
2017-08-09 15:13:00 -04:00
|
|
|
import Vue from 'vue';
|
2017-10-31 05:18:30 -04:00
|
|
|
import Autosize from 'autosize';
|
2017-08-09 15:13:00 -04:00
|
|
|
import store from '~/notes/stores';
|
2018-02-27 19:10:43 -05:00
|
|
|
import CommentForm from '~/notes/components/comment_form.vue';
|
2017-11-30 17:44:41 -05:00
|
|
|
import { loggedOutnoteableData, notesDataMock, userDataMock, noteableDataMock } from '../mock_data';
|
2017-08-09 15:13:00 -04:00
|
|
|
import { keyboardDownEvent } from '../../issue_show/helpers';
|
|
|
|
|
2017-08-04 11:51:35 -04:00
|
|
|
describe('issue_comment_form component', () => {
|
2017-08-09 15:13:00 -04:00
|
|
|
let vm;
|
2018-02-27 19:10:43 -05:00
|
|
|
const Component = Vue.extend(CommentForm);
|
2017-08-09 15:13:00 -04:00
|
|
|
let mountComponent;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
2018-02-27 19:10:43 -05:00
|
|
|
mountComponent = (noteableType = 'issue') => new Component({
|
|
|
|
propsData: {
|
|
|
|
noteableType,
|
|
|
|
},
|
2017-08-09 15:13:00 -04:00
|
|
|
store,
|
|
|
|
}).$mount();
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
vm.$destroy();
|
|
|
|
});
|
2017-08-04 11:51:35 -04:00
|
|
|
|
|
|
|
describe('user is logged in', () => {
|
2017-08-09 15:13:00 -04:00
|
|
|
beforeEach(() => {
|
|
|
|
store.dispatch('setUserData', userDataMock);
|
2017-11-30 17:44:41 -05:00
|
|
|
store.dispatch('setNoteableData', noteableDataMock);
|
2017-08-09 15:13:00 -04:00
|
|
|
store.dispatch('setNotesData', notesDataMock);
|
|
|
|
|
|
|
|
vm = mountComponent();
|
|
|
|
});
|
2017-08-04 11:51:35 -04:00
|
|
|
|
2017-08-09 15:13:00 -04:00
|
|
|
it('should render user avatar with link', () => {
|
|
|
|
expect(vm.$el.querySelector('.timeline-icon .user-avatar-link').getAttribute('href')).toEqual(userDataMock.path);
|
2017-08-04 11:51:35 -04:00
|
|
|
});
|
|
|
|
|
2017-10-02 18:59:38 -04:00
|
|
|
describe('handleSave', () => {
|
|
|
|
it('should request to save note when note is entered', () => {
|
|
|
|
vm.note = 'hello world';
|
|
|
|
spyOn(vm, 'saveNote').and.returnValue(new Promise(() => {}));
|
|
|
|
spyOn(vm, 'resizeTextarea');
|
|
|
|
spyOn(vm, 'stopPolling');
|
|
|
|
|
|
|
|
vm.handleSave();
|
|
|
|
expect(vm.isSubmitting).toEqual(true);
|
|
|
|
expect(vm.note).toEqual('');
|
|
|
|
expect(vm.saveNote).toHaveBeenCalled();
|
|
|
|
expect(vm.stopPolling).toHaveBeenCalled();
|
|
|
|
expect(vm.resizeTextarea).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should toggle issue state when no note', () => {
|
|
|
|
spyOn(vm, 'toggleIssueState');
|
|
|
|
|
|
|
|
vm.handleSave();
|
|
|
|
|
|
|
|
expect(vm.toggleIssueState).toHaveBeenCalled();
|
|
|
|
});
|
2017-11-06 06:42:11 -05:00
|
|
|
|
|
|
|
it('should disable action button whilst submitting', (done) => {
|
|
|
|
const saveNotePromise = Promise.resolve();
|
|
|
|
vm.note = 'hello world';
|
|
|
|
spyOn(vm, 'saveNote').and.returnValue(saveNotePromise);
|
|
|
|
spyOn(vm, 'stopPolling');
|
|
|
|
|
|
|
|
const actionButton = vm.$el.querySelector('.js-action-button');
|
|
|
|
|
|
|
|
vm.handleSave();
|
|
|
|
|
|
|
|
Vue.nextTick()
|
|
|
|
.then(() => expect(actionButton.disabled).toBeTruthy())
|
|
|
|
.then(saveNotePromise)
|
|
|
|
.then(Vue.nextTick)
|
|
|
|
.then(() => expect(actionButton.disabled).toBeFalsy())
|
|
|
|
.then(done)
|
|
|
|
.catch(done.fail);
|
|
|
|
});
|
2017-10-02 18:59:38 -04:00
|
|
|
});
|
|
|
|
|
2017-08-04 11:51:35 -04:00
|
|
|
describe('textarea', () => {
|
|
|
|
it('should render textarea with placeholder', () => {
|
2017-08-09 15:13:00 -04:00
|
|
|
expect(
|
|
|
|
vm.$el.querySelector('.js-main-target-form textarea').getAttribute('placeholder'),
|
2018-06-11 03:21:04 -04:00
|
|
|
).toEqual('Write a comment or drag your files here…');
|
2017-08-04 11:51:35 -04:00
|
|
|
});
|
|
|
|
|
2017-10-02 18:59:38 -04:00
|
|
|
it('should make textarea disabled while requesting', (done) => {
|
|
|
|
const $submitButton = $(vm.$el.querySelector('.js-comment-submit-button'));
|
|
|
|
vm.note = 'hello world';
|
|
|
|
spyOn(vm, 'stopPolling');
|
|
|
|
spyOn(vm, 'saveNote').and.returnValue(new Promise(() => {}));
|
|
|
|
|
|
|
|
vm.$nextTick(() => { // Wait for vm.note change triggered. It should enable $submitButton.
|
|
|
|
$submitButton.trigger('click');
|
|
|
|
|
|
|
|
vm.$nextTick(() => { // Wait for vm.isSubmitting triggered. It should disable textarea.
|
|
|
|
expect(vm.$el.querySelector('.js-main-target-form textarea').disabled).toBeTruthy();
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2017-08-04 11:51:35 -04:00
|
|
|
it('should support quick actions', () => {
|
2017-08-09 15:13:00 -04:00
|
|
|
expect(
|
|
|
|
vm.$el.querySelector('.js-main-target-form textarea').getAttribute('data-supports-quick-actions'),
|
|
|
|
).toEqual('true');
|
2017-08-04 11:51:35 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should link to markdown docs', () => {
|
2017-08-17 13:25:56 -04:00
|
|
|
const { markdownDocsPath } = notesDataMock;
|
|
|
|
expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual('Markdown');
|
2017-08-04 11:51:35 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should link to quick actions docs', () => {
|
2017-08-17 13:25:56 -04:00
|
|
|
const { quickActionsDocsPath } = notesDataMock;
|
|
|
|
expect(vm.$el.querySelector(`a[href="${quickActionsDocsPath}"]`).textContent.trim()).toEqual('quick actions');
|
2017-08-04 11:51:35 -04:00
|
|
|
});
|
|
|
|
|
2017-09-20 20:08:17 -04:00
|
|
|
it('should resize textarea after note discarded', (done) => {
|
2017-10-31 05:18:30 -04:00
|
|
|
spyOn(Autosize, 'update');
|
2017-09-20 20:08:17 -04:00
|
|
|
spyOn(vm, 'discard').and.callThrough();
|
|
|
|
|
|
|
|
vm.note = 'foo';
|
|
|
|
vm.discard();
|
|
|
|
|
|
|
|
Vue.nextTick(() => {
|
2017-10-31 05:18:30 -04:00
|
|
|
expect(Autosize.update).toHaveBeenCalled();
|
2017-09-20 20:08:17 -04:00
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2017-08-04 11:51:35 -04:00
|
|
|
describe('edit mode', () => {
|
|
|
|
it('should enter edit mode when arrow up is pressed', () => {
|
2017-08-09 15:13:00 -04:00
|
|
|
spyOn(vm, 'editCurrentUserLastNote').and.callThrough();
|
|
|
|
vm.$el.querySelector('.js-main-target-form textarea').value = 'Foo';
|
|
|
|
vm.$el.querySelector('.js-main-target-form textarea').dispatchEvent(keyboardDownEvent(38, true));
|
2017-08-04 11:51:35 -04:00
|
|
|
|
2017-08-09 15:13:00 -04:00
|
|
|
expect(vm.editCurrentUserLastNote).toHaveBeenCalled();
|
2017-08-04 11:51:35 -04:00
|
|
|
});
|
2018-02-27 19:10:43 -05:00
|
|
|
|
|
|
|
it('inits autosave', () => {
|
|
|
|
expect(vm.autosave).toBeDefined();
|
|
|
|
expect(vm.autosave.key).toEqual(`autosave/Note/Issue/${noteableDataMock.id}`);
|
|
|
|
});
|
2017-08-04 11:51:35 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
describe('event enter', () => {
|
2018-01-11 21:22:28 -05:00
|
|
|
it('should save note when cmd+enter is pressed', () => {
|
2017-08-09 15:13:00 -04:00
|
|
|
spyOn(vm, 'handleSave').and.callThrough();
|
|
|
|
vm.$el.querySelector('.js-main-target-form textarea').value = 'Foo';
|
|
|
|
vm.$el.querySelector('.js-main-target-form textarea').dispatchEvent(keyboardDownEvent(13, true));
|
2018-01-11 21:22:28 -05:00
|
|
|
|
|
|
|
expect(vm.handleSave).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should save note when ctrl+enter is pressed', () => {
|
|
|
|
spyOn(vm, 'handleSave').and.callThrough();
|
|
|
|
vm.$el.querySelector('.js-main-target-form textarea').value = 'Foo';
|
|
|
|
vm.$el.querySelector('.js-main-target-form textarea').dispatchEvent(keyboardDownEvent(13, false, true));
|
2017-08-04 11:51:35 -04:00
|
|
|
|
2017-08-09 15:13:00 -04:00
|
|
|
expect(vm.handleSave).toHaveBeenCalled();
|
2017-08-04 11:51:35 -04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('actions', () => {
|
2017-08-09 15:13:00 -04:00
|
|
|
it('should be possible to close the issue', () => {
|
|
|
|
expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual('Close issue');
|
2017-08-04 11:51:35 -04:00
|
|
|
});
|
|
|
|
|
2017-08-09 15:13:00 -04:00
|
|
|
it('should render comment button as disabled', () => {
|
|
|
|
expect(vm.$el.querySelector('.js-comment-submit-button').getAttribute('disabled')).toEqual('disabled');
|
2017-08-04 11:51:35 -04:00
|
|
|
});
|
|
|
|
|
2017-08-09 15:13:00 -04:00
|
|
|
it('should enable comment button if it has note', (done) => {
|
|
|
|
vm.note = 'Foo';
|
|
|
|
Vue.nextTick(() => {
|
|
|
|
expect(vm.$el.querySelector('.js-comment-submit-button').getAttribute('disabled')).toEqual(null);
|
|
|
|
done();
|
2017-08-04 11:51:35 -04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2017-08-09 15:13:00 -04:00
|
|
|
it('should update buttons texts when it has note', (done) => {
|
|
|
|
vm.note = 'Foo';
|
|
|
|
Vue.nextTick(() => {
|
|
|
|
expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual('Comment & close issue');
|
|
|
|
expect(vm.$el.querySelector('.js-note-discard')).toBeDefined();
|
|
|
|
done();
|
2017-08-04 11:51:35 -04:00
|
|
|
});
|
|
|
|
});
|
2018-02-27 19:10:43 -05:00
|
|
|
|
|
|
|
it('updates button text with noteable type', (done) => {
|
|
|
|
vm.noteableType = 'merge_request';
|
|
|
|
|
|
|
|
Vue.nextTick(() => {
|
|
|
|
expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual('Close merge request');
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
2018-03-12 13:08:05 -04:00
|
|
|
|
|
|
|
describe('when clicking close/reopen button', () => {
|
|
|
|
it('should disable button and show a loading spinner', (done) => {
|
|
|
|
const toggleStateButton = vm.$el.querySelector('.js-action-button');
|
|
|
|
|
|
|
|
toggleStateButton.click();
|
|
|
|
Vue.nextTick(() => {
|
|
|
|
expect(toggleStateButton.disabled).toEqual(true);
|
|
|
|
expect(toggleStateButton.querySelector('.js-loading-button-icon')).not.toBeNull();
|
|
|
|
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2017-08-04 11:51:35 -04:00
|
|
|
});
|
2017-08-11 06:45:05 -04:00
|
|
|
|
|
|
|
describe('issue is confidential', () => {
|
|
|
|
it('shows information warning', (done) => {
|
2017-11-30 17:44:41 -05:00
|
|
|
store.dispatch('setNoteableData', Object.assign(noteableDataMock, { confidential: true }));
|
2017-08-11 06:45:05 -04:00
|
|
|
Vue.nextTick(() => {
|
|
|
|
expect(vm.$el.querySelector('.confidential-issue-warning')).toBeDefined();
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2017-08-04 11:51:35 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
describe('user is not logged in', () => {
|
2017-08-09 15:13:00 -04:00
|
|
|
beforeEach(() => {
|
|
|
|
store.dispatch('setUserData', null);
|
2017-11-30 17:44:41 -05:00
|
|
|
store.dispatch('setNoteableData', loggedOutnoteableData);
|
2017-08-09 15:13:00 -04:00
|
|
|
store.dispatch('setNotesData', notesDataMock);
|
2017-08-04 11:51:35 -04:00
|
|
|
|
2017-08-09 15:13:00 -04:00
|
|
|
vm = mountComponent();
|
2017-08-04 11:51:35 -04:00
|
|
|
});
|
|
|
|
|
2017-08-09 15:13:00 -04:00
|
|
|
it('should render signed out widget', () => {
|
|
|
|
expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual('Please register or sign in to reply');
|
|
|
|
});
|
2017-08-04 11:51:35 -04:00
|
|
|
|
2017-08-09 15:13:00 -04:00
|
|
|
it('should not render submission form', () => {
|
|
|
|
expect(vm.$el.querySelector('textarea')).toEqual(null);
|
2017-08-04 11:51:35 -04:00
|
|
|
});
|
|
|
|
});
|
2017-08-09 15:13:00 -04:00
|
|
|
});
|