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

146 lines
4.1 KiB
JavaScript
Raw Normal View History

2019-05-30 16:15:17 +05:30
import Vue from 'vue';
2018-11-08 19:23:39 +05:30
import createStore from '~/notes/stores';
2019-05-30 16:15:17 +05:30
import issueNoteForm from '~/notes/components/note_form.vue';
2018-03-17 18:26:18 +05:30
import { noteableDataMock, notesDataMock } from '../mock_data';
2019-05-30 16:15:17 +05:30
import { keyboardDownEvent } from '../../issue_show/helpers';
2018-03-17 18:26:18 +05:30
describe('issue_note_form component', () => {
2018-11-08 19:23:39 +05:30
let store;
2019-05-30 16:15:17 +05:30
let vm;
2018-03-17 18:26:18 +05:30
let props;
beforeEach(() => {
2019-05-30 16:15:17 +05:30
const Component = Vue.extend(issueNoteForm);
2018-03-17 18:26:18 +05:30
2018-11-08 19:23:39 +05:30
store = createStore();
2018-03-17 18:26:18 +05:30
store.dispatch('setNoteableData', noteableDataMock);
store.dispatch('setNotesData', notesDataMock);
props = {
isEditing: false,
noteBody: 'Magni suscipit eius consectetur enim et ex et commodi.',
2018-11-20 20:47:30 +05:30
noteId: '545',
2018-03-17 18:26:18 +05:30
};
2019-05-30 16:15:17 +05:30
vm = new Component({
store,
propsData: props,
}).$mount();
2018-03-17 18:26:18 +05:30
});
afterEach(() => {
2019-05-30 16:15:17 +05:30
vm.$destroy();
2018-03-17 18:26:18 +05:30
});
2018-11-20 20:47:30 +05:30
describe('noteHash', () => {
it('returns note hash string based on `noteId`', () => {
2019-05-30 16:15:17 +05:30
expect(vm.noteHash).toBe(`#note_${props.noteId}`);
2018-11-20 20:47:30 +05:30
});
it('return note hash as `#` when `noteId` is empty', done => {
2019-05-30 16:15:17 +05:30
vm.noteId = '';
Vue.nextTick()
2018-11-20 20:47:30 +05:30
.then(() => {
2019-05-30 16:15:17 +05:30
expect(vm.noteHash).toBe('#');
2018-11-20 20:47:30 +05:30
})
.then(done)
.catch(done.fail);
});
});
2018-03-17 18:26:18 +05:30
describe('conflicts editing', () => {
2018-11-08 19:23:39 +05:30
it('should show conflict message if note changes outside the component', done => {
2019-05-30 16:15:17 +05:30
vm.isEditing = true;
vm.noteBody = 'Foo';
2018-11-08 19:23:39 +05:30
const message =
'This comment has changed since you started editing, please review the updated comment to ensure information is not lost.';
2018-03-17 18:26:18 +05:30
2019-05-30 16:15:17 +05:30
Vue.nextTick(() => {
expect(
vm.$el
.querySelector('.js-conflict-edit-warning')
.textContent.replace(/\s+/g, ' ')
.trim(),
).toEqual(message);
done();
});
2018-03-17 18:26:18 +05:30
});
});
describe('form', () => {
it('should render text area with placeholder', () => {
2019-05-30 16:15:17 +05:30
expect(vm.$el.querySelector('textarea').getAttribute('placeholder')).toEqual(
2018-11-08 19:23:39 +05:30
'Write a comment or drag your files here…',
);
2018-03-17 18:26:18 +05:30
});
it('should link to markdown docs', () => {
const { markdownDocsPath } = notesDataMock;
2018-12-13 13:39:08 +05:30
2019-05-30 16:15:17 +05:30
expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual(
'Markdown',
);
2018-03-17 18:26:18 +05:30
});
describe('keyboard events', () => {
describe('up', () => {
it('should ender edit mode', () => {
2019-05-30 16:15:17 +05:30
spyOn(vm, 'editMyLastNote').and.callThrough();
vm.$el.querySelector('textarea').value = 'Foo';
vm.$el.querySelector('textarea').dispatchEvent(keyboardDownEvent(38, true));
2018-03-17 18:26:18 +05:30
2019-05-30 16:15:17 +05:30
expect(vm.editMyLastNote).toHaveBeenCalled();
2018-03-17 18:26:18 +05:30
});
});
describe('enter', () => {
it('should save note when cmd+enter is pressed', () => {
2019-05-30 16:15:17 +05:30
spyOn(vm, 'handleUpdate').and.callThrough();
vm.$el.querySelector('textarea').value = 'Foo';
vm.$el.querySelector('textarea').dispatchEvent(keyboardDownEvent(13, true));
2018-03-17 18:26:18 +05:30
2019-05-30 16:15:17 +05:30
expect(vm.handleUpdate).toHaveBeenCalled();
2018-03-17 18:26:18 +05:30
});
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
it('should save note when ctrl+enter is pressed', () => {
2019-05-30 16:15:17 +05:30
spyOn(vm, 'handleUpdate').and.callThrough();
vm.$el.querySelector('textarea').value = 'Foo';
vm.$el.querySelector('textarea').dispatchEvent(keyboardDownEvent(13, false, true));
2018-03-17 18:26:18 +05:30
2019-05-30 16:15:17 +05:30
expect(vm.handleUpdate).toHaveBeenCalled();
2018-03-17 18:26:18 +05:30
});
});
});
describe('actions', () => {
2018-11-08 19:23:39 +05:30
it('should be possible to cancel', done => {
2019-05-30 16:15:17 +05:30
spyOn(vm, 'cancelHandler').and.callThrough();
vm.isEditing = true;
2018-03-17 18:26:18 +05:30
2019-05-30 16:15:17 +05:30
Vue.nextTick(() => {
vm.$el.querySelector('.note-edit-cancel').click();
2018-03-17 18:26:18 +05:30
2019-05-30 16:15:17 +05:30
Vue.nextTick(() => {
expect(vm.cancelHandler).toHaveBeenCalled();
done();
});
2019-05-18 00:54:41 +05:30
});
});
2019-05-30 16:15:17 +05:30
it('should be possible to update the note', done => {
vm.isEditing = true;
2019-05-18 00:54:41 +05:30
2019-05-30 16:15:17 +05:30
Vue.nextTick(() => {
vm.$el.querySelector('textarea').value = 'Foo';
vm.$el.querySelector('.js-vue-issue-save').click();
2019-05-18 00:54:41 +05:30
2019-05-30 16:15:17 +05:30
Vue.nextTick(() => {
expect(vm.isSubmitting).toEqual(true);
done();
});
2019-05-18 00:54:41 +05:30
});
});
});
2018-03-17 18:26:18 +05:30
});
});