debian-mirror-gitlab/spec/javascripts/notes/components/comment_form_spec.js

287 lines
8.9 KiB
JavaScript
Raw Normal View History

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